diff --git a/res/logo_demo.png b/res/logo_demo.png index ab7f3057..9ea6ee62 100644 Binary files a/res/logo_demo.png and b/res/logo_demo.png differ diff --git a/res/ui/main_menu/discord.png b/res/ui/main_menu/discord.png deleted file mode 100644 index db0e70d5..00000000 Binary files a/res/ui/main_menu/discord.png and /dev/null differ diff --git a/res/ui/main_menu/discord.svg b/res/ui/main_menu/discord.svg new file mode 100644 index 00000000..b2352fd9 --- /dev/null +++ b/res/ui/main_menu/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/ui/main_menu/github.svg b/res/ui/main_menu/github.svg new file mode 100644 index 00000000..79a2756d --- /dev/null +++ b/res/ui/main_menu/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/ui/main_menu/steam.svg b/res/ui/main_menu/steam.svg new file mode 100644 index 00000000..9f6e00f2 --- /dev/null +++ b/res/ui/main_menu/steam.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/res/ui/main_menu/twitter.svg b/res/ui/main_menu/twitter.svg new file mode 100644 index 00000000..047a527c --- /dev/null +++ b/res/ui/main_menu/twitter.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index f0ca2644..e4a6c007 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -1,33 +1,36 @@ #state_MainMenuState { - display: flex; + display: grid; align-items: center; justify-content: center; - flex-direction: column; + grid-template-rows: D(95px) 1fr D(100px); + grid-template-columns: 1fr; // background: #aaacb4 center center / cover !important; background: #bbc2cf center center / cover !important; .topButtons { position: absolute; - @include S(top, 20px); - @include S(right, 20px); - display: grid; - grid-auto-flow: column; - @include S(grid-gap, 15px); + @include S(top, 25px); + @include S(right, 25px); + display: flex; + flex-direction: row; + z-index: 20; + @include S(gap, 9px); .settingsButton, .exitAppButton, .languageChoose { - @include S(width, 25px); - @include S(height, 25px); + @include S(width, 35px); + @include S(height, 35px); pointer-events: all; + border-radius: 50%; + box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); + background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat; + cursor: pointer; - & { - background: uiResource("icons/main_menu_settings.png") center center / contain no-repeat; - } transition: opacity 0.12s ease-in-out; @include IncreasedClickArea(2px); - opacity: 0.7; + opacity: 0.85; &:hover { opacity: 1; } @@ -35,23 +38,35 @@ .exitAppButton { background-image: uiResource("icons/main_menu_exit.png"); - background-size: 90%; } .languageChoose { - @include S(border-radius, 8px); - border: solid #222428; - @include S(border-width, 2px); + background: rgba(#fff, 1) center center / contain no-repeat; + border-radius: 50%; background-color: #222428 !important; background-size: contain !important; background-position: center center !important; opacity: 0.8; + transform: scale(0.98); } } + &::before, + &::after { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: uiResource("vignette.lossless.png") center center / cover no-repeat; + pointer-events: none; + z-index: 2; + content: ""; + } + .fullscreenBackgroundVideo { // display: none !important; - z-index: -1; + z-index: 1; position: fixed; right: 50%; bottom: 50%; @@ -61,7 +76,7 @@ opacity: 0; display: none; transform: translate(50%, 50%); - filter: blur(D(15px)); + filter: blur(D(10px)); $opacity: 0.4; &.loaded { @@ -80,14 +95,16 @@ } .mainWrapper { - @include S(padding, 0, 10px); @include S(margin-top, 15px); align-items: start; justify-items: center; - + align-self: center; + justify-self: center; @include S(grid-column-gap, 10px); display: grid; + position: relative; + z-index: 10; grid-template-rows: D(31px) 1fr D(93px); &[data-columns="1"] { @@ -127,9 +144,10 @@ h3 { @include Heading; font-weight: bold; - @include S(margin-bottom, 10px); + @include S(margin-bottom, 20px); text-align: center; - color: #44484f; + color: #222; + text-shadow: 0 D(1px) D(5px) rgba(#fff, 0.7); } p { @@ -171,7 +189,7 @@ @include S(border-radius, $globalBorderRadius); color: transparent; - box-shadow: 0 D(3px) D(10px) rgba(96, 163, 136, 0.5); + box-shadow: 0 D(3px) D(7px) rgba(#000, 0.3); &:hover { opacity: 0.9; } @@ -321,13 +339,14 @@ flex-grow: 1; align-items: center; justify-content: center; + z-index: 20; flex-direction: column; - @include S(padding-top, 20px); + @include S(padding-top, 0px); img { - @include S(width, 710px / 2.5); - @include S(height, 180px / 2.5); + @include S(width, 710px / 3); + @include S(height, 180px / 3); } position: relative; @include S(left, -8px); @@ -547,10 +566,9 @@ justify-content: center; flex-direction: column; background: rgba(#fff, 0.9); - @include S(padding, 15px); @include S(border-radius, $globalBorderRadius); height: 100%; - box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2); + box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2); width: 100%; position: relative; align-self: center; @@ -558,17 +576,88 @@ grid-row: 1 / 4; grid-column: 1 / 2; - // &[data-savegames="0"] { - // grid-row: 2 / 3; - // } - + overflow: hidden; box-sizing: border-box; + &[data-savegames="0"] .buttons .outer { + grid-template-rows: 1fr 1fr; + } + .buttons { - display: flex; - flex-direction: column; - align-items: center; + display: grid; + grid-template-columns: auto auto; + grid-template-rows: 1fr; + // flex-direction: column; + // align-items: center; width: 100%; + background: rgba(0, 20, 40, 0.05); + + @include S(padding, 10px); + @include S(grid-gap, 10px); + max-width: 100%; + box-sizing: border-box; + + .playButton, + .continueButton { + @include SuperHeading; + width: 100%; + @include S(padding, 15px, 10px); + letter-spacing: 0.1em !important; + @include IncreasedClickArea(0px); + box-sizing: border-box; + font-weight: bold; + color: #fff; + background-color: $colorGreenBright; + transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out; + + grid-column: 1 / 2; + min-width: auto; + grid-row: 1 / 1; + + &:hover { + background-color: darken($colorGreenBright, 4); + opacity: 1; + } + + &.continueButton { + @include Heading; + } + } + + .outer { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr 1fr; + height: 100%; + + grid-column: 2 / 3; + grid-row: 1 / 1; + min-width: auto; + + @include S(grid-gap, 5px); + width: 100%; + + > button { + @include S(padding, 3px, 6px); + width: 100%; + white-space: nowrap; + margin: 0 !important; + box-sizing: border-box; + } + + .importButton { + @include IncreasedClickArea(0px); + } + + .newGameButton { + @include IncreasedClickArea(0px); + } + + .modsButton { + @include IncreasedClickArea(0px); + background-color: $modsColor !important; + } + } } .modeButtons { @@ -578,220 +667,242 @@ align-items: start; height: 100%; width: 100%; - box-sizing: border-box; } - .browserWarning { - @include S(margin-bottom, 10px); - background-color: $colorRedBright; - @include PlainText; - color: #fff; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 5px); - @include S(width, 300px); - } - - .playButton, - .continueButton { - @include SuperHeading; - @include S(min-width, 130px); - @include S(padding, 15px, 20px); - letter-spacing: 0.2em !important; - @include IncreasedClickArea(0px); - font-weight: bold; - color: #fff; - background-color: $colorGreenBright; - transition: transform 0.12s ease-in-out, background-color 0.12s ease-in-out; - - &:hover { - background-color: darken($colorGreenBright, 4); - opacity: 1; - } - - &.continueButton { - @include Heading; - } - } - - .outer { - @include S(margin-top, 15px); - display: grid; - grid-auto-flow: column; - grid-auto-columns: 1fr; - - @include S(grid-gap, 5px); - width: 100%; - - > button { - @include S(padding, 3px, 6px); - } - } - - .importButton { - @include IncreasedClickArea(0px); - } - - .newGameButton { - @include IncreasedClickArea(0px); - } - - .modsButton { - @include IncreasedClickArea(0px); - - background-position: center center; - background-size: D(15px); - background-color: $modsColor !important; - background-repeat: no-repeat; - } - - .savegames { - @include S(max-height, 105px); - overflow-y: auto; - @include S(min-width, 230px); - width: 100%; + .steamSso { + cursor: default; pointer-events: all; - @include S(padding-right, 5px); - margin-right: D(-5px); + display: inline-flex; + @include S(padding, 10px); + color: #000; + flex-direction: column; + line-height: 1em; + @include S(gap, 3px); + position: relative; + background: rgba(0, 20, 40, 0.05); + width: 100%; + box-sizing: border-box; + margin-top: auto; display: grid; - grid-auto-flow: row; - @include S(grid-gap, 5px); - @include S(margin-top, 10px); + grid-template-columns: 1fr auto; + align-items: center; - .savegame { - background: #eee; - @include S(border-radius, $globalBorderRadius); - @include S(padding, 5px); + .description { + @include SuperSmallText; + color: rgba(0, 10, 20, 0.5); + } + // &:hover { + // .tooltip { + // opacity: 1; + // } + // } + + a.ssoSignIn { + background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat; + width: 100%; + box-sizing: border-box; + + @include S(height, 19px); + @include S(width, 110px); + + display: inline-flex; + @include S(border-radius, $globalBorderRadius * 0.5); + overflow: hidden; + text-indent: -999em; + &:hover { + opacity: 0.95; + } + + box-shadow: 0 D(2px) D(4px) rgba(#000, 0.3); + } + + a.ssoSignOut { + width: 100%; + background: #171a23; + color: #fff !important; + display: flex; + align-items: center; + box-sizing: border-box; + justify-content: center; + @include PlainText; + text-transform: uppercase; + + @include S(border-radius, $globalBorderRadius * 0.5); + box-shadow: 0 D(1px) D(4px) rgba(#000, 0.3); + @include S(padding, 2px, 9px); + &:hover { + opacity: 0.95; + } + } + } + + .savegamesMount { + width: 100%; + display: flex; + flex-grow: 1; + flex-direction: column; + @include S(padding, 10px); + box-sizing: border-box; + + .savegamesNone { + align-items: center; + justify-content: center; + display: flex; + @include PlainText; + flex-grow: 1; + text-align: center; + @include S(padding, 0, 20px); + opacity: 0.5; + } + + .savegames { + @include S(max-height, 105px); + overflow-y: auto; + @include S(min-width, 230px); + width: 100%; + pointer-events: all; + @include S(padding-right, 5px); + margin-right: D(-5px); display: grid; - grid-template-columns: 1fr 1fr auto auto; - grid-template-rows: auto auto; - @include S(grid-column-gap, 4px); - @include S(grid-row-gap, 1px); + grid-auto-flow: row; + @include S(grid-gap, 5px); - .playtime { - grid-column: 2 / 3; - grid-row: 2 / 3; - @include SuperSmallText; - opacity: 0.5; - } + .savegame { + background: #eee; + @include S(border-radius, $globalBorderRadius); + @include S(padding, 5px); + display: grid; + grid-template-columns: 1fr 1fr auto auto; + grid-template-rows: auto auto; + @include S(grid-column-gap, 4px); + @include S(grid-row-gap, 1px); - .level { - grid-column: 1 / 2; - grid-row: 2 / 3; - @include SuperSmallText; - opacity: 0.5; - } + .playtime { + grid-column: 2 / 3; + grid-row: 2 / 3; + @include SuperSmallText; + opacity: 0.5; + } - .name { - grid-column: 1 / 3; - grid-row: 1 / 2; - @include PlainText; - display: inline-flex; - align-items: center; + .level { + grid-column: 1 / 2; + grid-row: 2 / 3; + @include SuperSmallText; + opacity: 0.5; + } - > span { + .name { + grid-column: 1 / 3; + grid-row: 1 / 2; + @include PlainText; display: inline-flex; - @include S(max-width, 140px); - overflow: hidden; - } - } + align-items: center; - button.resumeGame, - button.downloadGame, - button.deleteGame, - button.renameGame { - padding: 0; - align-self: center; - justify-self: center; - @include IncreasedClickArea(0px); - background: #44484a center center / 40% no-repeat; - } - - button.resumeGame { - background-color: #44484a; - & { - background-image: uiResource("icons/play.png"); - } - } - - button.downloadGame { - grid-column: 3 / 4; - grid-row: 1 / 2; - background-color: transparent; - - & { - background-image: uiResource("icons/download.png"); - } - @include S(width, 15px); - @include IncreasedClickArea(0px); - @include S(height, 15px); - background-size: 80%; - align-self: start; - border-radius: 0; - opacity: 0.4; - - &:hover { - opacity: 0.5; + > span { + display: inline-flex; + @include S(max-width, 140px); + overflow: hidden; + } } - @include DarkThemeInvert; - } - - button.deleteGame { - grid-column: 3 / 4; - grid-row: 2 / 3; - background-color: transparent; - @include IncreasedClickArea(0px); - - & { - background-image: uiResource("icons/delete.png"); - } - @include S(width, 15px); - @include S(height, 15px); - align-self: end; - background-size: 80%; - border-radius: 0; - opacity: 0.4; - - &:hover { - opacity: 0.5; + button.resumeGame, + button.downloadGame, + button.deleteGame, + button.renameGame { + padding: 0; + align-self: center; + justify-self: center; + @include IncreasedClickArea(0px); + background: #44484a center center / 40% no-repeat; } - @include DarkThemeInvert; - } - - button.renameGame { - background-color: transparent; - @include IncreasedClickArea(2px); - - & { - background-image: uiResource("icons/edit_key.png"); - } - @include S(width, 10px); - @include S(height, 10px); - align-self: center; - justify-self: center; - border-radius: 0; - background-size: 90%; - opacity: 0.4; - @include S(margin-left, 4px); - - &:hover { - opacity: 0.5; + button.resumeGame { + background-color: #44484a; + & { + background-image: uiResource("icons/play.png"); + } } - @include DarkThemeInvert; - } + button.downloadGame { + grid-column: 3 / 4; + grid-row: 1 / 2; + background-color: transparent; - button.resumeGame { - grid-column: 4 / 5; - grid-row: 1 / 3; - margin: 0; - @include S(width, 32px); - height: 100%; - @include S(margin-left, 4px); + & { + background-image: uiResource("icons/download.png"); + } + @include S(width, 15px); + @include IncreasedClickArea(0px); + @include S(height, 15px); + background-size: 80%; + align-self: start; + border-radius: 0; + opacity: 0.4; - @include DarkThemeOverride { - background-color: lighten($darkModeControlsBackground, 10); + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.deleteGame { + grid-column: 3 / 4; + grid-row: 2 / 3; + background-color: transparent; + @include IncreasedClickArea(0px); + + & { + background-image: uiResource("icons/delete.png"); + } + @include S(width, 15px); + @include S(height, 15px); + align-self: end; + background-size: 80%; + border-radius: 0; + opacity: 0.4; + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.renameGame { + background-color: transparent; + @include IncreasedClickArea(2px); + + & { + background-image: uiResource("icons/edit_key.png"); + } + @include S(width, 10px); + @include S(height, 10px); + align-self: center; + justify-self: center; + border-radius: 0; + background-size: 90%; + opacity: 0.4; + @include S(margin-left, 4px); + + &:hover { + opacity: 0.5; + } + + @include DarkThemeInvert; + } + + button.resumeGame { + grid-column: 4 / 5; + grid-row: 1 / 3; + margin: 0; + @include S(width, 32px); + height: 100%; + @include S(margin-left, 4px); + + @include DarkThemeOverride { + background-color: lighten($darkModeControlsBackground, 10); + } } } } @@ -819,15 +930,93 @@ } } + .socialLinks { + position: fixed; + z-index: 100; + display: flex; + flex-direction: row; + @include S(gap, 9px); + @include S(top, 25px); + @include S(left, 25px); + + > .boxLink { + pointer-events: all; + display: flex; + flex-direction: column; + align-items: center; + position: relative; + cursor: pointer; + @include S(gap, 3px); + @include S(width, 35px); + + .label { + @include SuperSmallText; + font-weight: bold; + box-sizing: border-box; + text-transform: uppercase; + opacity: 0; + transition: opacity 0.12s ease-in-out; + } + + &:hover { + .label { + opacity: 1; + .thirdpartyLogo { + background-color: #fff; + } + } + } + + .thirdpartyLogo { + display: inline-flex; + @include S(width, 35px); + @include S(height, 35px); + background: rgba(#fff, 0.9) center center / contain no-repeat; + border-radius: 50%; + box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1); + + transition: background-color 0.12s ease-in-out; + + &.githubLogo { + background-image: uiResource("main_menu/github.png"); + background-size: 66%; + background-position: 54% 50%; + } + + &.discordLogo { + background-image: uiResource("main_menu/discord.svg"); + background-size: 66%; + background-position: 50% 53%; + } + + &.redditLogo { + background-image: uiResource("main_menu/reddit.svg"); + background-size: 65%; + } + &.twitterLogo { + background-image: uiResource("main_menu/twitter.svg"); + background-size: 60%; + background-position: 60% 58%; + } + &.steamLogo { + background-image: uiResource("main_menu/steam.svg"); + background-size: 105%; + } + } + } + } + .footer { display: flex; - flex-grow: 1; justify-content: center; - align-items: flex-end; + align-self: end; + align-items: center; + position: relative; + z-index: 20; width: 100%; - @include S(padding, 10px); box-sizing: border-box; - @include S(grid-gap, 4px); + @include S(gap, 30px); + @include S(padding, 15px, 25px, 15px, 20px); &.wegameDisclaimer { @include SuperSmallText; @@ -864,178 +1053,44 @@ .author { margin-left: auto; + display: flex; + @include S(width, 110px); + justify-content: flex-end; a { &:hover img { opacity: 0.85; } + position: relative; display: flex; align-items: center; justify-content: center; img { transition: opacity 0.12s ease-in-out; - @include S(width, 82px); - @include S(height, 25px); + @include S(width, 82px * 0.8); + @include S(height, 25px * 0.8); filter: invert(100%); opacity: 0.75; } } } - @include S(padding, 15px); - - $linkBg: rgba(#fdfdff, 0.5); - $linkBgHover: rgba(#fff, 0.7); - $linkColor: #55586a; - - > .boxLink { - display: grid; - align-items: center; - grid-template-columns: 1fr auto; - - justify-content: center; - backdrop-filter: blur(5px); - background: $linkBg; - - @include S(padding, 5px); - @include S(padding-left, 10px); - @include S(border-radius, $globalBorderRadius); - @include SuperSmallText(); - - font-weight: bold; - box-sizing: border-box; - text-transform: uppercase; - color: $linkColor; - - transition: background-color 0.12s ease-in-out; - pointer-events: all; - @include S(width, 120px); - @include S(height, 60px); - - cursor: pointer; - &:hover { - background-color: $linkBgHover; - } - - .thirdpartyLogo { - display: inline-block; - @include S(width, 50px); - @include S(height, 50px); - background: center center / 80% no-repeat; - &.githubLogo { - background-image: uiResource("main_menu/github.png"); - } - &.discordLogo { - background-image: uiResource("main_menu/discord.png"); - background-size: 95%; - } - } - } - - > .steamSso { - background: rgba($colorBlueBright, 0.9); - &:hover { - background: rgba($colorBlueBright, 0.9); - } - // @include SuperSmallText; - // color: #fff; - // @include S(max-width, 150px); - // @include S(border-radius, $globalBorderRadius); - // border-top-left-radius: 0; - // border-top-right-radius: 0; - @include S(padding, 5px); - // box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1); - // color: #000; + .footerGrow { + flex-grow: 1; display: flex; - color: #222428; - flex-direction: column; - - @include S(font-size, 9px); - - a.ssoSignIn { - background: #171a23 uiResource("steam_signin.png") center center / contain no-repeat; - width: 100%; - box-sizing: border-box; - @include S(height, 16px); - @include S(min-height, 16px); - - display: inline-flex; - @include S(border-radius, $globalBorderRadius * 0.5); - @include S(margin-top, 3px); - overflow: hidden; - text-indent: -999em; - margin-top: auto; - &:hover { - opacity: 0.95; - } - } - a.ssoSignOut { - width: 100%; - background: #171a23; - color: #fff !important; - display: flex; - align-items: center; - box-sizing: border-box; - justify-content: center; - margin-top: auto; - @include S(border-radius, $globalBorderRadius * 0.5); - @include S(padding, 1px, 3px); - &:hover { - opacity: 0.95; - } - } - - @include DarkThemeOverride { - color: #333539; - a { - color: #111; - } - } - } - - > .sidelinks { - display: grid; - align-items: flex-start; + align-items: center; justify-content: flex-start; - grid-template-rows: 1fr 1fr 1fr; - @include S(grid-gap, 3px); - @include S(height, 60px); - + @include S(gap, 15px); > a { - color: $linkColor; - background: $linkBg; - height: 100%; - - &:hover { - background-color: $linkBgHover; - } @include SuperSmallText; - text-transform: uppercase; - width: 100%; - @include S(padding, 2px, 10px); - display: flex; - align-items: center; - justify-content: flex-start; - - @include S(padding-left, 25px); - box-sizing: border-box; + @include S(padding, 2px); font-weight: bold; - background-position: #{D(5px)} center; - background-size: #{D(12px)}; - background-repeat: no-repeat; - @include S(border-radius, $globalBorderRadius); - - transition: background-color 0.12s ease-in-out; - - &.redditLink { - background-image: uiResource("main_menu/reddit.svg"); - } - &.changelog { - background-image: uiResource("main_menu/changelog.svg"); - } - &.helpTranslate { - background-image: uiResource("main_menu/translate.svg"); + color: #000; + opacity: 0.6; + transition: opacity 0.12s ease-in-out; + &:hover { + opacity: 1; } } } diff --git a/src/js/core/config.js b/src/js/core/config.js index a7e27103..51820024 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -19,6 +19,7 @@ export const THIRDPARTY_URLS = { reddit: "https://www.reddit.com/r/shapezio", shapeViewer: "https://viewer.shapez.io", + twitter: "https://twitter.com/tobspr", privacyPolicy: "https://tobspr.io/privacy.html", standaloneCampaignLink: G_IS_STANDALONE diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index ea215282..efadf2f8 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -127,8 +127,8 @@ export class MainMenuState extends GameState { @@ -136,6 +136,31 @@ export class MainMenuState extends GameState {
+
+ ${ + G_IS_STANDALONE || WEB_STEAM_SSO_AUTHENTICATED + ? "" + : `
+ ${T.mainMenu.playFullVersionV2} + Sign in +
` + } + ${ + WEB_STEAM_SSO_AUTHENTICATED + ? ` +
+ ${T.mainMenu.playingFullVersion} + ${T.mainMenu.logout} + +
+ ` + : "" + } + + +
@@ -225,32 +250,22 @@ export class MainMenuState extends GameState {
+