Merge pull request #73 from ChristianBDev/main

Added support for 2560x1080 screens
Project-Sloth · Mar 3, 2023 · 9e06087 · 9e06087
2 parents 0291cd5 + 4d93443
commit 9e06087
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 51 deletions.
diff --git a/html/index.css b/html/index.css
diff --git a/html/index.js b/html/index.js
diff --git a/svelte-source/src/components/hud-shapes/partial-circle-ring.svelte b/svelte-source/src/components/hud-shapes/partial-circle-ring.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { tweened } from 'svelte/motion';
+  import Fa from 'svelte-fa';
   import { linear } from 'svelte/easing';
-  import Fa from 'svelte-fa'
+  import { tweened } from 'svelte/motion';
 
   export let displayOutline: boolean = true;
   export let height: number = 50;
@@ -188,6 +188,15 @@
   }
 }
 
+@media (width: 2560px) and (height: 1080px) {
+    .vehicle-number {
+        font-size: 1.7vh !important;
+    }
+    .vehicle-text {
+        font-size: 0.9vh !important;
+    }
+}
+
 @media (width: 1920px) and (height: 1440px) {
   .vehicle-number  {
     font-size: 1.6vh!important;

diff --git a/svelte-source/src/components/map-border-hud.svelte b/svelte-source/src/components/map-border-hud.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import VehicleHudStore from '../stores/vehicleHudStore';
   import DebugStore from '../stores/debugStore';
+  import VehicleHudStore from '../stores/vehicleHudStore';
 </script>
 
 {#if $VehicleHudStore.show || DebugStore}
@@ -94,6 +94,18 @@
     }
   }
 
+  @media (width: 2560px) and (height: 1080px) {
+    .square {
+        left: -0.25vw !important;
+        bottom: -1.8vh !important;
+    }
+    .circle {
+        left: 0.15vw !important;
+        width: 27.6vh !important;
+        bottom: -1vh !important;
+    }
+}
+
   @media (width: 1920px) and (height: 1440px) {
     .square {
       left: 0vw!important;

diff --git a/svelte-source/src/components/vehicle-hud.svelte b/svelte-source/src/components/vehicle-hud.svelte
@@ -1,32 +1,32 @@
 <script lang="ts">
+  import { faGasPump, faUserSlash } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
   import { fade } from 'svelte/transition';
-  import VehicleHudStore from '../stores/vehicleHudStore';
   import DebugStore from '../stores/debugStore';
+  import VehicleHudStore from '../stores/vehicleHudStore';
   import PartialCircleRing from './hud-shapes/partial-circle-ring.svelte';
-  import { faGasPump, faUserSlash } from '@fortawesome/free-solid-svg-icons';
-  import Fa from 'svelte-fa';
 
   // TODO see if most of these components can be under the same responsive class div, need to test once this is working
 </script>
 
 {#if $VehicleHudStore.show || DebugStore}
   <div class="responsive" id="speedometer">
     <PartialCircleRing maxLengthDisplay={66} rotateDegree={212} ringSize={5.5} progressColor={"white"}
-      outlineColor={"white"} outlineColorOpacity={0.6} height={60} width={60} progressValue={$VehicleHudStore.speed}
+      outlineColor={"black"} outlineColorOpacity={0.6} height={60} width={60} progressValue={$VehicleHudStore.speed}
       text={"MPH"} displayNumber={$VehicleHudStore.speed} maxProgressValue={180}
     />
   </div>
   <div class="responsive" id="fuelgauge">
     <PartialCircleRing maxLengthDisplay={69} rotateDegree={235} ringSize={3.5} progressColor={$VehicleHudStore.fuelColor}
-      outlineColor={$VehicleHudStore.fuelColor} outlineColorOpacity={0.6} height={36} width={36} progressValue={$VehicleHudStore.fuel}
+      outlineColor={"black"} outlineColorOpacity={0.6} height={36} width={36} progressValue={$VehicleHudStore.fuel}
       icon={faGasPump} iconColor={"white"} iconScaling={0.38}
     />
   </div>
 
   {#if $VehicleHudStore.showAltitude}
     <div class="responsive" id="altitudegauge">
       <PartialCircleRing maxLengthDisplay={75} rotateDegree={225} ringSize={5.5} progressColor={"white"}
-        outlineColor={"white"} outlineColorOpacity={0.6} height={60} width={60} progressValue={$VehicleHudStore.altitude}
+        outlineColor={"black"} outlineColorOpacity={0.6} height={60} width={60} progressValue={$VehicleHudStore.altitude}
         text={"ALT"} displayNumber={$VehicleHudStore.altitude} maxProgressValue={750}
       />
     </div>
@@ -159,6 +159,37 @@
   }
 }
 
+@media (width: 2560px) and (height: 1080px) {
+    .responsive {
+        margin-left: 33.5vh !important;
+        transform: scale(1.3);
+        bottom: 7.2vh !important;
+    }
+    #speedometer {
+        position: relative;
+        left: 0vw !important;
+    }
+    #fuelgauge {
+        position: relative;
+        left: 2vw !important;
+        bottom: 5.95vh !important;
+    }
+    #altitudegauge {
+        position: relative;
+        left: 4vw !important;
+    }
+    #seatbelt {
+        position: relative;
+        left: 4.1vw !important;
+        bottom: 8.5vh !important;
+    }
+    #seatbeltAltitude {
+        position: relative;
+        left: 2.8vw !important;
+        bottom: 12vh !important;
+    }
+}
+
 @media (width: 1920px) and (height: 1440px) {
   .responsive {
     margin-left: 22.4vw!important;