rings

src/App.vue

@@ -25,14 +25,20 @@
     <circle id="star" r="400" cx="-370" cy="150" />
 
     <g class="object" :id="o.name" v-for="o in objects">
+      <g class="rings" v-for="i in o.rings">
+        <circle :r="o.radius - 5 + 2*i" :cx="o.distance" cy="150" />
+      </g>
+
       <text :x="o.distance" :y="140 - o.radius">{{ o.name }}</text>
       <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" />
+
       <g class="moon" v-for="m,i in o.moons">
         <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" />
         <text :x="o.distance + 5" :y="162 + o.radius + 10*i">{{ m.name }}</text>
       </g>
+
     </g>
 
     <text id="label" :class="`title-${selectedFont}`" x="980" y="30">{{ label }}</text>
@@ -49,23 +55,23 @@ import { ref } from 'vue'
 const label = "Sol"
 
 const objects = [
-  { type: 'planet', name: 'Mercury', radius: 1, distance: 100, moons: [], stations: [] },
-  { type: 'planet', name: 'Venus', radius: 4, distance: 120, moons: [], stations: [] },
+  { type: 'planet', name: 'Mercury', radius: 1, distance: 100, moons: [], rings: [] },
+  { type: 'planet', name: 'Venus', radius: 4, distance: 120, moons: [], rings: [] },
   { type: 'planet', name: 'Terra', radius: 4, distance: 140, moons: [
     { name: 'ISS', type: 'station' },
     { name: 'Luna', radius: 2 },
-  ] },
+  ], rings: 0 },
   { type: 'planet', name: 'Mars', radius: 2, distance: 160, moons: [
     { name: 'MTO', type: 'station' },
     { name: 'Phobos', radius: 1 },
     { name: 'Daimos', radius: 1 },
-  ] },
+  ], rings: 0 },
   { type: 'planet', name: 'Jupiter', radius: 40, distance: 260, moons: [
     { name: 'Io', radius: 2 },
     { name: 'Europa', radius: 2 },
     { name: 'Ganymede', radius: 4 },
     { name: 'Callisto', radius: 3 },
-  ] },
+  ], rings: 1 },
   { type: 'planet', name: 'Saturn', radius: 36, distance: 410, moons: [
     { name: 'Mimas', radius: 1 },
     { name: 'Enceladus', radius: 1 },
@@ -74,17 +80,17 @@ const objects = [
     { name: 'Rhea', radius: 1 },
     { name: 'Titan', radius: 3 },
     { name: 'Iapetus', radius: 1 },
-  ] },
+  ], rings: 5 },
   { type: 'planet', name: 'Uranus', radius: 16, distance: 680, moons: [
     { name: 'Miranda', radius: 1 },
     { name: 'Ariel', radius: 1 },
     { name: 'Umbriel', radius: 1 },
     { name: 'Titania', radius: 1 },
     { name: 'Oberon', radius: 1 },
-  ] },
+  ], rings: 2 },
   { type: 'planet', name: 'Neptune', radius: 15, distance: 950, moons: [
     { name: 'Triton', radius: 1 },
-  ] },
+  ], rings: [] },
 ]
 
 const labelFonts = ['douar', 'lack', 'xolonium']

src/app.css

@@ -56,6 +56,7 @@ line { stroke: #FFF; }
 .object { fill: #FFF; text-anchor: middle; font-size: .6em; }
 .moon { text-anchor: start; font-size: .7em; }
 .object > line { stroke-width: .5; }
+.rings { stroke: #FFF; fill: none; transform: skew(-45deg); transform-origin: 50%; }
 
 .theme-retro svg { background: #E4DCB5; }
 .theme-retro line { stroke: #4B4839; }
@@ -64,6 +65,7 @@ line { stroke: #FFF; }
 .theme-retro .object {
   fill: #4B4839;
 }
+.theme-retro .rings { stroke: #4B4839; }
 
 .theme-inverse svg { background: #4B4839; }
 .theme-inverse line { stroke: #E4DCB5; }
@@ -72,6 +74,7 @@ line { stroke: #FFF; }
 .theme-inverse .object {
   fill: #E4DCB5;
 }
+.theme-inverse .rings { stroke: #E4DCB5; }
 
 .theme-paper svg { background: #FFF; }
 .theme-paper line { stroke: #000; }
@@ -80,6 +83,7 @@ line { stroke: #FFF; }
 .theme-paper .object {
   fill: #000;
 }
+.theme-paper .rings { stroke: #000; }
 
 #app > header {
   display: flex;