builazoo/web/js/ui-render-gamebar-picker.js

import {
  autoProfileFamilyLabel,
  autoProfileSpecialisationLabel,
  autoProfilePickerTitle,
  autoProfilePickerFamilyStep,
  autoProfilePickerSpecialisationStep,
  autoProfileCancel,
} from "./texts-fr.js";
import { getProfilesByFamily, AUTO_MODE_FAMILY_IDS } from "./auto-mode-profiles.js";

/**
 * @param {(p: Partial<import("./types.js").GameState>) => void} updateState
 * @param {HTMLElement} pickerWrap
 * @returns {void}
 */
function buildAutoProfilePickerFamilyStep(updateState, pickerWrap) {
  const stepLabel = document.createElement("div");
  stepLabel.className = "auto-profile-picker-step";
  stepLabel.textContent = autoProfilePickerFamilyStep;
  pickerWrap.appendChild(stepLabel);
  const familyBtns = document.createElement("div");
  familyBtns.className = "auto-profile-picker-families";
  for (const fid of AUTO_MODE_FAMILY_IDS) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "auto-profile-picker-family-btn";
    btn.textContent = autoProfileFamilyLabel[fid] ?? `Famille ${fid}`;
    btn.addEventListener("click", () => updateState({ autoProfilePickerFamily: fid }));
    familyBtns.appendChild(btn);
  }
  pickerWrap.appendChild(familyBtns);
}

/**
 * @param {string|number} familyId
 * @param {(p: Partial<import("./types.js").GameState>) => void} updateState
 * @param {HTMLElement} pickerWrap
 * @returns {void}
 */
function buildAutoProfilePickerSpecStep(familyId, updateState, pickerWrap) {
  const stepLabel = document.createElement("div");
  stepLabel.className = "auto-profile-picker-step";
  stepLabel.textContent = autoProfilePickerSpecialisationStep;
  pickerWrap.appendChild(stepLabel);
  const profiles = getProfilesByFamily(familyId);
  const specWrap = document.createElement("div");
  specWrap.className = "auto-profile-picker-specialisations";
  for (const prof of profiles) {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "auto-profile-picker-spec-btn";
    btn.textContent = autoProfileSpecialisationLabel[String(prof.id)] ?? `Profil ${prof.id}`;
    btn.addEventListener("click", () => {
      updateState({
        autoModeProfileId: prof.id,
        autoMode: true,
        autoProfilePickerOpen: false,
        autoProfilePickerFamily: undefined,
      });
    });
    specWrap.appendChild(btn);
  }
  pickerWrap.appendChild(specWrap);
}

/**
 * @param {{ state: import("./types.js").GameState, updateState?: (p: Partial<import("./types.js").GameState>) => void }} setup
 * @param {HTMLElement} gameBarActions
 * @returns {void}
 */
export function buildAutoProfilePicker(setup, gameBarActions) {
  const { state, updateState } = setup;
  if (!state.autoProfilePickerOpen || !updateState) return;
  const pickerWrap = document.createElement("div");
  pickerWrap.className = "auto-profile-picker-wrap";
  pickerWrap.setAttribute("role", "dialog");
  pickerWrap.setAttribute("aria-label", autoProfilePickerTitle);
  const pickerTitle = document.createElement("div");
  pickerTitle.className = "auto-profile-picker-title";
  pickerTitle.textContent = autoProfilePickerTitle;
  pickerWrap.appendChild(pickerTitle);
  const familyId = state.autoProfilePickerFamily;
  if (familyId === null || familyId === undefined) {
    buildAutoProfilePickerFamilyStep(updateState, pickerWrap);
  } else {
    buildAutoProfilePickerSpecStep(familyId, updateState, pickerWrap);
  }
  const cancelBtn = document.createElement("button");
  cancelBtn.type = "button";
  cancelBtn.className = "auto-profile-picker-cancel";
  cancelBtn.textContent = autoProfileCancel;
  cancelBtn.addEventListener("click", () => updateState({ autoProfilePickerOpen: false, autoProfilePickerFamily: undefined }));
  pickerWrap.appendChild(cancelBtn);
  gameBarActions.appendChild(pickerWrap);
}