feat(frontend): some prettier motions

xikxp1 · Dec 1, 2024 · a5a9d5d · a5a9d5d
1 parent 7247da4
commit a5a9d5d
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   },
   "license": "GPL-3.0-only",
   "dependencies": {
+    "@number-flow/svelte": "^0.2.1",
     "@tauri-apps/api": "2.1.1",
     "@tauri-apps/plugin-autostart": "2.0.0",
     "@tauri-apps/plugin-log": "2.0.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "iracehud"
-version = "0.3.8"
+version = "0.3.9"
 description = "iRacing HUD overlay built in Tauri"
 authors = ["Ivan Kachalkin<[email protected]>"]
 edition = "2021"

diff --git a/src/components/Main.svelte b/src/components/Main.svelte
@@ -13,6 +13,7 @@
         speed,
     } from "$lib/telemetry/telemetry.svelte";
     import type { Rpm } from "$lib/types/telemetry";
+    import NumberFlow from "@number-flow/svelte";
     import { onMount } from "svelte";
 
     let gear_indicator: HTMLDivElement;
@@ -92,15 +93,17 @@
             <div class="flex flex-row items-center justify-evenly">
                 <div class="flex flex-col items-center justify-evenly">
                     <div class="text-primary">
-                        {$lap}{#if $lapsTotal > 0}/{$lapsTotal}{/if}
+                        <NumberFlow value={$lap} continuous={true}
+                        ></NumberFlow>{#if $lapsTotal > 0}/{$lapsTotal}{/if}
                     </div>
                     <div class="text-secondary text-xs">lap</div>
                 </div>
                 <div class="divider divider-horizontal divider-primary"></div>
                 <div class="flex flex-col items-center justify-evenly">
                     <div class="text-primary">
                         {#if $position > 0}
-                            {$position}{#if $positionsTotal > 0}/{$positionsTotal}{/if}
+                            <NumberFlow value={$position} continuous={true}
+                            ></NumberFlow>{#if $positionsTotal > 0}/{$positionsTotal}{/if}
                         {:else}
                             -
                         {/if}
@@ -110,7 +113,8 @@
                 <div class="divider divider-horizontal divider-primary"></div>
                 <div class="flex flex-col items-center justify-evenly">
                     <div class="text-primary">
-                        {$incidents}{#if $incidentLimit > 0}/{$incidentLimit}{/if}
+                        <NumberFlow value={$incidents} continuous={true}
+                        ></NumberFlow>{#if $incidentLimit > 0}/{$incidentLimit}{/if}x
                     </div>
                     <div class="text-secondary text-xs">inc</div>
                 </div>

diff --git a/src/components/Standings.svelte b/src/components/Standings.svelte
@@ -22,7 +22,7 @@
     let show_best_lap = false;
     let interval: NodeJS.Timeout;
 
-    function on_standings (value: StandingsDriver[]) {
+    function on_standings(value: StandingsDriver[]) {
         let new_standings: LocalStandings[] = [];
         value.forEach((st) => {
             let new_value: LocalStandings = {
@@ -33,8 +33,7 @@
                 (old_st) => old_st.car_id === new_value.car_id,
             );
             new_value.position_change =
-                new_value.position -
-                (old_st?.position ?? new_value.position);
+                new_value.position - (old_st?.position ?? new_value.position);
             new_standings.push(new_value);
         });
         current_standings = new_standings;
@@ -125,7 +124,13 @@
                                 />
                             {/if}
                         </td>
-                        <td class="text text-sm text-right pr-1 w-[40px]">
+                        <td
+                            class="text text-sm text-right {st?.is_leader &&
+                            $raceLaps > 0 &&
+                            !st?.is_player
+                                ? 'text-secondary'
+                                : ''} pr-1 w-[35px]"
+                        >
                             {#if st?.is_leader && $raceLaps > 0}
                                 L{$raceLaps}
                             {:else}