add new planets

README.md

@@ -15,9 +15,9 @@ The application is working but certain features are missing or unpolished:
 ✅ Interactive value change (drag'n'drop / scroll)
 ✅ Objects can be removed
 ✅ Last removed object (planet) can be restored
-❌ add new objects
-❌ astroid belts
+✅ add new planets and satellites
 ❌ randomly generate star system
+❌ astroid belts
 ❌ Export graphic via print or PDF
 ❌ Export data
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "starsy",
   "description": "Random Star System Generator",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

src/App.vue

@@ -29,7 +29,7 @@
       <li><strong>ONLY THE LAST</strong> removed planet can be restored.</li>
     </Tips>
     <SystemSettings v-model:designation="star.designation" v-model:radius="star.radius" />
-    <ObjectList v-bind="{ objects, deletedObject, editObject, deleteObject, restoreDeleted }" />
+    <ObjectList v-bind="{ objects, deletedObject, addObject, editObject, deleteObject, restoreDeleted }" />
   </section>
 
 </template>
@@ -43,6 +43,7 @@ import Tips from './components/Tips.vue'
 import SystemSettings from './components/SystemSettings.vue'
 import ObjectList from './components/ObjectList.vue'
 import ObjectSettings from './components/ObjectSettings.vue'
+import { MAX_DISTANCE_PLANET } from './constants'
 
 const star = reactive({
   designation: 'Sol',
@@ -56,6 +57,25 @@ const themes = ['default', 'retro', 'inverse', 'paper']
 const selectedObject = ref(null)
 const deletedObject = ref(null) // { index: Number, object: Object }
 
+function addObject() {
+  const amount = objects.length
+  let distance = 100
+
+  if (amount) {
+    const lastObject = objects[amount - 1]
+    distance = Math.min(MAX_DISTANCE_PLANET, lastObject.distance + 2*lastObject.radius + 10)
+  }
+
+  objects.push({
+    type: 'planet',
+    name: `${star.designation}-${amount + 1}`,
+    radius: 1,
+    distance,
+    satellites: [],
+    rings: 0,
+  })
+}
+
 function editObject (object) {
   if (object) {
     document.documentElement.scrollTop = 0

src/components/ObjectList.vue

@@ -20,6 +20,7 @@
         RESTORE DELETED OBJECT
       </button>
     </tr>
+    <button class="add" @click="addObject">&nbsp;</button>
   </table>
 </template>
 
@@ -29,6 +30,7 @@ import { computed } from 'vue'
 const props = defineProps({
   objects: Array,
   deletedObject: [Object, null],
+  addObject: Function,
   editObject: Function,
   deleteObject: Function,
   restoreDeleted: Function,