Mascali
/
shapez
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Accessibility optimizations

This commit is contained in:
tobspr 2022-06-17 15:18:46 +02:00
parent 0eeb03baf7
commit 913149d5b8
11 changed files with 25 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
res/logo_cn.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
res/logo_demo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
res/logo_wegame.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 27 KiB

7
src/css/states/main_menu.scss
View File

@ -160,6 +160,7 @@
transition-property: opacity, transform; transition-property: opacity, transform;
position: relative; position: relative;
@include S(border-radius, $globalBorderRadius); @include S(border-radius, $globalBorderRadius);
color: transparent;
&:hover { &:hover {
opacity: 0.9; opacity: 0.9;
@ -202,7 +203,8 @@
@include S(padding-top, 20px); @include S(padding-top, 20px);
img { img {
@include S(width, 300px); @include S(width, 710px / 2.2);
@include S(height, 180 / 2.2px);
} }
position: relative; position: relative;
@include S(left, -8px); @include S(left, -8px);
@ -731,7 +733,8 @@
img { img {
transition: opacity 0.12s ease-in-out; transition: opacity 0.12s ease-in-out;
@include S(width, 80px); @include S(width, 82px);
@include S(height, 25px);
filter: invert(100%); filter: invert(100%);
opacity: 0.6; opacity: 0.6;
} }

4
src/html/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title>shapez Demo - Factory Automation Game</title> <title>shapez Demo - Factory Automation Game</title>
@ -8,7 +8,7 @@
<meta name="msapplication-tap-highlight" content="no" /> <meta name="msapplication-tap-highlight" content="no" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no, viewport-fit=cover" content="width=device-width, initial-scale=1.0, maximum-scale=5, shrink-to-fit=no, viewport-fit=cover"
/> />
<meta name="HandheldFriendly" content="true" /> <meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" /> <meta name="MobileOptimized" content="320" />

16
src/js/application.js
View File

@ -233,7 +233,6 @@ export class Application {
// Unload events // Unload events
window.addEventListener("beforeunload", this.onBeforeUnload.bind(this), true); window.addEventListener("beforeunload", this.onBeforeUnload.bind(this), true);
window.addEventListener("unload", this.onUnload.bind(this), true);
document.addEventListener(pageVisibilityEventName, this.handleVisibilityChange.bind(this), false); document.addEventListener(pageVisibilityEventName, this.handleVisibilityChange.bind(this), false);
@ -331,21 +330,6 @@ export class Application {
this.sound.onPageRenderableStateChanged(renderable); this.sound.onPageRenderableStateChanged(renderable);
} }
/**
* Internal unload handler
*/
onUnload(event) {
if (!this.unloaded) {
logSection("UNLOAD HANDLER", "#f77");
this.unloaded = true;
const currentState = this.stateMgr.getCurrentState();
if (currentState) {
currentState.onBeforeExit();
}
this.deinitialize();
}
}
/** /**
* Internal before-unload handler * Internal before-unload handler
*/ */

12
src/js/core/game_state.js
View File

@ -129,11 +129,6 @@ export class GameState {
*/ */
onLeave() {} onLeave() {}
/**
* Callback before leaving the game state or when the page is unloaded
*/
onBeforeExit() {}
/** /**
* Callback when the app got paused (on android, this means in background) * Callback when the app got paused (on android, this means in background)
*/ */
@ -295,13 +290,6 @@ export class GameState {
this.asyncChannel.cancelAll(); this.asyncChannel.cancelAll();
} }
/**
* Internal callback *before* the state is left. Also is called on page unload
*/
internalOnBeforeExitCallback() {
this.onBeforeExit();
}
/** /**
* Internal app pause callback * Internal app pause callback
*/ */

8
src/js/states/ingame.js
View File

@ -116,14 +116,6 @@ export class InGameState extends GameState {
return MUSIC.theme; return MUSIC.theme;
} }
onBeforeExit() {
// logger.log("Saving before quitting");
// return this.doSave().then(() => {
// logger.log(this, "Successfully saved");
// // this.stageDestroyed();
// });
}
onAppPause() { onAppPause() {
// if (this.stage === stages.s10_gameRunning) { // if (this.stage === stages.s10_gameRunning) {
// logger.log("Saving because app got paused"); // logger.log("Saving because app got paused");

19
src/js/states/main_menu.js
View File

@ -25,8 +25,6 @@ import { T } from "../translations";
const trim = require("trim"); const trim = require("trim");
let firstPlayForwarded = false;
/** /**
* @typedef {import("../savegame/savegame_typedefs").SavegameMetadata} SavegameMetadata * @typedef {import("../savegame/savegame_typedefs").SavegameMetadata} SavegameMetadata
* @typedef {import("../profile/setting_types").EnumSetting} EnumSetting * @typedef {import("../profile/setting_types").EnumSetting} EnumSetting
@ -88,7 +86,7 @@ export class MainMenuState extends GameState {
? `<span class='discount'>-${globalConfig.currentDiscount}%!</span>` ? `<span class='discount'>-${globalConfig.currentDiscount}%!</span>`
: "" : ""
} }
Play shapez on Steam
</a> </a>
${!G_IS_STEAM_DEMO ? `<div class="onlinePlayerCount"></div>` : ""} ${!G_IS_STEAM_DEMO ? `<div class="onlinePlayerCount"></div>` : ""}
@ -111,7 +109,10 @@ export class MainMenuState extends GameState {
</video> </video>
<div class="logo"> <div class="logo">
<img src="${cachebust("res/" + getLogoSprite())}" alt="shapez.io Logo"> <img src="${cachebust("res/" + getLogoSprite())}" alt="shapez.io Logo"
width="${Math.round((710 / 2.2) * this.app.getEffectiveUiScale())}"
height="${Math.round((180 / 2.2) * this.app.getEffectiveUiScale())}"
>
${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""} ${/*showUpdateLabel ? `<span class="updateLabel">MODS UPDATE!</span>` : ""*/ ""}
</div> </div>
@ -234,7 +235,11 @@ export class MainMenuState extends GameState {
${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""} ${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""}
</div> </div>
<div class="author"><a class="producerLink" href="https://tobspr.io" target="_blank" title="tobspr Games" rel="follow"> <div class="author"><a class="producerLink" href="https://tobspr.io" target="_blank" title="tobspr Games" rel="follow">
<img src="${cachebust("res/logo-tobspr-games.svg")}" alt="tobspr Games"> <img src="${cachebust("res/logo-tobspr-games.svg")}" alt="tobspr Games"
height="${25 * this.app.getEffectiveUiScale()}"
width="${82 * this.app.getEffectiveUiScale()}"
>
</a></div> </a></div>
</div> </div>
@ -571,21 +576,25 @@ export class MainMenuState extends GameState {
const deleteButton = document.createElement("button"); const deleteButton = document.createElement("button");
deleteButton.classList.add("styledButton", "deleteGame"); deleteButton.classList.add("styledButton", "deleteGame");
deleteButton.setAttribute("aria-label", "Delete");
elem.appendChild(deleteButton); elem.appendChild(deleteButton);
const downloadButton = document.createElement("button"); const downloadButton = document.createElement("button");
downloadButton.classList.add("styledButton", "downloadGame"); downloadButton.classList.add("styledButton", "downloadGame");
downloadButton.setAttribute("aria-label", "Download");
elem.appendChild(downloadButton); elem.appendChild(downloadButton);
if (!G_WEGAME_VERSION) { if (!G_WEGAME_VERSION) {
const renameButton = document.createElement("button"); const renameButton = document.createElement("button");
renameButton.classList.add("styledButton", "renameGame"); renameButton.classList.add("styledButton", "renameGame");
renameButton.setAttribute("aria-label", "Rename Savegame");
name.appendChild(renameButton); name.appendChild(renameButton);
this.trackClicks(renameButton, () => this.requestRenameSavegame(games[i])); this.trackClicks(renameButton, () => this.requestRenameSavegame(games[i]));
} }
const resumeButton = document.createElement("button"); const resumeButton = document.createElement("button");
resumeButton.classList.add("styledButton", "resumeGame"); resumeButton.classList.add("styledButton", "resumeGame");
resumeButton.setAttribute("aria-label", "Resumee");
elem.appendChild(resumeButton); elem.appendChild(resumeButton);
this.trackClicks(deleteButton, () => this.deleteGame(games[i])); this.trackClicks(deleteButton, () => this.deleteGame(games[i]));

4
src/js/states/preload.js
View File

@ -130,6 +130,10 @@ export class PreloadState extends GameState {
return this.app.settings.updateLanguage(language); return this.app.settings.updateLanguage(language);
} }
}) })
.then(() => {
document.documentElement.setAttribute("lang", this.app.settings.getLanguage());
})
.then(() => { .then(() => {
const language = this.app.settings.getLanguage(); const language = this.app.settings.getLanguage();
updateApplicationLanguage(language); updateApplicationLanguage(language);