shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish calculator large number display

Browse source
This commit is contained in:
Shinuwa 2026-08-09 17:37:05 +02:00
parent 117b7b79e1
commit 4ec7955b25
3 changed files with 70 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

23
website/src/features/toolboxes/modules/CalculatorModule.jsx
View file

@ -22,6 +22,18 @@ function formatResult(value) {
return Number.parseFloat(value.toFixed(6)).toString();
}
function formatDisplayResult(value) {
if (!Number.isFinite(value)) return "";
return new Intl.NumberFormat("fr-FR", { maximumFractionDigits: 6 }).format(Number.parseFloat(value.toFixed(6)));
}
function getResultLengthClass(value) {
const length = formatResult(value).replace(/[^\d]/g, "").length;
if (length >= 16) return "is-compact";
if (length >= 12) return "is-long";
return "";
}
function getChildren(entries, parentId) {
return entries.filter((entry) => (entry.parentId || "") === parentId);
}
@ -151,9 +163,9 @@ export function CalculatorModule({ toolboxId, moduleId, context, editing }) {
<span>{textContent.expressionLabel || "Calcul"}</span>
<input value={expression} onChange={(event) => setExpression(event.target.value)} placeholder={textContent.expressionPlaceholder || "10*10"} inputMode="decimal" />
</label>
<div className="calculator-result" aria-live="polite">
<div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`} aria-live="polite">
<span>{textContent.resultLabel || "Résultat"}</span>
<strong>{result == null ? "-" : formatResult(result)}</strong>
<strong>{result == null ? "-" : formatDisplayResult(result)}</strong>
</div>
<label>
<span>{textContent.labelLabel || "Libellé"}</span>
@ -233,13 +245,16 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
{entry.id === editingId ? (
<>
<span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
<strong>{formatResult(entry.value)}</strong>
<strong>{formatDisplayResult(entry.value)}</strong>
</span>
<EditableCalculatorLabel entry={entry} textContent={textContent} onRename={onRename} onDone={() => setEditingId("")} />
</>
) : (
<button className="tool-split-entry-summary" type="button" onClick={() => onUse(entry)} title={textContent.useEntryTitle || "Utiliser comme base"}>
<span><strong>{formatResult(entry.value)}</strong> {entry.label}</span>
<span>
<strong>{formatDisplayResult(entry.value)}</strong>
{entry.label && <em>{entry.label}</em>}
</span>
</button>
)}
<button type="button" onClick={() => setEditingId(entry.id === editingId ? "" : entry.id)} aria-label={`${textContent.renameTitle || "Renommer"} ${entry.label}`} title={textContent.renameTitle || "Renommer"}>

7
website/src/features/toolboxes/modules/EquipmentPlannerModule.jsx
View file

@ -486,6 +486,11 @@ function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete })
onCommit: (name) => onUpdate((current) => ({ ...current, name: name || current.name })),
blurOnEscape: true
});
const obtainEdit = useInlineEdit({
value: equipment.obtain || "",
onCommit: (obtain) => onUpdate((current) => ({ ...current, obtain })),
commitOnEnter: false
});
const className = [
"equipment-planner-item",
equipment.active ? "is-active" : "is-inactive",
@ -559,7 +564,7 @@ function EquipmentItem({ equipment, reorder, textContent, onUpdate, onDelete })
<section className="equipment-planner-craft-tab">
<label className="equipment-planner-field">
<span>{textContent.obtainLabel || "Obtention"}</span>
<textarea value={equipment.obtain} onChange={(event) => onUpdate((current) => ({ ...current, obtain: event.target.value }))} placeholder={textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement"} />
<textarea {...obtainEdit.getInputProps({ placeholder: textContent.obtainPlaceholder || "Comment obtenir ou créer cet équipement" })} />
</label>
<MaterialsEditor equipment={equipment} textContent={textContent} editing onUpdate={onUpdate} />
</section>