feat standings, relative: outline car number and draw badges

xikxp1 · Oct 30, 2024 · eb62fff · eb62fff
1 parent 3e96f61
commit eb62fff
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 48 deletions.
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.1.4"
+version = "0.1.5"
 description = "iRacing HUD overlay built in Tauri"
 authors = ["Ivan Kachalkin<xikxp1@gmail.com>"]
 edition = "2021"

diff --git a/src-tauri/src/telemetry.rs b/src-tauri/src/telemetry.rs
@@ -97,6 +97,7 @@ pub struct StandingsDriver {
     user_name: String,
     car_number: String,
     irating: IRating,
+    license: String,
     leader_gap: Gap,
     best_lap: LapTime,
     last_lap: LapTime,
@@ -412,6 +413,7 @@ impl StandingsDriver {
             user_name: driver.user_name.clone(),
             car_number: driver.car_number.clone(),
             irating: IRating::new(driver.irating),
+            license: driver.lic_string.clone(),
             leader_gap: Gap::new(driver.position, driver_positions, drivers, true),
             best_lap: LapTime::new_from_sd(driver.best_lap_time),
             last_lap: LapTime::new_from_sd(driver.last_lap_time),

diff --git a/src/components/Relative.svelte b/src/components/Relative.svelte
@@ -3,28 +3,10 @@
     import { Channel, invoke } from "@tauri-apps/api/core";
     import { onDestroy, onMount } from "svelte";
     import Badge from "./utils/Badge.svelte";
+    import { getBadgeColor } from "$lib/utils";
 
     let relative: Relative = [];
 
-    function getBadgeColor(license: string) {
-        switch (license.charAt(0)) {
-            case "R":
-                return "bg-error";
-            case "D":
-                return "bg-orange-600";
-            case "C":
-                return "bg-yellow-600";
-            case "B":
-                return "bg-green-700";
-            case "A":
-                return "bg-blue-800";
-            case "P":
-                return "bg-black";
-            default:
-                return "";
-        }
-    }
-
     let channel = new Channel<Relative>();
 
     onMount(() => {
@@ -48,7 +30,7 @@
 </script>
 
 <div class="flex flex-row items-center justify-center opacity-90">
-    <table class="bg-secondary-content rounded-md w-[400px]">
+    <table class="bg-secondary-content rounded-md w-[410px]">
         {#each relative as rel}
             <tr
                 class="{rel?.is_player
@@ -62,10 +44,15 @@
                         {rel?.position}
                     {/if}
                 </td>
-                <td class="text text-sm text-right pr-2 w-[30px]">
-                    {rel?.car_number ?? ""}</td
-                >
-                <td class="text text-sm">
+                <td class="text text-sm text-right pr-2 w-[48px]">
+                    <Badge
+                        outlineClasses="text-center ring ring-2 ring-inset {rel?.is_player
+                            ? 'ring-primary-content'
+                            : 'ring-primary'}"
+                        textClasses="text-sm text-right {rel?.is_player ? 'text-primary-content' : 'text-primary'}"
+                        text={rel?.car_number ? "#" + rel?.car_number : ""}
+                    />
+                </td><td class="text text-sm">
                     <span class="text text-sm">{rel?.user_name ?? ""}</span>
                     {#if rel?.is_off_track}
                         <span class="text text-sm text-error text-right"
@@ -81,7 +68,9 @@
                 <td class="text text-sm text-right pr-1 w-[80px]">
                     {#if rel?.license && rel?.irating}
                         <Badge
-                            color={getBadgeColor(rel?.license ?? "")}
+                            colorClasses={getBadgeColor(rel?.license ?? "")}
+                            outlineClasses="text-center"
+                            textClasses="text text-sm text-right text-primary"
                             text="{(rel?.license).substring(
                                 0,
                                 5,

diff --git a/src/components/Standings.svelte b/src/components/Standings.svelte
@@ -8,6 +8,8 @@
     import { Channel, invoke } from "@tauri-apps/api/core";
     import { onDestroy, onMount } from "svelte";
     import { flip } from "svelte/animate";
+    import Badge from "./utils/Badge.svelte";
+    import { getBadgeColor } from "$lib/utils";
 
     let stength_of_field = 0;
     let current_time = "––:––";
@@ -62,7 +64,7 @@
 
         invoke("register_event_emitter", {
             event: "positions_total",
-            onEvent: positions_total_channel
+            onEvent: positions_total_channel,
         });
     });
 
@@ -92,7 +94,7 @@
 </script>
 
 <div class="flex flex-row items-center justify-center opacity-75">
-    <div class="flex flex-col bg-primary-content rounded-l-md w-[360px]">
+    <div class="flex flex-col bg-primary-content rounded-l-md w-[375px]">
         <div class="flex flex-row items-center justify-center">
             <div class="flex flex-row items-center justify-start w-1/6 pl-2">
                 <span class="text text-secondary">SoF&nbsp</span>
@@ -117,8 +119,16 @@
                     <td class="text text-sm text-right pr-2 w-[25px]">
                         {st?.position ?? ""}
                     </td>
-                    <td class="text text-sm text-right pr-2 w-[30px]">
-                        {st?.car_number ?? ""}
+                    <td class="text text-sm pr-2 w-[48px]">
+                        <Badge
+                            outlineClasses="text-center ring ring-2 ring-inset {st?.is_player
+                                ? 'ring-primary-content'
+                                : 'ring-primary'}"
+                            textClasses="text-sm {st?.is_player
+                                ? 'text-primary-content'
+                                : 'text-primary'}"
+                            text={st?.car_number ? "#" + st?.car_number : ""}
+                        />
                     </td>
                     <td class="text text-sm">
                         <span class="text text-sm">{st?.user_name ?? ""}</span>
@@ -129,7 +139,14 @@
                         {/if}
                     </td>
                     <td class="text text-sm text-right pr-1 w-[40px]">
-                        {st?.irating}
+                        {#if st?.license && st?.irating}
+                            <Badge
+                                colorClasses={getBadgeColor(st?.license ?? "")}
+                                outlineClasses="text-center"
+                                textClasses="text text-sm text-right text-primary"
+                                text={st?.irating}
+                            />
+                        {/if}
                     </td>
                     <td class="text text-sm text-right pr-1 w-[40px]">
                         {st?.leader_gap ?? ""}

diff --git a/src/components/utils/Badge.svelte b/src/components/utils/Badge.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-    export let color: string = "";
+    export let colorClasses: string = "";
+    export let outlineClasses: string = "";
+    export let textClasses: string = "";
     export let text: string = "";
 </script>
 
 {#if text}
-    <div class="rounded-md text-center {color}">
-        <span class="text text-primary text-sm">{text}</span>
+    <div class="rounded-md {colorClasses} {outlineClasses}">
+        <span class="text {textClasses}">{text}</span>
     </div>
 {/if}
 

diff --git a/src/lib/types/telemetry.ts b/src/lib/types/telemetry.ts
@@ -1,11 +1,7 @@
 // This file has been generated by Specta. DO NOT EDIT.
 
-export type Relative = RelativeDriver[]
-
 export type LapTime = string
 
-export type RelativeDriver = { car_id: number; position: number; user_name: string; car_number: string; irating: IRating; license: string; player_relative_gap: Gap; is_player: boolean; is_in_pits: boolean; is_off_track: boolean; is_off_world: boolean }
-
 export type Incidents = number
 
 export type Speed = number
@@ -14,21 +10,21 @@ export type Telemetry = { ts: number; throttle: number; brake: number; abs_activ
 
 export type SessionTime = string
 
-export type StrengthOfField = number
-
-export type TrackID = number
-
 export type LapTimeData = { lap: number; lap_time: LapTime }
 
 export type GearRPM = number
 
 export type Active = boolean
 
+export type Standings = StandingsDriver[]
+
+export type Relative = RelativeDriver[]
+
 export type LapsTotal = number
 
 export type SessionTimeTotal = string
 
-export type LapTimes = LapTimeData[]
+export type TrackID = number
 
 export type Proximity = { is_left: boolean; is_right: boolean }
 
@@ -44,17 +40,21 @@ export type SessionState = string
 
 export type TrackMap = TrackMapDriver[]
 
+export type StrengthOfField = number
+
 export type Position = number
 
 export type DeltaTime = string
 
 export type Gear = string
 
-export type Gap = string
+export type RelativeDriver = { car_id: number; position: number; user_name: string; car_number: string; irating: IRating; license: string; player_relative_gap: Gap; is_player: boolean; is_in_pits: boolean; is_off_track: boolean; is_off_world: boolean }
 
-export type Standings = StandingsDriver[]
+export type Gap = string
 
 export type IRating = string
 
-export type StandingsDriver = { car_id: number; position: number; user_name: string; car_number: string; irating: IRating; leader_gap: Gap; best_lap: LapTime; last_lap: LapTime; is_player: boolean; is_in_pits: boolean }
+export type LapTimes = LapTimeData[]
+
+export type StandingsDriver = { car_id: number; position: number; user_name: string; car_number: string; irating: IRating; license: string; leader_gap: Gap; best_lap: LapTime; last_lap: LapTime; is_player: boolean; is_in_pits: boolean }
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -0,0 +1,18 @@
+export function getBadgeColor(license: string) {
+    switch (license.charAt(0)) {
+        case "R":
+            return "bg-error";
+        case "D":
+            return "bg-orange-600";
+        case "C":
+            return "bg-yellow-600";
+        case "B":
+            return "bg-green-700";
+        case "A":
+            return "bg-blue-800";
+        case "P":
+            return "bg-black";
+        default:
+            return "";
+    }
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -158,7 +158,7 @@
     }
 
     .standings {
-        margin-left: -1330px;
+        margin-left: -1300px;
         margin-right: auto;
         margin-top: -520px;
         margin-bottom: auto;