diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index be3bcce4..d3802753 100644 --- a/src/css/states/main_menu.scss +++ b/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); diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 8f7d4a93..321db303 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -65,6 +65,18 @@ export class MainMenuState extends GameState {
${IS_DEMO ? `
${bannerHtml}
` : ""} + +
+ +
+

Wires

+ - + 9th October, 10 AM CEST +
+

+ The BIGGEST UPDATE in the games history! Click here for more information! +

+
@@ -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() {