Add hint to mobile users
This commit is contained in:
parent
31dba61279
commit
a110abc192
|
@ -26,6 +26,7 @@
|
||||||
@import "states/keybindings";
|
@import "states/keybindings";
|
||||||
@import "states/settings";
|
@import "states/settings";
|
||||||
@import "states/about";
|
@import "states/about";
|
||||||
|
@import "states/mobile_warning";
|
||||||
|
|
||||||
@import "ingame_hud/buildings_toolbar";
|
@import "ingame_hud/buildings_toolbar";
|
||||||
@import "ingame_hud/building_placer";
|
@import "ingame_hud/building_placer";
|
||||||
|
|
|
@ -0,0 +1,43 @@
|
||||||
|
#state_MobileWarningState {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #333438 !important;
|
||||||
|
@include S(padding, 20px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 200px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #aaacaf;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 13px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 20px;
|
||||||
|
a {
|
||||||
|
color: $colorBlueBright;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.standaloneLink {
|
||||||
|
width: 100%;
|
||||||
|
height: 80px;
|
||||||
|
background: uiResource("get_on_itch_io.svg") center center / contain no-repeat;
|
||||||
|
overflow: hidden;
|
||||||
|
display: block;
|
||||||
|
text-indent: -999em;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 20px;
|
||||||
|
pointer-events: all;
|
||||||
|
transition: all 0.12s ease-in;
|
||||||
|
transition-property: opacity, transform;
|
||||||
|
transform: skewX(-0.5deg);
|
||||||
|
&:hover {
|
||||||
|
transform: skewX(-1deg) scale(1.02);
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
import { AnimationFrame } from "./core/animation_frame";
|
import { AnimationFrame } from "./core/animation_frame";
|
||||||
import { performanceNow } from "./core/builtins";
|
import { performanceNow, Math_min } from "./core/builtins";
|
||||||
import { GameState } from "./core/game_state";
|
import { GameState } from "./core/game_state";
|
||||||
import { GLOBAL_APP, setGlobalApp } from "./core/globals";
|
import { GLOBAL_APP, setGlobalApp } from "./core/globals";
|
||||||
import { InputDistributor } from "./core/input_distributor";
|
import { InputDistributor } from "./core/input_distributor";
|
||||||
|
@ -36,6 +36,7 @@ import { KeybindingsState } from "./states/keybindings";
|
||||||
import { AboutState } from "./states/about";
|
import { AboutState } from "./states/about";
|
||||||
import { PlatformWrapperImplElectron } from "./platform/electron/wrapper";
|
import { PlatformWrapperImplElectron } from "./platform/electron/wrapper";
|
||||||
import { StorageImplElectron } from "./platform/electron/storage";
|
import { StorageImplElectron } from "./platform/electron/storage";
|
||||||
|
import { MobileWarningState } from "./states/mobile_warning";
|
||||||
|
|
||||||
const logger = createLogger("application");
|
const logger = createLogger("application");
|
||||||
|
|
||||||
|
@ -158,6 +159,7 @@ export class Application {
|
||||||
/** @type {Array<typeof GameState>} */
|
/** @type {Array<typeof GameState>} */
|
||||||
const states = [
|
const states = [
|
||||||
PreloadState,
|
PreloadState,
|
||||||
|
MobileWarningState,
|
||||||
MainMenuState,
|
MainMenuState,
|
||||||
InGameState,
|
InGameState,
|
||||||
SettingsState,
|
SettingsState,
|
||||||
|
@ -315,7 +317,12 @@ export class Application {
|
||||||
|
|
||||||
Loader.linkAppAfterBoot(this);
|
Loader.linkAppAfterBoot(this);
|
||||||
|
|
||||||
|
// Check for mobile
|
||||||
|
if (IS_MOBILE) {
|
||||||
|
this.stateMgr.moveToState("MobileWarningState");
|
||||||
|
} else {
|
||||||
this.stateMgr.moveToState("PreloadState");
|
this.stateMgr.moveToState("PreloadState");
|
||||||
|
}
|
||||||
|
|
||||||
// Starting rendering
|
// Starting rendering
|
||||||
this.ticker.frameEmitted.add(this.onFrameEmitted, this);
|
this.ticker.frameEmitted.add(this.onFrameEmitted, this);
|
||||||
|
|
|
@ -84,7 +84,7 @@ export const globalConfig = {
|
||||||
debug: {
|
debug: {
|
||||||
/* dev:start */
|
/* dev:start */
|
||||||
// fastGameEnter: true,
|
// fastGameEnter: true,
|
||||||
// noArtificialDelays: true,
|
noArtificialDelays: true,
|
||||||
// disableSavegameWrite: true,
|
// disableSavegameWrite: true,
|
||||||
// showEntityBounds: true,
|
// showEntityBounds: true,
|
||||||
// showAcceptorEjectors: true,
|
// showAcceptorEjectors: true,
|
||||||
|
@ -93,8 +93,8 @@ export const globalConfig = {
|
||||||
// disableZoomLimits: true,
|
// disableZoomLimits: true,
|
||||||
// showChunkBorders: true,
|
// showChunkBorders: true,
|
||||||
// rewardsInstant: true,
|
// rewardsInstant: true,
|
||||||
// allBuildingsUnlocked: true,
|
allBuildingsUnlocked: true,
|
||||||
// upgradesNoCost: true,
|
upgradesNoCost: true,
|
||||||
// disableUnlockDialog: true,
|
// disableUnlockDialog: true,
|
||||||
// disableLogicTicks: true,
|
// disableLogicTicks: true,
|
||||||
// testClipping: true,
|
// testClipping: true,
|
||||||
|
|
|
@ -0,0 +1,54 @@
|
||||||
|
import { GameState } from "../core/game_state";
|
||||||
|
import { cachebust } from "../core/cachebust";
|
||||||
|
import { THIRDPARTY_URLS } from "../core/config";
|
||||||
|
|
||||||
|
export class MobileWarningState extends GameState {
|
||||||
|
constructor() {
|
||||||
|
super("MobileWarningState");
|
||||||
|
}
|
||||||
|
|
||||||
|
getInnerHTML() {
|
||||||
|
return `
|
||||||
|
|
||||||
|
<div class="mobileWarning">
|
||||||
|
<img class="logo" src="${cachebust("res/logo.png")}" alt="shapez.io Logo">
|
||||||
|
|
||||||
|
<p>
|
||||||
|
I'm sorry, but shapez.io is not yet available on mobile devices!
|
||||||
|
(There is also no estimate when this will change, but feel to make a contribution! It's
|
||||||
|
<a href="https://github.com/tobspr/shapez.io" target="_blank">open source</a>!)</p>
|
||||||
|
|
||||||
|
<p>If you want to play on your computer, you can also get the standalone on itch.io:</p>
|
||||||
|
|
||||||
|
|
||||||
|
<a href="${
|
||||||
|
THIRDPARTY_URLS.standaloneStorePage
|
||||||
|
}" class="standaloneLink" target="_blank">Get the shapez.io standalone!</a>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
getThemeMusic() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
getHasFadeIn() {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnter() {
|
||||||
|
try {
|
||||||
|
if (window.gtag) {
|
||||||
|
window.gtag("event", "click", {
|
||||||
|
event_category: "ui",
|
||||||
|
event_label: "mobile_warning",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (ex) {
|
||||||
|
console.warn("Failed to track mobile click:", ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
onLeave() {
|
||||||
|
// this.dialogs.cleanup();
|
||||||
|
}
|
||||||
|
}
|
Reference in New Issue