Add hold and special inputs to combos

website/src/features/toolboxes/modules/CombosModule.jsx

@@ -16,26 +16,32 @@ const DEVICE_OPTIONS = [
   { value: "keyboardMouse", label: "Clavier/Souris" }
 ];
 
+const SPECIAL_INPUT_GROUP = { title: "Spéciale", column: "actions", inputs: [["button", "fist"], ["button", "foot"], ["button", "grab"], ["button", "protect"], ["button", "shoot"]] };
+
 const DEVICE_GROUPS = {
   playstation: [
     { title: "Directions", kind: "directions", column: "movement", inputs: [["direction", "up-left"], ["direction", "up"], ["direction", "up-right"], ["direction", "left"], null, ["direction", "right"], ["direction", "down-left"], ["direction", "down"], ["direction", "down-right"]] },
     { title: "Actions", column: "actions", inputs: [["button", "triangle"], ["button", "circle"], ["button", "cross"], ["button", "square"], ["button", "l1"], ["button", "r1"], ["button", "l2"], ["button", "r2"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "Système", inputs: [["button", "options"], ["button", "share"], ["button", "l3"], ["button", "r3"]] }
   ],
   xbox: [
     { title: "Directions", kind: "directions", column: "movement", inputs: [["direction", "up-left"], ["direction", "up"], ["direction", "up-right"], ["direction", "left"], null, ["direction", "right"], ["direction", "down-left"], ["direction", "down"], ["direction", "down-right"]] },
     { title: "Actions", column: "actions", inputs: [["button", "a"], ["button", "b"], ["button", "x"], ["button", "y"], ["button", "lb"], ["button", "rb"], ["button", "lt"], ["button", "rt"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "Système", inputs: [["button", "menu"], ["button", "view"], ["button", "ls"], ["button", "rs"]] }
   ],
   switch: [
     { title: "Directions", kind: "directions", column: "movement", inputs: [["direction", "up-left"], ["direction", "up"], ["direction", "up-right"], ["direction", "left"], null, ["direction", "right"], ["direction", "down-left"], ["direction", "down"], ["direction", "down-right"]] },
     { title: "Actions", column: "actions", inputs: [["button", "a"], ["button", "b"], ["button", "x"], ["button", "y"], ["button", "l"], ["button", "r"], ["button", "zl"], ["button", "zr"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "Système", inputs: [["button", "plus"], ["button", "minus"], ["button", "ls"], ["button", "rs"]] }
   ],
   n64: [
     { title: "Stick", kind: "directions", column: "movement", inputs: [["direction", "stick-up-left"], ["direction", "stick-up"], ["direction", "stick-up-right"], ["direction", "stick-left"], null, ["direction", "stick-right"], ["direction", "stick-down-left"], ["direction", "stick-down"], ["direction", "stick-down-right"]] },
     { title: "D-Pad", kind: "directions", column: "movement", inputs: [["direction", "up-left"], ["direction", "up"], ["direction", "up-right"], ["direction", "left"], null, ["direction", "right"], ["direction", "down-left"], ["direction", "down"], ["direction", "down-right"]] },
     { title: "Actions", column: "actions", inputs: [["button", "a"], ["button", "b"], ["button", "z"], ["button", "start"], ["button", "l"], ["button", "r"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "C-buttons", kind: "directions", inputs: [["button", "c-up"], ["button", "c-down"], ["button", "c-left"], ["button", "c-right"]] }
   ]
 };
@@ -45,12 +51,14 @@ const KEYBOARD_GROUPS = {
     { title: "ZQSD", kind: "directions", column: "movement", inputs: [null, ["key", "z"], null, ["key", "q"], ["key", "s"], ["key", "d"], null, null, null] },
     { title: "Flèches", kind: "directions", column: "movement", inputs: [null, ["direction", "up"], null, ["direction", "left"], ["direction", "down"], ["direction", "right"], null, null, null] },
     { title: "Touches", column: "actions", inputs: [["key", "ctrl"], ["key", "alt"], ["key", "shift"], ["key", "space"], ["key", "enter"], ["key", "tab"], ["key", "e"], ["key", "a"], ["key", "r"], ["key", "f"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "Souris", inputs: [["mouse", "left"], ["mouse", "right"], ["mouse", "middle"], ["mouse", "wheel-up"], ["mouse", "wheel-down"]] }
   ],
   qwerty: [
     { title: "WASD", kind: "directions", column: "movement", inputs: [null, ["key", "w"], null, ["key", "a"], ["key", "s"], ["key", "d"], null, null, null] },
     { title: "Flèches", kind: "directions", column: "movement", inputs: [null, ["direction", "up"], null, ["direction", "left"], ["direction", "down"], ["direction", "right"], null, null, null] },
     { title: "Touches", column: "actions", inputs: [["key", "ctrl"], ["key", "alt"], ["key", "shift"], ["key", "space"], ["key", "enter"], ["key", "tab"], ["key", "e"], ["key", "q"], ["key", "r"], ["key", "f"]] },
+    SPECIAL_INPUT_GROUP,
     { title: "Souris", inputs: [["mouse", "left"], ["mouse", "right"], ["mouse", "middle"], ["mouse", "wheel-up"], ["mouse", "wheel-down"]] }
   ]
 };
@@ -84,9 +92,22 @@ const INPUT_LABELS = {
   "c-down": "C↓",
   "c-left": "C←",
   "c-right": "C→",
+  fist: "Poing",
+  foot: "Pied",
+  grab: "Grab",
+  protect: "Protect",
+  shoot: "Shoot",
   space: "Espace"
 };
 
+const INPUT_ICONS = {
+  fist: "fist",
+  foot: "foot",
+  grab: "grab",
+  protect: "shield",
+  shoot: "gun"
+};
+
 const MOUSE_LABELS = {
   left: "Clic G",
   right: "Clic D",
@@ -103,11 +124,33 @@ function getInputLabel(input) {
 }
 
 function inputKey(input) {
-  return `${input.kind}:${input.value}`;
+  return `${input.kind}:${input.value}:${input.hold ? "hold" : ""}:${input.holdMs || 0}`;
 }
 
-function createInput(kind, value) {
-  return { kind, value };
+function createInput(kind, value, holdMs = 0) {
+  const input = { kind, value };
+  if (holdMs > 0) input.holdMs = holdMs;
+  return input;
+}
+
+function getHoldSeconds(input) {
+  return Math.round((Number(input?.holdMs) || 0) / 1000);
+}
+
+function formatHoldLabel(input) {
+  const seconds = getHoldSeconds(input);
+  if (!seconds) return input?.hold ? "hold" : "";
+  return `${seconds}s`;
+}
+
+function parseHoldSeconds(value) {
+  const seconds = Number.parseInt(String(value || "").replace(/[^\d]/g, ""), 10);
+  if (!Number.isInteger(seconds) || seconds <= 0) return 0;
+  return Math.min(99, seconds);
+}
+
+function isDirectionInput(input) {
+  return input?.kind === "direction";
 }
 
 function createCombo(context, id, name, category, inputs, fallbackName, device) {
@@ -153,9 +196,13 @@ function setComboItemCategory(combo, category) {
 
 function ComboInputToken({ input, device, palette = false, onClick, onDragStart }) {
   const label = getInputLabel(input);
+  const iconName = INPUT_ICONS[input.value];
+  const holdLabel = !palette ? formatHoldLabel(input) : "";
   const classNames = [
     "combo-input-token",
     `combo-input-${input.kind}`,
+    iconName ? "combo-input-icon" : "",
+    holdLabel ? "has-hold" : "",
     input.kind === "key" && label.length === 1 ? "combo-input-short" : "",
     `combo-device-${device}`,
     `combo-value-${String(input.value || "").replace(/[^a-z0-9]+/gi, "-").toLowerCase()}`
@@ -164,19 +211,20 @@ function ComboInputToken({ input, device, palette = false, onClick, onDragStart
   if (palette) {
     return (
       <button className={classNames} type="button" draggable onClick={onClick} onDragStart={onDragStart} title={label} aria-label={label}>
-        <span>{label}</span>
+        <span>{iconName ? <Icon name={iconName} /> : label}</span>
       </button>
     );
   }
 
   return (
-    <span className={classNames} draggable={Boolean(onDragStart)} onDragStart={onDragStart} title={label}>
-      <span>{label}</span>
+    <span className={classNames} draggable={Boolean(onDragStart)} onClick={onClick} onDragStart={onDragStart} title={holdLabel ? `${label} · ${holdLabel}` : label}>
+      <span>{iconName ? <Icon name={iconName} /> : label}</span>
+      {holdLabel && <em className="combo-input-hold">{holdLabel}</em>}
     </span>
   );
 }
 
-function ComboStep({ step, stepIndex, device, active = false, onClick, onDropInput, onDragInput }) {
+function ComboStep({ step, stepIndex, device, active = false, selectedInputIndex = -1, onClick, onSelectInput, onDropInput, onDragInput }) {
   const className = [
     "combo-step-inputs",
     step.length > 1 ? "is-simultaneous" : "",
@@ -184,9 +232,17 @@ function ComboStep({ step, stepIndex, device, active = false, onClick, onDropInp
     active ? "is-active" : ""
   ].filter(Boolean).join(" ");
   const content = step.length ? step.map((input, inputIndex) => (
-    <span className="combo-step-input" key={`${inputKey(input)}-${inputIndex}`}>
+    <span className={`combo-step-input ${selectedInputIndex === inputIndex ? "is-selected" : ""}`} key={`${inputKey(input)}-${inputIndex}`}>
       {inputIndex > 0 && <span className="combo-plus" aria-hidden="true">+</span>}
-      <ComboInputToken input={input} device={device} onDragStart={onDragInput ? (event) => onDragInput(event, stepIndex, inputIndex, input) : null} />
+      <ComboInputToken
+        input={input}
+        device={device}
+        onClick={onSelectInput ? (event) => {
+          event.stopPropagation();
+          onSelectInput(stepIndex, inputIndex);
+        } : null}
+        onDragStart={onDragInput ? (event) => onDragInput(event, stepIndex, inputIndex, input) : null}
+      />
     </span>
   )) : <span className="combo-empty-step">Étape vide</span>;
 
@@ -214,7 +270,7 @@ function ComboStep({ step, stepIndex, device, active = false, onClick, onDropInp
   return <span className={className}>{content}</span>;
 }
 
-function ComboSequence({ inputs, device, emptyLabel, activeStepIndex = -1, onSelectStep, onDropInput, onDropNewStep, onDragInput }) {
+function ComboSequence({ inputs, device, emptyLabel, activeStepIndex = -1, selectedInput, onSelectStep, onSelectInput, onDropInput, onDropNewStep, onDragInput }) {
   const visibleInputs = inputs.map((step, index) => ({ step, index })).filter(({ step }) => step.length || onSelectStep);
   if (!visibleInputs.length) return <span className="combo-empty-sequence">{emptyLabel}</span>;
   return (
@@ -230,12 +286,26 @@ function ComboSequence({ inputs, device, emptyLabel, activeStepIndex = -1, onSel
         onDropNewStep(event);
       }}
     >
-      {visibleInputs.map(({ step, index: stepIndex }, visibleIndex) => (
+      {visibleInputs.map(({ step, index: stepIndex }, visibleIndex) => {
+        const nextStep = visibleInputs[visibleIndex + 1]?.step || [];
+        const hideSeparator = step.every(isDirectionInput) && nextStep.every(isDirectionInput);
+        return (
         <span className="combo-step" key={`${stepIndex}-${step.map(inputKey).join("+")}`}>
-          <ComboStep step={step} stepIndex={stepIndex} device={device} active={activeStepIndex === stepIndex} onClick={onSelectStep ? () => onSelectStep(stepIndex) : null} onDropInput={onDropInput ? (event) => onDropInput(event, stepIndex) : null} onDragInput={onDragInput} />
-          {visibleIndex < visibleInputs.length - 1 && <span className="combo-step-separator" aria-hidden="true">›</span>}
+          <ComboStep
+            step={step}
+            stepIndex={stepIndex}
+            device={device}
+            active={activeStepIndex === stepIndex}
+            selectedInputIndex={selectedInput?.stepIndex === stepIndex ? selectedInput.inputIndex : -1}
+            onClick={onSelectStep ? () => onSelectStep(stepIndex) : null}
+            onSelectInput={onSelectInput}
+            onDropInput={onDropInput ? (event) => onDropInput(event, stepIndex) : null}
+            onDragInput={onDragInput}
+          />
+          {visibleIndex < visibleInputs.length - 1 && !hideSeparator && <span className="combo-step-separator" aria-hidden="true">›</span>}
         </span>
-      ))}
+        );
+      })}
     </div>
   );
 }
@@ -265,6 +335,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
   const [comboName, setComboName] = useState("");
   const [draftInputs, setDraftInputs] = useState([[]]);
   const [activeStepIndex, setActiveStepIndex] = useState(0);
+  const [selectedInput, setSelectedInput] = useState(null);
   const [simultaneousMode, setSimultaneousMode] = useState(false);
   const [keyboardLayout, setKeyboardLayout] = useState("azerty");
   const [customKey, setCustomKey] = useState("");
@@ -272,6 +343,9 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
   const paletteGroups = useMemo(() => getPaletteGroups(data.device, keyboardLayout), [data.device, keyboardLayout]);
   const paletteColumns = useMemo(() => getPaletteColumns(paletteGroups), [paletteGroups]);
   const cleanDraftInputs = draftInputs.map((step) => step.filter(Boolean)).filter((step) => step.length);
+  const selectedDraftInput = Number.isInteger(selectedInput?.stepIndex) && Number.isInteger(selectedInput?.inputIndex)
+    ? draftInputs[selectedInput.stepIndex]?.[selectedInput.inputIndex] || null
+    : null;
   const entries = getGroupedEntries(data.combos, {
     groupOrder: data.categoryOrder,
     getItemGroup: getComboCategory,
@@ -344,6 +418,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       const nextSteps = steps.length ? steps.map((step) => [...step]) : [[]];
       const targetIndex = Math.min(Math.max(0, stepIndex), nextSteps.length - 1);
       nextSteps[targetIndex] = [...nextSteps[targetIndex], input];
+      setSelectedInput({ stepIndex: targetIndex, inputIndex: nextSteps[targetIndex].length - 1 });
       return nextSteps;
     });
   }
@@ -359,6 +434,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       const filledSteps = steps.filter((step) => step.length);
       const nextSteps = [...filledSteps, [input]];
       setActiveStepIndex(nextSteps.length - 1);
+      setSelectedInput({ stepIndex: nextSteps.length - 1, inputIndex: 0 });
       return nextSteps;
     });
   }
@@ -417,6 +493,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       const [input] = nextSteps[sourceStepIndex]?.splice(sourceInputIndex, 1) || [];
       if (!input || !nextSteps[targetStepIndex]) return steps;
       nextSteps[targetStepIndex].push(input);
+      setSelectedInput({ stepIndex: targetStepIndex, inputIndex: nextSteps[targetStepIndex].length - 1 });
       return nextSteps.filter((step, index) => step.length || index === targetStepIndex);
     });
   }
@@ -428,6 +505,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       if (!input) return steps;
       const safeSteps = nextSteps.filter((step) => step.length);
       setActiveStepIndex(safeSteps.length);
+      setSelectedInput({ stepIndex: safeSteps.length, inputIndex: 0 });
       return [...safeSteps, [input]];
     });
   }
@@ -437,6 +515,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       const nextSteps = steps.filter((_, index) => index !== activeStepIndex);
       const safeSteps = nextSteps.length ? nextSteps : [[]];
       setActiveStepIndex(Math.min(activeStepIndex, safeSteps.length - 1));
+      setSelectedInput(null);
       return safeSteps;
     });
   }
@@ -455,10 +534,46 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       nextSteps[targetIndex].pop();
       const safeSteps = nextSteps.filter((step) => step.length);
       setActiveStepIndex(Math.max(0, safeSteps.length - 1));
+      setSelectedInput(null);
       return safeSteps.length ? safeSteps : [[]];
     });
   }
 
+  function updateSelectedInputHold(value) {
+    if (!selectedDraftInput) return;
+    const holdMs = Math.round(parseHoldSeconds(value) * 1000);
+    setDraftInputs((steps) => steps.map((step, stepIndex) => step.map((input, inputIndex) => {
+      if (stepIndex !== selectedInput.stepIndex || inputIndex !== selectedInput.inputIndex) return input;
+      const nextInput = { ...input };
+      if (holdMs > 0) {
+        nextInput.hold = true;
+        nextInput.holdMs = holdMs;
+      }
+      else delete nextInput.holdMs;
+      return nextInput;
+    })));
+  }
+
+  function toggleSelectedInputHold() {
+    if (!selectedDraftInput) return;
+    setDraftInputs((steps) => steps.map((step, stepIndex) => step.map((input, inputIndex) => {
+      if (stepIndex !== selectedInput.stepIndex || inputIndex !== selectedInput.inputIndex) return input;
+      const nextInput = { ...input };
+      if (nextInput.hold || nextInput.holdMs) {
+        delete nextInput.hold;
+        delete nextInput.holdMs;
+      } else {
+        nextInput.hold = true;
+      }
+      return nextInput;
+    })));
+  }
+
+  function selectDraftStep(stepIndex) {
+    setActiveStepIndex(stepIndex);
+    setSelectedInput(null);
+  }
+
   function addCustomKey(event) {
     event.preventDefault();
     const value = normalizeCustomKey(customKey);
@@ -485,6 +600,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     setComboName(combo.name);
     setDraftInputs(combo.inputs.length ? combo.inputs.map((step) => step.map((input) => ({ ...input }))) : [[]]);
     setActiveStepIndex(0);
+    setSelectedInput(null);
   }
 
   function cancelComboEdit() {
@@ -493,6 +609,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     setComboCategory("");
     setDraftInputs([[]]);
     setActiveStepIndex(0);
+    setSelectedInput(null);
     setSimultaneousMode(false);
   }
 
@@ -708,8 +825,47 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
             )}
 
             <div className="combo-draft-panel">
-              <ComboSequence inputs={draftInputs} device={data.device} emptyLabel={textContent.emptyDraft || "Aucune touche sélectionnée."} activeStepIndex={activeStepIndex} onSelectStep={setActiveStepIndex} onDropInput={dropInputOnStep} onDropNewStep={dropInputAsNewStep} onDragInput={dragDraftInput} />
+              <ComboSequence
+                inputs={draftInputs}
+                device={data.device}
+                emptyLabel={textContent.emptyDraft || "Aucune touche sélectionnée."}
+                activeStepIndex={activeStepIndex}
+                selectedInput={selectedInput}
+                onSelectStep={selectDraftStep}
+                onSelectInput={(stepIndex, inputIndex) => {
+                  setActiveStepIndex(stepIndex);
+                  setSelectedInput({ stepIndex, inputIndex });
+                }}
+                onDropInput={dropInputOnStep}
+                onDropNewStep={dropInputAsNewStep}
+                onDragInput={dragDraftInput}
+              />
               <div className="combo-draft-actions">
+                <label className="combo-hold-field">
+                  <span className="combo-hold-controls">
+                    <button
+                      type="button"
+                      className={selectedDraftInput?.hold || selectedDraftInput?.holdMs ? "active" : ""}
+                      onClick={toggleSelectedInputHold}
+                      disabled={!selectedDraftInput}
+                      aria-pressed={Boolean(selectedDraftInput?.hold || selectedDraftInput?.holdMs)}
+                    >
+                      {textContent.holdToggleLabel || "Hold"}
+                    </button>
+                    <input
+                      type="number"
+                      min="0"
+                      max="99"
+                      step="1"
+                      inputMode="numeric"
+                      value={selectedDraftInput ? getHoldSeconds(selectedDraftInput) || "" : ""}
+                      onChange={(event) => updateSelectedInputHold(event.target.value)}
+                      disabled={!selectedDraftInput}
+                      placeholder="0"
+                      aria-label={textContent.holdLabel || "Maintien en secondes"}
+                    />
+                  </span>
+                </label>
                 <button
                   type="button"
                   className={`combos-simultaneous-toggle ${simultaneousMode ? "active" : ""}`}