Wires announcement

src/css/states/main_menu.scss

@@ -82,7 +82,8 @@
         display: grid;
         grid-template-columns: 1fr;
 
-        &.demo {
+        &.demo,
+        &.noDemo {
             grid-template-columns: 1fr 1fr;
         }
 
@@ -183,6 +184,82 @@
             @include S(margin-bottom, 10px);
         }
 
+        .wiresAnnouncement {
+            flex-grow: 1;
+            background: rgb(32, 187, 166);
+            @include S(padding, 15px);
+
+            @include S(border-radius, 10px);
+            pointer-events: all;
+            cursor: pointer;
+
+            &:hover {
+                opacity: 0.9;
+            }
+
+            .announcementHeader {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                grid-template-rows: auto auto;
+                align-items: start;
+                @include S(margin-bottom, 5px);
+
+                h3 {
+                    @include PlainText;
+                    font-weight: bold;
+                    text-transform: uppercase;
+                    @include S(margin-bottom, 5px);
+
+                    grid-column: 1 / 2;
+                    grid-row: 1 / 3;
+                    margin: 0;
+                    color: #fff;
+                    font-weight: 300;
+                    @include S(font-size, 35px);
+                    @include S(line-height, 30px);
+                }
+
+                .timer {
+                    @include Heading;
+                    justify-self: end;
+                    color: #fff;
+                    align-self: end;
+                    margin: 0;
+                    grid-row: 1 / 2;
+                }
+
+                .timerDay {
+                    grid-row: 2 / 3;
+                    justify-self: end;
+                    align-self: start;
+                    @include SuperSmallText;
+                    color: rgba(#fff, 0.7);
+                }
+            }
+
+            display: flex;
+            flex-direction: column;
+
+            p {
+                color: rgba(#fff, 0.8);
+                @include Text;
+                strong {
+                    font-weight: bold;
+                }
+                @include S(margin-bottom, 5px);
+            }
+
+            a {
+                color: #fff;
+                font-weight: bold;
+            }
+
+            button {
+                background: #fff;
+                color: #333538;
+            }
+        }
+
         .contest {
             flex-grow: 1;
             background: rgb(32, 187, 166);

src/js/states/main_menu.js

@@ -65,6 +65,18 @@ export class MainMenuState extends GameState {
 
                 <div class="sideContainer">
                     ${IS_DEMO ? `<div class="standaloneBanner">${bannerHtml}</div>` : ""}
+
+                    <div class="wiresAnnouncement">
+                        
+                            <div class="announcementHeader">
+                                <h3>Wires</h3>
+                                <span class="timer">-</span>
+                                <span class="timerDay">9th October, 10 AM CEST</span>
+                            </div>
+                            <p>
+                            The BIGGEST UPDATE in the games history! Click <strong>here</strong> for more information! 
+                        </p>
+                    </div>
                 </div>
 
                 <div class="mainContainer">
@@ -260,6 +272,28 @@ export class MainMenuState extends GameState {
             () => this.app.platformWrapper.openExternalLink("https://tobspr.com"),
             { preventClick: true }
         );
+
+        const wiresAnnouncement = qs(".wiresAnnouncement");
+        if (wiresAnnouncement) {
+            this.trackClicks(wiresAnnouncement, () => {
+                this.app.analytics.trackUiClick("main_menu_wires");
+                this.app.platformWrapper.openExternalLink("https://shapez.io/wires");
+            });
+        }
+    }
+
+    onRender() {
+        const now = new Date();
+        const releaseDate = Date.parse("09 Oct 2020 10:00:00 UTC+2");
+        const seconds = Math.max(0, Math.floor((+releaseDate - +now) / 1000.0));
+
+        const secondsLeft = seconds % 60;
+        const minutesLeft = Math.floor(seconds / 60) % 60;
+        const hoursLeft = Math.floor(seconds / 3600) % 24;
+        const daysLeft = Math.floor(seconds / (24 * 3600));
+
+        const text = `${daysLeft}d ${hoursLeft}h ${minutesLeft}m ${secondsLeft}s`;
+        this.htmlElement.querySelector(".wiresAnnouncement .timer").innerText = text;
     }
 
     renderMainMenu() {