aziascreations/Web-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Continued work on formula wizard

Browse Source 
Update strings.json, code.js, and 4 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-08-05 19:04:27 +02:00
parent 4cf950b5dd
commit 2dd262fe2c
6 changed files with 219 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
commons/strings.json
View File

File diff suppressed because one or more lines are too long

62
tools/items/formula-wizard/code.js
View File

@@ -3,6 +3,9 @@ const version = [0, 0, 1];
console.log("Initializing 'Formula Wizard v" + version.join(".") + "'...");
const startTime = new Date().getMilliseconds();
Decimal.set({ precision: 25, rounding: 8 });
function isStringValidNumber(text) {
return isNaN(parseFloat(text));
}
console.debug("Preparing langs...");
const langKey = document.documentElement.lang.match("(en|fr)") ? document.documentElement.lang : "en";
const langData = {
@@ -229,6 +232,18 @@ function scaleToBase(value, scaleFactor) {
function scaleFromBase(value, scaleFactor) {
return value.dividedBy(scaleFactor.multiplier);
}
function getScaleKeyFromValue(scaleFactor) {
return Object.keys(scaleFactors).find(scaleFactorKey => (scaleFactors[scaleFactorKey]) === scaleFactor);
}
function populateScaleSelectForUnit(unit, eSelect, selectedScaleFactor) {
unit.scale.scaleFactors.forEach(scaleFactor => {
const eNewScaleOption = document.createElement("option");
eNewScaleOption.setAttribute("value", getScaleKeyFromValue(scaleFactor));
eNewScaleOption.innerText = scaleFactor.prefix + " - " + eNewScaleOption.getAttribute("value");
eNewScaleOption.selected = (scaleFactor === selectedScaleFactor);
eSelect.appendChild(eNewScaleOption);
});
}
console.debug("Preparing units...");
class Unit {
constructor(unitKey, symbol, scale) {
@@ -479,7 +494,7 @@ var WorkbenchFormulaValueTypes;
class WorkbenchFormulaValueUiElement {
constructor(rootElement, formulaValue, parentFormulaElement, valueType) {
this.rootElement = rootElement;
this.idSuffix = Date.now().toString() + Math.floor(Math.random() * 9999);
this.idSuffix = Date.now().toString() + Math.floor(Math.random() * 99);
this.valueType = valueType;
this.formulaValue = formulaValue;
this.parentFormulaElement = parentFormulaElement;
@@ -494,6 +509,7 @@ class WorkbenchFormulaValueUiElement {
alert("error.ui.formula.value.missingElement");
throw Error("error.ui.formula.value.missingElement");
}
this.toggleField(this.eFormulaValueTestValueSet, true);
this.rootElement.querySelectorAll(`input, select, p, div`).forEach(eFormInput => {
if (eFormInput.hasAttribute("id")) {
eFormInput.setAttribute("id", eFormInput.getAttribute("id") + this.idSuffix);
@@ -505,7 +521,8 @@ class WorkbenchFormulaValueUiElement {
}
});
this.eFormulaValueName.innerText = `${this.formulaValue.unit.name} (${this.formulaValue.unit.symbol})`;
this.toggleField(this.eFormulaValueTestValueSet, true);
this.eFormulaValueId.value = this.idSuffix;
populateScaleSelectForUnit(this.formulaValue.unit, this.eFormulaValueTestScale, this.formulaValue.scaleFactor);
if (this.valueType === WorkbenchFormulaValueTypes.INPUT) {
this.setupInput();
}
@@ -513,6 +530,15 @@ class WorkbenchFormulaValueUiElement {
this.setupOutput();
}
}
onTestFieldChange(event) {
this.parentFormulaElement.calculateTestValues();
}
getTestValue() {
return new Decimal(isStringValidNumber(this.eFormulaValueTestValue.value) ? this.eFormulaValueTestValue.value : 0);
}
setTestValue(newValue) {
this.eFormulaValueTestValue.value = newValue.toString();
}
toggleTestMode(hidden) {
this.eFormulaValueTestScale.parentNode.parentNode.hidden = hidden;
this.eFormulaValueTestScale.parentNode.parentNode.hidden = hidden;
@@ -521,12 +547,15 @@ class WorkbenchFormulaValueUiElement {
eFormField.parentNode.parentNode.hidden = hidden;
}
setupInput() {
console.log("Setting up as input...");
this.toggleField(this.eFormulaValueId, true);
this.eFormulaValueTestValue.value = "0";
this.eFormulaValueTestValue.onchange = this.onTestFieldChange.bind(this);
this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
}
setupOutput() {
console.log("Setting up as output...");
this.toggleField(this.eFormulaValueLink, true);
this.eFormulaValueTestValue.readOnly = true;
this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
}
static getNew(formulaValue, parentFormulaElement, valueType) {
const eNewWorkbenchFormulaValue = eTemplateWorkbenchFormulaValue.cloneNode(true).firstElementChild;
@@ -565,6 +594,9 @@ class WorkbenchFormulaUiElement {
}
toggleTestMode(hidden) {
}
calculateTestValues() {
console.log("Handling change...");
}
static createNew(formulaVariant) {
const eNewWorkbenchFormula = eTemplateWorkbenchFormula.cloneNode(true).firstElementChild;
if (eNewWorkbenchFormula === null) {
@@ -689,9 +721,8 @@ if (eContextStatusMessage === null) {
alert("error.ui.context.noStatus");
throw Error("error.ui.context.noStatus");
}
let eContextAddButton = document.getElementById("fw-button-add-context");
let eContextDebugButton = document.getElementById("fw-button-debug-context");
if (eContextAddButton === null || eContextDebugButton === null) {
let eContextAddButton = document.querySelector("button#fw-button-add-context");
if (eContextAddButton === null) {
alert("error.ui.context.missingButton");
throw Error("error.ui.context.missingButton");
}
@@ -799,6 +830,23 @@ eContextAddButton.onclick = function () {
eContextStatusMessage.parentNode.insertBefore(newContextComponent.rootElement, eContextStatusMessage);
eContextStatusMessage.hidden = true;
};
function getRee() {
}
class NumberProlapsingMachine {
}
if (new URLSearchParams(window.location.search).has("debug")) {
console.debug("Preparing debugging tools...");
let eDebugContainer = document.querySelector("div#fw-debug-root");
let eDebugLinkAndIdsButton = document.querySelector("button#fw-button-debug-linkAndIds");
if (eDebugContainer === null || eDebugLinkAndIdsButton === null) {
alert("error.ui.context.missingButton");
throw Error("error.ui.context.missingButton");
}
eDebugContainer.hidden = false;
eDebugLinkAndIdsButton.onclick = function () {
alert(JSON.stringify({ 'a': 1, 'b': 3 }, null, 4));
};
}
const endTime = new Date().getMilliseconds();
console.log("Done, took " + (endTime - startTime) + "ms !");
//# sourceMappingURL=code.js.map

108
tools/items/formula-wizard/code.ts
View File

@@ -8,6 +8,13 @@ const startTime = new Date().getMilliseconds();
// Configuring the Decimal.JS library to use its maximum potential precision.
Decimal.set({ precision: 25, rounding: 8 });
// Random utils (Can be exported in other module)
function isStringValidNumber(text: string): boolean {
// Can be replaced with regex if needed to be more strict.
// I'd need to see if the "Decimal" library handles values like "42px" correctly.
return isNaN(parseFloat(text));
}
// Common L10N stuff.
console.debug("Preparing langs...");
const langKey= document.documentElement.lang.match("(en|fr)") ? document.documentElement.lang : "en";
@@ -243,6 +250,21 @@ function scaleFromBase(value: Decimal, scaleFactor: UnitScaleFactor): Decimal {
return value.dividedBy(scaleFactor.multiplier);
}
function getScaleKeyFromValue(scaleFactor: UnitScaleFactor): string {
return Object.keys(scaleFactors).find(
scaleFactorKey => (scaleFactors[scaleFactorKey]) === scaleFactor
)!;
}
function populateScaleSelectForUnit(unit: Unit, eSelect: HTMLSelectElement, selectedScaleFactor: UnitScaleFactor | null) {
unit.scale.scaleFactors.forEach(scaleFactor => {
const eNewScaleOption = document.createElement("option");
eNewScaleOption.setAttribute("value", getScaleKeyFromValue(scaleFactor));
eNewScaleOption.innerText = scaleFactor.prefix + " - " + eNewScaleOption.getAttribute("value");
eNewScaleOption.selected = (scaleFactor === selectedScaleFactor);
eSelect.appendChild(eNewScaleOption);
});
}
// Preparing units
console.debug("Preparing units...");
@@ -743,6 +765,11 @@ class WorkbenchFormulaValueUiElement {
throw Error("error.ui.formula.value.missingElement");
}
// Hiding the testing value set row since it isn't implemented yet.
// This should be used for stuff like wire gauge to get fixed sets like 8,6,4,5.
// Note: It might actually be redundant...
this.toggleField(this.eFormulaValueTestValueSet, true);
// Changing IDs as needed.
this.rootElement.querySelectorAll(`input, select, p, div`).forEach(eFormInput => {
if(eFormInput.hasAttribute("id")) {
@@ -755,12 +782,12 @@ class WorkbenchFormulaValueUiElement {
}
});
// Setting some fields' default value.
this.eFormulaValueName.innerText = `${this.formulaValue.unit.name} (${this.formulaValue.unit.symbol})`;
this.eFormulaValueId.value = this.idSuffix;
// Hiding the testing value set row since it isn't implemented yet.
// This should be used for stuff like wire gauge to get fixed sets like 8,6,4,5.
// Note: It might actually be redundant...
this.toggleField(this.eFormulaValueTestValueSet, true);
// Adding the relevant scale factors.
populateScaleSelectForUnit(this.formulaValue.unit, this.eFormulaValueTestScale, this.formulaValue.scaleFactor);
if(this.valueType === WorkbenchFormulaValueTypes.INPUT) {
this.setupInput();
@@ -769,6 +796,21 @@ class WorkbenchFormulaValueUiElement {
}
}
private onTestFieldChange(event: Event | null) {
// NOTE: As it stands, it could be replaced by a direct bind to the parent's function :/
this.parentFormulaElement.calculateTestValues();
}
public getTestValue(): Decimal {
return new Decimal(
isStringValidNumber(this.eFormulaValueTestValue.value) ? this.eFormulaValueTestValue.value : 0
);
}
public setTestValue(newValue: Decimal) {
this.eFormulaValueTestValue.value = newValue.toString();
}
toggleTestMode(hidden: boolean) {
// We hide the parent "tr" elements.
(this.eFormulaValueTestScale.parentNode!.parentNode! as HTMLElement).hidden = hidden;
@@ -781,13 +823,16 @@ class WorkbenchFormulaValueUiElement {
}
private setupInput() {
console.log("Setting up as input...");
this.toggleField(this.eFormulaValueId, true);
this.eFormulaValueTestValue.value = "0";
this.eFormulaValueTestValue.onchange = this.onTestFieldChange.bind(this);
this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
}
private setupOutput() {
console.log("Setting up as output...");
this.toggleField(this.eFormulaValueLink, true);
this.eFormulaValueTestValue.readOnly = true;
this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
}
public static getNew(formulaValue: FormulaValue, parentFormulaElement: WorkbenchFormulaUiElement,
@@ -860,6 +905,10 @@ class WorkbenchFormulaUiElement {
// TODO
}
calculateTestValues() {
console.log("Handling change...");
}
public static createNew(formulaVariant: FormulaVariant): WorkbenchFormulaUiElement {
// Grabbing the actual HTMLElement from the document fragment.
const eNewWorkbenchFormula=
@@ -1031,9 +1080,8 @@ if(eContextStatusMessage === null) {
// Preparing the context components buttons.
// Those are simply used to add and debug context components.
let eContextAddButton = document.getElementById("fw-button-add-context");
let eContextDebugButton = document.getElementById("fw-button-debug-context");
if(eContextAddButton === null || eContextDebugButton === null) {
let eContextAddButton: HTMLButtonElement | null = document.querySelector("button#fw-button-add-context");
if(eContextAddButton === null) {
alert("error.ui.context.missingButton");
throw Error("error.ui.context.missingButton");
}
@@ -1218,11 +1266,51 @@ eContextAddButton.onclick = function() {
eContextStatusMessage!.hidden = true;
}
// --------------------------------
// User Interface > Super Helpers
// --------------------------------
function getRee() {
}
// -----------------------------------------------------------------------------------------------------------------
// The "Nobody could give me a synonym for a math nerd/number cruncher to serve as a pun" mechanism.
// -----------------------------------------------------------------------------------------------------------------
// You can all go eat a bag of dicks with your
// "muh, I cAn'T GiVE yoU AnYtHinG That remOtEly rEsEmBlEs a PejOraTiVE Term, eveN In A friEndLY/jOkey cONteXT".
// I'll just call it the "NumberProlapsingMachine" then...
// Fuck you all and your tumblr-esque PC brain-rot.
// -----------------------------------------------------------------------------------------------------------------
class NumberProlapsingMachine {
}
// -----------
// Debugging
// -----------
if(new URLSearchParams(window.location.search).has("debug")) {
console.debug("Preparing debugging tools...");
let eDebugContainer: HTMLDivElement | null = document.querySelector("div#fw-debug-root");
let eDebugLinkAndIdsButton: HTMLButtonElement | null = document.querySelector("button#fw-button-debug-linkAndIds");
if(eDebugContainer === null || eDebugLinkAndIdsButton === null) {
alert("error.ui.context.missingButton");
throw Error("error.ui.context.missingButton");
}
eDebugContainer.hidden = false;
eDebugLinkAndIdsButton.onclick = function() {
alert(JSON.stringify({'a': 1, 'b': 3}, null, 4));
};
}
// --------------
// End of setup
// --------------
// We're done and ready to crunch numbers :)
// We're done and ready to stretch some numbers :)
const endTime = new Date().getMilliseconds();
console.log("Done, took " + (endTime - startTime) + "ms !");

3
tools/items/formula-wizard/lang.json
View File

@@ -12,6 +12,9 @@
"tool.formula-wizard.workbench.formula.outputs": "Output(s):",
"tool.formula-wizard.workbench.formula.value.expand": "Enable live experiment mode",
"tool.formula-wizard.workbench.debugging": "Debugging Tools",
"tool.formula-wizard.button.debug.testLinkAndIds": "Test links and IDs",
"tool.formula-wizard.categories": "Available Formulas",
"tool.formula-wizard.categories.electricity": "Electricity",
"tool.formula-wizard.categories.convert": "Converters",

58
tools/items/formula-wizard/page.php
View File

@@ -177,8 +177,6 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</tr>
</table>
</div>
</template>
<template id="template-workbench-formula">
@@ -191,15 +189,21 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
<td class="w-full">
<p id="fw-workbench-formula-name" class="p-xxs t-w-600 t-center border border-t-0 border-l-0 border-r-0">${formula.name}</p>
<div class="fw-formula-io">
<div id="fw-workbench-formula-inputs" class="p-xxs">
<div class="p-xxs">
<p class="t-w-500 t-italic">
<?php echo(localize("tool.formula-wizard.workbench.formula.inputs")); ?>
</p>
<div id="fw-workbench-formula-inputs" class="fw-workbench-io-grid">
</div>
</div>
<div id="fw-workbench-formula-outputs" class="p-xxs border border-l-0 border-r-0">
<div class="p-xxs border border-l-0 border-r-0">
<p class="t-w-500 t-italic">
<?php echo(localize("tool.formula-wizard.workbench.formula.outputs")); ?>
</p>
<div id="fw-workbench-formula-outputs" class="fw-workbench-io-grid">
</div>
</div>
</div>
</td>
@@ -238,10 +242,10 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
title="<?php echo(localize("tool.formula-wizard.button.context.add")); ?>">
<i class="fad fa-plus"></i>
</button>
<button id="fw-button-debug-context" class="warning p-mxs px-xs border r-s"
<!--<button id="fw-button-debug-context" class="warning p-mxs px-xs border r-s"
title="<?php echo(localize("tool.formula-wizard.button.context.debug")); ?>">
<i class="fad fa-bug"></i>
</button>
</button>-->
</div>
</div>
</div>
@@ -250,7 +254,7 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</table>
</div>
<div class="border border-t-0 border-l-0 border-r-0">
<!--<div class="border border-t-0 border-l-0 border-r-0">
<table>
<tr>
<td class="border border-t-0 border-l-0 border-b-0 p-xs mobile-hide">
@@ -284,10 +288,6 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</select>
</td>
</tr>
<!--<tr>
<td colspan="2" class="p-xxs bkgd-blank">
</td>
</tr>-->
<tr>
<td>
<label for="fw-context-component-unit" class="mx-xs t-center">Value:</label>
@@ -336,12 +336,11 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</td>
</tr>
</table>
</div>
</div>-->
<a id="fw-workbench-formula-spawn"></a>
<div class="border border-t-0 border-l-0 border-r-0">
<!-- <div class="border border-t-0 border-l-0 border-r-0">
<table>
<tr>
<td class="border border-t-0 border-l-0 border-b-0 p-xs mobile-hide">
@@ -365,10 +364,33 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
<input id="test-123" type="text" class="p-mxs rr-s border border-t-0 border-b-0 border-r-0">
</div>
<!-- ON/OFF -> Add extra ranges as sliders, or refuse to proceed -->
<!-- Highlights, limits, extra styles, ... -->
</div>
</div>
</td>
</tr>
</table>
</div>-->
<!-- ON/OFF -> Add extra ranges as sliders, or refuse to proceed -->
<!-- Highlights, limits, extra styles, ... -->
<div id="fw-debug-root" class="border border-t-0 border-l-0 border-r-0" hidden>
<table>
<tr>
<td class="border border-t-0 border-l-0 border-b-0 p-xs mobile-hide">
<p class="t-size-14"><i class="fad fa-grip-vertical"></i></p>
</td>
<td class="w-full">
<p class="p-xxs t-w-600 t-center border border-t-0 border-l-0 border-r-0 fw-workbench-name">
<?php echo(localize("tool.formula-wizard.workbench.debugging")); ?>
</p>
<div class="fw-formula-io">
<div class="fw-formula-components p-xxs">
<div class="my-xs ml-xs">
<button id="fw-button-debug-linkAndIds" class="warning p-mxs px-xs border r-s">
<i class="fad fa-bug"></i> <?php echo(localize("tool.formula-wizard.button.debug.testLinkAndIds")); ?>
</button>
</div>
</div>
</div>
</td>
@@ -376,8 +398,6 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</table>
</div>
<div class="p-xxs">
<p class="t-center t-muted t-size-8">Selected formulas will appear here, all seems good.</p>
</div>

23
tools/items/formula-wizard/styles.css
View File

@@ -19,3 +19,26 @@
.fw-workbench-name {
border-bottom: 1px solid;
}
.fw-workbench-io-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: auto;
gap: 0 0;
grid-template-areas: ". . .";
}
/* Thin desktop */
@media only screen and (max-width: 992px) {
.fw-workbench-io-grid {
grid-template-columns: 50% 50%;
grid-template-areas: ". .";
}
}
/* Mobile */
@media only screen and (max-width: 768px) {
.fw-workbench-io-grid {
grid-template-columns: 100%;
grid-template-areas: ".";
}
}