From 6f0e8e150142e6102db9d770e5ff248642e2beda Mon Sep 17 00:00:00 2001
From: Tobias Messner <tobias.d.messner@gmail.com>
Date: Thu, 9 Mar 2023 18:44:48 +0100
Subject: [PATCH 1/2] Update some CSS defaults for Overwatch 2

---
 website/src/components/broadcast/IngameTeam.vue     |  2 +-
 website/src/components/broadcast/Middle.vue         |  7 ++-----
 .../src/components/broadcast/cams/CamOverlay.vue    | 13 ++++++-------
 .../src/components/broadcast/cams/TeamCamsGroup.vue |  2 +-
 4 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/website/src/components/broadcast/IngameTeam.vue b/website/src/components/broadcast/IngameTeam.vue
index 9f79a647..542ae5b8 100644
--- a/website/src/components/broadcast/IngameTeam.vue
+++ b/website/src/components/broadcast/IngameTeam.vue
@@ -163,7 +163,7 @@ export default {
             return resizedImage(this._theme, ["small_logo", "default_logo"], "h-80");
         },
         teamWidth() {
-            return this.width || 690;
+            return this.width || 567;
         },
         teamWidthCSS() {
             if (!this.teamWidth) return {};
diff --git a/website/src/components/broadcast/Middle.vue b/website/src/components/broadcast/Middle.vue
index 517a65f9..ce58abc7 100644
--- a/website/src/components/broadcast/Middle.vue
+++ b/website/src/components/broadcast/Middle.vue
@@ -9,10 +9,7 @@
 <script>
 export default {
     name: "Middle",
-    props: ["text"],
-    mounted() {
-        console.log("midd");
-    }
+    props: ["text"]
 };
 </script>
 
@@ -22,7 +19,7 @@ export default {
     width: 100%;
     display: flex;
     justify-content: center;
-    top: 8px;
+    top: -10px;
     pointer-events: none;
 }
 
diff --git a/website/src/components/broadcast/cams/CamOverlay.vue b/website/src/components/broadcast/cams/CamOverlay.vue
index 6f45ed32..a9edd44e 100644
--- a/website/src/components/broadcast/cams/CamOverlay.vue
+++ b/website/src/components/broadcast/cams/CamOverlay.vue
@@ -149,19 +149,18 @@ export default {
 <style scoped>
     .guest {
         position: absolute;
-        bottom: 123px;
-        left: 494px;
+        bottom: 222px;
+        left: 160px;
         height: 151px;
-        width: 220px;
-        transform: rotate(-4deg) skewX(-16.5deg);
-        border-radius: 4px;
+        width: 249px;
+        transform: rotate(-3.7deg) skewX(357deg);
+        border-radius: 8px;
         overflow: hidden;
         border-bottom: 6px solid transparent;
     }
     .guest >>> .caster-cam-wrapper {
-        transform: skewX(12.5deg) translateX(-15px) rotate(4deg) scale(1.1);
         height: 100%;
-        width: calc(100% + 30px);
+        width: 100%;
     }
     .cam-overlay {
         /* Margin: 0.5 */
diff --git a/website/src/components/broadcast/cams/TeamCamsGroup.vue b/website/src/components/broadcast/cams/TeamCamsGroup.vue
index 65f56988..40076fb0 100644
--- a/website/src/components/broadcast/cams/TeamCamsGroup.vue
+++ b/website/src/components/broadcast/cams/TeamCamsGroup.vue
@@ -64,7 +64,7 @@ export default {
         overflow: hidden;
     }
     .team-guests .guest {
-        width: calc((100% / 6) - 4px);
+        width: calc((100% / 5) - 4px);
         margin: 0 2px;
         --caster-width: 375px;
     }

From a4e2cdb11e2a533c1893ef40bf9caf516bb3bdc1 Mon Sep 17 00:00:00 2001
From: Solomon Cammack <solomon@solomon.eu.com>
Date: Mon, 17 Apr 2023 23:13:05 +0100
Subject: [PATCH 2/2] Add some screenshots and alter middle text to be smaller
 if there's no margin

---
 .../src/components/broadcast/IngameTeam.vue   |  4 +--
 website/src/components/broadcast/Middle.vue   | 27 +++++++++++++++----
 .../broadcast/roots/IngameOverlay.vue         | 13 +++++++--
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/website/src/components/broadcast/IngameTeam.vue b/website/src/components/broadcast/IngameTeam.vue
index 542ae5b8..df9defe5 100644
--- a/website/src/components/broadcast/IngameTeam.vue
+++ b/website/src/components/broadcast/IngameTeam.vue
@@ -338,13 +338,13 @@ export default {
         margin: 0 12px 0 0;
     }
     .team-name {
-        margin: 0 12px 0 20px;
+        margin: 0 12px 0 24px;
     }
     .ingame-team-holder.right .team-logo-holder {
         margin: 0 0 0 12px;
     }
     .ingame-team-holder.right .team-name {
-        margin: 0 20px 0 12px;
+        margin: 0 24px 0 12px;
     }
 
     .team-logo {
diff --git a/website/src/components/broadcast/Middle.vue b/website/src/components/broadcast/Middle.vue
index ce58abc7..d884e59d 100644
--- a/website/src/components/broadcast/Middle.vue
+++ b/website/src/components/broadcast/Middle.vue
@@ -1,15 +1,17 @@
 <template>
-        <div class="centerer">
-            <div class="middle-holder flex-center">
-                <div class="middle">{{ text }}</div>
+    <div class="centerer" :class="{'tiny': tiny}">
+        <div class="middle-holder flex-center">
+            <div class="middle">
+                <div class="industry-align">{{ text }}</div>
             </div>
         </div>
+    </div>
 </template>
 
 <script>
 export default {
     name: "Middle",
-    props: ["text"]
+    props: ["text", "tiny"]
 };
 </script>
 
@@ -19,8 +21,9 @@ export default {
     width: 100%;
     display: flex;
     justify-content: center;
-    top: -10px;
+    top: -12px;
     pointer-events: none;
+    transition: all .2s ease-in-out;
 }
 
 .middle-holder {
@@ -34,7 +37,10 @@ export default {
     color: white;
     padding: .0em .5em;
     font-size: 24px;
+    text-transform: uppercase;
     display: inline-flex;
+    border-radius: 4px;
+    transition: all .2s ease-in-out;
 }
 
 .mid-leave-active,
@@ -45,4 +51,15 @@ export default {
 
 .mid-enter-to .middle-holder, .mid-leave .middle-holder { width: 450px; }
 .mid-enter .middle-holder, .mid-leave-to .middle-holder { width: 0; }
+
+
+.centerer.tiny {
+    top: 3px;
+}
+.centerer.tiny .middle {
+    font-size: 20px;
+    padding: 0 .5em;
+    line-height: 1.2em;
+}
+
 </style>
diff --git a/website/src/components/broadcast/roots/IngameOverlay.vue b/website/src/components/broadcast/roots/IngameOverlay.vue
index a0182675..3965e052 100644
--- a/website/src/components/broadcast/roots/IngameOverlay.vue
+++ b/website/src/components/broadcast/roots/IngameOverlay.vue
@@ -8,9 +8,8 @@
           </transition-group>
 
           <transition name="mid" mode="out-in">
-              <Middle v-if="shouldShowMiddle" :text="middleText" :key="middleText" />
+              <Middle v-if="shouldShowMiddle" :text="middleText" :key="middleText" :tiny="broadcast.margin === 0" />
           </transition>
-
       </div>
       <transition name="fade" mode="out-in">
           {{ fadeSponsors }}
@@ -206,6 +205,16 @@ export default {
     /* Margin: 0.5 4v4 */
     /*background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/841443615557287956/ScreenShot_21-05-10_23-36-13-000.jpg");*/
     /*background-image: url(https://cdn.discordapp.com/attachments/485493459357007876/974757857188794378/unknown.png);*/
+
+    /* Overwatch 2 */
+    /* Margin: 0.0 */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097643734834872471/escort-0-active.jpg"); */
+
+    /* Margin: 0.5 */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641564580368414/escort-pre-countdown.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641565381480479/escort-active.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641565100453978/control-pre-countdown.jpg"); */
+    /* background-image: url("https://cdn.discordapp.com/attachments/485493459357007876/1097641564852994169/control-capped.jpg"); */
     background-size: contain;
     position: absolute;
     width: 100%;