get the basic stuff done!

web/src/App.vue

@@ -1,15 +1,67 @@
 <template>
-  <!-- <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav> -->
-  <router-view />
+  <div class="app">
+    <div class="content">
+      <router-view class="page" />
+    </div>
+    <nav>
+      <router-link to="/">chart</router-link>
+      <router-link to="/discover">discover</router-link>
+      <a href="/docs">about</a>
+    </nav>
+  </div>
 </template>
 
 <style lang="scss">
+* {
+  padding: 0;
+  margin: 0;
+}
+
+@font-face {
+  font-family: ScanLine;
+  src: url("@/assets/ScanLine.ttf");
+}
+
+* {
+  font-family: ScanLine;
+}
+
 html {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  text-align: center;
-  background-color: #2c3e50;
+  height: 100%;
+  width: 100%;
+  background-color: #030f0a;
+  color: #aaf0d1;
+}
+</style>
+
+<style scoped>
+.app {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+.content {
+  overflow: scroll;
+  flex-grow: 1;
+  width: 100%;
+}
+
+nav {
+  padding: 1em;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+nav a {
+  text-decoration: none;
+  font-size: large;
+  color: #aaf0d1;
+}
+
+nav a:focus,
+nav a:hover {
+  color: #f0d1aa;
 }
 </style>

web/src/assets/scss/colors.scss

@@ -0,0 +1,17 @@
+:root {
+  --fs-small: 0.8rem;
+  --fs-regular: calc(var(--fs-small) * 1.61803);
+  --fs-large: calc(var(--fs-regular) * 1.61803);
+  --fs-xl: calc(var(--fs-large) * 1.61803);
+  --fs-xxl: calc(var(--fs-xl) * 1.61803);
+  --pad-size-small: calc(var(--fs-small));
+  --pad-size: var(--fs-regular);
+  --radius: calc(var(--fs-large));
+  --border-width: calc(var(--pad-size-small) * 0.618);
+  --accent: #aaf0d1;
+  --ternary-accent: #d1aaf0;
+  --secondary-accent: #f0d1aa;
+  --black: #030f0a;
+  --white: #fdfffe;
+  --black-transparent: rgba(3, 15, 10, 0.6);
+}

web/src/components/SmallStar.vue

@@ -1,5 +1,13 @@
 <template>
-  <router-link :to="'/visit/' + id" class="star">
+  <router-link
+    :to="'/visit/' + id"
+    class="star"
+    :style="{
+      left: `${positionRight}%`,
+      top: `${positionBottom}%`,
+      width: `${width}px`,
+    }"
+  >
     <div class="star-color"></div>
   </router-link>
 </template>
@@ -12,16 +20,27 @@ export default defineComponent({
   props: {
     color: String,
     id: Number,
+    positionRight: Number,
+    positionBottom: Number,
+    width: Number,
   },
 });
 </script>
 
 <style scoped lang="scss">
+.star {
+  position: absolute;
+}
+
 .star-color {
-  border-radius: 24px;
-  margin: 12px;
-  width: 24px;
+  border-radius: 9999999px;
   aspect-ratio: 1/1;
+  opacity: 0.8;
   background-color: v-bind(color);
+  filter: drop-shadow(0 0 7.5px v-bind(color)) drop-shadow(0 0 10px white);
+}
+
+.star:hover {
+  filter: drop-shadow(0 0 50px v-bind(color)) drop-shadow(0 0 24px white);
 }
 </style>

web/src/state/stars.ts

@@ -1,10 +1,11 @@
 import { conf } from "@/api";
-import { Protostar, Star, StarsApi } from "@/swagger";
+import { Star, StarsApi } from "@/swagger";
 import { defineStore } from "pinia";
 
 type ChartInfoState = {
   loading: boolean;
-  protostars: Protostar[];
+  stars: Star[];
+  visiting: undefined | Star;
 };
 
 export const useChartStore = defineStore({
@@ -12,44 +13,17 @@ export const useChartStore = defineStore({
   state: () =>
     ({
       loading: true,
-      protostars: [],
+      stars: [],
+      visiting: undefined,
     } as ChartInfoState),
   actions: {
     async fetchChart() {
       this.loading = true;
-      this.protostars = await new StarsApi(conf())
+      this.stars = await new StarsApi(conf())
         .chart()
         .catch((e) => {
           console.error(e);
-          return this.protostars;
-        })
-        .finally(() => {
-          this.loading = false;
-        });
-    },
-  },
-});
-
-type VisitState = {
-  loading: boolean;
-  visited: Star | undefined;
-};
-
-export const useVisitStore = defineStore({
-  id: "visit",
-  state: () =>
-    ({
-      loading: true,
-      visited: undefined,
-    } as VisitState),
-  actions: {
-    async visit(planet: number) {
-      this.loading = true;
-      this.visited = await new StarsApi(conf())
-        .visit({ planetId: planet })
-        .catch((e) => {
-          console.error(e);
-          return this.visited;
+          return this.stars;
         })
         .finally(() => {
           this.loading = false;
@@ -57,11 +31,35 @@ export const useVisitStore = defineStore({
     },
     async discover(color: string) {
       this.loading = true;
-      this.visited = await new StarsApi(conf())
-        .discover({ discoveryLog: { color: color } })
+      await new StarsApi(conf())
+        .discover({
+          discoveryLog: { color: color },
+        })
+        .then((star) => {
+          this.stars.push(star);
+          this.visiting = star;
+        })
+        .catch((e) => {
+          console.error(e);
+        })
+        .finally(() => {
+          this.loading = false;
+        });
+    },
+    async visit(id: number) {
+      const matching_stars = this.stars.filter((item) => {
+        return item.core.id === id;
+      });
+      if (matching_stars.length >= 1) {
+        this.visiting = matching_stars.pop();
+        return;
+      }
+      this.loading = true;
+      await new StarsApi(conf())
+        .visit({ planetId: id })
+        .then((star) => this.stars.push(star))
         .catch((e) => {
           console.error(e);
-          return this.visited;
         })
         .finally(() => {
           this.loading = false;

web/src/swagger/.openapi-generator/FILES

@@ -3,6 +3,7 @@ apis/StarsApi.ts
 apis/index.ts
 index.ts
 models/DiscoveryLog.ts
+models/Position.ts
 models/Protostar.ts
 models/Size.ts
 models/Star.ts

web/src/swagger/models/Position.ts

@@ -0,0 +1,84 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+ * starchart
+ * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+ *
+ * The version of the OpenAPI document: 0.1.0
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+import { exists, mapValues } from '../runtime';
+/**
+ * 
+ * @export
+ * @interface Position
+ */
+export interface Position {
+    /**
+     * 
+     * @type {any}
+     * @memberof Position
+     */
+    bottom: any | null;
+    /**
+     * 
+     * @type {any}
+     * @memberof Position
+     */
+    right: any | null;
+    /**
+     * 
+     * @type {any}
+     * @memberof Position
+     */
+    width: any | null;
+}
+
+/**
+ * Check if a given object implements the Position interface.
+ */
+export function instanceOfPosition(value: object): boolean {
+    let isInstance = true;
+    isInstance = isInstance && "bottom" in value;
+    isInstance = isInstance && "right" in value;
+    isInstance = isInstance && "width" in value;
+
+    return isInstance;
+}
+
+export function PositionFromJSON(json: any): Position {
+    return PositionFromJSONTyped(json, false);
+}
+
+export function PositionFromJSONTyped(json: any, ignoreDiscriminator: boolean): Position {
+    if ((json === undefined) || (json === null)) {
+        return json;
+    }
+    return {
+        
+        'bottom': json['bottom'],
+        'right': json['right'],
+        'width': json['width'],
+    };
+}
+
+export function PositionToJSON(value?: Position | null): any {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    return {
+        
+        'bottom': value.bottom,
+        'right': value.right,
+        'width': value.width,
+    };
+}
+

web/src/swagger/models/Star.ts

@@ -13,6 +13,12 @@
  */
 
 import { exists, mapValues } from '../runtime';
+import type { Position } from './Position';
+import {
+    PositionFromJSON,
+    PositionFromJSONTyped,
+    PositionToJSON,
+} from './Position';
 import type { Protostar } from './Protostar';
 import {
     ProtostarFromJSON,
@@ -38,6 +44,12 @@ export interface Star {
      * @memberof Star
      */
     core: Protostar;
+    /**
+     * 
+     * @type {Position}
+     * @memberof Star
+     */
+    position: Position;
     /**
      * 
      * @type {Size}
@@ -52,6 +64,7 @@ export interface Star {
 export function instanceOfStar(value: object): boolean {
     let isInstance = true;
     isInstance = isInstance && "core" in value;
+    isInstance = isInstance && "position" in value;
     isInstance = isInstance && "size" in value;
 
     return isInstance;
@@ -68,6 +81,7 @@ export function StarFromJSONTyped(json: any, ignoreDiscriminator: boolean): Star
     return {
         
         'core': ProtostarFromJSON(json['core']),
+        'position': PositionFromJSON(json['position']),
         'size': SizeFromJSON(json['size']),
     };
 }
@@ -82,6 +96,7 @@ export function StarToJSON(value?: Star | null): any {
     return {
         
         'core': ProtostarToJSON(value.core),
+        'position': PositionToJSON(value.position),
         'size': SizeToJSON(value.size),
     };
 }

web/src/swagger/models/index.ts

@@ -1,6 +1,7 @@
 /* tslint:disable */
 /* eslint-disable */
 export * from './DiscoveryLog';
+export * from './Position';
 export * from './Protostar';
 export * from './Size';
 export * from './Star';

web/src/views/ChartView.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="about">
-    <h1>This is an chart page</h1>
-    <h2 v-if="store.loading">loading...</h2>
+  <div
+    class="starchart"
+    :style="{
+      width: `${store.stars.length * 64}px`,
+      height: `${store.stars.length * 64}px`,
+    }"
+  >
     <SmallStar
-      v-for="star in store.protostars"
-      :key="star.id"
-      :id="star.id"
-      :color="star.color"
+      v-for="star in store.stars"
+      :key="star.core.id"
+      :id="star.core.id"
+      :color="star.core.color"
+      :position-bottom="star.position.bottom"
+      :position-right="star.position.right"
+      :width="star.position.width"
     />
   </div>
 </template>
@@ -17,3 +24,23 @@ import SmallStar from "@/components/SmallStar.vue";
 const store = useChartStore();
 store.fetchChart();
 </script>
+
+<style scoped lang="scss">
+@import "@/assets/scss/colors.scss";
+.starchart {
+  padding: 420px;
+  position: relative;
+  left: 0px;
+  top: 0px;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav {
+  width: 100%;
+  background-color: orange;
+}
+</style>

web/src/views/DiscoverView.vue

@@ -1,7 +1,53 @@
 <template>
-  <div class="about">
-    <h1>This is an discover page</h1>
+  <div class="discover">
+    <label for="planet-color">pick a color</label>
+    <input type="color" id="planet-color" v-model="color" class="colorpicker" />
+    <button @click="send()">discover!</button>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useChartStore } from "@/state/stars";
+import router from "@/router";
+
+const store = useChartStore();
+const color = ref("#f0d1aa");
+
+async function send() {
+  await store.discover(color.value);
+  console.log(color.value);
+  router.push(`/visit/${store.visiting?.core.id}`);
+  return;
+}
+</script>
+
+<style scoped>
+.discover {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.colorpicker {
+  border-style: none;
+}
+
+button {
+  cursor: pointer;
+  background-color: transparent;
+  border-style: none;
+  font-size: large;
+  color: #aaf0d1;
+}
+
+button:focus,
+button:hover {
+  color: #f0d1aa;
+}
+</style>