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

planet ring settings

Browse source
This commit is contained in:
koehr 2022-01-02 23:37:25 +01:00
parent ff58b12fb7
commit 5415a47074
2 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/App.vue
View file

@ -67,16 +67,21 @@
<h2><input type="text" v-model="o.name" @blur="checkName(o)"/> settings</h2> <h2><input type="text" v-model="o.name" @blur="checkName(o)"/> settings</h2>
<p>Distance Δ: {{ o.distance }}</p> <p>Distance Δ: {{ o.distance }}</p>
<p>Radius r: {{ o.radius }}</p> <p>Radius r: {{ o.radius }}</p>
<p>Rings ⬭: {{ o.rings > 0 ? o.rings : 'none' }}</p>
<p>Satellites: {{ listSatellites(o) }}</p> <p>Satellites: {{ listSatellites(o) }}</p>
</header> </header>
<label> <label>
Δ <span>Δ</span>
<input class="planet-distance" type="range" min="50" max="1000" v-model="o.distance" /> <input class="planet-distance" type="range" min="50" max="1000" v-model="o.distance" />
</label> </label>
<label> <label>
r <span>r</span>
<input class="planet-radius" type="range" min="1" max="125" v-model="o.radius" /> <input class="planet-radius" type="range" min="1" max="125" v-model="o.radius" />
</label> </label>
<label>
<span>⬭</span>
<input class="planet-rings" type="number" min="0" max="15" v-model="o.rings" />
</label>
</div> </div>
</div> </div>
<button>add object</button> <button>add object</button>
@ -97,8 +102,8 @@ 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, satellites: [], rings: [] }, { type: 'planet', name: 'Mercury', radius: 1, distance: 100, satellites: [], rings: 0 },
{ type: 'planet', name: 'Venus', radius: 4, distance: 120, satellites: [], rings: [] }, { type: 'planet', name: 'Venus', radius: 4, distance: 120, satellites: [], rings: 0 },
{ type: 'planet', name: 'Terra', radius: 4, distance: 140, satellites: [ { 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 },
@ -132,7 +137,7 @@ const objects = ref([
], rings: 2 }, ], rings: 2 },
{ type: 'planet', name: 'Neptune', radius: 15, distance: 950, satellites: [ { type: 'planet', name: 'Neptune', radius: 15, distance: 950, satellites: [
{ name: 'Triton', radius: 1 }, { name: 'Triton', radius: 1 },
], rings: [] }, ], rings: 0 },
]) ])
const selectedObject = ref(null) const selectedObject = ref(null)

4
src/app.css
View file

@ -195,5 +195,9 @@ h1 {
font-size: 1em; font-size: 1em;
font-weight: bold; font-weight: bold;
} }
.object-settings > label > span {
width: 2em;
}
.object-settings .planet-distance { width: 100%; } .object-settings .planet-distance { width: 100%; }
.object-settings .planet-radius { width: 100%; } .object-settings .planet-radius { width: 100%; }
.object-settings .planet-rings { width: 3em; padding: .2em; }