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

style / tools optis & new tools calculator
All checks were successful
Deploy Sokko G / deploy (push) Successful in 6s
Details

Browse source
This commit is contained in:
Shinuwa 2026-07-23 21:06:05 +02:00
parent 6b84607b25
commit 0db35a0d2c
23 changed files with 1106 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

49
website/src/features/toolboxes/modules/ChecklistModule.jsx
View file

@ -1,9 +1,12 @@
import { useState } from "react";
import { parseColonImportLines } from "./textImport.js";
export function ChecklistModule({ toolboxId, moduleId, context, editing }) {
const data = context.normalizeChecklistData(context.getModuleData(toolboxId, moduleId, { items: [] }));
const textContent = context.moduleText?.checklist || {};
const [label, setLabel] = useState("");
const [qty, setQty] = useState(1);
const [textImport, setTextImport] = useState("");
function save(items) {
context.setModuleData(toolboxId, moduleId, { items });
@ -18,14 +21,38 @@ export function ChecklistModule({ toolboxId, moduleId, context, editing }) {
setQty(1);
}
function importItems(event) {
event.preventDefault();
const imported = parseColonImportLines(textImport).map((entry) => ({
id: context.uid("item"),
label: entry.label,
qtyTarget: Math.max(1, Number.parseInt(entry.value, 10) || 1),
qtyCurrent: 0
}));
if (!imported.length) return;
save([...data.items, ...imported]);
setTextImport("");
}
return (
<>
{editing && (
<form className="inline-form checklist-add-form module-add-panel" onSubmit={addItem}>
<input name="label" placeholder="Nouvel item" value={label} onChange={(event) => setLabel(event.target.value)} />
<input className="checklist-qty-input" name="qty" type="number" min="1" value={qty} onChange={(event) => setQty(event.target.value)} aria-label="Quantité cible" />
<button className="primary">Ajouter</button>
</form>
<div className="module-add-panel">
<form className="inline-form checklist-add-form" onSubmit={addItem}>
<input name="label" placeholder={textContent.itemPlaceholder || "Nouvel item"} value={label} onChange={(event) => setLabel(event.target.value)} />
<input className="checklist-qty-input" name="qty" type="number" min="1" value={qty} onChange={(event) => setQty(event.target.value)} aria-label="Quantité cible" />
<button className="primary">Ajouter</button>
</form>
<form className="text-import-form" onSubmit={importItems}>
<textarea
value={textImport}
onChange={(event) => setTextImport(event.target.value)}
placeholder={textContent.importPlaceholder || "Importer plusieurs items...\nPotion:10\nMéga potion:5"}
rows={3}
/>
<button type="submit">Importer le texte</button>
</form>
</div>
)}
<ul className="checklist">
{data.items.map((item) => (
@ -56,7 +83,17 @@ function ChecklistItem({ item, context, items, save }) {
) : (
<div className="checklist-qty-controls" aria-label={`Quantité ${item.label}`}>
<button type="button" onClick={() => updateItem((entry) => ({ ...entry, qtyCurrent: context.clampQty(entry.qtyCurrent - 1, entry.qtyTarget) }))} aria-label="Retirer une quantité">-</button>
<small>{context.clampQty(item.qtyCurrent, item.qtyTarget)}/{item.qtyTarget}</small>
<label className="checklist-qty-current">
<input
type="number"
max={item.qtyTarget}
value={context.clampQty(item.qtyCurrent, item.qtyTarget)}
style={{ "--qty-current-digits": String(context.clampQty(item.qtyCurrent, item.qtyTarget)).length }}
onChange={(event) => updateItem((entry) => ({ ...entry, qtyCurrent: context.clampQty(event.target.value, entry.qtyTarget) }))}
aria-label={`Quantité actuelle pour ${item.label}`}
/>
<span>/ {item.qtyTarget}</span>
</label>
<button type="button" onClick={() => updateItem((entry) => ({ ...entry, qtyCurrent: context.clampQty(entry.qtyCurrent + 1, entry.qtyTarget) }))} aria-label="Ajouter une quantité">+</button>
</div>
)}