Morpion soirée en famille
Réalisez un morpion dans un contexte de soirée en famille : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptative selon la taille.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Morpion soirée en famille</title>
<style>
:root { --ink:#30231f; --paper:#f9efe5; --accent:#8b6fb0; --secondary:#d7a971; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"DIN Alternate","Arial Narrow",sans-serif; background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 5%,transparent) 0 1px,transparent 1px 18px),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.mast{display:flex;justify-content:space-between;border-bottom:6px solid var(--ink);padding-bottom:18px;gap:20px;align-items:flex-end;margin:0 0 22px}.page{width:min(1240px,calc(100% - 28px));margin:auto;padding:34px 0 70px}.scenario{padding:8px 12px;border:2px solid var(--ink);font:900 12px/1 ui-monospace,monospace}.mast h1{font-family:"DIN Condensed","Arial Narrow",sans-serif;font-weight:900;text-transform:uppercase;font-size:clamp(44px,10vw,104px);letter-spacing:-.02em;max-width:1000px;margin:0;line-height:.82}.intro{max-width:720px;font-family:"Arial Narrow",sans-serif;line-height:1.5}.eyebrow{display:inline-block;padding:6px 9px;color:var(--paper);background:var(--accent);font:900 10px/1 ui-monospace,monospace;letter-spacing:.12em}.demo{border-radius:3px;box-shadow:10px 10px 0 var(--accent);position:relative;min-height:400px;overflow:hidden;padding:32px;background:var(--paper)}@media(max-width:700px){.mast{display:grid;grid-template-columns:1fr}.page{width:calc(100% - 16px);padding-top:16px}.demo{padding:14px}}
.panel{padding:26px;border:1px solid var(--line);border-radius:2px;background:var(--paper)}.stack{display:grid;gap:28px}.row{display:flex;gap:20px;flex-wrap:wrap}.action{padding:9px 2px;border:0;border-bottom:2px solid var(--line);background:transparent}.action.primary,.action.is-active{border-color:var(--accent);color:var(--accent)}.muted{font-size:14px;line-height:1.9}.status{min-height:20px;margin-top:28px;font-size:13px}.metric{font-size:clamp(40px,9vw,88px);font-weight:500;letter-spacing:-.06em}.meter{height:2px;background:var(--line)}.meter>i{display:block;height:100%;background:var(--accent)}.chip{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.composition-split{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start}.split-note{position:sticky;top:20px;display:grid;gap:14px;padding:18px 12px;border-block:3px double var(--accent);font-size:13px;line-height:1.65}.split-note b{font:900 12px/1 ui-monospace,monospace;letter-spacing:.12em}.split-note span{writing-mode:vertical-rl;min-height:120px;color:color-mix(in srgb,var(--ink) 60%,transparent)}.composition-split .demo{min-width:0}@media(max-width:900px){.composition-split{grid-template-columns:1fr}.split-note{position:static;grid-template-columns:auto 1fr}.split-note span{writing-mode:horizontal-tb;min-height:0}}
.mini{max-width:520px;margin:auto;padding:24px;border:1px solid var(--line);border-radius:24px;text-align:center;background:var(--paper)}.game-board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px auto;max-width:330px}.game-board button{aspect-ratio:1;border:1px solid var(--line);border-radius:12px;background:transparent;font:900 34px/1 ui-monospace,monospace}.game-board button:not(:empty){background:color-mix(in srgb,var(--secondary) 25%,transparent)}.game-board button.is-win{color:var(--paper);border-color:var(--accent);background:var(--accent)}.workflow-dispatch{display:grid;grid-template-columns:minmax(210px,.48fr) minmax(0,1.52fr);gap:18px}.dispatch-console{display:grid;align-content:start;gap:16px;padding:22px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--secondary) 12%,var(--paper))}.dispatch-console h2{margin:.2em 0}.dispatch-console form,.dispatch-console label{display:grid;gap:7px}.dispatch-console input,.dispatch-console select{min-width:0;width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}.dispatch-console fieldset{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px}.dispatch-console fieldset label{display:flex;align-items:center}.dispatch-workbench{--dispatch-load:.22;min-width:0;padding:14px;border-left:8px solid color-mix(in srgb,var(--accent) calc(var(--dispatch-load)*100%),var(--line));background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent 28%)}.dispatch-workbench[data-dispatch-priority="urgent"]{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:900px){.workflow-dispatch{grid-template-columns:1fr}.dispatch-console{order:2}}
</style>
</head>
<body data-aesthetic="industrial" data-composition="split-note">
<main class="page">
<header class="mast"><div><span class="eyebrow">industrial / morpion / BEGINNER</span><h1>Morpion soirée en famille</h1><p class="intro">Réalisez un morpion dans un contexte de soirée en famille : avec du contenu réel, des contrôles actionnables, un retour d’état clair et une mise en page adaptative selon la taille.</p></div><span class="scenario">Soirée en famille</span></header>
<div class="composition-split"><aside class="split-note"><b>CASE 02</b><span>Maîtriser la structure sémantique du morpion, la mise en page responsive, l’utilisation du clavier et la synchronisation de l’état.</span></aside><section class="demo" aria-label="Zone interactive du morpion de la soirée en famille"><div class="workflow-dispatch"><aside class="dispatch-console"><span class="eyebrow">Nuit en famille DISPATCH</span><h2>pupitre de gestion des tours en famille</h2><form id="workflowDispatchForm"><label>Type de tâche<select id="workflowDispatchKind"><option>Tour des aînés</option><option>Tour parent-enfant</option><option>Tour de famille</option></select></label><label>Nombre de participants<input id="workflowDispatchAmount" type="number" min="1" max="9999" value="42"><span>personne</span></label><fieldset><legend>Priorité de traitement</legend><label><input type="radio" name="workflowPriority" value="normal" checked>Standard</label><label><input type="radio" name="workflowPriority" value="urgent">Urgent</label></fieldset><button class="action primary" type="submit">Commencer le jeu</button></form><label>Tâche en cours<select id="workflowDispatchActive" aria-label="Basculer la tâche en cours"><option value="1">Tour des aînés</option><option value="2">Tour parent-enfant</option></select></label><output id="workflowDispatchSummary">En attente de planification</output></aside><section id="workflowCore" class="workflow-core dispatch-workbench" data-dispatch-priority="normal"><!-- 11DZ_CORE_START:mini-apps-games-tic-tac-toe --><div class="mini noughts"><span class="eyebrow">TIC TAC TOE</span><h2>Morpion</h2><div id="gameBoard" class="game-board" role="grid" aria-label="grille de morpion"><button type="button" role="gridcell" aria-label="Case n° 1" data-core-bridge="mini-apps-games-tic-tac-toe"></button><button type="button" role="gridcell" aria-label="Case 2"></button><button type="button" role="gridcell" aria-label="case 3"></button><button type="button" role="gridcell" aria-label="Case 4"></button><button type="button" role="gridcell" aria-label="case n° 5"></button><button type="button" role="gridcell" aria-label="Case 6"></button><button type="button" role="gridcell" aria-label="Case n°7"></button><button type="button" role="gridcell" aria-label="case n° 8"></button><button type="button" role="gridcell" aria-label="Case 9"></button></div><button id="gameReset" class="action" type="button">Recommencer</button></div><!-- 11DZ_CORE_END --></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section></div>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:mini-apps-games-tic-tac-toe */
let player='○';let gameFinished=false;const cells=[...document.querySelectorAll('.game-board button')];const winningLines=[[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];function finishGame(message,line=[]){gameFinished=true;line.forEach(index=>cells[index].classList.add('is-win'));cells.forEach(cell=>{cell.disabled=true;});announce(message);}cells.forEach((cell,index)=>cell.addEventListener('click',()=>{if(gameFinished||cell.textContent)return;cell.textContent=player;cell.setAttribute('aria-label','Deuxième'+(index+1)+'case'+player);cell.disabled=true;const winningLine=winningLines.find(line=>line.every(position=>cells[position].textContent===player));if(winningLine){finishGame(player+' Victoire',winningLine);return;}if(cells.every(item=>item.textContent)){finishGame('Le plateau est plein, match nul');return;}player=player==='○'?'×':'○';announce('À vous de jouer '+player+' Jouer un coup');}));document.querySelector('#gameReset').addEventListener('click',()=>{cells.forEach((cell,index)=>{cell.textContent='';cell.disabled=false;cell.classList.remove('is-win');cell.setAttribute('aria-label','Deuxième'+(index+1)+'Grille');});player='○';gameFinished=false;announce('Une nouvelle partie commence, à ○ de jouer');});
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"mini-apps-games-tic-tac-toe","selector":"[data-core-bridge=\"mini-apps-games-tic-tac-toe\"]","mode":"click","key":"Enter"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("click",workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();workflowBridgeControl.click();const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowDispatchCore=document.querySelector('#workflowCore');const workflowDispatchForm=document.querySelector('#workflowDispatchForm');const workflowDispatchSelect=document.querySelector('#workflowDispatchActive');const workflowDispatchJobs=new Map([["1",{"label":"Tour des aînés","amount":12,"priority":"normal","touches":0}],["2",{"label":"Tour parent-enfant","amount":21,"priority":"urgent","touches":0}]]);let workflowDispatchSerial=workflowDispatchJobs.size;function workflowDispatchDrive(job,activate=false){workflowDispatchCore.dataset.dispatchPriority=job.priority;workflowDispatchCore.style.setProperty('--dispatch-load',Math.min(.95,.16+job.amount/120));const bridge=activate?workflowBridgeActivate():{changed:false,summary:workflowBridgeSummary()};document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' personne · '+bridge.summary;announce('Tâche en cours pour le tour en famille :'+job.label);}function workflowDispatchRender(activeId,activate=false){workflowDispatchSelect.replaceChildren(...[...workflowDispatchJobs].map(([id,job])=>{const option=document.createElement('option');option.value=id;option.textContent=job.label+(job.priority==='urgent'?' · Urgent':'');return option;}));workflowDispatchSelect.value=activeId;workflowDispatchDrive(workflowDispatchJobs.get(activeId),activate);}workflowDispatchForm.addEventListener('submit',event=>{event.preventDefault();const data=new FormData(workflowDispatchForm);const id=String(++workflowDispatchSerial);workflowDispatchJobs.set(id,{label:document.querySelector('#workflowDispatchKind').value,amount:Math.max(1,Number(document.querySelector('#workflowDispatchAmount').value)||1),priority:data.get('workflowPriority'),touches:0});workflowDispatchRender(id,true);});workflowDispatchSelect.addEventListener('change',()=>workflowDispatchDrive(workflowDispatchJobs.get(workflowDispatchSelect.value),true));workflowDispatchCore.addEventListener('focusin',()=>{const job=workflowDispatchJobs.get(workflowDispatchSelect.value);if(!job)return;job.touches+=1;document.querySelector('#workflowDispatchSummary').textContent=job.label+' · '+job.amount+' personne · '+workflowBridgeSummary();});workflowDispatchRender('1',false);
workflowBridgeReset();
</script>
</body>
</html>