Merge pull request #4 from dotfortun/development

Low-Hanging Fruit
dotfortun · Aug 12, 2023 · 6928e7e · 6928e7e
2 parents bbaa190 + 5a4fa6b
commit 6928e7e
Show file tree

Hide file tree

Showing 9 changed files with 325 additions and 163 deletions.
diff --git a/index.html b/index.html
@@ -5,6 +5,19 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wormroller</title>
+    <script type="application/ld+json">
+      {
+        "@context": "http://schema.org/",
+        "@type": "WebApplication",
+        "url": "https://wormroller.dotlag.space",
+        "version": "0.1.0",
+        "potentialAction": [{
+          "@type": "SearchAction",
+          "target": "https://wormroller.dotlag.space?sig={search_term_string}",
+          "query-input": "required name=search_term_string"
+        }]
+      }
+      </script>
   </head>
   <body>
     <div id="app"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
-    "@vueuse/core": "^10.2.1",
+    "@vueuse/core": "^10.3.0",
     "pinia": "^2.1.4",
     "vue": "^3.3.4",
     "vuedraggable": "^4.1.0"

diff --git a/src/App.vue b/src/App.vue
@@ -43,14 +43,43 @@ watch(
     solver(rollFast);
   }
 );
-
-const massStatus = ref(stages[0]);
 </script>
 
 <template>
   <main class="container">
     <div class="wh-info">
-      <h2 class="col-span-full">{{ store.selectedWH.type }}</h2>
+      <select v-model="store.selectedWH" @change="solver(rollFast)">
+        <option disabled>Static</option>
+        <option
+          v-for="wh in wormholes.filter((elem) =>
+            elem.link_types.includes('static')
+          )"
+          :key="wh.type"
+          :value="wh"
+        >
+          {{ wh.type }}
+        </option>
+        <option disabled>Pochven</option>
+        <option
+          v-for="wh in wormholes.filter((elem) =>
+            elem.link_types.includes('pochven')
+          )"
+          :key="wh.type"
+          :value="wh"
+        >
+          {{ wh.type }}
+        </option>
+        <option disabled>Wandering</option>
+        <option
+          v-for="wh in wormholes.filter((elem) =>
+            elem.link_types.includes('wandering')
+          )"
+          :key="wh.type"
+          :value="wh"
+        >
+          {{ wh.type }}
+        </option>
+      </select>
       <div class="col-span-all row-span-1">
         <span class="mass-label">Total Mass:</span>{{ " " }}
         <span>
@@ -74,48 +103,43 @@ const massStatus = ref(stages[0]);
           {{ displayTons ? "tons" : "kg" }}
         </span>
       </div>
+      <div class="col-span-full flex justify-around mt-4">
+        <button
+          class="w-max"
+          @click="
+            store.ships.push({
+              id: Math.floor(Math.random() * 1000000),
+              name: 'roller',
+              cold: 174_000_000,
+              hot: 274_000_000,
+              isThreader: false,
+              color: {
+                h: randomInt(0, 360),
+                s: randomInt(42, 98),
+                l: randomInt(40, 90),
+              },
+            });
+            solver(rollFast);
+          "
+        >
+          Add Ship
+        </button>
+        <button
+          class="clear w-max"
+          @click="
+            store.plan.length = 0;
+            store.ships.length = 0;
+          "
+        >
+          Clear Ships
+        </button>
+      </div>
     </div>
     <div>
-      <select v-model="store.selectedWH" @change="solver(rollFast)">
-        <option v-for="wh in wormholes" :key="wh.type" :value="wh">
-          {{ wh.type }}
-        </option>
-      </select>
       <div class="controls">
-        <div class="col-span-full">
-          <button
-            class="w-max"
-            @click="
-              store.ships.push({
-                id: Math.floor(Math.random() * 1000000),
-                name: 'roller',
-                cold: 174_000_000,
-                hot: 274_000_000,
-                isThreader: false,
-                color: {
-                  h: randomInt(0, 360),
-                  s: randomInt(42, 98),
-                  l: randomInt(40, 90),
-                },
-              });
-              solver(rollFast);
-            "
-          >
-            Add Ship
-          </button>
-          <button
-            class="clear w-max"
-            @click="
-              store.plan.length = 0;
-              store.ships.length = 0;
-            "
-          >
-            Clear Ships
-          </button>
-        </div>
         <Toggle label-left="kg" label-right="tons" v-model="displayTons" />
         <Toggle label-left="icons" label-right="text" v-model="useText" />
-        <div class="col-span-full h-24">
+        <div class="col-span-full h-24 w-full pr-8">
           <RadioGroup
             v-model:model-value="store.selectedStage"
             :options="stages"
@@ -149,6 +173,7 @@ const massStatus = ref(stages[0]);
         @end="solver(rollFast)"
         :on-remove="(ev) => console.log(ev)"
         handle=".handle"
