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

Updated a couple pages, Finished new basic style, Removed tools from menu, Updated formula wizard, Other minor changes

Browse Source 
Update .gitignore, .htaccess, and 32 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2023-11-07 23:23:42 +01:00
parent 3891f5ce98
commit f14b8d33a6
34 changed files with 545 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -126,7 +126,7 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
<template id="template-workbench-formula-value">
<div class="my-xs ml-xs formula-value-input-form">
<table class="border stylish table-v-center">
<table class="border stylish table-v-center w-full">
<tr>
<td colspan="2">
<p id="fw-workbench-formula-value-name" class="p-xxs t-center t-w-500">${value.name}</p>
@@ -149,6 +149,14 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</select>
</td>
</tr>
<tr>
<td colspan="2">
<p id="fw-workbench-formula-value-test-separator-title" class="p-xxs t-w-500">
Live-testing:
<i class="fad fa-vial t-half-muted f-right"></i>
</p>
</td>
</tr>
<tr>
<td>
<label for="fw-workbench-formula-value-test-value" class="mx-xs t-center">Value:</label>
@@ -159,7 +167,7 @@ echo(getMainHeader(localize("tool.formula-wizard.workbench"), null, null, null,
</tr>
<tr>
<td>
<label for="fw-workbench-formula-value-test-value-set" class="mx-xs t-center">Scale:</label>
<label for="fw-workbench-formula-value-test-value-set" class="mx-xs t-center">Set:</label>
</td>
<td>
<select id="fw-workbench-formula-value-test-value-set" class="p-mxs w-full">

16
tools/items/formula-wizard/src/formula_weaver.ts Normal file
View File

@@ -0,0 +1,16 @@
/*
* Formula Wizard v0.0.2
* [Short desc here]
* https://github.com/aziascreations/Web-NibblePoker
* Copyright (c) 2023 Herwin Bozet <herwin.bozet@gmail.com>
*/
// Note:
// The weaver's behavior could have implemented directly into the "WorkbenchFormula", "WorkbenchFormulaValue" and
// "WorkbenchContextComponent" controller classes.
// However, I chose not to do that and add extra re-linking steps in order to keep the MVC models separate from
// the final formulas used for graphing and doing single-formula live tests.
// Additionally, it separates the "Number Prolapsing Machine" from using the MVC's functions directly, which will
// allow for easier upgrades and modifications to each part.

85
tools/items/formula-wizard/src/mvc_formula.ts
View File

@@ -6,6 +6,7 @@
*/
import {localize} from "./lang";
import {populateScaleSelectForUnit} from "./units";
import {isCatalogInitialized, catalogFormulas} from "./ui_catalog";
import {FormulaValue, FormulaVariant} from "./formulas";
import {retrieveTemplate, makeElementFromFragment, appendToAllIds} from "./utils_templates";
@@ -27,32 +28,11 @@ const ID_FORMULA_VALUE_PREFIX = ID_FORMULA_PREFIX + "value-";
const ID_FORMULA_VALUE_ID = ID_FORMULA_VALUE_PREFIX + "id";
const ID_FORMULA_VALUE_NAME = ID_FORMULA_VALUE_PREFIX + "name";
const ID_FORMULA_VALUE_LINK = ID_FORMULA_VALUE_PREFIX + "link";
const ID_FORMULA_VALUE_TEST_SEPARATOR_TITLE = ID_FORMULA_VALUE_PREFIX + "test-separator-title";
const ID_FORMULA_VALUE_TEST_VALUE = ID_FORMULA_VALUE_PREFIX + "test-value";
const ID_FORMULA_VALUE_TEST_SCALE = ID_FORMULA_VALUE_PREFIX + "test-scale";
const ID_FORMULA_VALUE_TEST_VALUE_SET = ID_FORMULA_VALUE_PREFIX + "test-value-set";
//const idWorkbenchFormulaPrefix = "fw-workbench-formula-";
//const idWorkbenchFormulaSpawnPoint = idWorkbenchFormulaPrefix + "spawn";
//
//// Formula template
//const idTemplateFormula = "template-workbench-formula";
//const idFormulaName = idWorkbenchFormulaPrefix + "name";
//const idFormulaInputs = idWorkbenchFormulaPrefix + "inputs";
//const idFormulaOutputs = idWorkbenchFormulaPrefix + "outputs";
//
//// FormulaUnit template
//const classTemplateFormulaValue = "formula-value-input-form";
//const idTemplateFormulaValue = idTemplateFormula + "-value";
//const idFormulaValuePrefix = idWorkbenchFormulaPrefix + "value-";
//const idFormulaValueId = idFormulaValuePrefix + "id";
//const idFormulaValueName = idFormulaValuePrefix + "name";
//const idFormulaValueLink = idFormulaValuePrefix + "link";
//const idFormulaValueTestValue = idFormulaValuePrefix + "test-value";
//const idFormulaValueTestScale = idFormulaValuePrefix + "test-scale";
//const idFormulaValueTestValueSet = idFormulaValuePrefix + "test-value-set";
// ---------
// Globals
@@ -124,8 +104,9 @@ class WorkbenchFormulaValueInterface {
private readonly eFormulaValueId: HTMLInputElement;
private readonly eFormulaValueName: HTMLParagraphElement;
private readonly eFormulaValueLink: HTMLSelectElement;
private readonly eFormulaValueTestTitleSeparator: HTMLParagraphElement;
private readonly eFormulaValueTestValue: HTMLInputElement;
private readonly eFormulaValueTestScale: HTMLSelectElement;
public readonly eFormulaValueTestScale: HTMLSelectElement;
private readonly eFormulaValueTestValueSet: HTMLInputElement;
constructor(eRootFragment: DocumentFragment, setupValueType: EWorkbenchFormulaValueTypes) {
@@ -135,12 +116,14 @@ class WorkbenchFormulaValueInterface {
this.eFormulaValueId = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_ID}`)!;
this.eFormulaValueName = this.eRootElement.querySelector(`p#${ID_FORMULA_VALUE_NAME}`)!;
this.eFormulaValueLink = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_LINK}`)!;
this.eFormulaValueTestTitleSeparator = this.eRootElement.querySelector(`p#${ID_FORMULA_VALUE_TEST_SEPARATOR_TITLE}`)!;
this.eFormulaValueTestValue = this.eRootElement.querySelector(`input#${ID_FORMULA_VALUE_TEST_VALUE}`)!;
this.eFormulaValueTestScale = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_SCALE}`)!;
this.eFormulaValueTestValueSet = this.eRootElement.querySelector(`select#${ID_FORMULA_VALUE_TEST_VALUE_SET}`)!;
if([this.eFormulaValueId, this.eFormulaValueName, this.eFormulaValueLink, this.eFormulaValueTestValue,
this.eFormulaValueTestScale, this.eFormulaValueTestValueSet].some((item) => item === null)) {
this.eFormulaValueTestTitleSeparator, this.eFormulaValueTestScale, this.eFormulaValueTestValueSet].some(
(item) => item === null)) {
alert("error.ui.formula.value.missingElement");
throw Error("error.ui.formula.value.missingElement");
}
@@ -160,14 +143,14 @@ class WorkbenchFormulaValueInterface {
(eFormField.parentNode!.parentNode! as HTMLElement).hidden = hidden;
}
private setupInput() {
setupInput() {
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() {
setupOutput() {
this.toggleField(this.eFormulaValueLink, true);
//this.eFormulaValueTestValue.readOnly = true;
//this.eFormulaValueTestScale.onchange = this.onTestFieldChange.bind(this);
@@ -176,6 +159,13 @@ class WorkbenchFormulaValueInterface {
setName(newName: string) {
this.eFormulaValueName.innerText = newName;
}
changeTestMode(newStatus: boolean) {
this.toggleField(this.eFormulaValueTestTitleSeparator, !newStatus);
this.toggleField(this.eFormulaValueTestValue, !newStatus);
this.toggleField(this.eFormulaValueTestScale, !newStatus);
this.toggleField(this.eFormulaValueTestValueSet, !newStatus);
}
}
class WorkbenchFormulaValue {
@@ -187,14 +177,38 @@ class WorkbenchFormulaValue {
this.data = new WorkbenchFormulaValueData(parentAssignedControllerId, valueType, formulaValue);
this.uiElement = new WorkbenchFormulaValueInterface(eRootFragment, valueType);
// Preparing the UI.
this.setName(`${this.data.formulaValue.unit.name} (${this.data.formulaValue.unit.symbol})`);
// Adding the relevant scale factors to "eFormulaValueTestScale" based on the formula variant's unit.
populateScaleSelectForUnit(
this.data.formulaValue.unit,
this.uiElement.eFormulaValueTestScale,
this.data.formulaValue.scaleFactor
);
// Making sided setups.
if (this.data.valueType === EWorkbenchFormulaValueTypes.INPUT) {
// Setting up as input.
this.uiElement.setupInput();
} else {
// Setting up as output.
this.uiElement.setupOutput();
}
// Finalizing the interface by making its IDs unique.
// This is purely a UX thing to ensure proper input selection via the labels.
appendToAllIds(this.uiElement.eRootElement, this.data.id);
}
setName(newName: string) {
this.uiElement.setName(newName);
}
}
changeTestMode(newStatus: boolean) {
this.uiElement.changeTestMode(newStatus);
}
}
// --------------
// Formulas MVC
@@ -204,9 +218,13 @@ class WorkbenchFormulaData {
id: string;
formulaVariant: FormulaVariant;
isTestModeEnabled: boolean;
constructor(controllerId: string, formulaVariant: FormulaVariant) {
this.id = controllerId;
this.formulaVariant = formulaVariant;
this.isTestModeEnabled = false;
}
}
@@ -271,20 +289,25 @@ class WorkbenchFormula {
// Preparing the interface...
this.setTitle(this.data.formulaVariant.parentFormula.name);
// Disabling the test mode by default.
this.changeTestMode(false);
// Adding the value elements into their proper container.
this.inputControllers.every(inputController =>
this.uiElement.eInputsContainer.appendChild(inputController.uiElement.eRootElement));
this.outputControllers.every(outputController =>
this.uiElement.eOutputsContainer.appendChild(outputController.uiElement.eRootElement));
// Finalizing the interface by making its IDs unique.
// This is purely a UX thing to ensure proper input selection via the labels.
appendToAllIds(this.uiElement.eRootElement, this.data.id);
}
public setTitle(newTitle: string) {
this.uiElement.setTitle(newTitle);
}
public changeTestMode(newStatus: boolean) {
this.data.isTestModeEnabled = newStatus;
this.inputControllers.forEach(inputController => inputController.changeTestMode(newStatus));
this.outputControllers.forEach(outputController => outputController.changeTestMode(newStatus));
}
}

23
tools/items/formula-wizard/src/units.ts
View File

@@ -205,6 +205,23 @@ export const units: { [key: string]: Unit } = {
};
// --------------------
// Units > Populators
// --------------------
export 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);
});
}
// -----------------
// Units > Helpers
// -----------------
@@ -216,6 +233,12 @@ export function scaleFromBase(value: Decimal, scaleFactor: UnitScaleFactor): Dec
return value.dividedBy(scaleFactor.multiplier);
}
function getScaleKeyFromValue(scaleFactor: UnitScaleFactor): string {
return Object.keys(scaleFactors).find(
scaleFactorKey => (scaleFactors[scaleFactorKey]) === scaleFactor
)!;
}
// ---------------------------
// Units > On-Import Handler
// ---------------------------

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

@@ -20,6 +20,7 @@
border-bottom: 1px solid;
}
/* Regular desktops */
.fw-workbench-io-grid {
display: grid;
grid-template-columns: 33% 33% 33%;
@@ -35,6 +36,7 @@
grid-template-areas: ". .";
}
}
/* Mobile */
@media only screen and (max-width: 768px) {
.fw-workbench-io-grid {
@@ -42,3 +44,11 @@
grid-template-areas: ".";
}
}
/* Manually forcing the formula values' forms to size their columns properly */
.formula-value-input-form table td:first-child:not(:first-of-type) {
white-space: nowrap;
}
.formula-value-input-form table td:last-child:not(:first-of-type) {
width: 100%;
}