Skip to content

Commit

Permalink
2.8.0
Browse files Browse the repository at this point in the history
  • Loading branch information
eccs0103 committed May 25, 2024
1 parent 419764e commit 93237f1
Show file tree
Hide file tree
Showing 5 changed files with 171 additions and 6 deletions.
4 changes: 4 additions & 0 deletions sandbox/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ div.--toolkit {
}
}

div.--toolkit img.icon {
filter: invert(1);
}

input[type="checkbox"]#toggle-play:checked + label[role="checkbox"] {
background-color: unset;

Expand Down
28 changes: 28 additions & 0 deletions scripts/structure.js
Original file line number Diff line number Diff line change
Expand Up @@ -393,6 +393,7 @@ class Elemental extends EventTarget {
/** @type {boolean} */
#isGenerated = false;
/**
* Indicates whether the board has been generated.
* @readonly
* @returns {boolean}
*/
Expand Down Expand Up @@ -695,6 +696,7 @@ class Settings {
/** @type {string[]} */
static #colorSchemes = [`system`, `light`, `dark`];
/**
* Gets the available color schemes.
* @readonly
* @returns {string[]}
*/
Expand All @@ -704,6 +706,7 @@ class Settings {
/** @type {number} */
static #minBoardSize = 20;
/**
* Gets the minimum board size.
* @readonly
* @returns {number}
*/
Expand All @@ -713,6 +716,7 @@ class Settings {
/** @type {number} */
static #maxBoardSize = 200;
/**
* Gets the maximum board size.
* @readonly
* @returns {number}
*/
Expand All @@ -722,6 +726,7 @@ class Settings {
/** @type {number} */
static #minFPSLimit = 1;
/**
* Gets the minimum FPS limit.
* @readonly
* @returns {number}
*/
Expand All @@ -731,6 +736,7 @@ class Settings {
/** @type {number} */
static #maxFPSLimit = 240;
/**
* Gets the maximum FPS limit.
* @readonly
* @returns {number}
*/
Expand All @@ -740,14 +746,17 @@ class Settings {
/** @type {string} */
#colorScheme = Settings.#colorSchemes[0];
/**
* Gets the current color scheme.
* @returns {string}
*/
get colorScheme() {
return this.#colorScheme;
}
/**
* Sets the color scheme.
* @param {string} value
* @returns {void}
* @throws {TypeError} If the color scheme is invalid.
*/
set colorScheme(value) {
if (!Settings.#colorSchemes.includes(value)) throw new TypeError(`Invalid '${value}' color scheme type`);
Expand All @@ -756,30 +765,38 @@ class Settings {
/** @type {number} */
#boardSize = 50;
/**
* Gets the current board size.
* @returns {number}
*/
get boardSize() {
return this.#boardSize;
}
/**
* Sets the board size.
* @param {number} value
* @returns {void}
* @throws {TypeError} If the value is not a finite integer.
* @throws {RangeError} If the board size is out of range.
*/
set boardSize(value) {
if (!Number.isInteger(value)) throw new TypeError(`The board size ${value} must be finite integer number`);
if (Settings.#minBoardSize > value || value > Settings.#maxBoardSize) throw new RangeError(`Board ${value} size is out of range [${Settings.#minBoardSize} - ${Settings.#maxBoardSize}]`);
this.#boardSize = value;
}
/** @type {CycleTypes} */
#cycleType = CycleTypes.ask;
/**
* Gets the current cycle type.
* @returns {CycleTypes}
*/
get cycleType() {
return this.#cycleType;
}
/**
* Sets the cycle type.
* @param {CycleTypes} value
* @returns {void}
* @throws {TypeError} Iif the cycle type is invalid.
*/
set cycleType(value) {
if (!Object.values(CycleTypes).includes(value)) throw new TypeError(`Invalid '${value}' cycle type type`);
Expand All @@ -788,28 +805,35 @@ class Settings {
/** @type {number} */
#FPSLimit = 60;
/**
* Gets the current FPS limit.
* @returns {number}
*/
get FPSLimit() {
return this.#FPSLimit;
}
/**
* Sets the FPS limit.
* @param {number} value
* @returns {void}
* @throws {TypeError} If the value is not a finite integer.
* @throws {RangeError} If the FPS limit is out of range.
*/
set FPSLimit(value) {
if (!Number.isInteger(value)) throw new TypeError(`The FPS limit ${value} must be finite integer number`);
if (Settings.#minFPSLimit > value || value > Settings.#maxFPSLimit) throw new RangeError(`FPS ${value} limit is out of range [${Settings.#minFPSLimit} - ${Settings.#maxFPSLimit}]`);
this.#FPSLimit = value;
}
/** @type {boolean} */
#showFPS = false;
/**
* Gets whether the FPS is shown.
* @returns {boolean}
*/
get showFPS() {
return this.#showFPS;
}
/**
* Sets whether to show the FPS.
* @param {boolean} value
* @returns {void}
*/
Expand All @@ -819,12 +843,14 @@ class Settings {
/** @type {boolean} */
#showCounter = false;
/**
* Gets whether the counter is shown.
* @returns {boolean}
*/
get showCounter() {
return this.#showCounter;
}
/**
* Sets whether to show the counter.
* @param {boolean} value
* @returns {void}
*/
Expand All @@ -834,12 +860,14 @@ class Settings {
/** @type {boolean} */
#showNullables = true;
/**
* Gets whether nullables are shown.
* @returns {boolean}
*/
get showNullables() {
return this.#showNullables;
}
/**
* Sets whether to show nullables.
* @param {boolean} value
* @returns {void}
*/
Expand Down
59 changes: 57 additions & 2 deletions settings/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,63 @@
<img src="../resources/icons/information.png" class="icon" alt="Information">
</a>
</nav>
<main class="flex">

<main class="flex primary-centered">
<div class="--panel-frame flex with-padding large-padding">
<div class="layer rounded flex column with-padding large-padding">
<h3>General</h3>
<section class="option">
<p class="title">Color scheme</p>
<select id="color-scheme" class="value depth rounded with-padding flex" required></select>
<dfn class="definition">External design of the page: color scheme, background and foreground, font.</dfn>
</section>
<hr class="depth">
<h3>Game</h3>
<section class="option">
<p class="title">Show FPS</p>
<input id="toggle-fps" type="checkbox" hidden>
<label for="toggle-fps" role="checkbox" class="value depth toggle">
<span class="layer knob"></span>
</label>
<dfn class="definition">Show or hide FPS counter with load indicator.</dfn>
</section>
<section class="option">
<p class="title">FPS limit</p>
<input id="fps-limit" type="number" inputmode="numeric" min="1" max="240" placeholder="[1 - 240]" required class="value depth rounded with-padding flex">
<dfn class="definition"> Frames per second limit, which is calculated for the speed of interaction of elements, as well as for calculating the number of frames per second.</dfn>
</section>
<section class="option" hidden>
<p class="title warn">Elements counter <small class="alert">Unstable with new design.</small></p>
<input id="toggle-counter" type="checkbox" hidden>
<label for="toggle-counter" role="checkbox" class="value depth toggle">
<span class="layer knob"></span>
</label>
<dfn class="definition">Show or hide the elements counter, which displays the icons of the elements, their names and quantities.</dfn>
<section class="option">
<p class="title">Hide nullables</p>
<input id="toggle-nullables" type="checkbox" hidden>
<label for="toggle-nullables" role="checkbox" class="value depth toggle">
<span class="layer knob"></span>
</label>
<dfn class="definition">Show or hide elements with zero count.</dfn>
</section>
</section>
<hr class="depth">
<h3>Board</h3>
<section class="option">
<p class="title">Board size</p>
<input id="board-size" type="number" inputmode="numeric" min="10" max="200" placeholder="[20 - 200]" required class="value depth rounded with-padding flex">
<dfn class="definition">Board generated size. The size can be from 20 to 200 inclusive. Resizing the board will generate it anew with the given coefficients.</dfn>
</section>
<section class="option">
<p class="title">On cycle end</p>
<select id="cycle-type" class="value depth rounded with-padding flex" required></select>
<dfn class="definition">Actions after the end of the game cycle.</dfn>
</section>
<section class="option">
<button id="reset-settings" class="layer warn-background rounded with-padding grid-line in-center">Reset settings</button>
</section>
</div>
</div>
</main>
<script src="../scripts/templates/loader.js"></script>
<script src="../scripts/templates/popup.js"></script>
Expand Down
76 changes: 72 additions & 4 deletions settings/script.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,75 @@
"use strict";

import { } from "../scripts/structure.js";
import { ArchiveManager } from "../scripts/modules/storage.js";
import { CycleTypes, Settings } from "../scripts/structure.js";

await window.ensure(() => {
// Your code goes here
});
//#region Initialize
const managerSettings = await ArchiveManager.construct(`${navigator.dataPath}.Elements`, Settings);
const selectColorScheme = await window.ensure(() => document.getElement(HTMLSelectElement, `select#color-scheme`));
const inputFPSLimit = await window.ensure(() => document.getElement(HTMLInputElement, `input#fps-limit`));
const inputBoardSize = await window.ensure(() => document.getElement(HTMLInputElement, `input#board-size`));
const selectCycleType = await window.ensure(() => document.getElement(HTMLSelectElement, `select#cycle-type`));
const buttonResetSettings = await window.ensure(() => document.getElement(HTMLButtonElement, `button#reset-settings`));
//#endregion
//#region Color scheme
for (const theme of Settings.colorSchemes) {
const option = selectColorScheme.appendChild(document.createElement(`option`));
option.value = `${theme}`;
option.innerText = `${theme.replace(/\b\w/, (letter) => letter.toUpperCase())}`;
}
selectColorScheme.value = managerSettings.data.colorScheme;
navigator.colorScheme = managerSettings.data.colorScheme;
selectColorScheme.addEventListener(`change`, (event) => window.insure(() => {
managerSettings.data.colorScheme = selectColorScheme.value;
navigator.colorScheme = managerSettings.data.colorScheme;
}));
//#endregion
//#region Show FPS
const inputToggleFPS = await window.ensure(() => document.getElement(HTMLInputElement, `input#toggle-fps`));
inputToggleFPS.checked = managerSettings.data.showFPS;
inputToggleFPS.addEventListener(`change`, (event) => {
managerSettings.data.showFPS = inputToggleFPS.checked;
});
//#endregion
//#region FPS limit
inputFPSLimit.min = `${Settings.minFPSLimit}`;
inputFPSLimit.max = `${Settings.maxFPSLimit}`;
inputFPSLimit.placeholder = `[${Settings.minFPSLimit} - ${Settings.maxFPSLimit}]`;
inputFPSLimit.value = `${managerSettings.data.FPSLimit}`;
inputFPSLimit.addEventListener(`change`, (event) => window.insure(() => {
managerSettings.data.FPSLimit = Number(inputFPSLimit.value);
}));
//#endregion
//#region Board size
inputBoardSize.min = `${Settings.minBoardSize}`;
inputBoardSize.max = `${Settings.maxBoardSize}`;
inputBoardSize.placeholder = `[${Settings.minBoardSize} - ${Settings.maxBoardSize}]`;
inputBoardSize.value = `${managerSettings.data.boardSize}`;
inputBoardSize.addEventListener(`change`, (event) => window.insure(() => {
managerSettings.data.boardSize = Number(inputBoardSize.value);
}));
//#endregion
//#region Cycle type
for (const type of Object.values(CycleTypes)) {
const option = selectCycleType.appendChild(document.createElement(`option`));
option.value = type;
option.innerText = `${String(type).replace(/\b\w/, (letter) => letter.toUpperCase())}`;
}
selectCycleType.value = managerSettings.data.cycleType;
selectCycleType.addEventListener(`change`, (event) => window.insure(() => {
managerSettings.data.cycleType = selectCycleType.value;
}));
//#endregion
//#region Reset settings
buttonResetSettings.addEventListener(`click`, (event) => window.insure(async () => {
if (await window.confirmAsync(`The settings will be reset to factory defaults. Are you sure?`)) {
managerSettings.reconstruct();
selectColorScheme.value = managerSettings.data.colorScheme;
navigator.colorScheme = managerSettings.data.colorScheme;
inputToggleFPS.checked = managerSettings.data.showFPS;
inputFPSLimit.value = `${managerSettings.data.FPSLimit}`;
inputBoardSize.value = `${managerSettings.data.boardSize}`;
selectCycleType.value = managerSettings.data.cycleType;
}
}));
//#endregion
10 changes: 10 additions & 0 deletions settings/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,15 @@ main {
position: relative;
width: 100%;
height: 100%;
overflow: hidden auto;
}

div.--panel-frame {
width: 100vmin;
-moz-height: fit-content;
height: fit-content;
}

button#reset-settings {
justify-self: center;
}

0 comments on commit 93237f1

Please sign in to comment.