+        ghost-class="ghost"
       >
         <template #item="{ element: ship, index: idx }">
           <Ship
@@ -164,11 +189,12 @@ const massStatus = ref(stages[0]);
       </draggable>
     </div>
   </main>
-  <footer>
+  <footer class="container">
     <div>
       <p>
-        Created by <a href="https://github.com/dotfortun">dotfortun</a> and
-        <a href="https://github.com/israeldail">israeldail</a>.
+        Created by
+        <a href="https://github.com/dotfortun" target="_blank">dotfortun</a> and
+        <a href="https://github.com/israeldail" target="_blank">israeldail</a>.
       </p>
       <p>
         <small>
@@ -179,7 +205,10 @@ const massStatus = ref(stages[0]);
     </div>
     <div>
       <p>
-        <a href="https://github.com/dotfortun/wormroller/issues">
+        <a
+          href="https://github.com/dotfortun/wormroller/labels/bug"
+          target="_blank"
+        >
           Found a bug? Tell us here!
         </a>
       </p>
@@ -188,6 +217,18 @@ const massStatus = ref(stages[0]);
 </template>
 
 <style scoped>
+.controls {
+  @apply grid grid-cols-2 justify-items-center gap-6 mt-2;
+}
+
+option:disabled {
+  @apply text-slate-400 font-bold bg-slate-800;
+}
+
+.ghost {
+  @apply rounded-md border-dashed border-slate-100 border-2 opacity-10;
+}
+
 .wh-bar {
   --slate-500: rgba(100 116 139 / 1);
   --danger-red: rgba(194 31 37 / 1);

diff --git a/src/components/ColorPicker.vue b/src/components/ColorPicker.vue
@@ -78,6 +78,10 @@ div.sliders {
 }
 
 input {
-  @apply w-1/2;
+  @apply w-1/2 mr-2;
+}
+
+label {
+  @apply flex align-middle;
 }
 </style>
diff --git a/src/components/Ship.vue b/src/components/Ship.vue
@@ -125,14 +125,18 @@ input {
 
 .ship {
   @apply mx-auto my-4 h-min;
-  @apply flex flex-col items-center gap-2;
-  @apply sm:grid sm:gap-4;
+  @apply flex flex-col items-center;
+  @apply sm:grid sm:gap-4 sm:justify-items-center;
   @apply sm:grid-cols-[2rem_1fr] md:grid-cols-[2rem_1fr_1fr_1fr_1fr];
+
+  column-gap: 1rem;
+  row-gap: 0;
+  grid-template-rows: 1fr 0;
 }
 
 .handle {
   @apply max-sm:hidden; /* Don't show on mobile. */
-  @apply h-full w-4 flex flex-col justify-center select-none;
+  @apply h-full w-10 flex flex-col justify-center select-none;
   @apply row-span-3 md:row-span-1;
 }
 

diff --git a/src/stores/solver.js b/src/stores/solver.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 
 import { wormholes, stages } from "../wormholes"
 
@@ -8,6 +8,14 @@ export const useSolverStore = defineStore('solver', () => {
   const selectedWH = ref(wormholes[0]);
   const selectedStage = ref(stages[0]);
 
+  const url = computed(() => new URL(window.location));
+  if (url.value.search) {
+    const params = new URLSearchParams(url.value.search);
+    selectedWH.value = wormholes.find((elem) => {
+      return elem.type.toLowerCase() === params.get("sig").toLowerCase()
+    });
+  }
+
   const planMassKg = computed(() => ({
     med: (selectedStage.value.mass(selectedWH.value.totalMass * 1) - totalPlanMass.value),
     min: ((selectedStage.value.mass(selectedWH.value.totalMass) * 0.9) - totalPlanMass.value),

diff --git a/src/style.css b/src/style.css
@@ -45,7 +45,7 @@ h4 {
 }
 
 select {
-  @apply rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white text-xl focus:ring-blue-500 focus:border-blue-500;
+  @apply rounded-lg block w-full p-2.5 mb-4 bg-gray-700 border-gray-600 placeholder-gray-400 text-white text-xl focus:ring-blue-500 focus:border-blue-500;
   @apply border border-gray-300 focus:border-blue-500;
 }
 
@@ -61,22 +61,19 @@ button {
 }
 
 select {
-  @apply col-span-1 bg-gray-700;
+  @apply col-span-1 bg-gray-700 w-fit;
 }
 
 footer {
   @apply flex flex-row content-center justify-between p-4 text-slate-400;
   @apply max-lg:flex-col max-lg:items-center max-lg:text-center;
+  @apply w-full md:w-10/12 md:max-w-full mx-auto;
 }
 
 footer a {
   @apply text-cyan-400 decoration-solid;
 }
 
-.controls {
-  @apply grid grid-cols-2 content-center justify-between gap-2 mt-2;
-}
-
 .mass-label {
   @apply font-semibold;
 }