diff --git a/res/ui/icons/music_off.png b/res/ui/icons/music_off.png new file mode 100644 index 00000000..efe37dc4 Binary files /dev/null and b/res/ui/icons/music_off.png differ diff --git a/res/ui/icons/music_on.png b/res/ui/icons/music_on.png new file mode 100644 index 00000000..e1a679ca Binary files /dev/null and b/res/ui/icons/music_on.png differ diff --git a/res/ui/icons/settings.png b/res/ui/icons/settings.png new file mode 100644 index 00000000..14a16b06 Binary files /dev/null and b/res/ui/icons/settings.png differ diff --git a/res/ui/icons/sound_off.png b/res/ui/icons/sound_off.png new file mode 100644 index 00000000..d2275d1b Binary files /dev/null and b/res/ui/icons/sound_off.png differ diff --git a/res/ui/icons/sound_on.png b/res/ui/icons/sound_on.png new file mode 100644 index 00000000..ac0f88ce Binary files /dev/null and b/res/ui/icons/sound_on.png differ diff --git a/res/ui/loading.svg b/res/ui/loading.svg index e8f0d271..ea7dcbbd 100644 --- a/res/ui/loading.svg +++ b/res/ui/loading.svg @@ -1,6 +1,25 @@ - - - - + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss index 55e9ef4d..68f3d8cd 100644 --- a/src/css/ingame_hud/building_placer.scss +++ b/src/css/ingame_hud/building_placer.scss @@ -1,6 +1,6 @@ #ingame_HUD_building_placer { position: fixed; - @include S(top, 5q0px); + @include S(top, 50px); @include S(right, 10px); display: flex; diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss index 16ac3129..72a6fd66 100644 --- a/src/css/ingame_hud/game_menu.scss +++ b/src/css/ingame_hud/game_menu.scss @@ -1,37 +1,67 @@ #ingame_HUD_GameMenu { position: absolute; top: 0; - left: 50%; - display: grid; - transform: translateX(-50%); - @include S(grid-gap, 3px); + left: calc(50% - #{D(50px)}); + right: 0; + display: flex; grid-auto-flow: column; - button { - background: $colorGreenBright; + > .menuButtons { + position: relative; + display: flex; + flex-grow: 1; + @include S(padding, 5px, 4px); + justify-content: flex-end; + + > .button { + @include S(width, 30px); + @include S(height, 30px); + display: inline-block; + background: center center / 60% no-repeat; + pointer-events: all; + cursor: pointer; + transition: all 0.12s ease-in-out; + transition-property: opacity, transform; + + &:hover { + opacity: 0.9; + transform: translateY(3px); + } + &.music { + background-image: uiResource("icons/music_on.png"); + } + + &.sfx { + background-image: uiResource("icons/sound_on.png"); + } + + &.settings { + background-image: uiResource("icons/settings.png"); + } + } + } + + > button { @include PlainText; color: #fff; border-color: rgba(0, 0, 0, 0.1); @include S(padding, 5px, 5px, 5px); - transition: all 0.12s ease-in-out; - transition-property: opacity, transform; - - &:hover { - opacity: 0.9; - transform: translateY(3px); - } - @include IncreasedClickArea(10px); - @include ButtonText; border: #{D(2px)} solid rgba(0, 10, 20, 0.2); @include S(border-width, 2px); border-radius: 0 0 #{D(4px)} #{D(4px)}; @include S(border-top-width, 10px); @include S(padding-left, 30px); @include S(margin-top, -5px); - @include S(letter-spacing, 1px, $important: true); - background: center #{D(10px)} / #{D(20px)} no-repeat; + @include S(margin-right, 3px); + @include IncreasedClickArea(10px); + @include ButtonText; @include S(min-height, 47px); + transition: all 0.12s ease-in-out; + transition-property: opacity, transform; + display: inline-flex; + background: center #{D(10px)} / #{D(20px)} no-repeat; + background-color: $colorGreenBright; &[data-button-id="shop"] { background-color: rgb(141, 70, 223); @@ -42,13 +72,17 @@ background-image: uiResource("icons/statistics.png"); } + &:hover { + opacity: 0.9; + transform: translateY(3px); + } + .keybinding { border: 0; color: #fff; border-top-left-radius: 0; border-top-right-radius: 0; bottom: unset; - // background: rgba(0, 10, 20, 0.5); background: transparent; @include S(top, -5px); right: unset; diff --git a/src/js/game/hud/parts/game_menu.js b/src/js/game/hud/parts/game_menu.js index 105b0970..01b91bbb 100644 --- a/src/js/game/hud/parts/game_menu.js +++ b/src/js/game/hud/parts/game_menu.js @@ -33,5 +33,11 @@ export class HUDGameMenu extends BaseHUDPart { binding.appendLabelToElement(button); } }); + + const menuButtons = makeDiv(this.element, null, ["menuButtons"]); + + this.musicButton = makeDiv(menuButtons, null, ["button", "music"]); + this.sfxButton = makeDiv(menuButtons, null, ["button", "sfx"]); + this.settingsButton = makeDiv(menuButtons, null, ["button", "settings"]); } } diff --git a/src/js/game/upgrades.js b/src/js/game/upgrades.js index 0b354a0f..f9accb79 100644 --- a/src/js/game/upgrades.js +++ b/src/js/game/upgrades.js @@ -76,7 +76,7 @@ export const UPGRADES = { description: improvement => "Speed +" + Math.floor(improvement * 100.0) + "%", tiers: [ { - required: [{ shape: "RuRuRuRu", amount: 200 }], + required: [{ shape: "SuSuSuSu", amount: 200 }], improvement: 1, }, { @@ -99,7 +99,7 @@ export const UPGRADES = { description: improvement => "Speed +" + Math.floor(improvement * 100.0) + "%", tiers: [ { - required: [{ shape: "RuRuRuRu", amount: 200 }], + required: [{ shape: "WuWuWuWu", amount: 200 }], improvement: 1, }, {