diff --git a/gulp/image-resources.js b/gulp/image-resources.js index 09511bc3..b01ca400 100644 --- a/gulp/image-resources.js +++ b/gulp/image-resources.js @@ -2,7 +2,7 @@ const path = require("path"); // Globs for non-ui resources -const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico"]; +const nonImageResourcesGlobs = ["../res/**/*.woff2", "../res/*.ico", "../res/**/*.webm"]; // Globs for ui resources const imageResourcesGlobs = ["../res/**/*.png", "../res/**/*.svg", "../res/**/*.jpg"]; diff --git a/res/bg_render.webm b/res/bg_render.webm new file mode 100644 index 00000000..86ed678e Binary files /dev/null and b/res/bg_render.webm differ diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index 72a6fd66..4440394d 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -22,9 +22,11 @@ cursor: pointer; transition: all 0.12s ease-in-out; transition-property: opacity, transform; + opacity: 0.9; + @include S(margin-left, 5px); &:hover { - opacity: 0.9; + opacity: 0.8; transform: translateY(3px); } &.music { diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss index 914aaf70..bb009163 100644 --- a/src/css/states/main_menu.scss +++ b/src/css/states/main_menu.scss @@ -4,9 +4,38 @@ justify-content: center; flex-direction: column; - background: rgb(99, 212, 169) uiResource("main_menu/bg.noinline.jpg") center center / cover !important; + background: rgb(140, 165, 194) center center / cover !important; // background: $colorGreenBright !important; + .fullscreenBackgroundVideo { + z-index: -1; + position: fixed; + right: 50%; + bottom: 50%; + min-width: 100%; + min-height: 100%; + + opacity: 0; + display: none; + transform: translate(50%, 50%); + filter: blur(10px); + + $opacity: 0.2; + &.loaded { + display: block; + opacity: $opacity; + + @include InlineAnimation(0.1s ease-in-out) { + 0% { + opacity: 0; + } + 100% { + opacity: $opacity; + } + } + } + } + .logo { display: flex; flex-grow: 1; @@ -17,6 +46,17 @@ } } + .betaWarning { + @include S(width, 400px); + @include PlainText; + background: $colorRedBright; + @include S(padding, 10px); + @include S(border-radius, 4px); + color: #fff; + @include S(margin-bottom, 10px); + border: #{D(2px)} solid rgba(0, 10, 20, 0.1); + } + .mainContainer { @include S(margin-top, 40px); display: flex; @@ -28,24 +68,18 @@ @include S(border-radius, 4px); // border: #{D(2px)} solid rgba(0, 10, 20, 0.1); - .betaWarning { - @include S(width, 400px); - @include PlainText; - background: $colorRedBright; - @include S(padding, 10px); - @include S(border-radius, 4px); - color: #fff; - @include S(margin-bottom, 10px); - } - .playButton { @include SuperHeading; @include S(width, 130px); @include S(padding, 15px, 20px); letter-spacing: 0.3em !important; color: #fff; - background-color: #55585a; + background-color: $colorGreenBright; text-shadow: #{D(1px)} #{D(2px)} 0 rgba(0, 0, 0, 0.1); + transition: transform 0.12s ease-in-out; + &:hover { + transform: scale(1.02); + } } } diff --git a/src/js/core/config.js b/src/js/core/config.js index df38620d..175ca319 100644 --- a/src/js/core/config.js +++ b/src/js/core/config.js @@ -66,7 +66,7 @@ export const globalConfig = { debug: { /* dev:start */ - fastGameEnter: true, + fastGameEnter: false, noArtificialDelays: true, disableSavegameWrite: false, showEntityBounds: false, diff --git a/src/js/states/main_menu.js b/src/js/states/main_menu.js index 48f6e91f..78f2ae6f 100644 --- a/src/js/states/main_menu.js +++ b/src/js/states/main_menu.js @@ -9,15 +9,20 @@ export class MainMenuState extends GameState { getInnerHTML() { return ` + + + - + +
+ This game is still under development - Please report any issues! +
-
- This game is still in BETA - Please report any issues! -
@@ -53,6 +58,17 @@ export class MainMenuState extends GameState { if (G_IS_DEV && globalConfig.debug.fastGameEnter) { this.onPlayButtonClicked(); } + + // Initialize video + this.videoElement = this.htmlElement.querySelector("video"); + if (this.videoElement) { + this.videoElement.playbackRate = 0.9; + this.videoElement.addEventListener("canplay", () => { + if (this.videoElement) { + this.videoElement.classList.add("loaded"); + } + }); + } } onPlayButtonClicked() {