Add 5x4 layout, Update webpack for GIF support

src/graphics/game-layout/5x4-1p.vue

@@ -0,0 +1,117 @@
+<template>
+  <div>
+    <!-- Game Captures -->
+    <game-capture
+      id="GameCapture1"
+      class="BorderLeft"
+      :style="{
+        left: '745px',
+        top: '0px',
+        width: '1175px',
+        height: '940px',
+      }"
+    />
+
+    <!-- Crowd Camera Capture -->
+    <div
+      v-if="!online && crowdCam"
+      id="CameraCaptureCrowd"
+      class="Capture BorderBottom"
+      :style="{
+        left: '0px',
+        top: '0px',
+        width: '745px',
+        height: '114px',
+      }"
+    />
+
+    <!-- Camera Captures -->
+    <div
+      id="CameraCapture1"
+      class="Capture"
+      :style="{
+        left: '0px',
+        top: !online && crowdCam ? '114px' : '0px',
+        width: '745px',
+        height: !online && crowdCam ? '262px' : '420px',
+      }"
+    />
+
+    <!-- General Run Info -->
+    <div
+      class="Fixed FlexColumn BorderBottom"
+      :style="{
+        left: '0px',
+        top: '420px',
+        width: '745px',
+        height: '340px',
+      }"
+    >
+      <player />
+      <commentators-reader />
+      <commentators-reader show-reader />
+
+      <!-- Run Game Info/Timer -->
+      <div
+        class="FlexColumn"
+        :style="{
+          flex: '1',
+          width: '100%',
+        }"
+      >
+        <run-info />
+        <timer />
+      </div>
+    </div>
+
+    <!-- Media Box -->
+    <media-box
+      :font-size="40"
+      :style="{
+        left: '0px',
+        top: '716px',
+        width: '745px',
+        height: '284px',
+      }"
+    />
+
+    <!-- Donation Bar -->
+    <donation-bar
+      class="BorderLeft"
+      :style="{
+        left: '745px',
+        top: '940px',
+        width: '1175px',
+        height: '60px',
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import MediaBox from '@shared/graphics/mediabox';
+import { Component, Vue } from 'vue-property-decorator';
+import { State } from 'vuex-class';
+import CommentatorsReader from './components/CommentatorsReader.vue';
+import DonationBar from './components/DonationBar.vue';
+import GameCapture from './components/GameCapture.vue';
+import Player from './components/Player.vue';
+import RunInfo from './components/RunInfo.vue';
+import Timer from './components/Timer.vue';
+
+@Component({
+  components: {
+    GameCapture,
+    Player,
+    CommentatorsReader,
+    RunInfo,
+    Timer,
+    MediaBox,
+    DonationBar,
+  },
+})
+export default class extends Vue {
+  @State((s) => s.gameLayouts.crowdCamera) readonly crowdCam!: boolean;
+  online = nodecg.bundleConfig.event.online;
+}
+</script>

src/graphics/game-layout/list.ts

@@ -22,6 +22,7 @@ import L_4x3_2p from './4x3-2p.vue';
 import L_4x3_3p from './4x3-3p.vue';
 import L_4x3_4p from './4x3-4p.vue';
 import L_5x2_1p from './5x2-1p.vue';
+import L_5x4_1p from './5x4-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';
@@ -37,5 +38,41 @@ 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_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 {
+  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_5x4_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';

src/graphics/game-layout/main.ts

@@ -64,6 +64,11 @@ const routes = [
     path: '/4x3-4p',
     component: List.L_4x3_4p,
   },
+  {
+    name: '5:4 1 Player',
+    path: '/5x4-1p',
+    component: List.L_5x4_1p,
+  },
   {
     name: '16:9 1 Player',
     path: '/16x9-1p',

src/graphics/omnibar/components/Total.vue

@@ -20,7 +20,7 @@
         }"
       >
         <img
-          src="./img/RetroCoin.png"
+          src="./img/CoinFaster.gif"
           :style="{
             height: '40px',
             'image-rendering': 'pixelated',
@@ -90,7 +90,7 @@
 
         >
           <img
-            src="./img/RetroCoin.png"
+            src="./img/CoinFaster.gif"
             :style="{
               height: '30px',
               'image-rendering': 'pixelated',

webpack.config.mjs

@@ -157,7 +157,7 @@ const config = (name) => {
           ],
         },
         {
-          test: /\.(png|svg)?$/,
+          test: /\.(png|svg|gif)?$/,
           type: 'asset/resource',
           generator: {
             filename: 'img/[name]-[contenthash][ext]',