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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View File

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

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>shapez Demo - Factory Automation Game</title>
@ -8,7 +8,7 @@
<meta name="msapplication-tap-highlight" content="no" />
<meta
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="MobileOptimized" content="320" />

View File

@ -233,7 +233,6 @@ export class Application {
// Unload events
window.addEventListener("beforeunload", this.onBeforeUnload.bind(this), true);
window.addEventListener("unload", this.onUnload.bind(this), true);
document.addEventListener(pageVisibilityEventName, this.handleVisibilityChange.bind(this), false);
@ -331,21 +330,6 @@ export class Application {
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
*/

View File

@ -129,11 +129,6 @@ export class GameState {
*/
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)
*/
@ -295,13 +290,6 @@ export class GameState {
this.asyncChannel.cancelAll();
}
/**
* Internal callback *before* the state is left. Also is called on page unload
*/
internalOnBeforeExitCallback() {
this.onBeforeExit();
}
/**
* Internal app pause callback
*/

View File

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

View File

@ -25,8 +25,6 @@ import { T } from "../translations";
const trim = require("trim");
let firstPlayForwarded = false;
/**
* @typedef {import("../savegame/savegame_typedefs").SavegameMetadata} SavegameMetadata
* @typedef {import("../profile/setting_types").EnumSetting} EnumSetting
@ -88,7 +86,7 @@ export class MainMenuState extends GameState {
? `<span class='discount'>-${globalConfig.currentDiscount}%!</span>`
: ""
}
Play shapez on Steam
</a>
${!G_IS_STEAM_DEMO ? `<div class="onlinePlayerCount"></div>` : ""}
@ -111,7 +109,10 @@ export class MainMenuState extends GameState {
</video>
<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>` : ""*/ ""}
</div>
@ -234,7 +235,11 @@ export class MainMenuState extends GameState {
${showExternalLinks ? `<a class="helpTranslate">${T.mainMenu.helpTranslate}</a>` : ""}
</div>
<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>
</div>
@ -571,21 +576,25 @@ export class MainMenuState extends GameState {
const deleteButton = document.createElement("button");
deleteButton.classList.add("styledButton", "deleteGame");
deleteButton.setAttribute("aria-label", "Delete");
elem.appendChild(deleteButton);
const downloadButton = document.createElement("button");
downloadButton.classList.add("styledButton", "downloadGame");
downloadButton.setAttribute("aria-label", "Download");
elem.appendChild(downloadButton);
if (!G_WEGAME_VERSION) {
const renameButton = document.createElement("button");
renameButton.classList.add("styledButton", "renameGame");
renameButton.setAttribute("aria-label", "Rename Savegame");
name.appendChild(renameButton);
this.trackClicks(renameButton, () => this.requestRenameSavegame(games[i]));
}
const resumeButton = document.createElement("button");
resumeButton.classList.add("styledButton", "resumeGame");
resumeButton.setAttribute("aria-label", "Resumee");
elem.appendChild(resumeButton);
this.trackClicks(deleteButton, () => this.deleteGame(games[i]));

View File

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