Jouer et r\u00e9soudre<\/p>\n\n\n\n
Ecrit au d\u00e9part en ABAP sous SAP, Migr\u00e9 \u00e0 l’aide de Claude en Python puis HTML5<\/p>\n\n\n\n
<\/p>\n\n\n\n
Test 2 sa m\u00e8re !<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n
<!DOCTYPE html><\/p>\n
<html lang=”fr”>
\n<head>
\n<meta charset=”UTF-8″>
\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
\n<title>Le Compte Est Bon<\/title>
\n<meta name=”theme-color” content=”#1e3a52″>
\n<meta name=”apple-mobile-web-app-capable” content=”yes”>
\n<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”>
\n<meta name=”apple-mobile-web-app-title” content=”CEB”>
\n<link rel=”manifest” id=”pwa-manifest”>
\n<style>
\n:root {
\n –bg: #3a6186;
\n –bg-card: #4a7399;
\n –bg-hdr: #1e3a52;
\n –bg-sub: #2e5070;
\n –accent: #e05c6e;
\n –accent2: #f5a623;
\n –green: #2ecc71;
\n –blue: #5dade2;
\n –grey: #5a7a8a;
\n –text: #ffffff;
\n –text-med: #c8dde8;
\n –text-dim: #8ab0c4;
\n –border: #2e5070;
\n –yellow: #f5c518;
\n –btn-num: #1e3a52;
\n –btn-res: #2ecc71;
\n –btn-used: #2e5070;
\n}
\n* { box-sizing: border-box; margin: 0; padding: 0; }
\nbutton, input, select { touch-action: manipulation; }
\nbody { font-family: ‘Segoe UI’, system-ui, sans-serif; background: var(–bg); color: var(–text); min-height: 100vh; }<\/p>\n
\/* HEADER *\/
\nheader { background: var(\u2013bg-hdr); display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
\nheader h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: 2px; }
\nheader .hdr-right { display: flex; gap: 8px; }<\/p>\n
\/* INFO BAR *\/
\n.info-bar { background: var(\u2013bg-sub); display: flex; align-items: center; gap: 20px; padding: 6px 20px; border-top: 1px solid var(\u2013border); border-bottom: 1px solid var(\u2013border); font-size: 0.85rem; }
\n.info-bar .timer { font-size: 1.1rem; font-weight: 700; color: var(\u2013accent2); min-width: 60px; }
\n.info-bar .score { margin-left: auto; font-weight: 700; }<\/p>\n
\/* MAIN *\/
\nmain { max-width: 680px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }<\/p>\n
\/* CIBLE *\/
\n.cible-wrap { text-align: center; }
\n.cible-label { font-size: 0.85rem; color: var(\u2013text-med); }
\n.cible-val { font-size: 3rem; font-weight: 700; color: var(\u2013accent2); line-height: 1.1; }<\/p>\n
\/* PLAQUES *\/
\n.plq-section { }
\n.plq-title { font-size: 0.8rem; color: var(\u2013text-dim); margin-bottom: 6px; }
\n.plq-grid {
\ndisplay: grid;
\ngrid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
\ngap: 8px;
\n}
\n.plq-btn-ghost {
\nbackground: transparent;
\nborder: 2px dashed var(\u2013border);
\nborder-radius: 8px;
\nheight: 52px;
\nopacity: .4;
\npointer-events: none;
\n}
\n.plq-btn {
\nfont-family: inherit; font-size: 1.1rem; font-weight: 700;
\nbackground: var(\u2013btn-num); color: var(\u2013text);
\nborder: none; border-radius: 8px;
\nheight: 52px; width: 100%; cursor: pointer;
\ntransition: transform .1s, background .15s;
\n}
\n.plq-btn:hover:not(:disabled) { background: #2a5070; transform: scale(1.04); }
\n.plq-btn.selected { outline: 3px solid var(\u2013yellow); }
\n.plq-btn.used { background: var(\u2013btn-used); color: var(\u2013text-dim); cursor: default; }
\n.plq-btn.result { background: var(\u2013btn-res); color: #1a1a2e; }
\n.plq-btn:disabled { opacity: .5; cursor: default; }<\/p>\n
\/* CALCUL EN COURS *\/
\n.cur-op { background: var(\u2013bg-card); border-radius: 8px; padding: 10px 16px; min-height: 44px; font-size: 1.1rem; font-weight: 700; color: var(\u2013accent2); text-align: center; }<\/p>\n
\/* OPERATEURS *\/
\n.op-row { display: flex; justify-content: center; gap: 10px; }
\n.op-btn {
\nfont-family: inherit; font-size: 1.2rem; font-weight: 700;
\nbackground: var(\u2013accent); color: #fff;
\nborder: none; border-radius: 8px;
\nwidth: 52px; height: 44px; cursor: pointer;
\ntransition: transform .1s;
\n}
\n.op-btn:hover { transform: scale(1.06); }
\n.op-btn.active { outline: 3px solid var(\u2013yellow); }<\/p>\n
\/* HISTORIQUE *\/
\n.hist { background: var(\u2013bg-card); border-radius: 8px; padding: 10px 16px; }
\n.hist-title { font-size: 0.8rem; color: var(\u2013text-med); margin-bottom: 4px; }
\n.hist-line { font-family: \u2018Courier New\u2019, monospace; font-size: 1.15rem; font-weight: 700; color: var(\u2013accent2); min-height: 24px; padding: 2px 0; }<\/p>\n
\/* ACTIONS *\/
\n.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
\n.act-btn {
\nfont-family: inherit; font-size: 0.9rem; font-weight: 700;
\nborder: none; border-radius: 8px; padding: 10px 18px; cursor: pointer;
\ntransition: transform .1s, opacity .15s;
\n}
\n.act-btn:hover { transform: scale(1.03); }
\n.act-btn.green { background: var(\u2013green); color: #1a1a2e; }
\n.act-btn.blue { background: var(\u2013blue); color: #1a1a2e; }
\n.act-btn.red { background: var(\u2013accent); color: #fff; }
\n.act-btn.grey { background: var(\u2013grey); color: #fff; }
\n.act-btn:disabled { opacity: .4; cursor: default; transform: none; }<\/p>\n
\/* SOLUTION AUTO *\/
\n.sol-box { background: var(\u2013bg-card); border-radius: 8px; padding: 10px 16px; }
\n.sol-title { font-size: 0.8rem; color: var(\u2013text-med); margin-bottom: 4px; }
\n.sol-line { font-family: \u2018Courier New\u2019, monospace; font-size: 0.9rem; color: var(\u2013text-med); min-height: 18px; }
\n.sol-line.exact { color: var(\u2013green); }<\/p>\n
\/* STATUS *\/
\n.status { text-align: center; font-size: 0.85rem; color: var(\u2013text-dim); padding: 4px 0; min-height: 20px; }<\/p>\n
\/* MODAL *\/
\n.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100; align-items: center; justify-content: center; }
\n.modal-overlay.open { display: flex; }
\n.modal { background: var(\u2013bg-card); border-radius: 12px; padding: 24px; min-width: 300px; max-width: 480px; width: 90%; }
\n.modal h2 { font-size: 1rem; margin-bottom: 16px; color: var(\u2013accent2); }
\n.modal .row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.9rem; }
\n.modal label { width: 180px; color: var(\u2013text-med); flex-shrink: 0; }
\n.modal input[type=number] { width: 80px; background: var(\u2013bg-hdr); color: var(\u2013text); border: 1px solid var(\u2013border); border-radius: 6px; padding: 4px 8px; font-size: 0.9rem; }
\n.modal select { background: var(\u2013bg-hdr); color: var(\u2013text); border: 1px solid var(\u2013border); border-radius: 6px; padding: 4px 8px; font-size: 0.9rem; }
\n.modal .modal-actions { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }<\/p>\n
\/* DETAIL MODAL *\/
\n.detail-tabs { display: flex; gap: 0; margin-bottom: 0; }
\n.tab-btn { background: var(\u2013bg-sub); color: var(\u2013text-med); border: none; padding: 8px 16px; cursor: pointer; font-size: 0.85rem; font-family: inherit; }
\n.tab-btn.active { background: var(\u2013bg-card); color: var(\u2013accent); font-weight: 700; }
\n.tab-content { display: none; }
\n.tab-content.active { display: block; }
\n.reach-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; max-height: 340px; overflow-y: auto; margin-top: 8px; }
\n.reach-cell { font-family: \u2018Courier New\u2019, monospace; font-size: 0.75rem; text-align: center; padding: 3px 2px; border-radius: 3px; background: var(\u2013bg-sub); color: var(\u2013text); }
\n.reach-cell.is-target { background: var(\u2013accent2); color: #1a1a2e; font-weight: 700; }
\n.reach-cell.is-firstgap { background: #2d5f80; color: var(\u2013blue); }
\n.sol-item { background: var(\u2013bg-sub); border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; font-family: \u2018Courier New\u2019, monospace; font-size: 0.82rem; cursor: pointer; }
\n.sol-item:hover { background: #3a6a90; }
\n.sol-item .sol-preview { color: var(\u2013text-med); font-size: 0.78rem; }
\n.sol-steps { display: none; margin-top: 6px; }
\n.sol-steps.open { display: block; }
\n.sol-steps span { display: block; color: var(\u2013green); }
\n<\/style><\/p>\n
<\/head>
\n<body><\/p>\n
<header>
\n <h1>LE COMPTE EST BON <span style=”font-size:.6rem;font-weight:400;opacity:.7;letter-spacing:1px;”>by J.Dimijian + Claude<\/span><\/h1>
\n <div class=”hdr-right”>
\n <button class=”act-btn grey” onclick=”openStats()” style=”padding:8px 12px;”>\ud83d\udcca<\/button>
\n <button class=”act-btn grey” onclick=”openOptions()”>Options<\/button>
\n <\/div>
\n<\/header><\/p>\n
<div class=”info-bar”>
\n <span id=”lbl-round” style=”color:var(–text-dim)”>\u2014<\/span>
\n <span id=”lbl-mode” style=”color:var(–text-dim)”>CEB24<\/span>
\n <span class=”timer” id=”lbl-timer”>\u2014<\/span>
\n <span class=”score”>Score : <span id=”lbl-score”>0<\/span><\/span>
\n<\/div><\/p>\n
<main>
\n <div class=”cible-wrap” style=”display:flex;align-items:center;gap:12px;”>
\n <button class=”act-btn red” id=”btn-nouveau” onclick=”newGame()” style=”padding:10px 16px;flex-shrink:0;”>Nouveau<\/button>
\n <div style=”flex:1;text-align:center;”>
\n <div class=”cible-label”>Cible<\/div>
\n <div class=”cible-val” id=”lbl-cible”>\u2014<\/div>
\n <\/div>
\n <\/div><\/p>\n
<div class=”plq-section”>
\n <div class=”plq-title” id=”plq-title”>Plaques disponibles<\/div>
\n <div class=”plq-grid” id=”plq-grid”><\/div>
\n <!– Mode entra\u00eenement : saisie libre –>
\n <div id=”entrainement-zone” style=”display:none; margin-top:8px;”>
\n <div style=”font-size:0.8rem;color:var(–text-dim);margin-bottom:6px;”>Saisis les plaques et la cible, puis clique sur Jouer<\/div>
\n <div style=”display:flex;flex-wrap:wrap;gap:6px;align-items:center;” id=”entry-plq-row”><\/div>
\n <div style=”display:flex;align-items:center;gap:10px;margin-top:8px;”>
\n <span style=”font-size:0.85rem;color:var(–text-med);”>Cible :<\/span>
\n <input type=”number” id=”entry-cible” min=”1″ max=”9999″
\n style=”width:80px;background:var(–bg-hdr);color:var(–accent2);border:1px solid var(–border);
\n border-radius:6px;padding:6px 8px;font-size:1.1rem;font-weight:700;text-align:center;”>
\n <button class=”act-btn green” onclick=”jouerEntrainement()” style=”padding:8px 14px;”>Jouer !<\/button>
\n <\/div>
\n <\/div>
\n <\/div><\/p>\n
<div class=”cur-op” id=”cur-op”><\/div><\/p>\n
<div class=”op-row” id=”op-row” style=”display:flex;align-items:center;”>
\n <div style=”flex:1;display:flex;justify-content:center;gap:16px;”>
\n <button class=”op-btn” onclick=”onOperator(‘+’, this)”>+<\/button>
\n <button class=”op-btn” onclick=”onOperator(‘-‘, this)”>\u2212<\/button>
\n <button class=”op-btn” onclick=”onOperator(‘X’, this)”>\u00d7<\/button>
\n <button class=”op-btn” onclick=”onOperator(‘\/’, this)”>\u00f7<\/button>
\n <\/div>
\n <button class=”op-btn” onclick=”onEffacer()” style=”background:var(–grey);font-size:1rem;flex-shrink:0;”>\u232b<\/button>
\n <\/div><\/p>\n
<div class=”hist”>
\n <div class=”hist-title”>Calculs :<\/div>
\n <div id=”hist-lines”><\/div>
\n <\/div><\/p>\n
<div class=”actions”>
\n <button class=”act-btn green” onclick=”onValider()”>Valider<\/button>
\n <button class=”act-btn blue” onclick=”onResoudre()” id=”btn-resoudre” disabled>R\u00e9soudre<\/button>
\n <button class=”act-btn grey” onclick=”openDetail()” id=”btn-detail” disabled>D\u00e9tail\u2026<\/button>
\n <\/div><\/p>\n
<div class=”sol-box” id=”sol-box” style=”display:none”>
\n <div class=”sol-title”>Meilleure solution :<\/div>
\n <div id=”sol-lines”><\/div>
\n <\/div><\/p>\n
<div class=”status” id=”lbl-status”>Clique sur Nouveau pour commencer<\/div>
\n<\/main><\/p>\n
<!– OPTIONS MODAL –><\/p>\n
<div class=”modal-overlay” id=”modal-options”>
\n <div class=”modal”>
\n <h2>Options du jeu<\/h2>
\n <div style=”font-size:.8rem;color:var(–accent2);margin-bottom:6px;font-weight:700;”>\u2014 Partie \u2014<\/div>
\n <div class=”row”>
\n <label>N\u00b0 partie \/ graine (0=al\u00e9atoire)<\/label>
\n <input type=”number” id=”opt-partie” value=”0″ min=”0″ style=”width:80px;”>
\n <span style=”font-size:.75rem;color:var(–text-dim)”>\u26a0 reset score<\/span>
\n <\/div>
\n <div class=”row”><label>Nombre de tirages par partie<\/label><input type=”number” id=”opt-nbtirages” min=”1″ max=”999″ value=”50″ style=”width:80px;”><\/div>
\n <div style=”font-size:.8rem;color:var(–accent2);margin:8px 0 6px;font-weight:700;”>\u2014 Tirage \u2014<\/div>
\n <div class=”row”><label>Mode de tirage<\/label>
\n <select id=”opt-tirage”>
\n <option value=”ceb24″>CEB 24 (classique)<\/option>
\n <option value=”ceb28″>CEB 28 (grands \u00d72)<\/option>
\n <option value=”alea20″>Al\u00e9atoire 20<\/option>
\n <\/select>
\n <\/div>
\n <div class=”row”><label>Nombre de plaques<\/label><input type=”number” id=”opt-nbplq” min=”2″ max=”8″ value=”6″><\/div>
\n <div class=”row”><label>Cible minimum<\/label><input type=”number” id=”opt-tmin” value=”101″><\/div>
\n <div class=”row”><label>Cible maximum<\/label><input type=”number” id=”opt-tmax” value=”999″><\/div>
\n <div class=”row”><label>Cible forc\u00e9ment atteignable<\/label>
\n <input type=”checkbox” id=”opt-exact” checked style=”width:20px;height:20px;accent-color:var(–green);cursor:pointer;”>
\n <\/div>
\n <div style=”font-size:.8rem;color:var(–accent2);margin:8px 0 6px;font-weight:700;”>\u2014 Jeu \u2014<\/div>
\n <div class=”row”><label>Temps limite (s)<\/label><input type=”number” id=”opt-time” value=”45″><\/div>
\n <div class=”row”><label>Reprise auto r\u00e9sultat pr\u00e9c\u00e9dent<\/label>
\n <input type=”checkbox” id=”opt-reprise” style=”width:20px;height:20px;accent-color:var(–green);cursor:pointer;”>
\n <\/div>
\n <div class=”row”><label>Mode entra\u00eenement (plaques + cible libres)<\/label>
\n <input type=”checkbox” id=”opt-entrainement” style=”width:20px;height:20px;accent-color:var(–green);cursor:pointer;”>
\n <\/div>
\n <div style=”font-size:.8rem;color:var(–accent2);margin:8px 0 6px;font-weight:700;”>\u2014 Solveur \u2014<\/div>
\n <div class=”row”><label>Mode r\u00e9solution<\/label>
\n <select id=”opt-solve”>
\n <option value=”complete”>Meilleure solution<\/option>
\n <option value=”stop”>Premi\u00e8re exacte<\/option>
\n <option value=”all”>Toutes (jusqu’\u00e0 r\u00e9cur 3)<\/option>
\n <\/select>
\n <\/div>
\n <div class=”modal-actions”>
\n <button class=”act-btn green” onclick=”saveOptions()”>Appliquer<\/button>
\n <button class=”act-btn red” onclick=”closeModal(‘modal-options’)”>Annuler<\/button>
\n <\/div>
\n <\/div>
\n<\/div><\/p>\n
<!– DETAIL MODAL –><\/p>\n
<div class=”modal-overlay” id=”modal-detail”>
\n <div class=”modal” style=”max-width:640px; width:95%; max-height:90vh; overflow:hidden; display:flex; flex-direction:column;”>
\n <h2 id=”detail-title” style=”flex-shrink:0;”>D\u00e9tail<\/h2>
\n <div class=”detail-tabs” style=”flex-shrink:0;”>
\n <button class=”tab-btn active” onclick=”showTab(‘tab-reach’)”>R\u00e9sultats<\/button>
\n <button class=”tab-btn” onclick=”showTab(‘tab-sols’)”>Solutions exactes<\/button>
\n <button class=”tab-btn” onclick=”showTab(‘tab-best’)”>Meilleure<\/button>
\n <\/div>
\n <div style=”flex:1; overflow-y:auto; min-height:0;”>
\n <div id=”tab-reach” class=”tab-content active”>
\n <div id=”reach-info” style=”font-size:.85rem;color:var(–text-med);padding:6px 0″><\/div>
\n <div id=”reach-canvas-wrap” style=”overflow-y:auto;max-height:340px;margin-top:4px;”><\/div>
\n <\/div>
\n <div id=”tab-sols” class=”tab-content”>
\n <div id=”sols-list” style=”overflow-y:auto;max-height:420px;”><\/div>
\n <\/div>
\n <div id=”tab-best” class=”tab-content”>
\n <div id=”best-content” style=”padding:12px 0; font-family:’Courier New’,monospace; font-size:1rem;”><\/div>
\n <\/div>
\n <\/div>
\n <div style=”flex-shrink:0; border-top:1px solid var(–border); padding-top:10px; margin-top:8px; text-align:right;”>
\n <button class=”act-btn red” onclick=”closeModal(‘modal-detail’)”>Fermer<\/button>
\n <\/div>
\n <\/div>
\n<\/div><\/p>\n
<!– FIN DE PARTIE MODAL –><\/p>\n
<div class=”modal-overlay” id=”modal-fin”>
\n <div class=”modal” style=”max-width:480px;width:95%;text-align:center;”>
\n <h2 style=”font-size:1.4rem;margin-bottom:4px;”>\ud83c\udfc1 Fin de partie !<\/h2>
\n <div id=”fin-graine” style=”font-size:.8rem;color:var(–text-dim);margin-bottom:16px;”><\/div>
\n <div id=”fin-score” style=”font-size:2.5rem;font-weight:700;color:var(–accent2);margin-bottom:4px;”><\/div>
\n <div id=”fin-moyenne” style=”font-size:.9rem;color:var(–text-med);margin-bottom:16px;”><\/div>
\n <div id=”fin-hist” style=”text-align:left;max-height:260px;overflow-y:auto;margin-bottom:16px;”><\/div>
\n <div class=”modal-actions” style=”justify-content:center;gap:12px;”>
\n <button class=”act-btn green” onclick=”nouvellePartie()”>Nouvelle partie<\/button>
\n <button class=”act-btn grey” onclick=”closeModal(‘modal-fin’)”>Fermer<\/button>
\n <\/div>
\n <\/div>
\n<\/div><\/p>\n
<!– STATS MODAL –><\/p>\n
<div class=”modal-overlay” id=”modal-stats”>
\n <div class=”modal” style=”max-width:580px;width:95%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;”>
\n <h2 style=”flex-shrink:0;”>\ud83d\udcca Statistiques<\/h2>
\n <div class=”detail-tabs” style=”flex-shrink:0;”>
\n <button class=”tab-btn active” onclick=”showStatsTab(‘st-global’)”>Globales<\/button>
\n <button class=”tab-btn” onclick=”showStatsTab(‘st-parties’)”>Parties<\/button>
\n <button class=”tab-btn” onclick=”showStatsTab(‘st-modes’)”>Modes<\/button>
\n <\/div>
\n <div style=”flex:1;overflow-y:auto;min-height:0;padding:8px 0;”><\/p>\n
“`
\n <!– Globales –>
\n <div id=”st-global” class=”tab-content active”><\/div><\/p>\n
<!– Parties –>
\n <div id=”st-parties” class=”tab-content”>
\n <div id=”st-parties-list” style=”font-size:.82rem;”><\/div>
\n <\/div><\/p>\n
<!– Modes –>
\n <div id=”st-modes” class=”tab-content”><\/div><\/p>\n
<\/div>
\n<div style=”flex-shrink:0;border-top:1px solid var(–border);padding-top:10px;margin-top:8px;display:flex;justify-content:space-between;”>
\n <button class=”act-btn red” onclick=”resetStats()” style=”font-size:.8rem;padding:8px 12px;”>\ud83d\uddd1 Reset stats<\/button>
\n <button class=”act-btn grey” onclick=”closeModal(‘modal-stats’)”>Fermer<\/button>
\n<\/div>
\n“`<\/p>\n
<\/div>
\n<\/div><\/p>\n
<script>
\n“use strict”;<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ HP11C RANDOM \u2014 BigInt pour \u00e9viter toute perte d’arrondi
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nconst KINCR = 1017980433n;
\nconst KBASE = 1574352261n;
\nconst K10E10 = 10000000000n;<\/p>\n
class HP11CRandom {
\n constructor(partieNum = 0) {
\n this._next = partieNum > 0
\n ? BigInt(partieNum) * 10000n
\n : BigInt(Math.floor(Math.random() * 99999999));
\n }
\n rand(limHaute) {
\n this._next = (this._next * KBASE + KINCR) % K10E10;
\n return Number(this._next * BigInt(limHaute + 1) \/ K10E10);
\n }
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ TIRAGE DES PLAQUES
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction extract(pool, n, rng) {
\n pool = […pool];
\n const result = [];
\n for (let i = 0; i < n; i++) {
\n const remaining = pool.length – 1;
\n const idx = rng.rand(remaining);
\n result.push(pool.splice(idx, 1)[0]);
\n }
\n return result;
\n}<\/p>\n
function ceb24(n, rng) {
\n const pool = […Array.from({length:10},(_,i)=>i+1), …Array.from({length:10},(_,i)=>i+1), 25,50,75,100];
\n return extract(pool, n, rng);
\n}
\nfunction ceb28(n, rng) {
\n const base = […Array.from({length:10},(_,i)=>i+1), 25,50,75,100];
\n return extract([…base,…base], n, rng);
\n}
\nfunction alea20(n, rng) {
\n const pool = […Array.from({length:10},(_,i)=>i+1), …Array.from({length:10},(_,i)=>i+1)];
\n for (let i = 0; i < 8; i++) pool.push(rng.rand(88) + 11);
\n return extract(pool, n, rng);
\n}
\nfunction tireCible(min, max, rng) {
\n return rng.rand(max – min) + min;
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ SOLVEUR R\u00c9CURSIF
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction calc4(a, b) {
\n if (a < b) { let t = a; a = b; b = t; }
\n const som = a + b;
\n const dif = (a !== b) ? a – b : 0;
\n const mul = (b !== 1) ? a * b : 0;
\n let div = 0;
\n if (b !== 1 && b !== 0 && a % b === 0) div = a \/ b;
\n return [som, dif, mul, div];
\n}<\/p>\n
class CEBSolver {
\n constructor(target, mode = ‘complete’) {
\n this.target = target;
\n this.mode = mode;
\n this.best = null;
\n this.allSols = [];
\n this.reachable = new Set();
\n this._seen = new Set();
\n this._ops = 0;
\n }<\/p>\n
_comboKey(plaques) {
\n return […plaques].sort((a,b)=>a-b).join(‘\/’);
\n }<\/p>\n
_recurse(plaques, steps) {
\n const n = plaques.length;
\n if (n < 2) return;<\/p>\n
const key = this._comboKey(plaques);
\n const depth = this._depthTotal – n + 1;<\/p>\n
if (this._seen.has(key)) {
\n if (this.mode === ‘all’ && depth <= 3) { \/* continue *\/ }
\n else return;
\n }
\n this._seen.add(key);<\/p>\n
if (this.mode === ‘stop’ && this.best && this.best.diff === 0) return;<\/p>\n
for (let i = 0; i < n – 1; i++) {
\n for (let j = i + 1; j < n; j++) {
\n this._ops++;
\n const a = plaques[i], b = plaques[j];
\n const [som, dif, mul, div] = calc4(a, b);
\n const big = Math.max(a,b), small = Math.min(a,b);<\/p>\n
const ops = [
\n [som, `${big} + ${small} = ${som}`],
\n dif ? [dif, `${big} – ${small} = ${dif}`] : null,
\n mul ? [mul, `${big} \u00d7 ${small} = ${mul}`] : null,
\n div ? [div, `${big} \/ ${small} = ${div}`] : null,
\n ];<\/p>\n
for (const entry of ops) {
\n if (!entry) continue;
\n const [result, label] = entry;
\n this.reachable.add(result);
\n const diff = Math.abs(result – this.target);
\n const curSteps = […steps, label];<\/p>\n
const bestDiff = this.best ? this.best.diff : this.target;
\n let isBetter = false;
\n if (!this.best) isBetter = true;
\n else if (diff < this.best.diff) isBetter = true;
\n else if (diff === this.best.diff && curSteps.length < this.best.depth) isBetter = true;<\/p>\n
if (diff <= bestDiff) {
\n const sol = { result, diff, depth: curSteps.length, steps: curSteps };
\n if (diff === 0) this.allSols.push(sol);
\n if (isBetter) this.best = sol;
\n }
\n }<\/p>\n
const rest = plaques.filter((_,k) => k !== i && k !== j);
\n for (const entry of [
\n mul ? [mul, `${big} \u00d7 ${small} = ${mul}`] : null,
\n div ? [div, `${big} \/ ${small} = ${div}`] : null,
\n [som, `${big} + ${small} = ${som}`],
\n dif ? [dif, `${big} – ${small} = ${dif}`] : null,
\n ]) {
\n if (!entry) continue;
\n const [val, label] = entry;
\n this._recurse([…rest, val], […steps, label]);
\n }
\n }
\n }
\n }<\/p>\n
solve(plaques) {
\n this._seen.clear();
\n this._ops = 0;
\n this._depthTotal = plaques.length;<\/p>\n
if (plaques.includes(this.target)) {
\n this.best = { result: this.target, diff: 0, depth: 0,
\n steps: [`La cible ${this.target} est directement une des plaques !`] };
\n this.allSols = [this.best];
\n return this.best;
\n }<\/p>\n
const bestPlaque = plaques.reduce((b,x) => Math.abs(x-this.target) < Math.abs(b-this.target) ? x : b);
\n this.best = { result: bestPlaque, diff: Math.abs(bestPlaque-this.target), depth: 0,
\n steps: [`(meilleure plaque seule : ${bestPlaque})`] };<\/p>\n
this._recurse(plaques, []);
\n return this.best;
\n }
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ MOTEUR DE JEU
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nconst cfg = {
\n tirageMode: ‘ceb24’, solveMode: ‘complete’,
\n nbPlaques: 6, targetMin: 101, targetMax: 999,
\n timeLimit: 45, partieNum: 0, nbTirages: 50,
\n exactOnly: true,
\n repriseAuto: true, \/\/ reprise auto r\u00e9sultat pr\u00e9c\u00e9dent (d\u00e9faut coch\u00e9)
\n entrainement: false,
\n scoreInTime: [10, 7, -5],
\n scoreOutTime: [ 5, 2,-10],
\n};<\/p>\n
let state = {
\n plaques: [], target: 0,
\n best: null, allSols: [], reachable: new Set(),
\n startTime: 0, score: 0, roundNum: 0,
\n validated: true,
\n history: [], \/\/ [{tirage, target, diff, pts, inTime}]
\n};<\/p>\n
let rng = null;
\nfunction getRng() {
\n if (!rng) rng = new HP11CRandom(cfg.partieNum);
\n return rng;
\n}<\/p>\n
function doTirage() {
\n const r = getRng();
\n let plaques;
\n if (cfg.tirageMode === ‘ceb24’) plaques = ceb24(cfg.nbPlaques, r);
\n else if (cfg.tirageMode === ‘ceb28’) plaques = ceb28(cfg.nbPlaques, r);
\n else plaques = alea20(cfg.nbPlaques, r);<\/p>\n
let target;
\n if (cfg.exactOnly) {
\n \/\/ Calcule d’abord toutes les valeurs atteignables, puis tire parmi elles
\n const scanner = new CEBSolver(0, ‘complete’);
\n scanner._depthTotal = plaques.length;
\n scanner._recurse(plaques, []);
\n const candidates = […scanner.reachable]
\n .filter(v => v >= cfg.targetMin && v <= cfg.targetMax)
\n .sort((a, b) => a – b);
\n if (candidates.length > 0) {
\n const idx = r.rand(candidates.length – 1);
\n target = candidates[idx];
\n } else {
\n target = tireCible(cfg.targetMin, cfg.targetMax, r); \/\/ fallback
\n }
\n } else {
\n target = tireCible(cfg.targetMin, cfg.targetMax, r);
\n }<\/p>\n
state = { …state, plaques, target, best: null, allSols: [], reachable: new Set(),
\n startTime: Date.now(), roundNum: state.roundNum + 1, validated: false };
\n return state;
\n}<\/p>\n
function doSolve() {
\n const solver = new CEBSolver(state.target, cfg.solveMode);
\n const t0 = performance.now();
\n const sol = solver.solve(state.plaques);
\n const ms = performance.now() – t0;
\n state.best = sol;
\n state.allSols = solver.allSols;
\n state.reachable = solver.reachable;
\n return { sol, solver, ms };
\n}<\/p>\n
function evaluate(playerResult) {
\n if (state.validated) return { error: ‘D\u00e9j\u00e0 \u00e9valu\u00e9.’ };
\n const elapsed = (Date.now() – state.startTime) \/ 1000;
\n const inTime = elapsed <= cfg.timeLimit;
\n const diff = Math.abs(playerResult – state.target);
\n const tbl = inTime ? cfg.scoreInTime : cfg.scoreOutTime;
\n const pts = diff === 0 ? tbl[0] : diff <= 3 ? tbl[1] : tbl[2];
\n state.score += pts;
\n state.validated = true;
\n state.history.push({
\n num: state.roundNum, plaques: […state.plaques],
\n target: state.target, result: playerResult,
\n diff, pts, inTime, elapsed: +elapsed.toFixed(1),
\n });
\n if (!cfg.entrainement && state.roundNum >= cfg.nbTirages) {
\n setTimeout(() => openFinPartie(), 400);
\n }
\n saveSession();
\n return { diff, inTime, elapsed: elapsed.toFixed(1), points: pts,
\n total: state.score,
\n msg: `${inTime ? ‘\u2713 In time’ : ‘\u2717 Out of time’} (${elapsed.toFixed(1)}s) | \u00e9cart=${diff} | ${pts >= 0 ? ‘+’ : ”}${pts} pts` };
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ UI STATE
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nlet phase = 1; \/\/ 1=op1, 2=oper, 3=op2
\nlet currentOp1 = null; \/\/ {idx, val}
\nlet currentOper = null;
\nlet calcSteps = []; \/\/ [{op1,oper,op2,res}]
\nlet plaqueBtns = [];
\nlet plaqueActive = [];
\nlet plaqueVals = [];
\nlet timerId = null;
\nlet elapsed = 0;
\nlet lastSolver = null;<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ TIMER
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction startTimer() {
\n elapsed = 0;
\n stopTimer();
\n tick();
\n}
\nfunction tick() {
\n const rest = cfg.timeLimit – elapsed;
\n const t = document.getElementById(‘lbl-timer’);
\n t.textContent = rest >= 0 ? `${rest}s` : ‘Temps !’;
\n t.style.color = rest > 15 ? ‘var(–green)’ : rest > 5 ? ‘var(–accent2)’ : ‘var(–accent)’;
\n elapsed++;
\n timerId = setTimeout(tick, 1000);
\n}
\nfunction stopTimer() {
\n if (timerId) { clearTimeout(timerId); timerId = null; }
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ AFFICHAGE PLAQUES
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction renderPlaques() {
\n const grid = document.getElementById(‘plq-grid’);
\n const n = state.plaques.length;
\n grid.innerHTML = ”;
\n plaqueBtns = [];<\/p>\n
\/\/ Rang\u00e9e 1 \u2014 plaques initiales
\n for (let i = 0; i < n; i++) {
\n const btn = _makePlaqueBtn(i, plaqueVals[i], plaqueActive[i], false);
\n grid.appendChild(btn);
\n plaqueBtns.push(btn);
\n }<\/p>\n
\/\/ Rang\u00e9e 2 \u2014 emplacements r\u00e9sultats (n slots fant\u00f4mes)
\n for (let i = 0; i < n; i++) {
\n const ghost = document.createElement(‘div’);
\n ghost.className = ‘plq-btn-ghost’;
\n ghost.dataset.slot = i;
\n grid.appendChild(ghost);
\n }
\n}<\/p>\n
function _makePlaqueBtn(idx, val, active, isResult) {
\n const btn = document.createElement(‘button’);
\n btn.className = ‘plq-btn’ + (isResult ? ‘ result’ : ”) + (!active ? ‘ used’ : ”);
\n btn.textContent = val;
\n btn.disabled = !active;
\n btn.onclick = () => onPlaque(idx);
\n return btn;
\n}<\/p>\n
\/\/ Ajoute un r\u00e9sultat dans le prochain slot fant\u00f4me de la rang\u00e9e 2
\nfunction _addResultBtn(idx, val) {
\n const grid = document.getElementById(‘plq-grid’);
\n const n = state.plaques.length;
\n const slotIdx = idx – n;
\n const target = grid.querySelector(`.plq-btn-ghost[data-slot=”${slotIdx}”]`);
\n if (!target) return;
\n const btn = _makePlaqueBtn(idx, val, true, true);
\n grid.replaceChild(btn, target);
\n plaqueBtns.push(btn);
\n}<\/p>\n
\/\/ Supprime le dernier r\u00e9sultat et remet un ghost \u00e0 sa place
\nfunction _removeLastResultBtn() {
\n const grid = document.getElementById(‘plq-grid’);
\n const n = state.plaques.length;
\n const children = […grid.children];
\n for (let i = children.length – 1; i >= n; i–) {
\n if (!children[i].classList.contains(‘plq-btn-ghost’)) {
\n const slotIdx = i – n;
\n const ghost = document.createElement(‘div’);
\n ghost.className = ‘plq-btn-ghost’;
\n ghost.dataset.slot = slotIdx;
\n grid.replaceChild(ghost, children[i]);
\n plaqueBtns.pop();
\n return;
\n }
\n }
\n}<\/p>\n
function refreshHist() {
\n const div = document.getElementById(‘hist-lines’);
\n div.innerHTML = ”;
\n for (let i = 0; i < state.plaques.length – 1; i++) {
\n const d = document.createElement(‘div’);
\n d.className = ‘hist-line’;
\n if (i < calcSteps.length) {
\n const {op1,oper,op2,res} = calcSteps[i];
\n d.textContent = ` ${op1} ${oper} ${op2} = ${res}`;
\n }
\n div.appendChild(d);
\n }
\n}<\/p>\n
function setStatus(txt) { document.getElementById(‘lbl-status’).textContent = txt; }
\nfunction setCurOp(txt) { document.getElementById(‘cur-op’).textContent = txt; }<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ CHECK OPERATION
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction checkOperation(op1, oper, op2) {
\n if (oper === ‘+’) return { ok: true, res: op1 + op2, err: ” };
\n if (oper === ‘-‘) {
\n const res = op1 – op2;
\n if (res < 1) return { ok: false, res: 0, err: `Soustraction non autoris\u00e9e (r\u00e9sultat = ${res} < 1)` };
\n return { ok: true, res, err: ” };
\n }
\n if (oper === ‘X’ || oper === ‘\u00d7’) return { ok: true, res: op1 * op2, err: ” };
\n if (oper === ‘\/’) {
\n if (op2 === 0) return { ok: false, res: 0, err: ‘Division par z\u00e9ro’ };
\n if (op1 % op2 !== 0) return { ok: false, res: 0, err: `Division non enti\u00e8re (${op1} \u00f7 ${op2})` };
\n return { ok: true, res: op1 \/ op2, err: ” };
\n }
\n return { ok: false, res: 0, err: ‘Op\u00e9rateur inconnu’ };
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ INTERACTIONS JOUEUR
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction onPlaque(idx) {
\n if (!plaqueActive[idx]) return;
\n const val = plaqueVals[idx];<\/p>\n
if (phase === 1 || phase === 2) {
\n \/\/ Phase 1 : choix op1 | Phase 2 : remplacement op1 (nouvelle plaque cliqu\u00e9e)
\n if (phase === 2 && currentOp1) {
\n \/\/ D\u00e9s\u00e9lectionne l’ancien op1
\n plaqueBtns[currentOp1.idx].classList.remove(‘selected’);
\n }
\n currentOp1 = { idx, val };
\n plaqueBtns[idx].classList.add(‘selected’);
\n phase = 2;
\n setCurOp(`${val} ? …`);
\n setStatus(`${val} s\u00e9lectionn\u00e9 \u2014 choisis un op\u00e9rateur.`);<\/p>\n
} else if (phase === 3) {
\n \/\/ Clic sur la plaque d\u00e9j\u00e0 choisie comme op1 \u2192 d\u00e9s\u00e9lection, retour phase 1
\n if (idx === currentOp1.idx) {
\n plaqueBtns[currentOp1.idx].classList.remove(‘selected’);
\n document.querySelectorAll(‘.op-btn’).forEach(b => b.classList.remove(‘active’));
\n currentOp1 = currentOper = null;
\n phase = 1;
\n setCurOp(”);
\n setStatus(‘S\u00e9lectionne une plaque.’);
\n return;
\n }
\n const op1 = currentOp1.val;
\n const { ok, res, err } = checkOperation(op1, currentOper, val);
\n if (!ok) { alert(err); return; }<\/p>\n
\/\/ D\u00e9sactive les deux plaques
\n for (const i2 of [currentOp1.idx, idx]) {
\n plaqueActive[i2] = false;
\n plaqueBtns[i2].disabled = true;
\n plaqueBtns[i2].classList.remove(‘selected’);
\n plaqueBtns[i2].classList.add(‘used’);
\n }<\/p>\n
calcSteps.push({ op1, oper: currentOper, op2: val, res });
\n refreshHist();
\n saveSession();<\/p>\n
\/\/ Bouton r\u00e9sultat dans la rang\u00e9e 2
\n const newIdx = plaqueVals.length;
\n plaqueVals.push(res);
\n plaqueActive.push(true);
\n _addResultBtn(newIdx, res);<\/p>\n
if (res === state.target && !state.validated) {
\n stopTimer();
\n const r = evaluate(res);
\n if (!r.error) {
\n document.getElementById(‘lbl-score’).textContent = r.total;
\n setStatus(`\ud83c\udf89 COMPTE EST BON ! ${r.msg}`);
\n alert(`Compte est bon !\\n\\n${r.msg}`);
\n document.getElementById(‘btn-resoudre’).disabled = false;
\n updateNouveauBtn();
\n }
\n resetPhase();
\n return;
\n }<\/p>\n
\/\/ Reprise auto : le r\u00e9sultat devient op1 de la prochaine \u00e9tape
\n if (cfg.repriseAuto) {
\n currentOp1 = { idx: newIdx, val: res };
\n plaqueBtns[newIdx].classList.add(‘selected’);
\n phase = 2;
\n setCurOp(`${res} ? …`);
\n setStatus(`Reprise : ${res} s\u00e9lectionn\u00e9 \u2014 choisis un op\u00e9rateur.`);
\n } else {
\n resetPhase();
\n }
\n }
\n}<\/p>\n
function onOperator(sym, btn) {
\n \/\/ Autoris\u00e9 en phase 2 (op1 choisi) ou phase 3 (remplacement op\u00e9rateur)
\n if (phase !== 2 && phase !== 3) return;
\n document.querySelectorAll(‘.op-btn’).forEach(b => b.classList.remove(‘active’));
\n if (btn) btn.classList.add(‘active’);
\n currentOper = sym;
\n phase = 3;
\n setCurOp(`${currentOp1.val} ${sym} …`);
\n setStatus(`${currentOp1.val} ${sym} … \u2014 choisis la 2e plaque.`);
\n}<\/p>\n
function resetPhase() {
\n currentOp1 = currentOper = null;
\n phase = 1;
\n setCurOp(”);
\n document.querySelectorAll(‘.op-btn’).forEach(b => b.classList.remove(‘active’));
\n setStatus(‘S\u00e9lectionne une plaque.’);
\n}<\/p>\n
function onEffacer() {
\n if (phase === 2) {
\n plaqueBtns[currentOp1.idx].classList.remove(‘selected’);
\n resetPhase();
\n } else if (phase === 3) {
\n resetPhase();
\n } else if (calcSteps.length > 0) {
\n const {op1, op2, res} = calcSteps.pop();
\n \/\/ R\u00e9active les 2 plaques sources (cherche par valeur + inactive)
\n for (const search of [op1, op2]) {
\n for (let i = 0; i < plaqueVals.length; i++) {
\n if (plaqueVals[i] === search && !plaqueActive[i] && i < plaqueBtns.length) {
\n plaqueActive[i] = true;
\n plaqueBtns[i].disabled = false;
\n plaqueBtns[i].classList.remove(‘used’);
\n break;
\n }
\n }
\n }
\n \/\/ Supprime le bouton r\u00e9sultat et remet un ghost
\n if (plaqueVals.length > state.plaques.length) {
\n _removeLastResultBtn();
\n plaqueActive.pop();
\n plaqueVals.pop();
\n }
\n refreshHist();
\n resetPhase();
\n }
\n}<\/p>\n
function onValider() {
\n if (!calcSteps.length) { alert(‘Effectue au moins un calcul d\\’abord.’); return; }
\n if (state.validated) { alert(‘D\u00e9j\u00e0 valid\u00e9 \u2014 Lance un nouveau tirage !’); return; }
\n stopTimer();
\n const r = evaluate(calcSteps[calcSteps.length – 1].res);
\n if (r.error) { alert(r.error); return; }
\n document.getElementById(‘lbl-score’).textContent = r.total;
\n setStatus(r.msg);
\n alert(r.msg);
\n document.getElementById(‘btn-resoudre’).disabled = false;
\n updateNouveauBtn();
\n}<\/p>\n
function onResoudre() {
\n setStatus(‘Calcul en cours\u2026’);
\n document.getElementById(‘btn-resoudre’).disabled = true;
\n setTimeout(() => {
\n const { sol, solver, ms } = doSolve();
\n lastSolver = solver;
\n showSolution(sol, solver, ms);
\n document.getElementById(‘btn-resoudre’).disabled = false;
\n document.getElementById(‘btn-detail’).disabled = false;
\n }, 10);
\n}<\/p>\n
function showSolution(sol, solver, ms) {
\n const box = document.getElementById(‘sol-box’);
\n const div = document.getElementById(‘sol-lines’);
\n box.style.display = ‘block’;
\n div.innerHTML = ”;
\n if (sol) {
\n for (const step of sol.steps) {
\n const d = document.createElement(‘div’);
\n d.className = ‘sol-line’ + (sol.diff === 0 ? ‘ exact’ : ”);
\n d.textContent = ` ${step}`;
\n div.appendChild(d);
\n }
\n }
\n const diff = sol ? (sol.diff === 0 ? ‘exact’ : `\u00e9cart=${sol.diff}`) : ‘?’;
\n setStatus(`R\u00e9solu en ${ms.toFixed(0)} ms \u2014 ${diff} \u2014 ${solver.allSols.length} solution(s) exacte(s)`);
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ NOUVEAU TIRAGE
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction newGame() {
\n stopTimer();
\n hideSolution();<\/p>\n
if (cfg.entrainement) {
\n \/\/ Mode entra\u00eenement : affiche la zone de saisie, pas de tirage auto
\n document.getElementById(‘entrainement-zone’).style.display = ‘block’;
\n document.getElementById(‘plq-title’).textContent = ‘Saisie libre’;
\n document.getElementById(‘plq-grid’).innerHTML = ”;
\n document.getElementById(‘lbl-cible’).textContent = ‘\u2014’;
\n document.getElementById(‘lbl-round’).textContent = ‘Entra\u00eenement’;
\n document.getElementById(‘lbl-mode’).textContent = ‘LIBRE’;
\n document.getElementById(‘lbl-timer’).textContent = ‘\u2014’;
\n document.getElementById(‘btn-detail’).disabled = true;
\n document.getElementById(‘btn-resoudre’).disabled = true;
\n _buildEntryPlaques(cfg.nbPlaques);
\n calcSteps = []; plaqueVals = []; plaqueActive = []; plaqueBtns = [];
\n refreshHist();
\n resetPhase();
\n setStatus(‘Saisis tes plaques et ta cible, puis clique sur Jouer !’);
\n return;
\n }<\/p>\n
document.getElementById(‘entrainement-zone’).style.display = ‘none’;
\n document.getElementById(‘plq-title’).textContent = ‘Plaques disponibles’;<\/p>\n
setStatus(‘Tirage en cours\u2026’);
\n \/\/ setTimeout pour laisser le DOM se mettre \u00e0 jour avant le calcul exactOnly
\n setTimeout(() => {
\n const s = doTirage();
\n saveSession();
\n document.getElementById(‘lbl-cible’).textContent = s.target;
\n document.getElementById(‘lbl-round’).textContent = `Tirage ${s.roundNum} \/ ${cfg.nbTirages}`;
\n document.getElementById(‘lbl-mode’).textContent = cfg.tirageMode.toUpperCase() + (cfg.exactOnly ? ‘ \u2713’ : ”);
\n document.getElementById(‘btn-detail’).disabled = true;
\n document.getElementById(‘btn-resoudre’).disabled = true;
\n plaqueVals = […s.plaques];
\n plaqueActive = s.plaques.map(() => true);
\n calcSteps = [];
\n renderPlaques();
\n refreshHist();
\n resetPhase();
\n startTimer();
\n updateNouveauBtn();
\n setStatus(‘S\u00e9lectionne une plaque pour commencer !’);
\n }, 10);
\n}<\/p>\n
function hideSolution() {
\n document.getElementById(‘sol-box’).style.display = ‘none’;
\n document.getElementById(‘sol-lines’).innerHTML = ”;
\n lastSolver = null;
\n}<\/p>\n
\/\/ \u2500\u2500 Mode entra\u00eenement \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\nfunction _buildEntryPlaques(nb) {
\n const row = document.getElementById(‘entry-plq-row’);
\n row.innerHTML = ”;
\n for (let i = 0; i < nb; i++) {
\n const inp = document.createElement(‘input’);
\n inp.type = ‘number’; inp.min = ‘1’; inp.max = ‘999’;
\n inp.placeholder = `P${i+1}`;
\n inp.style.cssText = ‘width:60px;background:var(–bg-hdr);color:var(–text);’ +
\n ‘border:1px solid var(–border);border-radius:6px;padding:6px 4px;’ +
\n ‘font-size:1rem;font-weight:700;text-align:center;’;
\n inp.dataset.idx = i;
\n row.appendChild(inp);
\n }
\n document.getElementById(‘entry-cible’).value = ”;
\n}<\/p>\n
function jouerEntrainement() {
\n const inputs = document.querySelectorAll(‘#entry-plq-row input’);
\n const plaques = [];
\n for (const inp of inputs) {
\n const v = parseInt(inp.value);
\n if (!v || v < 1) { alert(‘Toutes les plaques doivent \u00eatre remplies (>= 1)’); inp.focus(); return; }
\n plaques.push(v);
\n }
\n const cible = parseInt(document.getElementById(‘entry-cible’).value);
\n if (!cible || cible < 1) { alert(‘Saisis une cible valide (>= 1)’); return; }<\/p>\n
document.getElementById(‘entrainement-zone’).style.display = ‘none’;
\n state = { …state, plaques, target: cible,
\n best: null, allSols: [], reachable: new Set(),
\n startTime: Date.now(), roundNum: state.roundNum + 1, validated: false };<\/p>\n
document.getElementById(‘lbl-cible’).textContent = cible;
\n document.getElementById(‘lbl-round’).textContent = `Entra\u00eenement ${state.roundNum}`;
\n document.getElementById(‘btn-detail’).disabled = true;
\n document.getElementById(‘btn-resoudre’).disabled = true;<\/p>\n
plaqueVals = […plaques];
\n plaqueActive = plaques.map(() => true);
\n calcSteps = [];
\n renderPlaques();
\n refreshHist();
\n resetPhase();
\n \/\/ Pas de timer en mode entra\u00eenement
\n document.getElementById(‘lbl-timer’).textContent = ‘Entra\u00eenement’;
\n setStatus(‘C\\’est parti ! S\u00e9lectionne une plaque.’);
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ OPTIONS
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction openOptions() {
\n stopTimer();
\n document.getElementById(‘opt-tirage’).value = cfg.tirageMode;
\n document.getElementById(‘opt-nbplq’).value = cfg.nbPlaques;
\n document.getElementById(‘opt-tmin’).value = cfg.targetMin;
\n document.getElementById(‘opt-tmax’).value = cfg.targetMax;
\n document.getElementById(‘opt-time’).value = cfg.timeLimit;
\n document.getElementById(‘opt-partie’).value = cfg.partieNum;
\n document.getElementById(‘opt-nbtirages’).value = cfg.nbTirages;
\n document.getElementById(‘opt-solve’).value = cfg.solveMode;
\n document.getElementById(‘opt-exact’).checked = cfg.exactOnly;
\n document.getElementById(‘opt-reprise’).checked = cfg.repriseAuto;
\n document.getElementById(‘opt-entrainement’).checked = cfg.entrainement;
\n document.getElementById(‘modal-options’).classList.add(‘open’);
\n}<\/p>\n
function saveOptions() {
\n const nb = parseInt(document.getElementById(‘opt-nbplq’).value);
\n const mn = parseInt(document.getElementById(‘opt-tmin’).value);
\n const mx = parseInt(document.getElementById(‘opt-tmax’).value);
\n const nbt = parseInt(document.getElementById(‘opt-nbtirages’).value);
\n if (mn >= mx) { alert(‘Cible min doit \u00eatre < Cible max’); return; }
\n if (nb < 2 || nb > 8) { alert(‘Nombre de plaques : 2 \u00e0 8’); return; }
\n if (nbt < 1) { alert(‘Nombre de tirages >= 1’); return; }<\/p>\n
cfg.tirageMode = document.getElementById(‘opt-tirage’).value;
\n cfg.solveMode = document.getElementById(‘opt-solve’).value;
\n cfg.nbPlaques = nb;
\n cfg.targetMin = mn;
\n cfg.targetMax = mx;
\n cfg.timeLimit = parseInt(document.getElementById(‘opt-time’).value);
\n cfg.nbTirages = nbt;
\n cfg.exactOnly = document.getElementById(‘opt-exact’).checked;
\n cfg.repriseAuto = document.getElementById(‘opt-reprise’).checked;
\n cfg.entrainement = document.getElementById(‘opt-entrainement’).checked;<\/p>\n
const np = parseInt(document.getElementById(‘opt-partie’).value);
\n if (np !== cfg.partieNum) {
\n cfg.partieNum = np;
\n rng = null;
\n clearSession();
\n state.score = 0;
\n state.roundNum = 0;
\n state.history = [];
\n document.getElementById(‘lbl-score’).textContent = 0;
\n }
\n closeModal(‘modal-options’);
\n if (cfg.entrainement) {
\n newGame();
\n } else {
\n setStatus(‘Options appliqu\u00e9es \u2014 Lance un nouveau tirage !’);
\n }
\n}<\/p>\n
function closeModal(id) { document.getElementById(id).classList.remove(‘open’); }<\/p>\n
\/\/ \u2500\u2500 Verrou bouton Nouveau en mode comp\u00e9tition \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\nfunction updateNouveauBtn() {
\n const locked = cfg.partieNum > 0 && !cfg.entrainement && !state.validated;
\n const btn = document.getElementById(‘btn-nouveau’);
\n btn.disabled = locked;
\n btn.title = locked ? ‘Validez votre r\u00e9sultat avant de passer au tirage suivant’ : ”;
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ FIN DE PARTIE
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction openFinPartie() {
\n stopTimer();
\n recordPartie(); \/\/ sauvegarde dans localStorage
\n const h = state.history;
\n const tot = state.score;
\n const moy = h.length ? (tot \/ h.length).toFixed(1) : 0;
\n const gagne = h.filter(e => e.diff === 0).length;<\/p>\n
document.getElementById(‘fin-graine’).textContent =
\n `Partie ${cfg.partieNum || ‘al\u00e9atoire’} \u2014 ${h.length} tirages`;
\n document.getElementById(‘fin-score’).textContent = `${tot > 0 ? ‘+’ : ”}${tot} pts`;
\n document.getElementById(‘fin-score’).style.color = tot >= 0 ? ‘var(–accent2)’ : ‘var(–accent)’;
\n document.getElementById(‘fin-moyenne’).textContent =
\n `Moyenne : ${moy} pts\/tirage | Comptes exacts : ${gagne} \/ ${h.length}`;<\/p>\n
const div = document.getElementById(‘fin-hist’);
\n div.innerHTML = ”;
\n const frag = document.createDocumentFragment();
\n h.forEach(e => {
\n const row = document.createElement(‘div’);
\n row.style.cssText = ‘display:flex;justify-content:space-between;padding:4px 8px;’ +
\n `border-radius:4px;margin-bottom:3px;font-size:.82rem;` +
\n `background:${e.diff === 0 ? ‘#1a4a2a’ : e.diff <= 3 ? ‘#2a3a1a’ : ‘#3a1a1a’};`;
\n row.innerHTML =
\n `<span style=”color:var(–text-dim)”>#${e.num}<\/span>` +
\n `<span>${e.plaques.join(‘ ‘)}<\/span>` +
\n `<span style=”color:var(–accent2);font-weight:700″>\u2192${e.target}<\/span>` +
\n `<span style=”color:${e.diff===0?’var(–green)’:e.diff<=3?’var(–accent2)’:’var(–accent)’}”>` +
\n `${e.diff===0?’\u2713’:(‘\u00b1’+e.diff)}<\/span>` +
\n `<span style=”color:${e.pts>=0?’var(–green)’:’var(–accent)’}”>` +
\n `${e.pts>=0?’+’:”}${e.pts}<\/span>`;
\n frag.appendChild(row);
\n });
\n div.appendChild(frag);
\n document.getElementById(‘modal-fin’).classList.add(‘open’);
\n}<\/p>\n
function nouvellePartie() {
\n closeModal(‘modal-fin’);
\n clearSession();
\n rng = null;
\n state.score = 0;
\n state.roundNum = 0;
\n state.history = [];
\n document.getElementById(‘lbl-score’).textContent = 0;
\n newGame();
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ DETAIL \u2014 canvas virtualis\u00e9 pour r\u00e9sultats atteignables
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nlet _reachCanvas = null, _reachData = null;<\/p>\n
function _buildReachCanvas(sorted, target) {
\n const wrap = document.getElementById(‘reach-canvas-wrap’);
\n wrap.innerHTML = ”;<\/p>\n
const COL = 10;
\n const CW = 58; \/\/ cell width px
\n const CH = 22; \/\/ cell height px
\n const PAD = 2;
\n const nRows = Math.ceil(sorted.length \/ COL);
\n const totalH = nRows * (CH + PAD);<\/p>\n
const canvas = document.createElement(‘canvas’);
\n canvas.style.cssText = ‘display:block;width:100%;cursor:default;’;
\n wrap.appendChild(canvas);<\/p>\n
\/\/ Premier gap (pour couleur)
\n let firstGapVal = null;
\n for (let i = 1; i < sorted.length; i++) {
\n if (sorted[i] !== sorted[i-1] + 1) { firstGapVal = sorted[i]; break; }
\n }<\/p>\n
function draw() {
\n const W = wrap.clientWidth || 600;
\n const cw = Math.floor(W \/ COL);
\n canvas.width = W;
\n canvas.height = totalH;
\n canvas.style.height = totalH + ‘px’;
\n const ctx = canvas.getContext(‘2d’);
\n ctx.font = ’11px Courier New’;
\n ctx.textAlign = ‘center’;
\n ctx.textBaseline = ‘middle’;<\/p>\n
for (let idx = 0; idx < sorted.length; idx++) {
\n const val = sorted[idx];
\n const row = Math.floor(idx \/ COL);
\n const col = idx % COL;
\n const x = col * cw;
\n const y = row * (CH + PAD);<\/p>\n
let bg = ‘#2e5070’, fg = ‘#ffffff’;
\n if (val === target) { bg = ‘#f5a623’; fg = ‘#1a1a2e’; }
\n else if (val === firstGapVal) { bg = ‘#2d5f80’; fg = ‘#5dade2’; }<\/p>\n
ctx.fillStyle = bg;
\n ctx.fillRect(x + 1, y + 1, cw – 2, CH – 2);
\n ctx.fillStyle = fg;
\n ctx.fillText(val, x + cw \/ 2, y + CH \/ 2);
\n }
\n }<\/p>\n
_reachCanvas = canvas;
\n _reachData = { sorted, target, draw };
\n draw();<\/p>\n
\/\/ Redessine si la fen\u00eatre change de taille
\n const ro = new ResizeObserver(() => draw());
\n ro.observe(wrap);
\n}<\/p>\n
function openDetail() {
\n if (!lastSolver) return;
\n const solver = lastSolver;
\n document.getElementById(‘detail-title’).textContent =
\n `Plaques : ${state.plaques.join(‘ ‘)} | Cible : ${state.target}`;<\/p>\n
\/\/ \u2500\u2500 Tab r\u00e9sultats \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\n const sorted = […solver.reachable].sort((a, b) => a – b);
\n const attein = solver.reachable.has(state.target);
\n document.getElementById(‘reach-info’).textContent =
\n `${sorted.length} r\u00e9sultats | Cible ${state.target} : ${attein ? ‘\u2713 Atteignable’ : ‘\u2717 Non atteignable’}`;
\n document.getElementById(‘reach-info’).style.color = attein ? ‘var(–green)’ : ‘var(–accent)’;
\n \/\/ Canvas rendu apr\u00e8s que la modale soit visible (dimensions correctes)
\n requestAnimationFrame(() => _buildReachCanvas(sorted, state.target));<\/p>\n
\/\/ \u2500\u2500 Tab solutions exactes (virtualis\u00e9 : 1 div par solution, pas par cellule) \u2500\u2500
\n const solsList = document.getElementById(‘sols-list’);
\n solsList.innerHTML = ”;
\n if (!solver.allSols.length) {
\n solsList.innerHTML = ‘<p style=”color:var(–text-dim);padding:16px”>Aucune solution exacte.<\/p>’;
\n } else {
\n const sorted2 = […solver.allSols].sort(
\n (a, b) => a.depth – b.depth || a.steps.join().localeCompare(b.steps.join()));
\n \/\/ Fragment pour batch-insert
\n const frag = document.createDocumentFragment();
\n sorted2.forEach((sol, i) => {
\n const div = document.createElement(‘div’);
\n div.className = ‘sol-item’;
\n div.innerHTML =
\n `<span style=”color:var(–text-dim);font-size:.8rem”>[${i+1}] ${sol.depth} \u00e9tape(s)<\/span><br>` +
\n `<span class=”sol-preview”>${sol.steps.join(‘ \u2192 ‘)}<\/span>`;
\n \/\/ Toggle d\u00e9tail inline
\n div.onclick = () => {
\n const open = div.dataset.open === ‘1’;
\n div.dataset.open = open ? ‘0’ : ‘1’;
\n div.querySelector(‘.sol-detail’)?.remove();
\n if (!open) {
\n const detail = document.createElement(‘div’);
\n detail.className = ‘sol-detail’;
\n detail.style.cssText = ‘margin-top:6px;padding:6px;background:var(–bg-hdr);border-radius:4px;’;
\n detail.innerHTML = sol.steps.map(s =>
\n `<div style=”color:var(–green);font-size:.85rem”>${s}<\/div>`).join(”);
\n div.appendChild(detail);
\n }
\n };
\n frag.appendChild(div);
\n });
\n solsList.appendChild(frag);
\n }<\/p>\n
\/\/ \u2500\u2500 Tab meilleure \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\n const bestDiv = document.getElementById(‘best-content’);
\n bestDiv.innerHTML = ”;
\n if (solver.best) {
\n bestDiv.innerHTML =
\n `<div style=”font-size:1.1rem;font-weight:700;margin-bottom:12px;color:${solver.best.diff === 0 ? ‘var(–green)’ : ‘var(–accent2)’}”>` +
\n (solver.best.diff === 0 ? ‘Compte exact !’ : `\u00c9cart : ${solver.best.diff}`) +
\n `<\/div>` +
\n solver.best.steps.map(s => `<div style=”margin:4px 0;font-size:1.05rem”>${s}<\/div>`).join(”) +
\n `<div style=”margin-top:14px;font-size:.8rem;color:var(–text-dim)”>${solver._ops} op\u00e9rations test\u00e9es<\/div>`;
\n }<\/p>\n
showTab(‘tab-reach’);
\n document.getElementById(‘modal-detail’).classList.add(‘open’);
\n}<\/p>\n
function showTab(id) {
\n document.querySelectorAll(‘.tab-content’).forEach(t => t.classList.remove(‘active’));
\n document.querySelectorAll(‘.tab-btn’).forEach(b => b.classList.remove(‘active’));
\n document.getElementById(id).classList.add(‘active’);
\n const idx = [‘tab-reach’,’tab-sols’,’tab-best’].indexOf(id);
\n document.querySelectorAll(‘.tab-btn’)[idx].classList.add(‘active’);
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ PWA \u2014 manifest inline + service worker
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nfunction initPWA() {
\n \/\/ Manifest inject\u00e9 en data-URI pour rester monofichier
\n const manifest = {
\n name: ‘Le Compte Est Bon’,
\n short_name: ‘CEB’,
\n description: ‘Le c\u00e9l\u00e8bre jeu de calcul mental’,
\n start_url: ‘.\/’,
\n display: ‘standalone’,
\n background_color: ‘#1e3a52’,
\n theme_color: ‘#1e3a52’,
\n icons: [{
\n src: “data:image\/svg+xml,%3Csvg xmlns=’http:\/\/www.w3.org\/2000\/svg’ viewBox=’0 0 192 192’%3E%3Crect width=’192′ height=’192′ rx=’32’ fill=’%231e3a52’\/%3E%3Ctext x=’96’ y=’130′ font-size=’110′ text-anchor=’middle’ font-family=’serif’ fill=’%23f5a623’%3E%3D%3C\/text%3E%3C\/svg%3E”,
\n sizes: ‘192×192’, type: ‘image\/svg+xml’, purpose: ‘any maskable’,
\n }],
\n };
\n const blob = new Blob([JSON.stringify(manifest)], {type: ‘application\/json’});
\n document.getElementById(‘pwa-manifest’).href = URL.createObjectURL(blob);<\/p>\n
\/\/ Service Worker inline (cache-first)
\n if (‘serviceWorker’ in navigator) {
\n const swCode = `
\nconst CACHE = ‘ceb-v1’;
\nself.addEventListener(‘install’, e =>
\n e.waitUntil(caches.open(CACHE).then(c => c.add(‘\/’)))
\n);
\nself.addEventListener(‘fetch’, e =>
\n e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)))
\n);
\n `;
\n const swBlob = new Blob([swCode], {type: ‘application\/javascript’});
\n navigator.serviceWorker.register(URL.createObjectURL(swBlob))
\n .catch(() => {}); \/\/ silencieux si file:\/\/ ou CSP bloque
\n }
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ STATISTIQUES \u2014 localStorage
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nconst STATS_KEY = ‘ceb_stats_v1’;<\/p>\n
function _emptyStats() {
\n return {
\n global: {
\n partiesJouees: 0, tiragesJoues: 0, scoreTotal: 0,
\n exacts: 0, approches: 0, rates: 0, tempsTotal: 0,
\n },
\n parGraine: {}, \/\/ { “42”: {meilleurScore, parties, date} }
\n parMode: {}, \/\/ { “ceb24”: {tirages, exacts, approches, rates} }
\n parNbPlq: {}, \/\/ { “6”: {tirages, exacts} }
\n historique: [], \/\/ derni\u00e8res 100 parties
\n };
\n}<\/p>\n
function loadStats() {
\n try {
\n const raw = localStorage.getItem(STATS_KEY);
\n return raw ? { …_emptyStats(), …JSON.parse(raw) } : _emptyStats();
\n } catch { return _emptyStats(); }
\n}<\/p>\n
function saveStats(st) {
\n try { localStorage.setItem(STATS_KEY, JSON.stringify(st)); } catch {}
\n}<\/p>\n
function recordPartie() {
\n const h = state.history;
\n if (!h.length) return;
\n const st = loadStats();
\n const tot = state.score;
\n const n = h.length;
\n const exacts = h.filter(e => e.diff === 0).length;
\n const approches= h.filter(e => e.diff > 0 && e.diff <= 3).length;
\n const rates = h.filter(e => e.diff > 3).length;
\n const tTemps = h.reduce((s, e) => s + e.elapsed, 0);
\n const mode = cfg.tirageMode;
\n const nbp = String(cfg.nbPlaques);
\n const graine = String(cfg.partieNum);
\n const date = new Date().toLocaleDateString(‘fr-FR’);<\/p>\n
\/\/ Global
\n st.global.partiesJouees++;
\n st.global.tiragesJoues += n;
\n st.global.scoreTotal += tot;
\n st.global.exacts += exacts;
\n st.global.approches += approches;
\n st.global.rates += rates;
\n st.global.tempsTotal += tTemps;<\/p>\n
\/\/ Par graine
\n if (cfg.partieNum > 0) {
\n const g = st.parGraine[graine] || { meilleurScore: -Infinity, parties: 0, date };
\n g.parties++;
\n g.date = date;
\n if (tot > g.meilleurScore) g.meilleurScore = tot;
\n st.parGraine[graine] = g;
\n }<\/p>\n
\/\/ Par mode
\n const m = st.parMode[mode] || { tirages: 0, exacts: 0, approches: 0, rates: 0 };
\n m.tirages += n;
\n m.exacts += exacts;
\n m.approches += approches;
\n m.rates += rates;
\n st.parMode[mode] = m;<\/p>\n
\/\/ Par nb plaques
\n const p = st.parNbPlq[nbp] || { tirages: 0, exacts: 0 };
\n p.tirages += n;
\n p.exacts += exacts;
\n st.parNbPlq[nbp] = p;<\/p>\n
\/\/ Historique (max 100 parties)
\n st.historique.unshift({
\n graine: cfg.partieNum, mode, nbPlq: cfg.nbPlaques,
\n nbTirages: n, score: tot, exacts, approches, rates, date,
\n });
\n if (st.historique.length > 100) st.historique.length = 100;<\/p>\n
saveStats(st);
\n}<\/p>\n
function resetStats() {
\n if (!confirm(‘Effacer toutes les statistiques ?’)) return;
\n localStorage.removeItem(STATS_KEY);
\n renderStatsGlobal(_emptyStats());
\n renderStatsParties(_emptyStats());
\n renderStatsModes(_emptyStats());
\n}<\/p>\n
\/\/ \u2500\u2500 Rendu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
\nfunction _pct(a, b) { return b ? (a \/ b * 100).toFixed(1) + ‘%’ : ‘\u2014’; }
\nfunction _avg(a, b) { return b ? (a \/ b).toFixed(1) : ‘\u2014’; }<\/p>\n
function _statRow(label, val, color) {
\n return `<div style=”display:flex;justify-content:space-between;padding:6px 12px;
\n border-bottom:1px solid var(–border);font-size:.9rem;”>
\n <span style=”color:var(–text-med)”>${label}<\/span>
\n <span style=”font-weight:700;color:${color||’var(–text)’};”>${val}<\/span>
\n <\/div>`;
\n}<\/p>\n
function _sectionTitle(t) {
\n return `<div style=”font-size:.75rem;font-weight:700;color:var(–accent2);
\n padding:10px 12px 4px;letter-spacing:1px;”>${t}<\/div>`;
\n}<\/p>\n
function renderStatsGlobal(st) {
\n const g = st.global;
\n const div = document.getElementById(‘st-global’);
\n const moy = g.partiesJouees ? (g.scoreTotal \/ g.partiesJouees).toFixed(1) : ‘\u2014’;
\n div.innerHTML =
\n _sectionTitle(‘R\u00c9SULTATS’) +
\n _statRow(‘Parties jou\u00e9es’, g.partiesJouees) +
\n _statRow(‘Tirages jou\u00e9s’, g.tiragesJoues) +
\n _statRow(‘Score total’, (g.scoreTotal >= 0 ? ‘+’ : ”) + g.scoreTotal,
\n g.scoreTotal >= 0 ? ‘var(–green)’ : ‘var(–accent)’) +
\n _statRow(‘Score moy \/ partie’, moy) +
\n _statRow(‘Score moy \/ tirage’, _avg(g.scoreTotal, g.tiragesJoues)) +
\n _sectionTitle(‘PR\u00c9CISION’) +
\n _statRow(‘Comptes exacts’, `${g.exacts} (${_pct(g.exacts, g.tiragesJoues)})`, ‘var(–green)’) +
\n _statRow(‘Comptes approch\u00e9s’,`${g.approches} (${_pct(g.approches, g.tiragesJoues)})`, ‘var(–accent2)’) +
\n _statRow(‘Rat\u00e9s (>3)’, `${g.rates} (${_pct(g.rates, g.tiragesJoues)})`, ‘var(–accent)’) +
\n _sectionTitle(‘TEMPS’) +
\n _statRow(‘Temps moyen \/ tirage’, _avg(g.tempsTotal, g.tiragesJoues) + ‘ s’) +
\n _statRow(‘Temps total jou\u00e9’, Math.round(g.tempsTotal \/ 60) + ‘ min’);
\n}<\/p>\n
function renderStatsParties(st) {
\n const div = document.getElementById(‘st-parties-list’);
\n if (!st.historique.length) {
\n div.innerHTML = ‘<p style=”color:var(–text-dim);padding:16px”>Aucune partie enregistr\u00e9e.<\/p>’;
\n return;
\n }
\n const frag = document.createDocumentFragment();
\n st.historique.forEach((p, i) => {
\n const row = document.createElement(‘div’);
\n row.style.cssText = ‘display:grid;grid-template-columns:24px 60px 60px 1fr 48px 48px 48px 48px;’ +
\n ‘gap:4px;align-items:center;padding:5px 8px;border-bottom:1px solid var(–border);font-size:.78rem;’;
\n row.innerHTML =
\n `<span style=”color:var(–text-dim)”>${i+1}<\/span>` +
\n `<span style=”color:var(–text-dim)”>${p.date}<\/span>` +
\n `<span style=”color:var(–text-med)”>${p.graine || ‘al\u00e9a’}<\/span>` +
\n `<span style=”color:var(–text-med)”>${p.mode} ${p.nbPlq}\u265f \u00d7${p.nbTirages}<\/span>` +
\n `<span style=”font-weight:700;color:${p.score>=0?’var(–green)’:’var(–accent)’};”>${p.score>=0?’+’:”}${p.score}<\/span>` +
\n `<span style=”color:var(–green)”>\u2713${p.exacts}<\/span>` +
\n `<span style=”color:var(–accent2)”>~${p.approches}<\/span>` +
\n `<span style=”color:var(–accent)”>\u2717${p.rates}<\/span>`;
\n frag.appendChild(row);
\n });
\n \/\/ En-t\u00eate
\n const hdr = document.createElement(‘div’);
\n hdr.style.cssText = ‘display:grid;grid-template-columns:24px 60px 60px 1fr 48px 48px 48px 48px;’ +
\n ‘gap:4px;padding:4px 8px;font-size:.7rem;color:var(–text-dim);border-bottom:2px solid var(–border);’;
\n hdr.innerHTML = ‘<span>#<\/span><span>Date<\/span><span>Graine<\/span><span>Mode<\/span>’ +
\n ‘<span>Score<\/span><span>\u2713<\/span><span>~<\/span><span>\u2717<\/span>’;
\n div.innerHTML = ”;
\n div.appendChild(hdr);
\n div.appendChild(frag);
\n}<\/p>\n
function renderStatsModes(st) {
\n const div = document.getElementById(‘st-modes’);
\n let html = _sectionTitle(‘PAR MODE DE TIRAGE’);
\n const modes = { ceb24: ‘CEB 24’, ceb28: ‘CEB 28’, alea20: ‘Al\u00e9atoire 20’ };
\n for (const [key, label] of Object.entries(modes)) {
\n const m = st.parMode[key];
\n if (!m || !m.tirages) continue;
\n html += `<div style=”padding:4px 12px 2px;font-size:.85rem;color:var(–text);font-weight:700″>${label}<\/div>`;
\n html += _statRow(‘Tirages’, m.tirages);
\n html += _statRow(‘Exacts’, `${m.exacts} (${_pct(m.exacts, m.tirages)})`, ‘var(–green)’);
\n html += _statRow(‘Approch\u00e9s’, `${m.approches} (${_pct(m.approches, m.tirages)})`, ‘var(–accent2)’);
\n }
\n html += _sectionTitle(‘PAR NOMBRE DE PLAQUES’);
\n for (const [nbp, p] of Object.entries(st.parNbPlq).sort((a,b)=>+a[0]-+b[0])) {
\n html += _statRow(`${nbp} plaques`, `${p.tirages} tirages \u2014 ${_pct(p.exacts, p.tirages)} exacts`);
\n }
\n html += _sectionTitle(‘PAR GRAINE (top 10 meilleures)’);
\n const graines = Object.entries(st.parGraine)
\n .sort((a,b) => b[1].meilleurScore – a[1].meilleurScore).slice(0, 10);
\n for (const [g, d] of graines) {
\n html += _statRow(`Graine ${g}`,
\n `Meilleur : ${d.meilleurScore >= 0 ? ‘+’ : ”}${d.meilleurScore} (${d.parties} partie(s))`,
\n ‘var(–accent2)’);
\n }
\n if (!graines.length) html += ‘<p style=”color:var(–text-dim);padding:12px”>Aucune partie avec graine fixe.<\/p>’;
\n div.innerHTML = html;
\n}<\/p>\n
function showStatsTab(id) {
\n document.querySelectorAll(‘#modal-stats .tab-content’).forEach(t => t.classList.remove(‘active’));
\n document.querySelectorAll(‘#modal-stats .tab-btn’).forEach(b => b.classList.remove(‘active’));
\n document.getElementById(id).classList.add(‘active’);
\n const idx = [‘st-global’,’st-parties’,’st-modes’].indexOf(id);
\n document.querySelectorAll(‘#modal-stats .tab-btn’)[idx].classList.add(‘active’);
\n}<\/p>\n
function openStats() {
\n const st = loadStats();
\n renderStatsGlobal(st);
\n renderStatsParties(st);
\n renderStatsModes(st);
\n showStatsTab(‘st-global’);
\n document.getElementById(‘modal-stats’).classList.add(‘open’);
\n}<\/p>\n
\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\n\/\/ PERSISTANCE SESSION \u2014 localStorage
\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
\nconst SESSION_KEY = ‘ceb_session_v1’;<\/p>\n
function saveSession() {
\n if (cfg.entrainement) return; \/\/ pas de persistance en mode entra\u00eenement
\n try {
\n const session = {
\n cfg: { …cfg },
\n state: {
\n plaques: state.plaques,
\n target: state.target,
\n score: state.score,
\n roundNum: state.roundNum,
\n validated: state.validated,
\n history: state.history,
\n },
\n rngNext: rng ? rng._next.toString() : null,
\n plaqueVals,
\n plaqueActive,
\n calcSteps,
\n };
\n localStorage.setItem(SESSION_KEY, JSON.stringify(session));
\n } catch {}
\n}<\/p>\n
function clearSession() {
\n try { localStorage.removeItem(SESSION_KEY); } catch {}
\n}<\/p>\n
function restoreSession() {
\n try {
\n const raw = localStorage.getItem(SESSION_KEY);
\n if (!raw) return false;
\n const s = JSON.parse(raw);
\n if (!s.state || !s.cfg) return false;<\/p>\n
\/\/ Restaure cfg
\n Object.assign(cfg, s.cfg);<\/p>\n
\/\/ Restaure state
\n state.plaques = s.state.plaques || [];
\n state.target = s.state.target || 0;
\n state.score = s.state.score || 0;
\n state.roundNum = s.state.roundNum || 0;
\n state.validated = s.state.validated ?? true;
\n state.history = s.state.history || [];
\n state.startTime = Date.now(); \/\/ repart du moment du refresh<\/p>\n
\/\/ Restaure RNG
\n if (s.rngNext) {
\n rng = new HP11CRandom(0);
\n rng._next = BigInt(s.rngNext);
\n }<\/p>\n
\/\/ Restaure UI state
\n plaqueVals = s.plaqueVals || [];
\n plaqueActive = s.plaqueActive || [];
\n calcSteps = s.calcSteps || [];<\/p>\n
return state.plaques.length > 0;
\n } catch { return false; }
\n}<\/p>\n
function _restoreUI() {
\n \/\/ Reconstruit l’\u00e9cran depuis le state restaur\u00e9
\n document.getElementById(‘entrainement-zone’).style.display = ‘none’;
\n document.getElementById(‘plq-title’).textContent = ‘Plaques disponibles’;
\n document.getElementById(‘lbl-cible’).textContent = state.target;
\n document.getElementById(‘lbl-round’).textContent = `Tirage ${state.roundNum} \/ ${cfg.nbTirages}`;
\n document.getElementById(‘lbl-mode’).textContent = cfg.tirageMode.toUpperCase() + (cfg.exactOnly ? ‘ \u2713’ : ”);
\n document.getElementById(‘lbl-score’).textContent = state.score;
\n document.getElementById(‘btn-resoudre’).disabled = !state.validated;
\n document.getElementById(‘btn-detail’).disabled = true;<\/p>\n
renderPlaques();<\/p>\n
\/\/ Remet les boutons r\u00e9sultats dans la grille
\n const n = state.plaques.length;
\n for (let i = n; i < plaqueVals.length; i++) {
\n _addResultBtn(i, plaqueVals[i]);
\n \/\/ Remet l’\u00e9tat used sur les plaques sources
\n }
\n \/\/ Remet l’\u00e9tat used sur les boutons plaques initiales
\n for (let i = 0; i < n; i++) {
\n if (!plaqueActive[i] && plaqueBtns[i]) {
\n plaqueBtns[i].disabled = true;
\n plaqueBtns[i].classList.add(‘used’);
\n }
\n }<\/p>\n
refreshHist();
\n resetPhase();
\n updateNouveauBtn();<\/p>\n
if (!state.validated) {
\n startTimer();
\n setStatus(‘Partie restaur\u00e9e \u2014 continue !’);
\n } else {
\n document.getElementById(‘lbl-timer’).textContent = ‘\u2014’;
\n setStatus(‘Partie restaur\u00e9e \u2014 valide ou lance un nouveau tirage.’);
\n }
\n}
\nwindow.onload = () => {
\n initPWA();
\n if (restoreSession()) {
\n _restoreUI();
\n } else {
\n newGame();
\n }
\n};
\n<\/script><\/p>\n
<\/body>
\n<\/html><\/p>\n\n\n\n
Fin<\/p>\n","protected":false},"excerpt":{"rendered":"
Jouer et r\u00e9soudre Ecrit au d\u00e9part en ABAP sous SAP, Migr\u00e9 \u00e0 l’aide de Claude en Python puis HTML5 Test 2 sa m\u00e8re ! Fin<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dzo.ovh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=189"}],"version-history":[{"count":7,"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/dzo.ovh\/index.php?rest_route=\/wp\/v2\/pages\/189\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/dzo.ovh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}