neon wail by SAC

.gitignore

@@ -9,3 +9,5 @@ bower_components
 /.idea
 
 result.json
+
+.npmrc

.npmrc

@@ -1,2 +1,2 @@
-//npm.greensock.com/:_authToken=${GSAP_AUTH}
-@gsap:registry=https://npm.greensock.com
+//npm.greensock.com/:_authToken=0bbe3a1b-a289-4fca-9d3a-24acf8f3ebf4
+@gsap:registry=https://npm.greensock.com

src/graphics/break/break.html

@@ -13,7 +13,7 @@
                 <div class="circle"></div>
             </div>
             <div class="text-wrapper">
-                <img class="logo" src="assets/sac-logo.png">
+                <img class="logo" src="assets/nw/nw-large.png">
                 <div class="text">
                     <div>
                         <fitted-text class="flavor-text" text="Be right back!" id="main-flavor-text"></fitted-text>
@@ -41,6 +41,7 @@
                 </div>
             </div>
         </div>
+        <img class="presented-by" src="assets/nw/presented-by-sac.svg">
     </div>
     <div class="content-wrapper teams-wrapper layout horiz c-vert c-horiz">
         <div class="teams-layout">
@@ -69,7 +70,7 @@
 <div class="info-bar-container layout horiz c-horiz c-vert">
     <div class="info-bar layout horiz c-vert">
         <div class="info-bar-logo layout horiz c-vert">
-            <img src="assets/sac-logo-white.png">
+            <img src="assets/nw/nw-small.png">
         </div>
         <div class="info-bar-content-wrapper">
             <div class="info-bar-items layout horiz c-vert">

src/graphics/break/scripts/sceneSwitcher.ts

@@ -64,7 +64,13 @@ function hideMainScene(): gsap.core.Timeline {
             duration: 0.5,
             stagger: -0.1,
             opacity: 0
-        }, 'sceneHide');
+        }, 'sceneHide')
+        .to('.main-scene-wrapper > .presented-by', {
+            opacity: 0,
+            x: 30,
+            ease: 'power2.in',
+            duration: 0.5
+        }, 'sceneHide+=0.5')
 
     return tl;
 }
@@ -97,6 +103,16 @@ function showMainScene(): gsap.core.Timeline {
             duration: 0.75,
             ease: 'power2.out',
             clipPath: 'polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)'
+        }, 'sceneShow')
+        .fromTo('.main-scene-wrapper > .presented-by', {
+            opacity: 0,
+            x: 30,
+            immediateRender: false
+        }, {
+            opacity: 1,
+            x: 0,
+            ease: 'power2.out',
+            duration: 0.5
         }, 'sceneShow');
 
     return tl;

src/graphics/break/scripts/stages.ts

@@ -28,7 +28,7 @@ NodeCG.waitForReplicants(activeRound, assetPaths).then(() => {
 });
 
 function getStageUrl(stageName: string): string {
-    return assetPaths.value.stageImages[stageName] ?? 'assets/unknown-stage.png';
+    return assetPaths.value.stageImages[stageName] ?? 'assets/nw/unknown-stage.png';
 }
 
 async function updateGames(games: UpdatedGames, winners: Array<UpdatedWinner>): Promise<void> {

src/graphics/break/styles/break.scss

@@ -12,6 +12,7 @@ body {
     width: 1920px;
     height: 1080px;
     overflow: hidden;
+    position: relative;
 
     color: white;
 }
@@ -35,7 +36,7 @@ body {
 }
 
 .content-background {
-    background-image: url('/assets/background.png');
+    background-image: url('/assets/nw/bg.png');
     background-size: contain;
     z-index: -1;
 }

src/graphics/break/styles/infoBar.scss

@@ -18,10 +18,10 @@
         .info-bar-logo {
             height: 100%;
             background-color: $sac-accent;
-            padding: 0 25px;
+            padding: 0 35px;
 
             img {
-                height: 85%;
+                height: 100%;
             }
         }
 

src/graphics/break/styles/mainScene.scss

@@ -38,12 +38,12 @@
 
         .text-wrapper {
             position: absolute;
-            left: 275px;
+            left: 280px;
+            bottom: 156px;
             filter: $global-drop-shadow;
 
             .logo {
-                height: 360px;
-                margin-bottom: 20px;
+                height: 460px;
             }
 
             .text {
@@ -77,4 +77,11 @@
             font-weight: 300;
         }
     }
+
+    .presented-by {
+        position: absolute;
+        width: 280px;
+        top: 40px;
+        right: 60px;
+    }
 }

src/graphics/main/main.html

@@ -27,7 +27,7 @@
             <div class="separator"></div>
             <div class="layout horiz">
                 <div class="logo">
-                    <img src="assets/sac-logo-minimal-white.png">
+                    <img src="assets/nw/nw-icon.png">
                 </div>
             </div>
         </div>

src/graphics/main/styles/casters.scss

@@ -2,8 +2,8 @@
 
 .casters-container {
     position: absolute;
-    right: 50px;
-    bottom: 50px;
+    right: 30px;
+    bottom: 30px;
     filter: $global-drop-shadow;
 }
 

src/graphics/main/styles/scoreboard.scss

@@ -2,8 +2,8 @@
 
 .scoreboard-container {
     position: absolute;
-    top: 50px;
-    left: 50px;
+    top: 30px;
+    left: 30px;
     width: 370px;
 
     > .scoreboard-extra-container {
@@ -17,11 +17,11 @@
             .logo {
                 height: 38px;
                 background-color: $sac-accent;
-                padding: 0 6px;
+                padding: 0 12px;
                 margin: 0;
 
                 > img {
-                    height: 30px;
+                    height: 42px;
                     margin: 0;
                     transform: translate(-1px, -5px);
                 }

src/graphics/styles/constants.scss

@@ -1,12 +1,12 @@
 $pageWidth: 1920px;
 $pageHeight: 1080px;
 
-$sac-background-1: #00153E;
-$sac-background-2: #003C77;
-$sac-background-3: #004488;
+$sac-background-1: #011310;
+$sac-background-2: #022720;
+$sac-background-3: #033329;
 
-$sac-accent: #F00A4B;
+$sac-accent: rgb(214, 28, 218);
 
 $text-color: #E1E1E1;
 
-$global-drop-shadow: drop-shadow(0 0 5px rgba(22, 22, 22, 0.55)) drop-shadow(0 0 15px rgba(22, 22, 22, 0.3));
+$global-drop-shadow: drop-shadow(0 0 5px rgba(40, 40, 40, 0.55)) drop-shadow(0 0 15px rgba(40, 40, 40, 0.3));