Remove ESAW24 style from non-ESAW24 layout, add new layout 16x9 varia…

…nt, add code override for automation
esamarathon · Feb 17, 2024 · c09dd53 · c09dd53
1 parent 8d02bca
commit c09dd53
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 14 deletions.
diff --git a/src/extension/layouts.ts b/src/extension/layouts.ts
@@ -99,8 +99,12 @@ sc.runDataActiveRun.on('change', (newVal, oldVal) => {
   if (newVal && layoutInit) {
     // If there's no old run or we changed to a different run, try to automatically set the layout.
     if (!oldVal || newVal.id !== oldVal.id) {
-      const layout = gameLayouts.value.available
-        .find((l) => l.code.toLowerCase() === newVal.customData.layout?.toLowerCase());
+      // Overwrite code with new ESAW24 layout if 1 player.
+      let code = (newVal.customData.layout as string | undefined)?.toLowerCase();
+      if (code?.endsWith('-1p') && !code.startsWith('ds') && !code.startsWith('3ds')) {
+        code = `esaw24-${code}`;
+      }
+      const layout = gameLayouts.value.available.find((l) => l.code.toLowerCase() === code);
       gameLayouts.value.selected = layout?.code;
       if (newVal.customData.layout && !layout) {
         nodecg().log.warn(

diff --git a/src/graphics/_misc/themes/winter.theme.css b/src/graphics/_misc/themes/winter.theme.css
@@ -14,5 +14,6 @@
 
 #Omnibar #CharityLogo {
   content: url('./winter/OmnibarCharityLogo.png');
+  height: 58px;
   margin: 0 15px;
 }
diff --git a/src/graphics/_misc/themes/winter/OmnibarCharityLogo.png b/src/graphics/_misc/themes/winter/OmnibarCharityLogo.png
diff --git a/src/graphics/game-layout/esaw24-16x9-1p.vue b/src/graphics/game-layout/esaw24-16x9-1p.vue
@@ -0,0 +1,20 @@
+<template>
+  <layout-base
+    top="105px"
+    height="632px"
+  />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import LayoutBase from './esaw24-base.vue';
+
+@Component({
+  components: {
+    LayoutBase,
+  },
+})
+export default class extends Vue {
+  // code
+}
+</script>
diff --git a/src/graphics/game-layout/esaw24-4x3-1p.vue b/src/graphics/game-layout/esaw24-4x3-1p.vue
@@ -0,0 +1,17 @@
+<template>
+  <layout-base />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import LayoutBase from './esaw24-base.vue';
+
+@Component({
+  components: {
+    LayoutBase,
+  },
+})
+export default class extends Vue {
+  // code
+}
+</script>
diff --git a/src/graphics/game-layout/1p-esaw24.vue → src/graphics/game-layout/esaw24-base.vue b/src/graphics/game-layout/1p-esaw24.vue → src/graphics/game-layout/esaw24-base.vue
@@ -5,10 +5,10 @@
       id="GameCapture1"
       class="BorderLeft"
       :style="{
-        left: '796px',
-        top: '0px',
-        width: '1124px',
-        height: '843px',
+        left: left || '796px',
+        top: top || '0px',
+        width: width || '1124px',
+        height: height || '843px',
       }"
     />
 
@@ -117,7 +117,7 @@
 import { CommentatorsNew, DonationReaderNew } from '@esa-layouts/types/schemas';
 import MediaBox from '@shared/graphics/mediabox';
 import { RunDataActiveRun } from 'speedcontrol-util/types';
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import { State } from 'vuex-class';
 import CommentatorsReader from './components/CommentatorsReader.vue';
 import DonationBar from './components/DonationBar.vue';
@@ -140,6 +140,10 @@ import Timer from './components/Timer.vue';
   },
 })
 export default class extends Vue {
+  @Prop({ type: String, required: false }) left!: string | undefined;
+  @Prop({ type: String, required: false }) top!: string | undefined;
+  @Prop({ type: String, required: false }) width!: string | undefined;
+  @Prop({ type: String, required: false }) height!: string | undefined;
   @State('runDataActiveRun') runData!: RunDataActiveRun;
   @State readonly commentatorsNew!: CommentatorsNew;
   @State readonly donationReaderNew!: DonationReaderNew;
@@ -152,3 +156,7 @@ export default class extends Vue {
   }
 }
 </script>
+
+<style>
+  @import url('../_misc/themes/esaw24.theme.css');
+</style>
diff --git a/src/graphics/game-layout/list.ts b/src/graphics/game-layout/list.ts
@@ -12,7 +12,6 @@ import L_16x9_2p_Bingo from './16x9-2p-bingo.vue';
 import L_16x9_2p_HEK from './16x9-2p-hek.vue';
 import L_16x9_2p from './16x9-2p.vue';
 import L_16x9_3p from './16x9-3p.vue';
-import L_1p_ESAW24 from './1p-esaw24.vue';
 import L_2CamsOnly from './2-cams-only.vue';
 import L_3DS_1p from './3ds-1p.vue';
 import L_4x3_1p_2Cams from './4x3-1p-2cams.vue';
@@ -26,6 +25,8 @@ import L_5x2_1p from './5x2-1p.vue';
 import L_9x16_1p_2Cams from './9x16-1p-2cams.vue';
 import L_9x16_1p from './9x16-1p.vue';
 import L_DS_1p from './ds-1p.vue';
+import L_ESAW24_4x3_1p from './esaw24-4x3-1p.vue';
+import L_ESAW24_16x9_1p from './esaw24-16x9-1p.vue';
 import L_FullCam from './full-cam.vue';
 import L_GB_1p from './gb-1p.vue';
 import L_GB_2p_ExtraSpace from './gb-2p-extraspace.vue';
@@ -38,5 +39,5 @@ import L_SWCF_16x9_2p_Bingo from './swcf_16x9-2p-bingo.vue';
 import L_SWCF_16x9_4p_Bingo from './swcf_16x9-4p-bingo.vue';
 import L_Taskmaster_Timer from './taskmaster-timer.vue';
 
-export { L_16x9_1p, L_16x9_1p_2Cams, L_16x9_1p_2Cams_NoGame, L_16x9_1p_HEK, L_16x9_1p_LargeCam, L_16x9_1p_LargeCrowdCam, L_16x9_2p, L_16x9_2p_Bingo, L_16x9_2p_HEK, L_16x9_3p, L_1p_ESAW24, L_2CamsOnly, L_3DS_1p, L_4x3_1p, L_4x3_1p_2Cams, L_4x3_2p, L_4x3_2p_ExtraMiddleSpace, L_4x3_2p_ExtraSpace, L_4x3_3p, L_4x3_4p, L_5x2_1p, L_9x16_1p, L_9x16_1p_2Cams, L_DS_1p, L_FullCam, L_GBA_1p, L_GBA_2p, L_GB_1p, L_GB_2p_ExtraSpace, L_PokemonEmerald_MapRando, L_SM64_PSP_2p, L_SWCF_16x9_2Feeds_DancePad as L_SWCF_16x9_2Feeds_Dancepad, L_SWCF_16x9_2p_Bingo, L_SWCF_16x9_4p_Bingo, L_Taskmaster_Timer };
-export const defaultCode = '4x3-1p';
+export { L_16x9_1p, L_16x9_1p_2Cams, L_16x9_1p_2Cams_NoGame, L_16x9_1p_HEK, L_16x9_1p_LargeCam, L_16x9_1p_LargeCrowdCam, L_16x9_2p, L_16x9_2p_Bingo, L_16x9_2p_HEK, L_16x9_3p, L_2CamsOnly, L_3DS_1p, L_4x3_1p, L_4x3_1p_2Cams, L_4x3_2p, L_4x3_2p_ExtraMiddleSpace, L_4x3_2p_ExtraSpace, L_4x3_3p, L_4x3_4p, L_5x2_1p, L_9x16_1p, L_9x16_1p_2Cams, L_DS_1p, L_ESAW24_4x3_1p, L_ESAW24_16x9_1p, L_FullCam, L_GBA_1p, L_GBA_2p, L_GB_1p, L_GB_2p_ExtraSpace, L_PokemonEmerald_MapRando, L_SM64_PSP_2p, L_SWCF_16x9_2Feeds_DancePad as L_SWCF_16x9_2Feeds_Dancepad, L_SWCF_16x9_2p_Bingo, L_SWCF_16x9_4p_Bingo, L_Taskmaster_Timer };
+export const defaultCode = 'esaw24-4x3-1p';
diff --git a/src/graphics/game-layout/main.ts b/src/graphics/game-layout/main.ts
@@ -30,9 +30,14 @@ const routes = [
     component: List.L_SWCF_16x9_4p_Bingo,
   }, */
   {
-    name: '(ESAW24) 1 Player',
-    path: '/1p-esaw24',
-    component: List.L_1p_ESAW24,
+    name: '(ESAW24) 4:3 1 Player',
+    path: '/esaw24-4x3-1p',
+    component: List.L_ESAW24_4x3_1p,
+  },
+  {
+    name: '(ESAW24) 16:9 1 Player',
+    path: '/esaw24-16x9-1p',
+    component: List.L_ESAW24_16x9_1p,
   },
   {
     name: '4:3 1 Player',

diff --git a/src/graphics/omnibar/main.vue b/src/graphics/omnibar/main.vue
@@ -60,6 +60,13 @@ export default class extends Vue {
   /* Used to "fix" the omnibar background colour. */
   body {
     /* Copied from ".bg--darkgrey" */
-    background: var(--colour--darkgrey);
+    background: #191919;
+  }
+
+  #Omnibar {
+    color: white;
+    /* Copied from ".bg--dimmedgradient" */
+    background: linear-gradient(90deg, rgba(115, 78, 158, 0.5) 50%,
+      rgba(208, 152, 70, 0.5) 100%);
   }
 </style>