diff --git a/src/extension/layouts.ts b/src/extension/layouts.ts index 00784ea7..88a059f1 100644 --- 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 index b8abb793..421aa67b 100644 --- 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 index dbbca2ce..02e4c857 100644 Binary files a/src/graphics/_misc/themes/winter/OmnibarCharityLogo.png and b/src/graphics/_misc/themes/winter/OmnibarCharityLogo.png differ diff --git a/src/graphics/game-layout/esaw24-16x9-1p.vue b/src/graphics/game-layout/esaw24-16x9-1p.vue new file mode 100644 index 00000000..d493cd33 --- /dev/null +++ b/src/graphics/game-layout/esaw24-16x9-1p.vue @@ -0,0 +1,20 @@ + + + diff --git a/src/graphics/game-layout/esaw24-4x3-1p.vue b/src/graphics/game-layout/esaw24-4x3-1p.vue new file mode 100644 index 00000000..65f1f381 --- /dev/null +++ b/src/graphics/game-layout/esaw24-4x3-1p.vue @@ -0,0 +1,17 @@ + + + diff --git a/src/graphics/game-layout/1p-esaw24.vue b/src/graphics/game-layout/esaw24-base.vue similarity index 88% rename from src/graphics/game-layout/1p-esaw24.vue rename to src/graphics/game-layout/esaw24-base.vue index a70ff0e4..d95dce4e 100644 --- a/src/graphics/game-layout/1p-esaw24.vue +++ b/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 { } } + + diff --git a/src/graphics/game-layout/list.ts b/src/graphics/game-layout/list.ts index 20744c88..88ef7a53 100644 --- 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 index 7871820b..ca11d94d 100644 --- 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 index eb5004cd..595a440e 100644 --- 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%); }