chore: add chota css framework

Merge branch 'chota' into version-2

package.json

@@ -34,10 +34,12 @@
     "@storybook/addon-svelte-csf": "^1.1.0",
     "@storybook/svelte": "^6.4.19",
     "@sveltejs/adapter-node": "^1.0.0-next.0",
+    "chota": "^0.8.0",
     "lodash": "^4.17.21",
     "redux": "^4.1.2",
     "reselect": "^4.1.5",
     "rollup-plugin-analyzer": "^4.0.0",
+    "svelte-chota": "^1.8.6",
     "svelte-knobby": "^0.3.4",
     "ts-action": "^11.0.0",
     "updux": "link:/home/yanick/work/javascript/updux-js/",

src/lib/components/ShipEdit/Carrier/Squadron.svelte

@@ -30,4 +30,7 @@ $: dispatch.setSquadronType({type, id});
 </script>
 
 <style>
+select {
+    width: inherit;
+}
 </style>

src/lib/components/ShipEdit/Carrier/index.svelte

@@ -1,7 +1,7 @@
 <Section label="carrier">
   <ShipItem {...reqs}>
     <Field label="bays">
-      <input type="number" min="0" bind:value={bays} />
+      <input class="short" type="number" min="0" bind:value={bays} />
     </Field>
   </ShipItem>
 

src/lib/components/ShipEdit/Propulsion/Drive/index.svelte

@@ -1,7 +1,7 @@
 <ShipItem {...reqs}>
   <div>
     <Field label="thrust rating">
-      <input type="number" bind:value={rating} min="0" max="20" step="1" />
+      <input class="short" type="number" bind:value={rating} min="0" max="20" step="1" />
     </Field>
 
     <label><input type="checkbox" bind:checked={advanced} /> advanced</label>

src/lib/components/ShipEdit/ShipCost.svelte

@@ -1,6 +1,6 @@
 <div class="mass">
     <Field label="ship tonnage">
-        <input bind:value={mass} type="number" min="10" max="300" />
+        <input class="short" bind:value={mass} type="number" min="10" max="300" />
         <span class="mass_symbol" />
 
         <div class="note" class:warning={!withinBudget}>
@@ -53,6 +53,7 @@
     }
     input {
         width: 5em;
+        display: inline !important;
     }
     .mass_symbol:after {
         content: url("/mass.svg");
@@ -74,7 +75,7 @@
     }
 
     .mass {
-        grid-column: 2;
+        width: 15em;
     }
     div.cost {
         grid-column: 3;

src/lib/components/ShipEdit/Structure/Armor.svelte

@@ -2,7 +2,7 @@
   <div>
     <div class="nbr_layers">
       <Field label="armour layers">
-        <input type="number" min="0" bind:value={nbr_layers} />
+        <input class="short" type="number" min="0" bind:value={nbr_layers} />
       </Field>
     </div>
 

src/lib/components/ShipEdit/Structure/Armor/Layer.svelte

@@ -1,5 +1,5 @@
 <Field label={`layer ${layer}`}>
-  <input type="number" min="0" bind:value={rating} />
+  <input class="short" type="number" min="0" bind:value={rating} />
 </Field>
 
 <script>

src/lib/components/ShipEdit/Structure/Cargo.svelte

@@ -1,6 +1,6 @@
 <ShipItem {...reqs}>
   <Field label="cargo">
-    <input type="number" min="0" bind:value={space} />
+    <input class="short" type="number" min="0" bind:value={space} />
   </Field>
 </ShipItem>
 

src/lib/components/ShipEdit/Structure/Hull.svelte

@@ -1,6 +1,6 @@
   <ShipItem {...reqs}>
     <Field label="hull">
-      <input bind:value={rating} type="number" {min} {max} />
+      <input class="short" bind:value={rating} type="number" {min} {max} />
     </Field>
   </ShipItem>
 

src/lib/components/ShipEdit/Structure/Screens.svelte

@@ -1,11 +1,11 @@
 <ShipItem {...reqs}>
   <div>
     <Field label="screens">
-      <input type="number" bind:value={standard} min="0" />
+      <input class='short' type="number" bind:value={standard} min="0" />
     </Field>
 
     <Field label="advanced screens">
-      <input type="number" bind:value={advanced} min="0" />
+      <input class='short' type="number" bind:value={advanced} min="0" />
     </Field>
   </div>
 </ShipItem>

src/lib/components/ShipEdit/Weaponry/AddWeapon.svelte

@@ -5,7 +5,7 @@
         {/each}
   </select>
 
-  <button class="button small blue" on:click={addWeapon} >add weapon</button>
+  <button class="button small primary" on:click={addWeapon} >add weapon</button>
 </Field>
 
 <script>
@@ -20,3 +20,10 @@
 
   const addWeapon = () => ship.dispatch.addWeapon(type);
 </script>
+
+<style>
+select {
+    width: inherit;
+    display: inline-block;
+}
+</style>

src/lib/components/ShipEdit/Weaponry/Weapon/Beam/index.svelte

@@ -53,7 +53,6 @@
 
 
     function setArcs(firstArc) {
-        console.log(firstArc);
         if (nbrArcs === "broadside") {
             arcs = broadside;
             return;
@@ -61,12 +60,10 @@
             let first_index = all_arcs.findIndex((arc) =>  arc === firstArc);
             if (first_index === -1) first_index = 0;
 
-        console.log({arcs, label:"before"});
-            arcs = _.range(nbrArcs).map(
-                (i) => all_arcs[(first_index + i) % all_arcs.length]
+            arcs = Array.from({length: nbrArcs}).map(
+                (_dummy,i) => all_arcs[(first_index + i) % all_arcs.length]
             );
         arcsCaches = arcs.join(',');
-        console.log({arcs, label:"after"});
     }
 
     $: if (arcs.length !== nbrArcs) setArcs(arcs[0]);

src/lib/style/index.css

@@ -2,3 +2,7 @@
   --main-font-family: "Dosis", -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
+
+input.short {
+    width: 5em !important;
+}

src/lib/style/index.js

@@ -1,4 +1,5 @@
 import "../../../static/fonts/faktos.css";
 import "../../../static/fonts/dosis/dosis.css";
 import "../../../static/global.css";
+import 'chota';
 import "./index.css";

src/routes/index.svelte

@@ -3,10 +3,7 @@
 <script>
   import { setContext } from "svelte";
 
-
-  import "../../static/fonts/faktos.css";
-  import "../../static/fonts/dosis/dosis.css";
-  import "../../static/global.css";
+  import '$lib/style/index.js';
   import shipStore from "$lib/store/ship.js";
 
   import App from "$lib/components/App.svelte";

static/global.css

@@ -79,24 +79,6 @@ input[type="range"] {
 	height: 0;
 }
 
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}
-
 /*  ---- inputs --- */
 
 input, select {