game-layout: add sm64-psp-2p layout, add templates, add crop logic

BSGmarathon · Jul 28, 2021 · 7d77286 · 7d77286
1 parent e2ccb0c
commit 7d77286
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 3 deletions.
diff --git a/player-templates/game-only/sm64-psp-2p-p1.png b/player-templates/game-only/sm64-psp-2p-p1.png
diff --git a/player-templates/game-only/sm64-psp-2p-p2.png b/player-templates/game-only/sm64-psp-2p-p2.png
diff --git a/src/extension/layouts.ts b/src/extension/layouts.ts
@@ -163,12 +163,23 @@ capturePositions.on('change', async (val) => {
     }
 
     try {
+      if (['GameCapture1', 'GameCapture2'].includes(key)
+      && gameLayouts.value.selected === 'sm64-psp-2p') {
+        crop.right = key === 'GameCapture1' ? 1920 / 2 : 0; // Hardcoded for 1080p source!
+        crop.left = key === 'GameCapture2' ? 1920 / 2 : 0; // Hardcoded for 1080p source!
+      }
       await obs.configureSceneItem(
         obsConfig.names.scenes.gameLayout,
         obsSourceKeys[key],
         (() => {
           if (key.startsWith('GameCapture')
-          && ['DS-1p', '3DS-1p'].includes(gameLayouts.value.selected || '')) {
+          && ['DS-1p', '3DS-1p', 'sm64-psp-2p'].includes(gameLayouts.value.selected || '')) {
+            if (gameLayouts.value.selected === 'sm64-psp-2p'
+            && ['GameCapture1', 'GameCapture2'].includes(key)) {
+              return {
+                x: key === 'GameCapture2' ? 1920 / 2 : 0, y: 0, width: 1920 / 2, height: 1080,
+              };
+            }
             if (key === 'GameCapture1') {
               return {
                 x: 0, y: 0, width: 1920, height: 1080,
@@ -181,10 +192,13 @@ capturePositions.on('change', async (val) => {
         crop,
         (() => {
           if (key.startsWith('GameCapture')
-          && ['DS-1p', '3DS-1p'].includes(gameLayouts.value.selected || '')) {
+          && ['DS-1p', '3DS-1p', 'sm64-psp-2p'].includes(gameLayouts.value.selected || '')) {
             if (key === 'GameCapture1') {
               return true;
             }
+            if (key === 'GameCapture2' && gameLayouts.value.selected === 'sm64-psp-2p') {
+              return true;
+            }
             return false;
           }
           return !!val['game-layout'][key];

diff --git a/src/graphics/game-layout/list.ts b/src/graphics/game-layout/list.ts
@@ -21,6 +21,7 @@ import L_GB_1p from './gb-1p.vue';
 import L_GB_2p_ExtraSpace from './gb-2p-extraspace.vue';
 import L_GBA_1p from './gba-1p.vue';
 import L_GBA_2p from './gba-2p.vue';
+import L_SM64_PSP_2p from './sm64-psp-2p.vue';
 
-export { L_4x3_2p_HekRelay, L_4x3_1p, L_4x3_2p, L_4x3_2p_ExtraSpace, L_4x3_2p_ExtraMiddleSpace, L_4x3_3p, L_4x3_4p, L_16x9_1p, L_16x9_2p, L_16x9_3p, L_3DS_1p, L_DS_1p, L_GB_1p, L_GB_2p_ExtraSpace, L_GBA_1p, L_GBA_2p, L_16x9_1p_LargeCam, L_16x9_1p_2Cams, L_5x2_1p };
+export { L_4x3_2p_HekRelay, L_4x3_1p, L_4x3_2p, L_4x3_2p_ExtraSpace, L_4x3_2p_ExtraMiddleSpace, L_4x3_3p, L_4x3_4p, L_16x9_1p, L_16x9_2p, L_16x9_3p, L_3DS_1p, L_DS_1p, L_GB_1p, L_GB_2p_ExtraSpace, L_GBA_1p, L_GBA_2p, L_16x9_1p_LargeCam, L_16x9_1p_2Cams, L_5x2_1p, L_SM64_PSP_2p };
 export const defaultCode = '4x3-1p';
diff --git a/src/graphics/game-layout/main.ts b/src/graphics/game-layout/main.ts
@@ -109,6 +109,11 @@ const routes = [
     path: '/5x2-1p',
     component: List.L_5x2_1p,
   },
+  {
+    name: 'SM64 (Power Star Pathway 2P)',
+    path: '/sm64-psp-2p',
+    component: List.L_SM64_PSP_2p,
+  },
   {
     path: '*',
     redirect: '/4x3-1p',

diff --git a/src/graphics/game-layout/sm64-psp-2p.vue b/src/graphics/game-layout/sm64-psp-2p.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <!-- Game Captures -->
+    <!-- Player 1 -->
+    <game-capture
+      id="GameCapture1"
+      class="BorderRight"
+      :slot-no="0"
+      :style="{
+        left: '0px',
+        top: '0px',
+        width: '678px',
+        height: '508px',
+      }"
+    />
+    <game-capture
+      id="GameCapture2"
+      class="BorderRight"
+      :style="{
+        left: '0px',
+        top: '558px',
+        width: '419px',
+        height: '382px',
+      }"
+    />
+    <!-- Player 2 -->
+    <game-capture
+      id="GameCapture3"
+      class="BorderLeft"
+      :slot-no="1"
+      finish-time-pos="bottomright"
+      :style="{
+        left: '1242px',
+        top: '0px',
+        width: '678px',
+        height: '508px',
+      }"
+    />
+    <game-capture
+      id="GameCapture4"
+      class="BorderLeft"
+      :style="{
+        left: '1501px',
+        top: '558px',
+        width: '419px',
+        height: '382px',
+      }"
+    />
+
+    <!-- Camera Captures -->
+    <div
+      id="CameraCapture1"
+      class="Capture BorderRight"
+      :style="{
+        left: '419px',
+        top: '558px',
+        width: '541px',
+        height: '382px',
+      }"
+    />
+    <div
+      id="CameraCapture2"
+      class="Capture"
+      :style="{
+        left: '960px',
+        top: '558px',
+        width: '541px',
+        height: '382px',
+      }"
+    />
+
+    <!-- Player 1 -->
+    <player
+      class="Fixed"
+      :style="{
+        left: '0px',
+        top: '508px',
+        width: '960px',
+      }"
+      :slot-no="0"
+    />
+
+    <!-- Player 2 -->
+    <player
+      class="Fixed"
+      :style="{
+        left: '960px',
+        top: '508px',
+        width: '960px',
+      }"
+      :slot-no="1"
+    />
+
+    <!-- General Run Info -->
+    <div
+      class="Fixed FlexColumn"
+      :style="{
+        left: '678px',
+        top: '-2px',
+        width: '564px',
+        height: '258px',
+      }"
+    >
+      <commentators-reader />
+      <commentators-reader show-reader />
+
+      <!-- Run Game Info/Timer -->
+      <div
+        class="FlexColumn"
+        :style="{
+          flex: '1',
+          width: '100%',
+        }"
+      >
+        <run-info />
+        <timer
+          top-margin="-0.09em"
+          font-size="75px"
+        />
+      </div>
+    </div>
+
+    <!-- Media Box -->
+    <media-box
+      class="BorderTop"
+      :style="{
+        left: '678px',
+        top: '256px',
+        width: '564px',
+        height: '252px',
+      }"
+    />
+
+    <!-- Donation Bar -->
+    <donation-bar
+      :style="{
+        left: '0px',
+        top: '940px',
+        width: '1920px',
+        height: '60px',
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from 'vue-property-decorator';
+import { Configschema } from '@esa-layouts/types/schemas/configschema';
+import MediaBox from '@esamarathon/esa-layouts-shared/mediabox/graphics';
+import GameCapture from './components/GameCapture.vue';
+import Player from './components/Player.vue';
+import CommentatorsReader from './components/CommentatorsReader.vue';
+import RunInfo from './components/RunInfo.vue';
+import Timer from './components/Timer.vue';
+import DonationBar from './components/DonationBar.vue';
+
+@Component({
+  components: {
+    GameCapture,
+    Player,
+    CommentatorsReader,
+    RunInfo,
+    Timer,
+    MediaBox,
+    DonationBar,
+  },
+})
+export default class extends Vue {
+  online = (nodecg.bundleConfig as Configschema).event.online;
+}
+</script>