n/starsy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

planet settings and autonaming

Browse source
This commit is contained in:
koehr 2022-01-02 23:20:48 +01:00
parent f7abc517eb
commit ff58b12fb7
2 changed files with 70 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/App.vue
View file

@ -31,9 +31,9 @@
<text :class="{ tilted: o.radius < 10 }" :x="o.distance" :y="140 - o.radius">{{ o.name }}</text> <text :class="{ tilted: o.radius < 10 }" :x="o.distance" :y="140 - o.radius">{{ o.name }}</text>
<circle v-if="o.type === 'planet'" :r="o.radius" :cx="o.distance" cy="150" /> <circle v-if="o.type === 'planet'" :r="o.radius" :cx="o.distance" cy="150" />
<line v-if="o.moons.length" :x1="o.distance" y1="150" :x2="o.distance" :y2="150 + o.radius + 10*o.moons.length" /> <line v-if="o.satellites.length" :x1="o.distance" y1="150" :x2="o.distance" :y2="150 + o.radius + 10*o.satellites.length" />
<g class="moon" v-for="m,i in o.moons"> <g class="satellite" v-for="m,i in o.satellites">
<rect v-if="m.type === 'station'" class="station" :x="o.distance - 2" :y="158 + o.radius + 10*i" width="4" height="4" /> <rect v-if="m.type === 'station'" class="station" :x="o.distance - 2" :y="158 + o.radius + 10*i" width="4" height="4" />
<circle v-else :r="m.radius" :cx="o.distance" :cy="160 + o.radius + 10*i" /> <circle v-else :r="m.radius" :cx="o.distance" :cy="160 + o.radius + 10*i" />
<text :x="o.distance + 5" :y="162 + o.radius + 10*i">{{ m.name }}</text> <text :x="o.distance + 5" :y="162 + o.radius + 10*i">{{ m.name }}</text>
@ -63,10 +63,20 @@
<div class="menu-item" :class="{ open: selectedObject === o }" v-for="o in objects"> <div class="menu-item" :class="{ open: selectedObject === o }" v-for="o in objects">
<label @click="toggleObject(o)">{{ o.name }}</label> <label @click="toggleObject(o)">{{ o.name }}</label>
<div class="object-settings"> <div class="object-settings">
<h2>{{ o.name }} settings</h2> <header>
<p>Distance from central star: {{ o.distance }}</p> <h2><input type="text" v-model="o.name" @blur="checkName(o)"/> settings</h2>
<p>Radius: {{ o.radius }}</p> <p>Distance Δ: {{ o.distance }}</p>
<p>Moons and Stations: {{ listMoons(o) }}</p> <p>Radius r: {{ o.radius }}</p>
<p>Satellites: {{ listSatellites(o) }}</p>
</header>
<label>
Δ
<input class="planet-distance" type="range" min="50" max="1000" v-model="o.distance" />
</label>
<label>
r
<input class="planet-radius" type="range" min="1" max="125" v-model="o.radius" />
</label>
</div> </div>
</div> </div>
<button>add object</button> <button>add object</button>
@ -87,24 +97,24 @@ const star = reactive({
const starCX = computed(() => -1 * star.radius * steepCurve(star.radius, 50, 0.955)) const starCX = computed(() => -1 * star.radius * steepCurve(star.radius, 50, 0.955))
const objects = ref([ const objects = ref([
{ type: 'planet', name: 'Mercury', radius: 1, distance: 100, moons: [], rings: [] }, { type: 'planet', name: 'Mercury', radius: 1, distance: 100, satellites: [], rings: [] },
{ type: 'planet', name: 'Venus', radius: 4, distance: 120, moons: [], rings: [] }, { type: 'planet', name: 'Venus', radius: 4, distance: 120, satellites: [], rings: [] },
{ type: 'planet', name: 'Terra', radius: 4, distance: 140, moons: [ { type: 'planet', name: 'Terra', radius: 4, distance: 140, satellites: [
{ name: 'ISS', type: 'station' }, { name: 'ISS', type: 'station' },
{ name: 'Luna', radius: 2 }, { name: 'Luna', radius: 2 },
], rings: 0 }, ], rings: 0 },
{ type: 'planet', name: 'Mars', radius: 2, distance: 160, moons: [ { type: 'planet', name: 'Mars', radius: 2, distance: 160, satellites: [
{ name: 'MTO', type: 'station' }, { name: 'MTO', type: 'station' },
{ name: 'Phobos', radius: 1 }, { name: 'Phobos', radius: 1 },
{ name: 'Daimos', radius: 1 }, { name: 'Daimos', radius: 1 },
], rings: 0 }, ], rings: 0 },
{ type: 'planet', name: 'Jupiter', radius: 40, distance: 260, moons: [ { type: 'planet', name: 'Jupiter', radius: 40, distance: 260, satellites: [
{ name: 'Io', radius: 2 }, { name: 'Io', radius: 2 },
{ name: 'Europa', radius: 2 }, { name: 'Europa', radius: 2 },
{ name: 'Ganymede', radius: 4 }, { name: 'Ganymede', radius: 4 },
{ name: 'Callisto', radius: 3 }, { name: 'Callisto', radius: 3 },
], rings: 1 }, ], rings: 1 },
{ type: 'planet', name: 'Saturn', radius: 36, distance: 410, moons: [ { type: 'planet', name: 'Saturn', radius: 36, distance: 410, satellites: [
{ name: 'Mimas', radius: 1 }, { name: 'Mimas', radius: 1 },
{ name: 'Enceladus', radius: 1 }, { name: 'Enceladus', radius: 1 },
{ name: 'Tethys', radius: 1 }, { name: 'Tethys', radius: 1 },
@ -113,14 +123,14 @@ const objects = ref([
{ name: 'Titan', radius: 3 }, { name: 'Titan', radius: 3 },
{ name: 'Iapetus', radius: 1 }, { name: 'Iapetus', radius: 1 },
], rings: 5 }, ], rings: 5 },
{ type: 'planet', name: 'Uranus', radius: 16, distance: 680, moons: [ { type: 'planet', name: 'Uranus', radius: 16, distance: 680, satellites: [
{ name: 'Miranda', radius: 1 }, { name: 'Miranda', radius: 1 },
{ name: 'Ariel', radius: 1 }, { name: 'Ariel', radius: 1 },
{ name: 'Umbriel', radius: 1 }, { name: 'Umbriel', radius: 1 },
{ name: 'Titania', radius: 1 }, { name: 'Titania', radius: 1 },
{ name: 'Oberon', radius: 1 }, { name: 'Oberon', radius: 1 },
], rings: 2 }, ], rings: 2 },
{ type: 'planet', name: 'Neptune', radius: 15, distance: 950, moons: [ { type: 'planet', name: 'Neptune', radius: 15, distance: 950, satellites: [
{ name: 'Triton', radius: 1 }, { name: 'Triton', radius: 1 },
], rings: [] }, ], rings: [] },
]) ])
@ -130,6 +140,12 @@ const selectedObject = ref(null)
function toggleObject (obj) { function toggleObject (obj) {
selectedObject.value = selectedObject.value === obj ? null : obj selectedObject.value = selectedObject.value === obj ? null : obj
} }
function checkName (obj) {
if (!obj.name.trim().length) {
const index = objects.value.indexOf(obj)
obj.name = `${star.designation}-${index}`
}
}
const labelFonts = ['douar', 'lack', 'xolonium'] const labelFonts = ['douar', 'lack', 'xolonium']
const selectedFont = ref('xolonium') const selectedFont = ref('xolonium')
@ -141,14 +157,14 @@ function setTheme () {
document.body.className = `theme-${selectedTheme.value}` document.body.className = `theme-${selectedTheme.value}`
} }
function listMoons (obj) { function listSatellites (obj) {
if (!obj.moons || !obj.moons.length) return 'none' if (!obj.satellites || !obj.satellites.length) return 'none'
return obj.moons.reduce((acc, moon) => { return obj.satellites.reduce((acc, satellite) => {
let s = moon.name let s = satellite.name
if (moon.type) s += ` (${moon.type})` if (satellite.type) s += ` (${satellite.type})`
acc.push(s) acc.push(s)
return acc return acc
}, []).join('; ') }, []).join(', ')
} }
setTheme() setTheme()
</script> </script>

39
src/app.css
View file

@ -43,6 +43,16 @@ html,body {
color: var(--fg-app); color: var(--fg-app);
} }
input[type="text"] {
background: transparent;
border: 1px solid var(--fg-app);
color: var(--fg-app);
}
input[type="text"]:focus {
outline: 2px solid var(--fg-app);
border: 1px solid #FFF5;
}
body.theme-retro { body.theme-retro {
--bg-app: #4B4839; --bg-app: #4B4839;
--fg-app: #E4DCB5; --fg-app: #E4DCB5;
@ -115,7 +125,7 @@ text.tilted { transform: rotate(-45deg) translate(0, 100%); transform-origin: le
#star { fill: var(--fill-star); } #star { fill: var(--fill-star); }
.object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; cursor: pointer; } .object { fill: var(--fg-graphic); text-anchor: middle; font-size: .6em; cursor: pointer; }
.object > line { stroke-width: .5; } .object > line { stroke-width: .5; }
.moon { text-anchor: start; font-size: .7em; } .satellite { text-anchor: start; font-size: .7em; }
.rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; } .rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; }
.object:hover { fill: var(--hl-graphic); } .object:hover { fill: var(--hl-graphic); }
.object:hover > line, .object:hover .rings { stroke: var(--hl-graphic); } .object:hover > line, .object:hover .rings { stroke: var(--hl-graphic); }
@ -141,8 +151,9 @@ h1 {
#settings { #settings {
padding: 1em 2em; padding: 1em 2em;
} }
#settings > header { #settings > header, .object-settings > header {
display: flex; display: flex;
align-items: center;
} }
#settings > header > h1 { #settings > header > h1 {
min-width: 330px; min-width: 330px;
@ -150,6 +161,7 @@ h1 {
#system-settings, #object-list { #system-settings, #object-list {
display: flex; display: flex;
align-items: center;
width: calc(100vw - 4em); width: calc(100vw - 4em);
padding: 0; padding: 0;
list-style: none; list-style: none;
@ -161,10 +173,27 @@ h1 {
min-width: 300px; min-width: 300px;
margin: 0 1em; margin: 0 1em;
} }
#system-settings input { #system-settings button { height: 2em; }
width: 220px; #system-settings input { width: 220px; }
}
#system-settings input[type="text"] { #system-settings input[type="text"] {
margin-left: 1em; margin-left: 1em;
padding: .5em 1em .4em; padding: .5em 1em .4em;
} }
.object-settings > header > p {
margin-left: 2em;
padding-top: .37em;
}
.object-settings > label {
display: flex;
align-items: center;
}
.object-settings > header input[type="text"] {
width: 7em;
padding: .1em .5em;
font-size: 1em;
font-weight: bold;
}
.object-settings .planet-distance { width: 100%; }
.object-settings .planet-radius { width: 100%; }