parent
81e7d96dd8
commit
fa27d1681f
@ -0,0 +1,97 @@
|
||||
import { Application } from "../application";
|
||||
import { ExplainedResult } from "./explained_result";
|
||||
import { queryParamOptions } from "./query_parameters";
|
||||
import { ReadWriteProxy } from "./read_write_proxy";
|
||||
|
||||
export class RestrictionManager extends ReadWriteProxy {
|
||||
/**
|
||||
* @param {Application} app
|
||||
*/
|
||||
constructor(app) {
|
||||
super(app, "restriction-flags.bin");
|
||||
}
|
||||
|
||||
// -- RW Proxy Impl
|
||||
|
||||
/**
|
||||
* @param {any} data
|
||||
*/
|
||||
verify(data) {
|
||||
return ExplainedResult.good();
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
getDefaultData() {
|
||||
return {
|
||||
savegameV1119Imported: false,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*/
|
||||
getCurrentVersion() {
|
||||
return 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} data
|
||||
*/
|
||||
migrate(data) {
|
||||
// Todo
|
||||
return ExplainedResult.good();
|
||||
}
|
||||
|
||||
// -- End RW Proxy Impl
|
||||
|
||||
/**
|
||||
* Returns if the app is currently running as the limited version
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isLimitedVersion() {
|
||||
return queryParamOptions.fullVersion
|
||||
? false
|
||||
: (!G_IS_DEV && !G_IS_STANDALONE) ||
|
||||
(typeof window !== "undefined" && window.location.search.indexOf("demo") >= 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns if the app markets the standalone version on steam
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsStandaloneMarketingActive() {
|
||||
return this.isLimitedVersion();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns if exporting the base as a screenshot is possible
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getIsExportingScreenshotsPossible() {
|
||||
return !this.isLimitedVersion();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the maximum number of supported waypoints
|
||||
* @returns {number}
|
||||
*/
|
||||
getMaximumWaypoints() {
|
||||
return this.isLimitedVersion() ? 2 : 1e20;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns if the user has unlimited savegames
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getHasUnlimitedSavegames() {
|
||||
return !this.isLimitedVersion();
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns if the app has all settings available
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getHasExtendedSettings() {
|
||||
return !this.isLimitedVersion();
|
||||
}
|
||||
}
|
@ -1,214 +1,202 @@
|
||||
import { globalConfig, IS_DEMO, IS_MOBILE } from "../../core/config";
|
||||
import { createLogger } from "../../core/logging";
|
||||
import { queryParamOptions } from "../../core/query_parameters";
|
||||
import { clamp } from "../../core/utils";
|
||||
import { GamedistributionAdProvider } from "../ad_providers/gamedistribution";
|
||||
import { NoAdProvider } from "../ad_providers/no_ad_provider";
|
||||
import { PlatformWrapperInterface } from "../wrapper";
|
||||
import { StorageImplBrowser } from "./storage";
|
||||
import { StorageImplBrowserIndexedDB } from "./storage_indexed_db";
|
||||
|
||||
const logger = createLogger("platform/browser");
|
||||
|
||||
export class PlatformWrapperImplBrowser extends PlatformWrapperInterface {
|
||||
initialize() {
|
||||
this.recaptchaTokenCallback = null;
|
||||
|
||||
this.embedProvider = {
|
||||
id: "shapezio-website",
|
||||
adProvider: NoAdProvider,
|
||||
iframed: false,
|
||||
externalLinks: true,
|
||||
iogLink: true,
|
||||
unlimitedSavegames: IS_DEMO ? false : true,
|
||||
showDemoBadge: IS_DEMO,
|
||||
};
|
||||
|
||||
if (!G_IS_STANDALONE && queryParamOptions.embedProvider) {
|
||||
const providerId = queryParamOptions.embedProvider;
|
||||
this.embedProvider.iframed = true;
|
||||
this.embedProvider.iogLink = false;
|
||||
|
||||
switch (providerId) {
|
||||
case "armorgames": {
|
||||
this.embedProvider.id = "armorgames";
|
||||
break;
|
||||
}
|
||||
|
||||
case "iogames.space": {
|
||||
this.embedProvider.id = "iogames.space";
|
||||
this.embedProvider.iogLink = true;
|
||||
this.embedProvider.unlimitedSavegames = true;
|
||||
this.embedProvider.showDemoBadge = false;
|
||||
break;
|
||||
}
|
||||
|
||||
case "miniclip": {
|
||||
this.embedProvider.id = "miniclip";
|
||||
break;
|
||||
}
|
||||
|
||||
case "gamedistribution": {
|
||||
this.embedProvider.id = "gamedistribution";
|
||||
this.embedProvider.externalLinks = false;
|
||||
this.embedProvider.adProvider = GamedistributionAdProvider;
|
||||
break;
|
||||
}
|
||||
|
||||
case "kongregate": {
|
||||
this.embedProvider.id = "kongregate";
|
||||
break;
|
||||
}
|
||||
|
||||
case "crazygames": {
|
||||
this.embedProvider.id = "crazygames";
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
logger.error("Got unsupported embed provider:", providerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
logger.log("Embed provider:", this.embedProvider.id);
|
||||
|
||||
return this.detectStorageImplementation()
|
||||
.then(() => this.initializeAdProvider())
|
||||
.then(() => super.initialize());
|
||||
}
|
||||
|
||||
detectStorageImplementation() {
|
||||
return new Promise(resolve => {
|
||||
logger.log("Detecting storage");
|
||||
|
||||
if (!window.indexedDB) {
|
||||
logger.log("Indexed DB not supported");
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// Try accessing the indexedb
|
||||
let request;
|
||||
try {
|
||||
request = window.indexedDB.open("indexeddb_feature_detection", 1);
|
||||
} catch (ex) {
|
||||
logger.warn("Error while opening indexed db:", ex);
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
request.onerror = err => {
|
||||
logger.log("Indexed DB can *not* be accessed: ", err);
|
||||
logger.log("Using fallback to local storage");
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
};
|
||||
request.onsuccess = () => {
|
||||
logger.log("Indexed DB *can* be accessed");
|
||||
this.app.storage = new StorageImplBrowserIndexedDB(this.app);
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
getHasUnlimitedSavegames() {
|
||||
return this.embedProvider.unlimitedSavegames;
|
||||
}
|
||||
|
||||
getShowDemoBadges() {
|
||||
return this.embedProvider.showDemoBadge;
|
||||
}
|
||||
|
||||
getId() {
|
||||
return "browser@" + this.embedProvider.id;
|
||||
}
|
||||
|
||||
getUiScale() {
|
||||
if (IS_MOBILE) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const avgDims = Math.min(this.app.screenWidth, this.app.screenHeight);
|
||||
return clamp((avgDims / 1000.0) * 1.9, 0.1, 10);
|
||||
}
|
||||
|
||||
getSupportsRestart() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getTouchPanStrength() {
|
||||
return IS_MOBILE ? 1 : 0.5;
|
||||
}
|
||||
|
||||
openExternalLink(url, force = false) {
|
||||
logger.log("Opening external:", url);
|
||||
if (force || this.embedProvider.externalLinks) {
|
||||
window.open(url);
|
||||
} else {
|
||||
// Do nothing
|
||||
alert(
|
||||
"This platform does not allow opening external links. You can play on https://shapez.io directly to open them.\n\nClicked Link: " +
|
||||
url
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
performRestart() {
|
||||
logger.log("Performing restart");
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects if there is an adblocker installed
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
detectAdblock() {
|
||||
return Promise.race([
|
||||
new Promise(resolve => {
|
||||
// If the request wasn't blocked within a very short period of time, this means
|
||||
// the adblocker is not active and the request was actually made -> ignore it then
|
||||
setTimeout(() => resolve(false), 30);
|
||||
}),
|
||||
new Promise(resolve => {
|
||||
fetch("https://googleads.g.doubleclick.net/pagead/id", {
|
||||
method: "HEAD",
|
||||
mode: "no-cors",
|
||||
})
|
||||
.then(res => {
|
||||
resolve(false);
|
||||
})
|
||||
.catch(err => {
|
||||
resolve(true);
|
||||
});
|
||||
}),
|
||||
]);
|
||||
}
|
||||
|
||||
initializeAdProvider() {
|
||||
if (G_IS_DEV && !globalConfig.debug.testAds) {
|
||||
logger.log("Ads disabled in local environment");
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
// First, detect adblocker
|
||||
return this.detectAdblock().then(hasAdblocker => {
|
||||
if (hasAdblocker) {
|
||||
logger.log("Adblock detected");
|
||||
return;
|
||||
}
|
||||
|
||||
const adProvider = this.embedProvider.adProvider;
|
||||
this.app.adProvider = new adProvider(this.app);
|
||||
return this.app.adProvider.initialize().catch(err => {
|
||||
logger.error("Failed to initialize ad provider, disabling ads:", err);
|
||||
this.app.adProvider = new NoAdProvider(this.app);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
exitApp() {
|
||||
// Can not exit app
|
||||
}
|
||||
}
|
||||
import { globalConfig, IS_MOBILE } from "../../core/config";
|
||||
import { createLogger } from "../../core/logging";
|
||||
import { queryParamOptions } from "../../core/query_parameters";
|
||||
import { clamp } from "../../core/utils";
|
||||
import { GamedistributionAdProvider } from "../ad_providers/gamedistribution";
|
||||
import { NoAdProvider } from "../ad_providers/no_ad_provider";
|
||||
import { PlatformWrapperInterface } from "../wrapper";
|
||||
import { StorageImplBrowser } from "./storage";
|
||||
import { StorageImplBrowserIndexedDB } from "./storage_indexed_db";
|
||||
|
||||
const logger = createLogger("platform/browser");
|
||||
|
||||
export class PlatformWrapperImplBrowser extends PlatformWrapperInterface {
|
||||
initialize() {
|
||||
this.recaptchaTokenCallback = null;
|
||||
|
||||
this.embedProvider = {
|
||||
id: "shapezio-website",
|
||||
adProvider: NoAdProvider,
|
||||
iframed: false,
|
||||
externalLinks: true,
|
||||
iogLink: true,
|
||||
};
|
||||
|
||||
if (!G_IS_STANDALONE && queryParamOptions.embedProvider) {
|
||||
const providerId = queryParamOptions.embedProvider;
|
||||
this.embedProvider.iframed = true;
|
||||
this.embedProvider.iogLink = false;
|
||||
|
||||
switch (providerId) {
|
||||
case "armorgames": {
|
||||
this.embedProvider.id = "armorgames";
|
||||
break;
|
||||
}
|
||||
|
||||
case "iogames.space": {
|
||||
this.embedProvider.id = "iogames.space";
|
||||
this.embedProvider.iogLink = true;
|
||||
break;
|
||||
}
|
||||
|
||||
case "miniclip": {
|
||||
this.embedProvider.id = "miniclip";
|
||||
break;
|
||||
}
|
||||
|
||||
case "gamedistribution": {
|
||||
this.embedProvider.id = "gamedistribution";
|
||||
this.embedProvider.externalLinks = false;
|
||||
this.embedProvider.adProvider = GamedistributionAdProvider;
|
||||
break;
|
||||
}
|
||||
|
||||
case "kongregate": {
|
||||
this.embedProvider.id = "kongregate";
|
||||
break;
|
||||
}
|
||||
|
||||
case "crazygames": {
|
||||
this.embedProvider.id = "crazygames";
|
||||
break;
|
||||
}
|
||||
|
||||
default: {
|
||||
logger.error("Got unsupported embed provider:", providerId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
logger.log("Embed provider:", this.embedProvider.id);
|
||||
|
||||
return this.detectStorageImplementation()
|
||||
.then(() => this.initializeAdProvider())
|
||||
.then(() => super.initialize());
|
||||
}
|
||||
|
||||
detectStorageImplementation() {
|
||||
return new Promise(resolve => {
|
||||
logger.log("Detecting storage");
|
||||
|
||||
if (!window.indexedDB) {
|
||||
logger.log("Indexed DB not supported");
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
||||
// Try accessing the indexedb
|
||||
let request;
|
||||
try {
|
||||
request = window.indexedDB.open("indexeddb_feature_detection", 1);
|
||||
} catch (ex) {
|
||||
logger.warn("Error while opening indexed db:", ex);
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
request.onerror = err => {
|
||||
logger.log("Indexed DB can *not* be accessed: ", err);
|
||||
logger.log("Using fallback to local storage");
|
||||
this.app.storage = new StorageImplBrowser(this.app);
|
||||
resolve();
|
||||
};
|
||||
request.onsuccess = () => {
|
||||
logger.log("Indexed DB *can* be accessed");
|
||||
this.app.storage = new StorageImplBrowserIndexedDB(this.app);
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
getId() {
|
||||
return "browser@" + this.embedProvider.id;
|
||||
}
|
||||
|
||||
getUiScale() {
|
||||
if (IS_MOBILE) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const avgDims = Math.min(this.app.screenWidth, this.app.screenHeight);
|
||||
return clamp((avgDims / 1000.0) * 1.9, 0.1, 10);
|
||||
}
|
||||
|
||||
getSupportsRestart() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getTouchPanStrength() {
|
||||
return IS_MOBILE ? 1 : 0.5;
|
||||
}
|
||||
|
||||
openExternalLink(url, force = false) {
|
||||
logger.log("Opening external:", url);
|
||||
if (force || this.embedProvider.externalLinks) {
|
||||
window.open(url);
|
||||
} else {
|
||||
// Do nothing
|
||||
alert(
|
||||
"This platform does not allow opening external links. You can play on https://shapez.io directly to open them.\n\nClicked Link: " +
|
||||
url
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
performRestart() {
|
||||
logger.log("Performing restart");
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects if there is an adblocker installed
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
detectAdblock() {
|
||||
return Promise.race([
|
||||
new Promise(resolve => {
|
||||
// If the request wasn't blocked within a very short period of time, this means
|
||||
// the adblocker is not active and the request was actually made -> ignore it then
|
||||
setTimeout(() => resolve(false), 30);
|
||||
}),
|
||||
new Promise(resolve => {
|
||||
fetch("https://googleads.g.doubleclick.net/pagead/id", {
|
||||
method: "HEAD",
|
||||
mode: "no-cors",
|
||||
})
|
||||
.then(res => {
|
||||
resolve(false);
|
||||
})
|
||||
.catch(err => {
|
||||
resolve(true);
|
||||
});
|
||||
}),
|
||||
]);
|
||||
}
|
||||
|
||||
initializeAdProvider() {
|
||||
if (G_IS_DEV && !globalConfig.debug.testAds) {
|
||||
logger.log("Ads disabled in local environment");
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
// First, detect adblocker
|
||||
return this.detectAdblock().then(hasAdblocker => {
|
||||
if (hasAdblocker) {
|
||||
logger.log("Adblock detected");
|
||||
return;
|
||||
}
|
||||
|
||||
const adProvider = this.embedProvider.adProvider;
|
||||
this.app.adProvider = new adProvider(this.app);
|
||||
return this.app.adProvider.initialize().catch(err => {
|
||||
logger.error("Failed to initialize ad provider, disabling ads:", err);
|
||||
this.app.adProvider = new NoAdProvider(this.app);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
exitApp() {
|
||||
// Can not exit app
|
||||
}
|
||||
}
|
||||
|
@ -1,65 +1,57 @@
|
||||
import { PlatformWrapperImplBrowser } from "../browser/wrapper";
|
||||
import { getIPCRenderer } from "../../core/utils";
|
||||
import { createLogger } from "../../core/logging";
|
||||
import { StorageImplElectron } from "./storage";
|
||||
import { PlatformWrapperInterface } from "../wrapper";
|
||||
|
||||
const logger = createLogger("electron-wrapper");
|
||||
|
||||
export class PlatformWrapperImplElectron extends PlatformWrapperImplBrowser {
|
||||
initialize() {
|
||||
this.app.storage = new StorageImplElectron(this);
|
||||
return PlatformWrapperInterface.prototype.initialize.call(this);
|
||||
}
|
||||
|
||||
getId() {
|
||||
return "electron";
|
||||
}
|
||||
|
||||
getSupportsRestart() {
|
||||
return true;
|
||||
}
|
||||
|
||||
openExternalLink(url) {
|
||||
logger.log(this, "Opening external:", url);
|
||||
window.open(url, "about:blank");
|
||||
}
|
||||
|
||||
getSupportsAds() {
|
||||
return false;
|
||||
}
|
||||
|
||||
getHasUnlimitedSavegames() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getShowDemoBadges() {
|
||||
return false;
|
||||
}
|
||||
|
||||
performRestart() {
|
||||
logger.log(this, "Performing restart");
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
initializeAdProvider() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
getSupportsFullscreen() {
|
||||
return true;
|
||||
}
|
||||
|
||||
setFullscreen(flag) {
|
||||
getIPCRenderer().send("set-fullscreen", flag);
|
||||
}
|
||||
|
||||
getSupportsAppExit() {
|
||||
return true;
|
||||
}
|
||||
|
||||
exitApp() {
|
||||
logger.log(this, "Sending app exit signal");
|
||||
getIPCRenderer().send("exit-app");
|
||||
}
|
||||
}
|
||||
import { PlatformWrapperImplBrowser } from "../browser/wrapper";
|
||||
import { getIPCRenderer } from "../../core/utils";
|
||||
import { createLogger } from "../../core/logging";
|
||||
import { StorageImplElectron } from "./storage";
|
||||
import { PlatformWrapperInterface } from "../wrapper";
|
||||
|
||||
const logger = createLogger("electron-wrapper");
|
||||
|
||||
export class PlatformWrapperImplElectron extends PlatformWrapperImplBrowser {
|
||||
initialize() {
|
||||
this.app.storage = new StorageImplElectron(this);
|
||||
return PlatformWrapperInterface.prototype.initialize.call(this);
|
||||
}
|
||||
|
||||
getId() {
|
||||
return "electron";
|
||||
}
|
||||
|
||||
getSupportsRestart() {
|
||||
return true;
|
||||
}
|
||||
|
||||
openExternalLink(url) {
|
||||
logger.log(this, "Opening external:", url);
|
||||
window.open(url, "about:blank");
|
||||
}
|
||||
|
||||
getSupportsAds() {
|
||||
return false;
|
||||
}
|
||||
|
||||
performRestart() {
|
||||
logger.log(this, "Performing restart");
|
||||
window.location.reload(true);
|
||||
}
|
||||
|
||||
initializeAdProvider() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
getSupportsFullscreen() {
|
||||
return true;
|
||||
}
|
||||
|
||||
setFullscreen(flag) {
|
||||
getIPCRenderer().send("set-fullscreen", flag);
|
||||
}
|
||||
|
||||
getSupportsAppExit() {
|
||||
return true;
|
||||
}
|
||||
|
||||
exitApp() {
|
||||
logger.log(this, "Sending app exit signal");
|
||||
getIPCRenderer().send("exit-app");
|
||||
}
|
||||
}
|
||||
|
@ -1,142 +1,131 @@
|
||||
/* typehints:start */
|
||||
import { Application } from "../application";
|
||||
/* typehints:end */
|
||||
|
||||
import { IS_MOBILE } from "../core/config";
|
||||
|
||||
export class PlatformWrapperInterface {
|
||||
constructor(app) {
|
||||
/** @type {Application} */
|
||||
this.app = app;
|
||||
}
|
||||
|
||||
/** @returns {string} */
|
||||
getId() {
|
||||
abstract;
|
||||
return "unknown-platform";
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the UI scale, called on every resize
|
||||
* @returns {number} */
|
||||
getUiScale() {
|
||||
return 1;
|
||||
}
|
||||
|
||||
/** @returns {boolean} */
|
||||
getSupportsRestart() {
|
||||
abstract;
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the user has unlimited savegames
|
||||
*/
|
||||
getHasUnlimitedSavegames() {
|
||||
return true;
|
||||
}
|
||||
|
||||
getShowDemoBadges() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the strength of touch pans with the mouse
|
||||
*/
|
||||
getTouchPanStrength() {
|
||||
return 1;
|
||||
}
|
||||
|
||||
/** @returns {Promise<void>} */
|
||||
initialize() {
|
||||
document.documentElement.classList.add("p-" + this.getId());
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should initialize the apps ad provider in case supported
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
initializeAdProvider() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the minimum supported zoom level
|
||||
* @returns {number}
|
||||
*/
|
||||
getMinimumZoom() {
|
||||
return 0.1 * this.getScreenScale();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the maximum supported zoom level
|
||||
* @returns {number}
|
||||
*/
|
||||
getMaximumZoom() {
|
||||
return 3.5 * this.getScreenScale();
|
||||
}
|
||||
|
||||
getScreenScale() {
|
||||
return Math.min(window.innerWidth, window.innerHeight) / 1024.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return if this platform supports ads at all
|
||||
*/
|
||||
getSupportsAds() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to open an external url
|
||||
* @param {string} url
|
||||
* @param {boolean=} force Whether to always open the url even if not allowed
|
||||
*/
|
||||
openExternalLink(url, force = false) {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to restart the app
|
||||
*/
|
||||
performRestart() {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this platform supports a toggleable fullscreen
|
||||
*/
|
||||
getSupportsFullscreen() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should set the apps fullscreen state to the desired state
|
||||
* @param {boolean} flag
|
||||
*/
|
||||
setFullscreen(flag) {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this platform supports quitting the app
|
||||
*/
|
||||
getSupportsAppExit() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempts to quit the app
|
||||
*/
|
||||
exitApp() {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this platform supports a keyboard
|
||||
*/
|
||||
getSupportsKeyboard() {
|
||||
return !IS_MOBILE;
|
||||
}
|
||||
}
|
||||
/* typehints:start */
|
||||
import { Application } from "../application";
|
||||
/* typehints:end */
|
||||
|
||||
import { IS_MOBILE } from "../core/config";
|
||||
|
||||
export class PlatformWrapperInterface {
|
||||
constructor(app) {
|
||||
/** @type {Application} */
|
||||
this.app = app;
|
||||
}
|
||||
|
||||
/** @returns {string} */
|
||||
getId() {
|
||||
abstract;
|
||||
return "unknown-platform";
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the UI scale, called on every resize
|
||||
* @returns {number} */
|
||||
getUiScale() {
|
||||
return 1;
|
||||
}
|
||||
|
||||
/** @returns {boolean} */
|
||||
getSupportsRestart() {
|
||||
abstract;
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the strength of touch pans with the mouse
|
||||
*/
|
||||
getTouchPanStrength() {
|
||||
return 1;
|
||||
}
|
||||
|
||||
/** @returns {Promise<void>} */
|
||||
initialize() {
|
||||
document.documentElement.classList.add("p-" + this.getId());
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should initialize the apps ad provider in case supported
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
initializeAdProvider() {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the minimum supported zoom level
|
||||
* @returns {number}
|
||||
*/
|
||||
getMinimumZoom() {
|
||||
return 0.1 * this.getScreenScale();
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return the maximum supported zoom level
|
||||
* @returns {number}
|
||||
*/
|
||||
getMaximumZoom() {
|
||||
return 3.5 * this.getScreenScale();
|
||||
}
|
||||
|
||||
getScreenScale() {
|
||||
return Math.min(window.innerWidth, window.innerHeight) / 1024.0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should return if this platform supports ads at all
|
||||
*/
|
||||
getSupportsAds() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to open an external url
|
||||
* @param {string} url
|
||||
* @param {boolean=} force Whether to always open the url even if not allowed
|
||||
*/
|
||||
openExternalLink(url, force = false) {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempt to restart the app
|
||||
*/
|
||||
performRestart() {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this platform supports a toggleable fullscreen
|
||||
*/
|
||||
getSupportsFullscreen() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Should set the apps fullscreen state to the desired state
|
||||
* @param {boolean} flag
|
||||
*/
|
||||
setFullscreen(flag) {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns whether this platform supports quitting the app
|
||||
*/
|
||||
getSupportsAppExit() {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Attempts to quit the app
|
||||
*/
|
||||
exitApp() {
|
||||
abstract;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether this platform supports a keyboard
|
||||
*/
|
||||
getSupportsKeyboard() {
|
||||
return !IS_MOBILE;
|
||||
}
|
||||
}
|
||||
|
@ -1,179 +1,173 @@
|
||||
import { TextualGameState } from "../core/textual_game_state";
|
||||
import { SOUNDS } from "../platform/sound";
|
||||
import { T } from "../translations";
|
||||
import { KEYMAPPINGS, getStringForKeyCode } from "../game/key_action_mapper";
|
||||
import { Dialog } from "../core/modal_dialog_elements";
|
||||
import { IS_DEMO } from "../core/config";
|
||||
|
||||
export class KeybindingsState extends TextualGameState {
|
||||
constructor() {
|
||||
super("KeybindingsState");
|
||||
}
|
||||
|
||||
getStateHeaderTitle() {
|
||||
return T.keybindings.title;
|
||||
}
|
||||
|
||||
getMainContentHTML() {
|
||||
return `
|
||||
|
||||
<div class="topEntries">
|
||||
<span class="hint">${T.keybindings.hint}</span>
|
||||
<button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="keybindings">
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
onEnter() {
|
||||
const keybindingsElem = this.htmlElement.querySelector(".keybindings");
|
||||
|
||||
this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings);
|
||||
|
||||
for (const category in KEYMAPPINGS) {
|
||||
const categoryDiv = document.createElement("div");
|
||||
categoryDiv.classList.add("category");
|
||||
keybindingsElem.appendChild(categoryDiv);
|
||||
|
||||
const labelDiv = document.createElement("strong");
|
||||
labelDiv.innerText = T.keybindings.categoryLabels[category];
|
||||
labelDiv.classList.add("categoryLabel");
|
||||
categoryDiv.appendChild(labelDiv);
|
||||
|
||||
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||
|
||||
const elem = document.createElement("div");
|
||||
elem.classList.add("entry");
|
||||
elem.setAttribute("data-keybinding", keybindingId);
|
||||
categoryDiv.appendChild(elem);
|
||||
|
||||
const title = document.createElement("span");
|
||||
title.classList.add("title");
|
||||
title.innerText = T.keybindings.mappings[keybindingId];
|
||||
elem.appendChild(title);
|
||||
|
||||
const mappingDiv = document.createElement("span");
|
||||
mappingDiv.classList.add("mapping");
|
||||
elem.appendChild(mappingDiv);
|
||||
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.classList.add("styledButton", "editKeybinding");
|
||||
|
||||
const resetBtn = document.createElement("button");
|
||||
resetBtn.classList.add("styledButton", "resetKeybinding");
|
||||
|
||||
if (mapped.builtin) {
|
||||
editBtn.classList.add("disabled");
|
||||
resetBtn.classList.add("disabled");
|
||||
} else {
|
||||
this.trackClicks(editBtn, () => this.editKeybinding(keybindingId));
|
||||
this.trackClicks(resetBtn, () => this.resetKeybinding(keybindingId));
|
||||
}
|
||||
elem.appendChild(editBtn);
|
||||
elem.appendChild(resetBtn);
|
||||
}
|
||||
}
|
||||
this.updateKeybindings();
|
||||
}
|
||||
|
||||
editKeybinding(id) {
|
||||
// if (IS_DEMO) {
|
||||
// this.dialogs.showFeatureRestrictionInfo(T.demo.features.customizeKeybindings);
|
||||
// return;
|
||||
// }
|
||||
|
||||
const dialog = new Dialog({
|
||||
app: this.app,
|
||||
title: T.dialogs.editKeybinding.title,
|
||||
contentHTML: T.dialogs.editKeybinding.desc,
|
||||
buttons: ["cancel:good"],
|
||||
type: "info",
|
||||
});
|
||||
|
||||
dialog.inputReciever.keydown.add(({ keyCode, shift, alt, event }) => {
|
||||
if (keyCode === 27) {
|
||||
this.dialogs.closeDialog(dialog);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (event.target && event.target.tagName === "BUTTON" && keyCode === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
// Enter
|
||||
keyCode === 13
|
||||
) {
|
||||
// Ignore builtins
|
||||
return;
|
||||
}
|
||||
|
||||
this.app.settings.updateKeybindingOverride(id, keyCode);
|
||||
|
||||
this.dialogs.closeDialog(dialog);
|
||||
this.updateKeybindings();
|
||||
});
|
||||
|
||||
dialog.inputReciever.backButton.add(() => {});
|
||||
this.dialogs.internalShowDialog(dialog);
|
||||
|
||||
this.app.sound.playUiSound(SOUNDS.dialogOk);
|
||||
}
|
||||
|
||||
updateKeybindings() {
|
||||
const overrides = this.app.settings.getKeybindingOverrides();
|
||||
for (const category in KEYMAPPINGS) {
|
||||
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||
|
||||
const container = this.htmlElement.querySelector("[data-keybinding='" + keybindingId + "']");
|
||||
assert(container, "Container for keybinding not found: " + keybindingId);
|
||||
|
||||
let keyCode = mapped.keyCode;
|
||||
if (overrides[keybindingId]) {
|
||||
keyCode = overrides[keybindingId];
|
||||
}
|
||||
|
||||
const mappingDiv = container.querySelector(".mapping");
|
||||
mappingDiv.innerHTML = getStringForKeyCode(keyCode);
|
||||
mappingDiv.classList.toggle("changed", !!overrides[keybindingId]);
|
||||
|
||||
const resetBtn = container.querySelector("button.resetKeybinding");
|
||||
resetBtn.classList.toggle("disabled", mapped.builtin || !overrides[keybindingId]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resetKeybinding(id) {
|
||||
this.app.settings.resetKeybindingOverride(id);
|
||||
this.updateKeybindings();
|
||||
}
|
||||
|
||||
resetBindings() {
|
||||
const { reset } = this.dialogs.showWarning(
|
||||
T.dialogs.resetKeybindingsConfirmation.title,
|
||||
T.dialogs.resetKeybindingsConfirmation.desc,
|
||||
["cancel:good", "reset:bad"]
|
||||
);
|
||||
|
||||
reset.add(() => {
|
||||
this.app.settings.resetKeybindingOverrides();
|
||||
this.updateKeybindings();
|
||||
|
||||
this.dialogs.showInfo(T.dialogs.keybindingsResetOk.title, T.dialogs.keybindingsResetOk.desc);
|
||||
});
|
||||
}
|
||||
|
||||
getDefaultPreviousState() {
|
||||
return "SettingsState";
|
||||
}
|
||||
}
|
||||
import { Dialog } from "../core/modal_dialog_elements";
|
||||
import { TextualGameState } from "../core/textual_game_state";
|
||||
import { getStringForKeyCode, KEYMAPPINGS } from "../game/key_action_mapper";
|
||||
import { SOUNDS } from "../platform/sound";
|
||||
import { T } from "../translations";
|
||||
|
||||
export class KeybindingsState extends TextualGameState {
|
||||
constructor() {
|
||||
super("KeybindingsState");
|
||||
}
|
||||
|
||||
getStateHeaderTitle() {
|
||||
return T.keybindings.title;
|
||||
}
|
||||
|
||||
getMainContentHTML() {
|
||||
return `
|
||||
|
||||
<div class="topEntries">
|
||||
<span class="hint">${T.keybindings.hint}</span>
|
||||
<button class="styledButton resetBindings">${T.keybindings.resetKeybindings}</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="keybindings">
|
||||
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
onEnter() {
|
||||
const keybindingsElem = this.htmlElement.querySelector(".keybindings");
|
||||
|
||||
this.trackClicks(this.htmlElement.querySelector(".resetBindings"), this.resetBindings);
|
||||
|
||||
for (const category in KEYMAPPINGS) {
|
||||
const categoryDiv = document.createElement("div");
|
||||
categoryDiv.classList.add("category");
|
||||
keybindingsElem.appendChild(categoryDiv);
|
||||
|
||||
const labelDiv = document.createElement("strong");
|
||||
labelDiv.innerText = T.keybindings.categoryLabels[category];
|
||||
labelDiv.classList.add("categoryLabel");
|
||||
categoryDiv.appendChild(labelDiv);
|
||||
|
||||
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||
|
||||
const elem = document.createElement("div");
|
||||
elem.classList.add("entry");
|
||||
elem.setAttribute("data-keybinding", keybindingId);
|
||||
categoryDiv.appendChild(elem);
|
||||
|
||||
const title = document.createElement("span");
|
||||
title.classList.add("title");
|
||||
title.innerText = T.keybindings.mappings[keybindingId];
|
||||
elem.appendChild(title);
|
||||
|
||||
const mappingDiv = document.createElement("span");
|
||||
mappingDiv.classList.add("mapping");
|
||||
elem.appendChild(mappingDiv);
|
||||
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.classList.add("styledButton", "editKeybinding");
|
||||
|
||||
const resetBtn = document.createElement("button");
|
||||
resetBtn.classList.add("styledButton", "resetKeybinding");
|
||||
|
||||
if (mapped.builtin) {
|
||||
editBtn.classList.add("disabled");
|
||||
resetBtn.classList.add("disabled");
|
||||
} else {
|
||||
this.trackClicks(editBtn, () => this.editKeybinding(keybindingId));
|
||||
this.trackClicks(resetBtn, () => this.resetKeybinding(keybindingId));
|
||||
}
|
||||
elem.appendChild(editBtn);
|
||||
elem.appendChild(resetBtn);
|
||||
}
|
||||
}
|
||||
this.updateKeybindings();
|
||||
}
|
||||
|
||||
editKeybinding(id) {
|
||||
const dialog = new Dialog({
|
||||
app: this.app,
|
||||
title: T.dialogs.editKeybinding.title,
|
||||
contentHTML: T.dialogs.editKeybinding.desc,
|
||||
buttons: ["cancel:good"],
|
||||
type: "info",
|
||||
});
|
||||
|
||||
dialog.inputReciever.keydown.add(({ keyCode, shift, alt, event }) => {
|
||||
if (keyCode === 27) {
|
||||
this.dialogs.closeDialog(dialog);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (event.target && event.target.tagName === "BUTTON" && keyCode === 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
// Enter
|
||||
keyCode === 13
|
||||
) {
|
||||
// Ignore builtins
|
||||
return;
|
||||
}
|
||||
|
||||
this.app.settings.updateKeybindingOverride(id, keyCode);
|
||||
|
||||
this.dialogs.closeDialog(dialog);
|
||||
this.updateKeybindings();
|
||||
});
|
||||
|
||||
dialog.inputReciever.backButton.add(() => {});
|
||||
this.dialogs.internalShowDialog(dialog);
|
||||
|
||||
this.app.sound.playUiSound(SOUNDS.dialogOk);
|
||||
}
|
||||
|
||||
updateKeybindings() {
|
||||
const overrides = this.app.settings.getKeybindingOverrides();
|
||||
for (const category in KEYMAPPINGS) {
|
||||
for (const keybindingId in KEYMAPPINGS[category]) {
|
||||
const mapped = KEYMAPPINGS[category][keybindingId];
|
||||
|
||||
const container = this.htmlElement.querySelector("[data-keybinding='" + keybindingId + "']");
|
||||
assert(container, "Container for keybinding not found: " + keybindingId);
|
||||
|
||||
let keyCode = mapped.keyCode;
|
||||
if (overrides[keybindingId]) {
|
||||
keyCode = overrides[keybindingId];
|
||||
}
|
||||
|
||||
const mappingDiv = container.querySelector(".mapping");
|
||||
mappingDiv.innerHTML = getStringForKeyCode(keyCode);
|
||||
mappingDiv.classList.toggle("changed", !!overrides[keybindingId]);
|
||||
|
||||
const resetBtn = container.querySelector("button.resetKeybinding");
|
||||
resetBtn.classList.toggle("disabled", mapped.builtin || !overrides[keybindingId]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
resetKeybinding(id) {
|
||||
this.app.settings.resetKeybindingOverride(id);
|
||||
this.updateKeybindings();
|
||||
}
|
||||
|
||||
resetBindings() {
|
||||
const { reset } = this.dialogs.showWarning(
|
||||
T.dialogs.resetKeybindingsConfirmation.title,
|
||||
T.dialogs.resetKeybindingsConfirmation.desc,
|
||||
["cancel:good", "reset:bad"]
|
||||
);
|
||||
|
||||
reset.add(() => {
|
||||
this.app.settings.resetKeybindingOverrides();
|
||||
this.updateKeybindings();
|
||||
|
||||
this.dialogs.showInfo(T.dialogs.keybindingsResetOk.title, T.dialogs.keybindingsResetOk.desc);
|
||||
});
|
||||
}
|
||||
|
||||
getDefaultPreviousState() {
|
||||
return "SettingsState";
|
||||
}
|
||||
}
|
||||
|
@ -1,169 +1,169 @@
|
||||
import { TextualGameState } from "../core/textual_game_state";
|
||||
import { formatSecondsToTimeAgo } from "../core/utils";
|
||||
import { allApplicationSettings, enumCategories } from "../profile/application_settings";
|
||||
import { T } from "../translations";
|
||||
|
||||
export class SettingsState extends TextualGameState {
|
||||
constructor() {
|
||||
super("SettingsState");
|
||||
}
|
||||
|
||||
getStateHeaderTitle() {
|
||||
return T.settings.title;
|
||||
}
|
||||
|
||||
getMainContentHTML() {
|
||||
return `
|
||||
|
||||
<div class="sidebar">
|
||||
${this.getCategoryButtonsHtml()}
|
||||
|
||||
${
|
||||
this.app.platformWrapper.getSupportsKeyboard()
|
||||
? `
|
||||
<button class="styledButton categoryButton editKeybindings">
|
||||
${T.keybindings.title}
|
||||
</button>`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="other">
|
||||
<button class="styledButton about">${T.about.title}</button>
|
||||
|
||||
<div class="versionbar">
|
||||
<div class="buildVersion">${T.global.loading} ...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="categoryContainer">
|
||||
${this.getSettingsHtml()}
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
getCategoryButtonsHtml() {
|
||||
return Object.keys(enumCategories)
|
||||
.map(key => enumCategories[key])
|
||||
.map(
|
||||
category =>
|
||||
`
|
||||
<button class="styledButton categoryButton" data-category-btn="${category}">
|
||||
${T.settings.categories[category]}
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
getSettingsHtml() {
|
||||
const categoriesHTML = {};
|
||||
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const catName = enumCategories[key];
|
||||
categoriesHTML[catName] = `<div class="category" data-category="${catName}">`;
|
||||
});
|
||||
|
||||
for (let i = 0; i < allApplicationSettings.length; ++i) {
|
||||
const setting = allApplicationSettings[i];
|
||||
|
||||
categoriesHTML[setting.categoryId] += setting.getHtml();
|
||||
}
|
||||
|
||||
return Object.keys(categoriesHTML)
|
||||
.map(k => categoriesHTML[k] + "</div>")
|
||||
.join("");
|
||||
}
|
||||
|
||||
renderBuildText() {
|
||||
const labelVersion = this.htmlElement.querySelector(".buildVersion");
|
||||
const lastBuildMs = new Date().getTime() - G_BUILD_TIME;
|
||||
const lastBuildText = formatSecondsToTimeAgo(lastBuildMs / 1000.0);
|
||||
|
||||
const version = T.settings.versionBadges[G_APP_ENVIRONMENT];
|
||||
|
||||
labelVersion.innerHTML = `
|
||||
<span class='version'>
|
||||
${G_BUILD_VERSION} @ ${version} @ ${G_BUILD_COMMIT_HASH}
|
||||
</span>
|
||||
<span class='buildTime'>
|
||||
${T.settings.buildDate.replace("<at-date>", lastBuildText)}<br />
|
||||
</span>`;
|
||||
}
|
||||
|
||||
onEnter(payload) {
|
||||
this.renderBuildText();
|
||||
this.trackClicks(this.htmlElement.querySelector(".about"), this.onAboutClicked, {
|
||||
preventDefault: false,
|
||||
});
|
||||
|
||||
const keybindingsButton = this.htmlElement.querySelector(".editKeybindings");
|
||||
|
||||
if (keybindingsButton) {
|
||||
this.trackClicks(keybindingsButton, this.onKeybindingsClicked, { preventDefault: false });
|
||||
}
|
||||
|
||||
this.initSettings();
|
||||
this.initCategoryButtons();
|
||||
|
||||
this.htmlElement.querySelector(".category").classList.add("active");
|
||||
this.htmlElement.querySelector(".categoryButton").classList.add("active");
|
||||
}
|
||||
|
||||
setActiveCategory(category) {
|
||||
const previousCategory = this.htmlElement.querySelector(".category.active");
|
||||
const previousCategoryButton = this.htmlElement.querySelector(".categoryButton.active");
|
||||
|
||||
if (previousCategory.getAttribute("data-category") == category) {
|
||||
return;
|
||||
}
|
||||
|
||||
previousCategory.classList.remove("active");
|
||||
previousCategoryButton.classList.remove("active");
|
||||
|
||||
const newCategory = this.htmlElement.querySelector("[data-category='" + category + "']");
|
||||
const newCategoryButton = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
|
||||
newCategory.classList.add("active");
|
||||
newCategoryButton.classList.add("active");
|
||||
}
|
||||
|
||||
initSettings() {
|
||||
allApplicationSettings.forEach(setting => {
|
||||
/** @type {HTMLElement} */
|
||||
const element = this.htmlElement.querySelector("[data-setting='" + setting.id + "']");
|
||||
setting.bind(this.app, element, this.dialogs);
|
||||
setting.syncValueToElement();
|
||||
this.trackClicks(
|
||||
element,
|
||||
() => {
|
||||
setting.modify();
|
||||
},
|
||||
{ preventDefault: false }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
initCategoryButtons() {
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const category = enumCategories[key];
|
||||
const button = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
this.trackClicks(
|
||||
button,
|
||||
() => {
|
||||
this.setActiveCategory(category);
|
||||
},
|
||||
{ preventDefault: false }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onAboutClicked() {
|
||||
this.moveToStateAddGoBack("AboutState");
|
||||
}
|
||||
|
||||
onKeybindingsClicked() {
|
||||
this.moveToStateAddGoBack("KeybindingsState");
|
||||
}
|
||||
}
|
||||
import { TextualGameState } from "../core/textual_game_state";
|
||||
import { formatSecondsToTimeAgo } from "../core/utils";
|
||||
import { allApplicationSettings, enumCategories } from "../profile/application_settings";
|
||||
import { T } from "../translations";
|
||||
|
||||
export class SettingsState extends TextualGameState {
|
||||
constructor() {
|
||||
super("SettingsState");
|
||||
}
|
||||
|
||||
getStateHeaderTitle() {
|
||||
return T.settings.title;
|
||||
}
|
||||
|
||||
getMainContentHTML() {
|
||||
return `
|
||||
|
||||
<div class="sidebar">
|
||||
${this.getCategoryButtonsHtml()}
|
||||
|
||||
${
|
||||
this.app.platformWrapper.getSupportsKeyboard()
|
||||
? `
|
||||
<button class="styledButton categoryButton editKeybindings">
|
||||
${T.keybindings.title}
|
||||
</button>`
|
||||
: ""
|
||||
}
|
||||
|
||||
<div class="other">
|
||||
<button class="styledButton about">${T.about.title}</button>
|
||||
|
||||
<div class="versionbar">
|
||||
<div class="buildVersion">${T.global.loading} ...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="categoryContainer">
|
||||
${this.getSettingsHtml()}
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
getCategoryButtonsHtml() {
|
||||
return Object.keys(enumCategories)
|
||||
.map(key => enumCategories[key])
|
||||
.map(
|
||||
category =>
|
||||
`
|
||||
<button class="styledButton categoryButton" data-category-btn="${category}">
|
||||
${T.settings.categories[category]}
|
||||
</button>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
getSettingsHtml() {
|
||||
const categoriesHTML = {};
|
||||
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const catName = enumCategories[key];
|
||||
categoriesHTML[catName] = `<div class="category" data-category="${catName}">`;
|
||||
});
|
||||
|
||||
for (let i = 0; i < allApplicationSettings.length; ++i) {
|
||||
const setting = allApplicationSettings[i];
|
||||
|
||||
categoriesHTML[setting.categoryId] += setting.getHtml(this.app);
|
||||
}
|
||||
|
||||
return Object.keys(categoriesHTML)
|
||||
.map(k => categoriesHTML[k] + "</div>")
|
||||
.join("");
|
||||
}
|
||||
|
||||
renderBuildText() {
|
||||
const labelVersion = this.htmlElement.querySelector(".buildVersion");
|
||||
const lastBuildMs = new Date().getTime() - G_BUILD_TIME;
|
||||
const lastBuildText = formatSecondsToTimeAgo(lastBuildMs / 1000.0);
|
||||
|
||||
const version = T.settings.versionBadges[G_APP_ENVIRONMENT];
|
||||
|
||||
labelVersion.innerHTML = `
|
||||
<span class='version'>
|
||||
${G_BUILD_VERSION} @ ${version} @ ${G_BUILD_COMMIT_HASH}
|
||||
</span>
|
||||
<span class='buildTime'>
|
||||
${T.settings.buildDate.replace("<at-date>", lastBuildText)}<br />
|
||||
</span>`;
|
||||
}
|
||||
|
||||
onEnter(payload) {
|
||||
this.renderBuildText();
|
||||
this.trackClicks(this.htmlElement.querySelector(".about"), this.onAboutClicked, {
|
||||
preventDefault: false,
|
||||
});
|
||||
|
||||
const keybindingsButton = this.htmlElement.querySelector(".editKeybindings");
|
||||
|
||||
if (keybindingsButton) {
|
||||
this.trackClicks(keybindingsButton, this.onKeybindingsClicked, { preventDefault: false });
|
||||
}
|
||||
|
||||
this.initSettings();
|
||||
this.initCategoryButtons();
|
||||
|
||||
this.htmlElement.querySelector(".category").classList.add("active");
|
||||
this.htmlElement.querySelector(".categoryButton").classList.add("active");
|
||||
}
|
||||
|
||||
setActiveCategory(category) {
|
||||
const previousCategory = this.htmlElement.querySelector(".category.active");
|
||||
const previousCategoryButton = this.htmlElement.querySelector(".categoryButton.active");
|
||||
|
||||
if (previousCategory.getAttribute("data-category") == category) {
|
||||
return;
|
||||
}
|
||||
|
||||
previousCategory.classList.remove("active");
|
||||
previousCategoryButton.classList.remove("active");
|
||||
|
||||
const newCategory = this.htmlElement.querySelector("[data-category='" + category + "']");
|
||||
const newCategoryButton = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
|
||||
newCategory.classList.add("active");
|
||||
newCategoryButton.classList.add("active");
|
||||
}
|
||||
|
||||
initSettings() {
|
||||
allApplicationSettings.forEach(setting => {
|
||||
/** @type {HTMLElement} */
|
||||
const element = this.htmlElement.querySelector("[data-setting='" + setting.id + "']");
|
||||
setting.bind(this.app, element, this.dialogs);
|
||||
setting.syncValueToElement();
|
||||
this.trackClicks(
|
||||
element,
|
||||
() => {
|
||||
setting.modify();
|
||||
},
|
||||
{ preventDefault: false }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
initCategoryButtons() {
|
||||
Object.keys(enumCategories).forEach(key => {
|
||||
const category = enumCategories[key];
|
||||
const button = this.htmlElement.querySelector("[data-category-btn='" + category + "']");
|
||||
this.trackClicks(
|
||||
button,
|
||||
() => {
|
||||
this.setActiveCategory(category);
|
||||
},
|
||||
{ preventDefault: false }
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
onAboutClicked() {
|
||||
this.moveToStateAddGoBack("AboutState");
|
||||
}
|
||||
|
||||
onKeybindingsClicked() {
|
||||
this.moveToStateAddGoBack("KeybindingsState");
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in new issue