Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

UI Improvements

This commit is contained in:
tobspr 2020-05-13 12:57:18 +02:00
parent 6429f67c7b
commit 6c638f853c
15 changed files with 115 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/ui/toolbar_bg.lossless.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
res/ui/vignette.lossless.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

4
src/css/common.scss
View File

@ -563,7 +563,7 @@ canvas {
.keybinding {
background: #fff;
text-transform: uppercase;
@include S(padding, 2px, 1px, 2px);
@include S(padding, 1.5px, 3px, 2px);
@include PlainText;
@include BorderRadius(2px);
&,
@ -589,7 +589,7 @@ canvas {
box-sizing: border-box;
@include S(height, 12px);
overflow: hidden;
border: #{D(1px)} solid $accentColorDark;
border: #{D(0px)} solid $accentColorDark;
.keybinding_space {
@include S(font-size, 17px);

47
src/css/ingame_hud/building_placer.scss
View File

@ -1,30 +1,53 @@
#ingame_HUD_building_placer {
position: fixed;
@include S(top, 50px);
@include S(top, 40px);
@include S(right, 10px);
display: flex;
flex-direction: column;
display: grid;
@include S(padding, 6px);
justify-content: center;
align-items: flex-start;
@include S(border-radius, 4px);
background: rgba(#333, 0.9);
@include S(width, 200px);
@include S(border-radius, 2px);
@include S(width, 240px);
@include S(grid-column-gap, 5px);
background: rgba(#333438, 0.8);
grid-template-columns: 1fr auto;
grid-template-rows: auto 1fr;
.buildingLabel {
@include PlainText;
@include S(margin-bottom, 2px);
color: #fff;
text-transform: uppercase;
@include S(margin-bottom, 2px);
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.instructions,
.description {
color: #fff;
opacity: 0.8;
color: #bbb;
@include SuperSmallText;
grid-column: 1 / 2;
grid-row: 2 / 3;
display: grid;
grid-template-rows: 1fr auto;
strong {
color: #fff;
}
}
.hotkey {
color: lighten($colorGreenBright, 10);
font-weight: bold;
}
.buildingImage {
grid-column: 2 / 3;
grid-row: 1 / 3;
@include S(width, 100px);
@include S(height, 100px);
background: top left / 100% 100% no-repeat;
@include S(border-radius, 2px);
}
@include StyleBelowWidth(700px) {

99
src/css/ingame_hud/buildings_toolbar.scss
View File

@ -7,14 +7,14 @@
$toolbarBg: rgba($accentColorBright, 0.9);
display: flex;
flex-direction: column;
background-color: $toolbarBg;
// border: $ingameHudBorder;
background-color: rgb(255, 255, 255);
background: transparent;
border-bottom-width: 0;
@include S(border-radius, 4px, 4px, 0, 0);
// box-shadow: 0 0 0 #{D(2px)} rgba(darken($toolbarBg, 20), 0.5);
transition: transform 0.12s ease-in-out;
background: uiResource("toolbar_bg.lossless.png") center center / 100% 100% no-repeat;
@include S(padding, 20px, 100px, 0);
&:not(.visible) {
transform: translateX(-50%) translateY(#{D(100px)});
}
@ -32,7 +32,7 @@
align-items: center;
justify-content: center;
@include S(padding, 5px);
@include S(padding-bottom, 7px);
@include S(padding-bottom, 1px);
$buildingIconSize: 32px;
&:not(.unlocked) {
@ -59,7 +59,7 @@
}
&.selected {
background: rgb(173, 221, 253) !important;
background: rgba(74, 163, 223, 0.3) !important;
transform: scale(1.05);
.keybinding {
color: #111;
@ -67,7 +67,7 @@
}
pointer-events: all;
transition: all 0.1s ease-in-out;
transition: all 0.05s ease-in-out;
transition-property: background-color, transform;
&.unlocked:hover {
background: rgba($accentColorDark, 0.1);
@ -89,15 +89,6 @@
text-transform: uppercase;
}
.keybinding {
// position: relative;
right: 50%;
transform: translateX(50%);
background: transparent;
border: 0;
@include S(bottom, 2pxpx);
}
&[data-tilewidth="2"] {
.iconWrap {
@include S(width, 2 * $buildingIconSize);
@ -107,80 +98,6 @@
&:last-child {
border: none;
}
.tooltip {
position: absolute;
pointer-events: none;
background: #333;
@include S(padding, 7px);
bottom: calc(100% + #{D(10px)});
left: 50%;
transform: translateX(-50%);
box-sizing: content-box;
@include SuperSmallText;
@include S(width, 200px);
@include S(border-radius, 4px);
box-shadow: #{D(1px)} #{D(1px)} 0 0 rgba(0, 10, 25, 0.2);
display: none;
z-index: 9999;
flex-direction: column;
.title {
color: #fff;
@include PlainText;
text-transform: uppercase;
margin-bottom: 5px;
}
.desc {
color: #aaa;
@include SuperSmallText;
margin-bottom: 10px;
strong {
color: #fff;
}
}
.tutorialImage {
display: inline-block;
@include S(width, 200px);
@include S(height, 200px);
@include S(border-radius, 4px);
background-size: contain;
background-repeat: no-repeat;
}
&::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #333;
@include S(border-width, 5px);
transform: translateX(-50%);
}
}
&:hover .tooltip {
display: flex;
@include InlineAnimation(0.5s ease-in-out) {
90% {
opacity: 0;
}
0% {
transform: translate(-50%, 5%) scale(0.9);
opacity: 0;
}
}
}
}
}
}

2
src/css/ingame_hud/keybindings_overlay.scss
View File

@ -38,6 +38,7 @@
background: #fff uiResource("icons/mouse_left.png") center center / 85% no-repeat;
}
}
label {
color: $accentColorDark;
@include SuperSmallText;
@ -49,6 +50,7 @@
&:not(.placementActive) .binding.placementOnly {
display: none;
}
&.placementActive .binding.noPlacementOnly {
display: none;
}

9
src/css/ingame_hud/vignette_overlay.scss Normal file
View File

@ -0,0 +1,9 @@
#ingame_VignetteOverlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: uiResource("vignette.lossless.png") center center / cover no-repeat;
pointer-events: none;
}

7
src/css/main.scss
View File

@ -34,11 +34,12 @@
@import "ingame_hud/blur_overlay";
@import "ingame_hud/dialogs";
@import "ingame_hud/mass_selector";
@import "ingame_hud/vignette_overlay";
// Z-Index
$elements: ingame_Canvas, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar, ingame_HUD_GameMenu,
ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay, ingame_HUD_MassSelector,
ingame_HUD_UnlockNotification;
$elements: ingame_Canvas, ingame_VignetteOverlay, ingame_HUD_building_placer, ingame_HUD_buildings_toolbar,
ingame_HUD_GameMenu, ingame_HUD_KeybindingOverlay, ingame_HUD_Shop, ingame_HUD_BetaOverlay,
ingame_HUD_MassSelector, ingame_HUD_UnlockNotification;
$zindex: 100;

8
src/css/states/ingame.scss
View File

@ -13,4 +13,12 @@
background: $mainBgColor;
flex-direction: column;
}
#ingame_Canvas {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}

9
src/js/application.js
View File

@ -28,6 +28,8 @@ import { GoogleAnalyticsImpl } from "./platform/browser/google_analytics";
import { Loader } from "./core/loader";
import { GameAnalyticsInterface } from "./platform/game_analytics";
import { ShapezGameAnalytics } from "./platform/browser/game_analytics";
import { queryParamOptions } from "./core/query_parameters";
import { NoGameAnalytics } from "./platform/browser/no_game_analytics";
const logger = createLogger("application");
@ -121,7 +123,12 @@ export class Application {
this.sound = new SoundImplBrowser(this);
this.platformWrapper = new PlatformWrapperImplBrowser(this);
this.analytics = new GoogleAnalyticsImpl(this);
this.gameAnalytics = new ShapezGameAnalytics(this);
if (queryParamOptions.betaMode) {
this.gameAnalytics = new NoGameAnalytics(this);
} else {
this.gameAnalytics = new ShapezGameAnalytics(this);
}
}
/**

3
src/js/game/hud/hud.js
View File

@ -14,6 +14,7 @@ import { HUDGameMenu } from "./parts/game_menu";
import { HUDShop } from "./parts/shop";
import { IS_MOBILE } from "../../core/config";
import { HUDMassSelector } from "./parts/mass_selector";
import { HUDVignetteOverlay } from "./parts/vignette_overlay";
export class GameHUD {
/**
@ -45,6 +46,8 @@ export class GameHUD {
shop: new HUDShop(this.root),
vignetteOverlay: new HUDVignetteOverlay(this.root),
// betaOverlay: new HUDBetaOverlay(this.root),
};

23
src/js/game/hud/parts/building_placer.js
View File

@ -57,8 +57,12 @@ export class HUDBuildingPlacer extends BaseHUDPart {
createElements(parent) {
this.element = makeDiv(parent, "ingame_HUD_building_placer", [], ``);
this.buildingLabel = makeDiv(this.element, null, ["buildingLabel"], "Extract");
this.buildingDescription = makeDiv(this.element, null, ["description"], "");
this.buildingInfoElements = {};
this.buildingInfoElements.label = makeDiv(this.element, null, ["buildingLabel"], "Extract");
this.buildingInfoElements.desc = makeDiv(this.element, null, ["description"], "");
this.buildingInfoElements.descText = makeDiv(this.buildingInfoElements.desc, null, ["text"], "");
this.buildingInfoElements.hotkey = makeDiv(this.buildingInfoElements.desc, null, ["hotkey"], "");
this.buildingInfoElements.tutorialImage = makeDiv(this.element, null, ["buildingImage"]);
}
abortPlacement() {
@ -179,8 +183,14 @@ export class HUDBuildingPlacer extends BaseHUDPart {
onSelectedMetaBuildingChanged(metaBuilding) {
this.root.hud.signals.selectedPlacementBuildingChanged.dispatch(metaBuilding);
if (metaBuilding) {
this.buildingLabel.innerHTML = metaBuilding.getName();
this.buildingDescription.innerHTML = metaBuilding.getDescription();
this.buildingInfoElements.label.innerHTML = metaBuilding.getName();
this.buildingInfoElements.descText.innerHTML = metaBuilding.getDescription();
const binding = this.root.gameState.keyActionMapper.getBinding(
"building_" + metaBuilding.getId()
);
this.buildingInfoElements.hotkey.innerHTML = "Hotkey: " + binding.getKeyCodeString();
this.fakeEntity = new Entity(null);
metaBuilding.setupEntityComponents(this.fakeEntity, null);
@ -191,6 +201,11 @@ export class HUDBuildingPlacer extends BaseHUDPart {
tileSize: metaBuilding.getDimensions().copy(),
})
);
this.buildingInfoElements.tutorialImage.setAttribute(
"data-icon",
"building_tutorials/" + metaBuilding.getId() + ".png"
);
} else {
this.currentlyDragging = false;
this.fakeEntity = null;

13
src/js/game/hud/parts/buildings_toolbar.js
View File

@ -71,23 +71,10 @@ export class HUDBuildingsToolbar extends BaseHUDPart {
const label = makeDiv(itemContainer, null, ["label"]);
label.innerText = metaBuilding.getName();
const tooltip = makeDiv(
itemContainer,
null,
["tooltip"],
`
<span class="title">${metaBuilding.getName()}</span>
<span class="desc">${metaBuilding.getDescription()}</span>
<span class="tutorialImage" data-icon="building_tutorials/${metaBuilding.getId()}.png"></span>
`
);
const sprite = metaBuilding.getPreviewSprite(0);
const spriteWrapper = makeDiv(itemContainer, null, ["iconWrap"]);
spriteWrapper.innerHTML = sprite.getAsHTML(iconSize * dimensions.x, iconSize * dimensions.y);
binding.appendLabelToElement(itemContainer);
binding.add(() => this.selectBuildingForPlacement(metaBuilding));
this.trackClicks(itemContainer, () => this.selectBuildingForPlacement(metaBuilding), {});

10
src/js/game/hud/parts/vignette_overlay.js Normal file
View File

@ -0,0 +1,10 @@
import { BaseHUDPart } from "../base_hud_part";
import { makeDiv } from "../../../core/utils";
export class HUDVignetteOverlay extends BaseHUDPart {
createElements(parent) {
this.element = makeDiv(parent, "ingame_VignetteOverlay");
}
initialize() {}
}

7
src/js/platform/browser/no_game_analytics.js Normal file
View File

@ -0,0 +1,7 @@
import { GameAnalyticsInterface } from "../game_analytics";
export class NoGameAnalytics extends GameAnalyticsInterface {
initialize() {
return Promise.resolve();
}
}