Archives/tobspr_shapez.io
1
0
Fork 0
mirror of https://github.com/tobspr/shapez.io.git synced 2024-10-27 20:34:29 +00:00
Code Issues Projects Releases Wiki Activity

Improve iconography in toolbar

Browse Source
This commit is contained in:
tobspr 2020-05-18 20:30:03 +02:00
parent ee5fb984c1
commit 8c42827f4e
9 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/ui/building_icons/belt.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
res/ui/building_icons/miner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
res/ui/building_icons/underground_belt.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

2
src/css/main.scss
View File

@ -92,7 +92,7 @@ body.uiHidden {
body.modalDialogActive, body.modalDialogActive,
body.ingameDialogOpen { body.ingameDialogOpen {
> *:not(.ingameDialog):not(.modalDialogParent):not(.loadingDialog) { > *:not(.ingameDialog):not(.modalDialogParent):not(.loadingDialog):not(.gameLoadingOverlay) {
filter: blur(5px) !important; filter: blur(5px) !important;
} }
} }

6
src/css/textual_game_state.scss
View File

@ -13,11 +13,17 @@
.headerBar { .headerBar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-start;
h1 { h1 {
display: flex;
pointer-events: all;
align-items: center;
cursor: pointer;
@include SuperHeading; @include SuperHeading;
text-transform: uppercase; text-transform: uppercase;
color: #333438; color: #333438;
@include IncreasedClickArea(10px);
} }
.backButton { .backButton {

11
src/html/index.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>shapez.io</title> <title>shapez.io - Combine Shapes!</title>
<!-- mobile stuff --> <!-- mobile stuff -->
<meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="telephone=no" />
@ -19,13 +19,16 @@
<meta name="author" content="Tobias Springer, tobias.springer1@gmail.com" /> <meta name="author" content="Tobias Springer, tobias.springer1@gmail.com" />
<meta <meta
name="description" name="description"
content="shapez.io is a fun factory base building game about combining shapes - Build the biggest factory you can imagine!" content="shapez.io is an open-source factory building game about combining and producing different types of shapes."
/>
<meta
name="keywords"
content="shapes, .io games, factorio, incremental, upgrades, base building, open source"
/> />
<meta name="keywords" content="shapez.io, .io games, games, tower defense, factorio, upgrades" />
<meta property="og:title" content="shapez.io" /> <meta property="og:title" content="shapez.io" />
<meta <meta
property="og:description" property="og:description"
content="shapez.io is a fun factory base building game about combining shapes - Build the biggest factory you can imagine!" content="shapez.io is a fun factory base building game about combining shapes"
/> />
<meta property="og:url" content="https://shapez.io/" /> <meta property="og:url" content="https://shapez.io/" />
<meta property="og:image" content="https://shapez.io/og_thumb.png" /> <meta property="og:image" content="https://shapez.io/og_thumb.png" />

6
src/js/core/textual_game_state.js
View File

@ -97,8 +97,8 @@ export class TextualGameState extends GameState {
if (this.getStateHeaderTitle()) { if (this.getStateHeaderTitle()) {
headerHtml = ` headerHtml = `
<div class="headerBar"> <div class="headerBar">
<button class="backButton"></button>
<h1>${this.getStateHeaderTitle()}</h1> <h1><button class="backButton"></button> ${this.getStateHeaderTitle()}</h1>
</div>`; </div>`;
} }
@ -138,7 +138,7 @@ export class TextualGameState extends GameState {
} }
this.containerElement = this.htmlElement.querySelector(".widthKeeper .container"); this.containerElement = this.htmlElement.querySelector(".widthKeeper .container");
this.headerElement = this.htmlElement.querySelector(".headerBar > .backButton"); this.headerElement = this.htmlElement.querySelector(".headerBar > h1");
if (this.headerElement) { if (this.headerElement) {
this.trackClicks(this.headerElement, this.onBackButton); this.trackClicks(this.headerElement, this.onBackButton);

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

@ -1,26 +1,25 @@
import { BaseHUDPart } from "../base_hud_part";
import { makeDiv } from "../../../core/utils";
import { gMetaBuildingRegistry } from "../../../core/global_registries"; import { gMetaBuildingRegistry } from "../../../core/global_registries";
import { MetaBuilding } from "../../meta_building";
import { Signal } from "../../../core/signal"; import { Signal } from "../../../core/signal";
import { MetaSplitterBuilding } from "../../buildings/splitter"; import { TrackedState } from "../../../core/tracked_state";
import { MetaMinerBuilding } from "../../buildings/miner"; import { makeDiv } from "../../../core/utils";
import { MetaBeltBaseBuilding } from "../../buildings/belt_base";
import { MetaCutterBuilding } from "../../buildings/cutter"; import { MetaCutterBuilding } from "../../buildings/cutter";
import { MetaRotaterBuilding } from "../../buildings/rotater"; import { MetaMinerBuilding } from "../../buildings/miner";
import { MetaStackerBuilding } from "../../buildings/stacker";
import { MetaMixerBuilding } from "../../buildings/mixer"; import { MetaMixerBuilding } from "../../buildings/mixer";
import { MetaPainterBuilding } from "../../buildings/painter"; import { MetaPainterBuilding } from "../../buildings/painter";
import { MetaRotaterBuilding } from "../../buildings/rotater";
import { MetaSplitterBuilding } from "../../buildings/splitter";
import { MetaStackerBuilding } from "../../buildings/stacker";
import { MetaTrashBuilding } from "../../buildings/trash"; import { MetaTrashBuilding } from "../../buildings/trash";
import { MetaBeltBaseBuilding } from "../../buildings/belt_base";
import { MetaUndergroundBeltBuilding } from "../../buildings/underground_belt"; import { MetaUndergroundBeltBuilding } from "../../buildings/underground_belt";
import { globalConfig } from "../../../core/config"; import { MetaBuilding } from "../../meta_building";
import { TrackedState } from "../../../core/tracked_state"; import { BaseHUDPart } from "../base_hud_part";
const toolbarBuildings = [ const toolbarBuildings = [
MetaBeltBaseBuilding, MetaBeltBaseBuilding,
MetaMinerBuilding,
MetaUndergroundBeltBuilding,
MetaSplitterBuilding, MetaSplitterBuilding,
MetaUndergroundBeltBuilding,
MetaMinerBuilding,
MetaCutterBuilding, MetaCutterBuilding,
MetaRotaterBuilding, MetaRotaterBuilding,
MetaStackerBuilding, MetaStackerBuilding,

4
src/js/game/key_action_mapper.js
View File

@ -36,9 +36,9 @@ export const defaultKeybindings = {
toolbar: { toolbar: {
building_belt: { keyCode: key("1") }, building_belt: { keyCode: key("1") },
building_miner: { keyCode: key("2") }, building_splitter: { keyCode: key("2") },
building_underground_belt: { keyCode: key("3") }, building_underground_belt: { keyCode: key("3") },
building_splitter: { keyCode: key("4") }, building_miner: { keyCode: key("4") },
building_cutter: { keyCode: key("5") }, building_cutter: { keyCode: key("5") },
building_rotater: { keyCode: key("6") }, building_rotater: { keyCode: key("6") },
building_stacker: { keyCode: key("7") }, building_stacker: { keyCode: key("7") },