update samples

vnau · Dec 23, 2024 · cfd029d · cfd029d
1 parent f788bba
commit cfd029d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 12 deletions.
diff --git a/src/components/Clock.svelte b/src/components/Clock.svelte
@@ -19,7 +19,7 @@
   stop={60}
   stroke={10}
   segments={Array.from(Array(12), (_, i) => [5 * i, 5 * i])}
-  labels={Array.from(Array(13), (_, i) => (((i + 11) % 12) + 1).toString())}
+  labels={["I","II","III","IIII","IV","V","VI","VII","IIX","IX","X","XI",""]}
   color={palette[0]}
 >
   <Gauge

diff --git a/src/components/Indicator.svelte b/src/components/Indicator.svelte
@@ -5,7 +5,7 @@
     value = Math.min(100, Math.round((Date.now() % 12000) / 100));
   }, 500);
 
-  const palette = ["#ffffff", "#e41376", "#01c8ee"];
+  const palette = ["#ffffff", "#e41376", "#01c8eec0"];
 </script>
 
 <Gauge
@@ -41,8 +41,8 @@
         <div>☀</div>
       </div>
     </div>
-  </Gauge></Gauge
->
+  </Gauge>
+</Gauge>
 
 <style lang="scss">
   .slider-content {

diff --git a/src/components/Progress.svelte b/src/components/Progress.svelte
@@ -17,11 +17,17 @@
   />
 
   <Gauge
-    class="progress"
-    stroke={10}
-    displayValue={(v) => v.formattedValue + "%"}
-    labels={["∗", "who knows, maybe it will take forever", ""]}
-    color="#d43008"
+    class="segmented"
+    stroke={15}
+    startAngle={40}
+    stopAngle={320}
+    displayValue={""}
+    segments={[
+      { start: 0, stop: 33, color: "#f6a944", label: "Low" },
+      { start: 33, stop: 66, color: "#8a9305", label: "Medium" },
+      { start: 66, stop: 100, color: "#e62f48", label: "High" },
+    ]}
+    color="white"
     {value}
   />
 </div>
@@ -33,8 +39,20 @@
     :global(.gauge-slot-content) {
       color: var(--stroke-color);
     }
-    :global(.gauge-indicator) {
+    :global(.gauge-pointer) {
+      display: none;
+    }
+  }
+
+  :global(.segmented) {
+    width: 125px;
+
+    :global(.gauge-progress) {
       display: none;
     }
+
+    :global(.gauge-pointer) {
+      fill: white;
+    }
   }
 </style>
diff --git a/src/components/Speedometer.svelte b/src/components/Speedometer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import Gauge from "$lib/Gauge.svelte";
   import { cubicIn, cubicOut } from "svelte/easing";
-  const palette = ["#ffffff", "#d43008", "#666666"];
+  const palette = ["#ffffff", "#d43008", "#666666c0"];
 
   let speed = 0;
   let rpm = 0;
@@ -29,7 +29,7 @@
     startAngle={45}
     stopAngle={360 - 45}
     stroke={10}
-    segments={[{ start: 8000, stop: 10000, color: "#d4300850" }]}
+    segments={[{ start: 8000, stop: 10000, color: "#d43008" }]}
     displayValue={Math.round(speed).toString()}
     value={rpm}
     color={palette[2]}