{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pixel-openspace", "title": "Pixel Openspace", "description": "A pixel-art open space where your scheduled jobs and AI agents come to work: they sit and type while running, wander to the coffee machine when idle, and their PC smokes when they fail.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "button", "card", "badge", "button-group", "dialog", "kbd", "switch", "label", "separator", "input" ], "files": [ { "path": "registry/pixel-openspace/pixel-openspace.tsx", "content": "'use client'\n\nimport { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { ButtonGroup } from '@/components/ui/button-group'\nimport { JeuArcade, lireRecord, type Jeu } from './arcade'\nimport { BUREAU, CHAT_ID, CHEF_ID, LARGEUR, avancer, chat, estInvite, invite, marcheur, plan, type Invite, type Statut } from './engine'\nimport { TEXTS, type Texts } from './i18n'\nimport { ACCENT, DefsCommunes, TextesContexte, animerLeDecor, type Lumiere } from './primitives'\nimport { THEME_GEEK } from './themes/geek'\nimport { Frise } from './timeline'\nimport { changerPreferences } from './preferences'\nimport { useDansLeNavigateur, usePreferences } from './navigateur'\nimport { Reglages, useMeteoDuLieu } from './settings'\nimport { fete } from './seasons'\nimport type { Agent, OpenSpaceProps, SceneObject, WallTile } from './types'\nimport { type Equipe, type Pose, type Vue, bientot, heureCourte, obscurite, oublie, poses, posesAuBureau, versVue } from './vue'\nimport { THEMES, ThemeContexte } from './contexte'\nimport { Carte } from './card'\nimport { Chat, ColisDeposes, Confettis, EcranMural, Fenetre, Horloge, Nuit, Records, TableauBlanc } from './decor'\nimport { Fetes } from './festivities'\nimport { SONS, jouerNotes } from './sound'\nimport { Annonce, Parole, Personnage, Poste, cadrage } from './people'\n\n/*\n * pixel-openspace — an open space in pixel art where your scheduled jobs and\n * AI agents come to work. The code speaks French inside (it was born in a\n * French workshop); everything it shows follows the `language` prop.\n */\n\n/** Le temps qu'une parole reste affichée, celui qu'on met à s'étirer, et celui qu'un bureau met à se monter. */\nconst PAROLE_MS = 9_000\nconst ETIREMENT_MS = 2_500\nconst MONTAGE_MS = 8_000\n/** Vingt secondes sans que rien ne bouge, et la scène se met au repos. */\nconst CALME_MS = 20_000\n/** Une image toutes les 33 ms : 30 images par seconde. */\nconst IMAGE_MS = 1000 / 30 - 1\n\n/** Les états qui valent une notification. */\nconst SOUCIS: Array = ['en-echec', 'en-retard', 'absent']\n\n/* Ce que ce navigateur retient : les alertes voulues, le son, et les agents qu'il a déjà vus. */\nconst CLE_ALERTES = 'pixel-openspace:alerts'\nconst CLE_SON = 'pixel-openspace:sound'\nconst CLE_CONNUS = 'pixel-openspace:known-agents'\n\nfunction lire(cle: string): string | null {\n try {\n return localStorage.getItem(cle)\n } catch {\n return null\n }\n}\n\nfunction ecrire(cle: string, valeur: string) {\n try {\n localStorage.setItem(cle, valeur)\n } catch {\n /* Navigation privée ou stockage bloqué : on s'en passe. */\n }\n}\n\nconst CHEF_DECOR = (t: Texts): Agent => ({ id: CHEF_ID, name: t.leadName, emoji: '🧑‍💼', role: t.leadRole, status: 'ok' })\n\n/** L'écran mural quand on ne lui donne rien : combien de tâches, combien au travail, en échec, en retard. */\nfunction ecranParDefaut(agents: Array, t: Texts): Array {\n const compte = (statut: Agent['status']) => agents.filter((a) => a.status === statut).length\n const echecs = compte('failed')\n const retards = compte('late')\n return [\n { label: t.wall.jobs, value: agents.length, tone: 'info' },\n { label: t.wall.running, value: compte('working'), tone: 'ok' },\n { label: t.wall.failed, value: echecs, tone: echecs ? 'alert' : 'neutral' },\n { label: t.wall.late, value: retards, tone: retards ? 'warn' : 'neutral' },\n ]\n}\n\n/**\n * The open space. Pass your agents (and optionally a lead, wall tiles,\n * announcements and the weather); update the props as their state changes and\n * the room reacts: whoever starts working sits down and types, whoever\n * finishes stretches and says its last word, a failed agent's PC smokes and\n * the lead comes over. Click an agent to see its card.\n */\nexport function PixelOpenspace({\n agents,\n lead,\n title = 'PIXEL OPENSPACE',\n wall,\n announcements = [],\n weather = null,\n visitors = 0,\n deliveries = 0,\n celebrate = false,\n timeline: friseProp = true,\n language: langueProp = 'en',\n theme: themeProp = 'geek',\n columns: colonnesProp = 5,\n seasonal: saisonsProp = true,\n nightHours = [22, 6],\n toolbar = true,\n objectLinks = {},\n onObjectClick,\n onRun,\n now,\n className,\n style,\n}: OpenSpaceProps) {\n /* Ce que le visiteur a réglé derrière la roue dentée passe avant les props. */\n const preferences = usePreferences()\n const dansLeNavigateur = useDansLeNavigateur()\n const language = preferences.language ?? langueProp\n const enseigne = preferences.title?.trim() || title\n // Un lieu choisi dans les réglages : sa vraie météo remplace celle des props, une fois trouvée.\n const etatMeteo = useMeteoDuLieu(preferences.weatherPlace, language)\n const meteo = etatMeteo.etat === 'trouve' ? etatMeteo.meteo : weather\n const nomTheme = preferences.theme ?? themeProp\n const colonnes = preferences.columns ?? colonnesProp\n const seasonal = preferences.seasonal ?? saisonsProp\n const assombrir = preferences.night ?? true\n const mouvement = preferences.motion ?? true\n const timeline = preferences.timeline ?? friseProp\n\n // Une langue inconnue (une faute de frappe, un projet en JavaScript) retombe sur l'anglais.\n const t = TEXTS[language] ?? TEXTS.en\n const theme = THEMES[nomTheme] ?? THEME_GEEK\n const equipe: Equipe = {\n chef: versVue(lead ?? CHEF_DECOR(t), CHEF_ID),\n agents: agents.map((a) => versVue(a)),\n }\n\n const [ouverture] = useState(() => now ?? Date.now())\n /*\n * L'horloge, les comptes à rebours et la nuit dépendent de l'heure, qui n'est\n * pas la même au rendu serveur et dans le navigateur. Sans `now`, la scène ne\n * se dessine qu'une fois arrivée dans le navigateur ; un cadre vide aux bonnes\n * proportions tient sa place d'ici là.\n */\n const pret = now !== undefined || dansLeNavigateur\n const [maintenant, setMaintenant] = useState(ouverture)\n const [choisi, setChoisi] = useState(null)\n const [paroles, setParoles] = useState>({})\n const [etires, setEtires] = useState>({})\n const [nouveaux, setNouveaux] = useState>({})\n const [jeu, setJeu] = useState(null)\n const [deposes, setDeposes] = useState(0)\n /* Le son et les alertes : le choix fait dans cette visite, sinon celui gardé par le navigateur. */\n const [sonChoisi, setSonChoisi] = useState(null)\n const [alertesChoisies, setAlertesChoisies] = useState(null)\n const son = sonChoisi ?? (dansLeNavigateur && lire(CLE_SON) === '1')\n const permission = dansLeNavigateur && typeof Notification !== 'undefined' ? Notification.permission : 'default'\n const alertes = alertesChoisies ?? (dansLeNavigateur && lire(CLE_ALERTES) === '1' && permission === 'granted')\n const alertesBloquees = dansLeNavigateur && (typeof Notification === 'undefined' || permission === 'denied')\n const audio = useRef(null)\n const alertesActives = useRef(false)\n const scenePleinEcran = useRef(null)\n /* Les invités annoncés par les props, que la boucle d'animation fait entrer. */\n const arrivees = useRef>([])\n const minuteries = useRef>>([])\n const plusTard = (ms: number, faire: () => void) => minuteries.current.push(setTimeout(faire, ms))\n\n const jouerSon = (quoi: keyof typeof SONS) => {\n if (audio.current) jouerNotes(audio.current, SONS[quoi])\n }\n\n /* L'heure avance toutes les cinq secondes : horloge, comptes à rebours, nuit. */\n useEffect(() => {\n const minuterie = setInterval(() => setMaintenant(Date.now()), 5_000)\n const liste = minuteries.current\n return () => {\n clearInterval(minuterie)\n liste.forEach(clearTimeout)\n }\n }, [])\n\n /* Le son se rallume d'une visite à l'autre, mais le navigateur ne l'autorise qu'après un geste : le premier clic. */\n useEffect(() => {\n if (!son || audio.current) return\n const reveiller = () => {\n audio.current ??= new AudioContext()\n void audio.current.resume()\n }\n window.addEventListener('pointerdown', reveiller, { once: true })\n return () => window.removeEventListener('pointerdown', reveiller)\n }, [son])\n\n const basculerSon = () => {\n if (son) {\n void audio.current?.close()\n audio.current = null\n setSonChoisi(false)\n ecrire(CLE_SON, '0')\n return\n }\n audio.current = new AudioContext()\n jouerNotes(audio.current, SONS.travail)\n setSonChoisi(true)\n ecrire(CLE_SON, '1')\n }\n\n /* Les alertes restent branchées d'une visite à l'autre, tant que le navigateur les autorise ; la boucle les lit ici. */\n useEffect(() => {\n alertesActives.current = alertes\n })\n\n const basculerAlertes = async () => {\n if (alertes) {\n setAlertesChoisies(false)\n ecrire(CLE_ALERTES, '0')\n return\n }\n if (typeof Notification === 'undefined') return\n const reponse = Notification.permission === 'granted' ? 'granted' : await Notification.requestPermission()\n const ok = reponse === 'granted'\n setAlertesChoisies(ok)\n ecrire(CLE_ALERTES, ok ? '1' : '0')\n }\n\n const basculerPleinEcran = () => {\n // Le navigateur peut refuser (pas de geste de l'utilisateur, iframe) : on reste alors dans la page.\n const demande = document.fullscreenElement ? document.exitFullscreen() : scenePleinEcran.current?.requestFullscreen()\n demande?.catch(() => {})\n }\n\n /* Les records des bornes, relus à chaque fermeture de borne. */\n const records = useMemo(\n () => (dansLeNavigateur && !jeu ? { snake: lireRecord('snake'), casse: lireRecord('casse-briques') } : { snake: 0, casse: 0 }),\n [dansLeNavigateur, jeu],\n )\n\n /* Un agent cliqué dit ce qu'il fait, le temps de le lire. */\n const parler = (vue: Vue) => {\n const id = vue.fiche.id\n if (!vue.fiche.role) return\n setParoles((p) => ({ ...p, [id]: vue.fiche.role }))\n plusTard(5_000, () => setParoles((p) => sans(p, id)))\n }\n\n /* Un agent que ce navigateur n'a jamais vu voit son bureau se monter sous ses yeux. */\n const cle = equipe.agents.map((a) => a.fiche.id).join(',')\n useEffect(() => {\n const ids = cle ? cle.split(',') : []\n const connus = lire(CLE_CONNUS)\n ecrire(CLE_CONNUS, JSON.stringify(ids))\n // La toute première visite ne monte rien : tout le monde était déjà là.\n if (!connus) return\n let deja: Array = []\n try {\n deja = JSON.parse(connus) as Array\n } catch {\n return\n }\n const arrives = ids.filter((id) => !deja.includes(id))\n if (!arrives.length) return\n // eslint-disable-next-line react-hooks/set-state-in-effect -- ce que le navigateur a déjà vu n'est connu qu'après l'hydratation\n setNouveaux(Object.fromEntries(arrives.map((id) => [id, true as const])))\n const minuterie = setTimeout(() => setNouveaux({}), MONTAGE_MS)\n return () => clearTimeout(minuterie)\n }, [cle])\n\n /*\n * Ce qui change d'une fois sur l'autre : qui finit (il s'étire et parle),\n * qui tombe (notification, alarme), qui se met au travail (bip). Les\n * compteurs de visiteurs et de livraisons font entrer du monde.\n */\n const precedente = useRef<{ equipe: Equipe; visitors: number; deliveries: number } | null>(null)\n const empreinteEquipe = [equipe.chef, ...equipe.agents].map((v) => `${v.fiche.id}:${v.statut}:${v.brut.dernierMessage ?? ''}`).join('|')\n useEffect(() => {\n const avant = precedente.current\n precedente.current = { equipe, visitors, deliveries }\n if (!avant) return\n for (const vue of [equipe.chef, ...equipe.agents]) {\n const ancienne = [avant.equipe.chef, ...avant.equipe.agents].find((a) => a.fiche.id === vue.fiche.id)\n if (!ancienne || ancienne.statut === vue.statut) continue\n const id = vue.fiche.id\n if (ancienne.statut === 'au-travail') {\n const mot = vue.brut.dernierMessage\n if (mot) {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- la scène réagit à un changement venu des props : une bulle, le temps de la lire\n setParoles((p) => ({ ...p, [id]: mot }))\n plusTard(PAROLE_MS, () => setParoles((p) => sans(p, id)))\n }\n setEtires((e) => ({ ...e, [id]: true }))\n plusTard(ETIREMENT_MS, () => setEtires((e) => sans(e, id)))\n }\n if (vue.statut === 'au-travail') jouerSon('travail')\n if (vue.statut === 'en-echec') jouerSon('echec')\n if (alertesActives.current && SOUCIS.includes(vue.statut) && typeof Notification !== 'undefined') {\n new Notification(`${vue.fiche.emoji} ${vue.fiche.nom}: ${t.statuses[vue.statut]}`, {\n body: vue.brut.dernierMessage ?? vue.fiche.role,\n tag: `pixel-openspace-${id}`,\n })\n }\n }\n if (visitors > avant.visitors) {\n for (let i = 0; i < Math.min(2, visitors - avant.visitors); i++) arrivees.current.push('visiteur')\n jouerSon('sonnette')\n }\n for (let i = 0; i < Math.min(2, deliveries - avant.deliveries); i++) arrivees.current.push('livreur')\n // eslint-disable-next-line react-hooks/exhaustive-deps -- on ne réagit qu'à ce qui se voit : états, messages, compteurs\n }, [empreinteEquipe, visitors, deliveries])\n\n const lePlan = plan(cle ? cle.split(',') : [], t.phrases, theme.coins, colonnes)\n const [sceneAnimee, setScene] = useState>(() => posesAuBureau(lePlan))\n // Les déplacements coupés, chacun reste assis à son bureau.\n const scene = mouvement ? sceneAnimee : posesAuBureau(lePlan)\n\n /* Les états, les annonces du chef et les heures de nuit, lus par la boucle d'animation sans la relancer. */\n const statuts = useRef(new Map())\n const annonces = useRef>([])\n const heuresNuit = useRef(nightHours)\n useEffect(() => {\n statuts.current = new Map([[CHEF_ID, equipe.chef.statut], ...equipe.agents.map((a) => [a.fiche.id, a.statut] as const)])\n annonces.current = announcements\n heuresNuit.current = nightHours\n })\n\n useEffect(() => {\n if (!mouvement || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return\n const p = plan(cle ? cle.split(',') : [], t.phrases, theme.coins, colonnes)\n // Chacun se lève à son heure, pas tous ensemble.\n let marcheurs = [...[p.chef, ...p.bureaux].map((b) => marcheur(b.id, b.siege, 2_000 + Math.random() * 60_000)), chat(p)]\n let numero = 0\n let avant: number | null = null\n let image = 0\n let attente: ReturnType | undefined\n let derniereScene = ''\n let calmeDepuis: number | null = null\n let enPause = false\n\n /* Ce qui se voit d'un marcheur : tant que rien n'en change, inutile de redessiner. */\n const empreinte = () =>\n marcheurs\n .map(\n (m) =>\n `${m.id}:${Math.round(m.pos.x)},${Math.round(m.pos.y)},${Math.round(m.angle / 90)},` +\n `${m.chemin.length ? Math.floor(m.pas / 70) : '-'},${m.lieu.nom},${m.parole ?? ''},${m.porte ? 1 : 0}`,\n )\n .join('|')\n\n const boucle = (instant: number) => {\n // Trente tours par seconde, pas plus : le pixel art n'en demande pas davantage.\n if (avant !== null && !enPause && instant - avant < IMAGE_MS) {\n image = requestAnimationFrame(boucle)\n return\n }\n // Les invités annoncés entrent ; ceux qui sont ressortis s'effacent.\n for (const genre of arrivees.current.splice(0)) marcheurs.push(invite(p, genre, ++numero))\n const charges = new Set(marcheurs.filter((m) => m.porte).map((m) => m.id))\n const [debutNuit, finNuit] = heuresNuit.current\n const heure = new Date().getHours()\n const nuit = debutNuit > finNuit ? heure >= debutNuit || heure < finNuit : heure >= debutNuit && heure < finNuit\n // Un onglet revenu de l'arrière-plan ne téléporte personne ; au calme, les pas sont plus espacés.\n avancer(\n p,\n marcheurs,\n statuts.current,\n Math.min(instant - (avant ?? instant), enPause ? 250 : 100),\n Math.random,\n annonces.current,\n nuit,\n )\n const livres = marcheurs.filter((m) => charges.has(m.id) && !m.porte).length\n if (livres) setDeposes((d) => Math.min(3, d + livres))\n marcheurs = marcheurs.filter((m) => !m.parti)\n avant = instant\n\n /*\n * Le calme : personne ne marche, personne ne travaille ni n'a planté, depuis vingt\n * secondes. Les animations du décor se figent et la boucle ralentit à quatre tours\n * par seconde ; le premier qui se lève relance tout.\n */\n const bouge = marcheurs.some((m) => m.chemin.length)\n const occupe = [...statuts.current.values()].some((s) => s === 'au-travail' || s === 'en-echec')\n calmeDepuis = bouge || occupe ? null : (calmeDepuis ?? instant)\n const calme = calmeDepuis !== null && instant - calmeDepuis > CALME_MS\n enPause = calme\n // Le décor s'anime au rythme de la boucle, et se fige avec elle au calme.\n if (!calme) animerLeDecor(instant)\n\n // Et on ne redessine que si quelque chose a changé à l'écran.\n const vue = empreinte()\n if (vue !== derniereScene) {\n derniereScene = vue\n const suivante = poses(p, marcheurs)\n // Qui n'a pas bougé garde sa pose d'avant : React ne redessine que ceux qui ont changé.\n setScene((precedentes) =>\n Object.fromEntries(\n Object.entries(suivante).map(([id, pose]) => {\n const ancienne = precedentes[id]\n const pareil =\n ancienne && (Object.keys(pose) as Array).every((k) => (k === 'pas' ? !pose.marche : ancienne[k] === pose[k]))\n return [id, pareil ? ancienne : pose]\n }),\n ),\n )\n }\n\n if (enPause) attente = setTimeout(() => (image = requestAnimationFrame(boucle)), 250)\n else image = requestAnimationFrame(boucle)\n }\n image = requestAnimationFrame(boucle)\n return () => {\n cancelAnimationFrame(image)\n clearTimeout(attente)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- la boucle ne repart que si les bureaux, leur disposition, la langue, le thème ou les déplacements changent\n }, [cle, colonnes, language, nomTheme, mouvement])\n\n const tous = [equipe.chef, ...equipe.agents]\n const postes = [{ vue: equipe.chef, place: lePlan.chef }, ...equipe.agents.map((vue, i) => ({ vue, place: lePlan.bureaux[i] }))]\n const presents = postes\n .filter(({ vue }) => vue.statut !== 'absent')\n .map(({ vue, place }) => ({\n vue,\n place,\n pose:\n scene[vue.fiche.id] ??\n ({\n ...place.siege.pos,\n angle: place.siege.face,\n marche: false,\n pas: 0,\n assise: 'bureau',\n lieu: place.siege.nom,\n parole: null,\n porte: false,\n } satisfies Pose),\n }))\n // Le plus bas passe devant : c'est ce qui donne la profondeur.\n .sort((a, b) => a.pose.y - b.pose.y)\n const selection = tous.find((a) => a.fiche.id === choisi) ?? null\n const choisir = (id: string) => setChoisi((c) => (c === id ? null : id))\n const cliquerAgent = (id: string) => {\n const vue = tous.find((a) => a.fiche.id === id)\n if (vue) parler(vue)\n choisir(id)\n }\n const cafe = Boolean(theme.coinCafe) && presents.some(({ pose }) => pose.lieu === theme.coinCafe && !pose.marche)\n const invites = Object.entries(scene).filter(([id]) => estInvite(id))\n const poseChat = scene[CHAT_ID]\n // Les cinq prochains passages, pour le tableau blanc du chef.\n const prochains = equipe.agents\n .filter((a) => a.prochain && a.statut !== 'absent')\n .sort((a, b) => a.prochain!.localeCompare(b.prochain!))\n .slice(0, 5)\n .map((a) => ({ heure: heureCourte(a.prochain!, maintenant, t.locale), nom: a.fiche.nom }))\n const nuit = assombrir ? obscurite(maintenant) : 0\n const aller = (objet: SceneObject) => {\n const href = objectLinks[objet]\n if (!href) return\n if (onObjectClick) onObjectClick(objet, href)\n else window.location.href = href\n }\n\n // Les lumières qui percent la nuit : les écrans allumés, la lampe du chef, et celles du thème.\n const lumieres: Array = [\n ...postes\n .filter(({ vue }) => vue.statut !== 'absent')\n .flatMap(({ vue, place }) =>\n place.id === CHEF_ID\n ? [{ x: place.cx, y: place.dy + 10, r: 80 }]\n : [\n {\n x: place.cx - 4,\n y: place.dy,\n r: vue.statut === 'au-travail' ? 95 : 60,\n couleur: vue.statut === 'au-travail' ? ACCENT : undefined,\n },\n ...(theme.lumierePoste?.(place.cx, place.dy, theme.tenue(vue.fiche.id).c) ?? []),\n ],\n ),\n ...theme.lumieres,\n ]\n\n // La carte s'accroche au-dessus de l'agent choisi, ou à son bureau s'il est absent.\n const ancre = (() => {\n if (!selection) return null\n const present = presents.find(({ vue }) => vue.fiche.id === selection.fiche.id)\n const place = postes.find(({ vue }) => vue.fiche.id === selection.fiche.id)?.place\n // Assis à son bureau, la carte passe au-dessus de l'écran pour ne pas le cacher.\n if (present && present.pose.assise === 'bureau' && place && place.id !== CHEF_ID) {\n return { x: present.pose.x, haut: place.dy - 16, bas: cadrage(present.pose).bas }\n }\n if (present) return { x: present.pose.x, ...cadrage(present.pose) }\n return place ? { x: place.cx, haut: place.dy - 14, bas: place.dy + BUREAU.hauteur } : null\n })()\n\n return (\n \n \n \n {toolbar ? (\n \n \n void basculerAlertes()}\n reinitialiser={() => changerPreferences(null)}\n />\n \n ) : null}\n\n \n &]:w-[min(100vw,calc(100vh*var(--ratio)))]\"\n style={{ '--ratio': LARGEUR / lePlan.hauteur } as CSSProperties}\n >\n {!pret ?
: null}\n {pret ? (\n \n \n \n \n \n \n \n {seasonal ? : null}\n \n \n {cafe && theme.CafeQuiCoule ? : null}\n\n {postes.map(({ vue, place }) => (\n choisir(vue.fiche.id)}\n />\n ))}\n\n {presents.map(({ vue, pose }) => (\n \n ))}\n {invites.map(([id, pose]) => (\n \n ))}\n {poseChat ? : null}\n\n {/* Le dossier des chaises occupées, devant le dos de l'agent. */}\n {presents\n .filter(({ vue, pose }) => pose.assise === 'bureau' && vue.fiche.id !== CHEF_ID)\n .map(({ vue, place }) => (\n \n ))}\n\n \n {celebrate ? : null}\n\n {/* Les étiquettes et les bulles, au-dessus de tout, même la nuit. */}\n {presents.map(({ vue, pose }) => (\n \n ))}\n {invites.map(([id, pose]) =>\n pose.parole ? : null,\n )}\n \n ) : null}\n\n {selection && ancre ? (\n setChoisi(null)}\n />\n ) : null}\n
\n \n {/* Comme la scène, la frise attend le navigateur : ses points dépendent de l'heure. */}\n {pret && timeline && agents.some((a) => a.runs?.length) ? (\n \n ) : null}\n {jeu ? setJeu(null)} /> : null}\n \n \n \n )\n}\n\nconst sans = (objet: Record, cle: string) => Object.fromEntries(Object.entries(objet).filter(([k]) => k !== cle))\n", "type": "registry:component", "target": "components/pixel-openspace/pixel-openspace.tsx" }, { "path": "registry/pixel-openspace/vue.ts", "content": "/*\n * Ce que la scène sait d'un agent, et les calculs purs qu'elle en tire : son état, depuis quand il est passé, quand il repasse, s'il est oublié, et l'obscurité de la salle.\n */\n\nimport { CHEF_ID, marcheur, type Marcheur, type Plan, type Statut } from './engine'\nimport { type Texts } from './i18n'\nimport type { Agent, AgentStatus } from './types'\n\n/* ——— Ce que la scène sait d'un agent ——— */\n\n/** Un agent tel que la scène le manipule : sa fiche, ce qu'il a dit, son état. */\nexport type Vue = {\n fiche: { id: string; nom: string; emoji: string; role: string; rythme: string | null; vieillitApresH: number }\n brut: { dernierMessage: string | null; dernierPassage: string | null }\n statut: Statut\n prochain: string | null\n source: Agent\n}\n\nexport const STATUT: Record = {\n working: 'au-travail',\n ok: 'a-jour',\n late: 'en-retard',\n asleep: 'endormi',\n failed: 'en-echec',\n off: 'absent',\n never: 'jamais',\n 'on-demand': 'a-la-demande',\n}\n\nexport const signales = new Set()\n\n/** Le statut de la scène ; un statut inconnu compte comme « ok », signalé une fois en développement. */\nexport function statutDe(a: Agent): Statut {\n const statut = STATUT[a.status]\n if (statut) return statut\n const cle = `${a.id}:${a.status}`\n if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production' && !signales.has(cle)) {\n signales.add(cle)\n console.warn(`pixel-openspace: unknown status \"${a.status}\" for agent \"${a.id}\", shown as \"ok\".`)\n }\n return 'a-jour'\n}\n\nexport function versVue(a: Agent, id = a.id): Vue {\n return {\n fiche: {\n id,\n nom: a.name,\n emoji: a.emoji ?? '🤖',\n role: a.role ?? '',\n rythme: a.schedule ?? null,\n vieillitApresH: a.staleAfterHours ?? (a.status === 'on-demand' ? 24 * 7 : 72),\n },\n brut: { dernierMessage: a.lastMessage ?? null, dernierPassage: a.lastRun ?? null },\n statut: statutDe(a),\n prochain: a.nextRun ?? null,\n source: a,\n }\n}\n\nexport type Equipe = { chef: Vue; agents: Array }\n\nexport function depuis(iso: string | null, maintenant: number, t: Texts): string {\n if (!iso) return t.never\n const minutes = Math.round((maintenant - Date.parse(iso)) / 60_000)\n if (minutes < 1) return t.justNow\n if (minutes < 60) return t.minutesAgo(minutes)\n const heures = Math.round(minutes / 60)\n if (heures < 24) return t.hoursAgo(heures)\n return t.daysAgo(Math.round(heures / 24))\n}\n\n/** « 09:28 » aujourd'hui, « Mon 09:15 » un autre jour : de quoi tenir sur le tableau blanc. */\nexport function heureCourte(iso: string, maintenant: number, locale: string): string {\n const d = new Date(iso)\n const h = d.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' })\n return d.toDateString() === new Date(maintenant).toDateString() ? h : `${d.toLocaleDateString(locale, { weekday: 'short' })} ${h}`\n}\n\n/** Assis à son bureau, assis au canapé, ou debout. */\nexport type Assise = 'bureau' | 'canape' | null\n\n/** Ce que la page dessine d'un marcheur, à l'image près. */\nexport type Pose = {\n x: number\n y: number\n angle: number\n marche: boolean\n pas: number\n assise: Assise\n /** Le lieu où il se tient, ou vers lequel il marche. */\n lieu: string\n parole: string | null\n /** Le livreur, son colis dans les bras. */\n porte: boolean\n}\n\nexport function poses(p: Plan, marcheurs: Array): Record {\n const scene: Record = Object.fromEntries(\n marcheurs.map((m) => {\n const siege = m.id === CHEF_ID ? p.chef.siege : p.bureaux.find((b) => b.id === m.id)?.siege\n const arrive = !m.chemin.length\n const assise: Assise = arrive && m.lieu.assis ? (m.lieu === siege ? 'bureau' : 'canape') : null\n return [\n m.id,\n {\n x: m.pos.x,\n y: m.pos.y,\n angle: m.angle,\n marche: !arrive,\n pas: m.pas,\n assise,\n lieu: m.lieu.nom,\n parole: arrive ? m.parole : null,\n porte: m.porte,\n },\n ]\n }),\n )\n // Deux au canapé, et la conversation s'engage.\n const auCanape = Object.values(scene).filter((s) => s.assise === 'canape')\n if (auCanape.length > 1) for (const s of auCanape) s.parole ??= '…'\n return scene\n}\n\nexport const posesAuBureau = (p: Plan) =>\n poses(\n p,\n [p.chef, ...p.bureaux].map((b) => marcheur(b.id, b.siege, 0)),\n )\n\n/** Les minutes avant le prochain passage, quand il approche (dix minutes au plus). */\nexport function bientot(vue: Vue, maintenant: number): number | null {\n if (!vue.prochain || vue.statut === 'au-travail' || vue.statut === 'absent') return null\n const reste = Date.parse(vue.prochain) - maintenant\n // À moins de 30 s, c'est un passage dû maintenant, souvent celui d'un ordonnanceur en retard qui annonce\n // « tout de suite » à chaque relecture : sans ce seuil, l'écran resterait figé sur « dans 1 min ».\n if (reste < 30_000) return null\n const minutes = Math.ceil(reste / 60_000)\n return minutes <= 10 ? minutes : null\n}\n\n/** L'obscurité de la salle selon l'heure : nuit noire de 21 h à 6 h, le soir et le matin en pente douce. */\nexport function obscurite(maintenant: number): number {\n const d = new Date(maintenant)\n const h = d.getHours() + d.getMinutes() / 60\n const nuit = 0.62\n if (h >= 8 && h < 18) return 0\n if (h >= 21 || h < 6) return nuit\n return h >= 18 ? ((h - 18) / 3) * nuit : ((8 - h) / 2) * nuit\n}\n\n/** Un agent oublié : plus de passage depuis plus longtemps qu'on ne l'admet (staleAfterHours). */\nexport function oublie(vue: Vue, maintenant: number): boolean {\n if (vue.statut === 'absent' || vue.fiche.id === CHEF_ID) return false\n if (!vue.brut.dernierPassage) return vue.statut !== 'jamais' && vue.statut !== 'a-la-demande'\n const heures = (maintenant - Date.parse(vue.brut.dernierPassage)) / 3_600_000\n return heures > vue.fiche.vieillitApresH\n}\n", "type": "registry:lib", "target": "components/pixel-openspace/vue.ts" }, { "path": "registry/pixel-openspace/contexte.ts", "content": "/*\n * Les thèmes, et le contexte qui donne le thème de la salle à tout ce qui la dessine.\n */\n\nimport { createContext, useContext } from 'react'\nimport type { Theme } from './theme'\nimport { THEME_80 } from './themes/eighties'\nimport { THEME_GEEK } from './themes/geek'\nimport { THEME_GYM } from './themes/gym'\nimport { THEME_CUISINE } from './themes/kitchen'\nimport { THEME_MODERNE } from './themes/modern'\nimport { THEME_NEON } from './themes/neon'\nimport type { ThemeName } from './types'\n\n/* Les thèmes disponibles, par leur nom public. */\nexport const THEMES: Record = {\n geek: THEME_GEEK,\n eighties: THEME_80,\n gym: THEME_GYM,\n modern: THEME_MODERNE,\n kitchen: THEME_CUISINE,\n neon: THEME_NEON,\n}\n\n/* Le thème de la scène, à portée des postes et des bonshommes. */\nexport const ThemeContexte = createContext(THEME_GEEK)\nexport const useTheme = () => useContext(ThemeContexte)\n", "type": "registry:lib", "target": "components/pixel-openspace/contexte.ts" }, { "path": "registry/pixel-openspace/card.tsx", "content": "'use client'\n\n/*\n * La fiche d'un agent, accrochée au-dessus de son bureau quand on clique dessus.\n */\n\nimport { useState } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { LARGEUR } from './engine'\nimport { LAMPE_PLAN, useTextes } from './primitives'\nimport type { Agent } from './types'\nimport { type Vue, depuis, heureCourte } from './vue'\n\n/** La carte d'un agent, posée sur la scène au-dessus de lui (ou en dessous, près du haut). */\nexport function Carte({\n agent,\n ancre,\n hauteur,\n maintenant,\n lancer,\n fermer,\n}: {\n agent: Vue\n ancre: { x: number; haut: number; bas: number }\n hauteur: number\n maintenant: number\n lancer?: (agent: Agent) => void | Promise\n fermer: () => void\n}) {\n const t = useTextes()\n const { fiche, statut, brut, prochain } = agent\n const [enCours, setEnCours] = useState(false)\n const dessous = ancre.haut < 240\n const horizontal = ancre.x < 160 ? '0%' : ancre.x > LARGEUR - 160 ? '-100%' : '-50%'\n const travaille = statut === 'au-travail'\n return (\n \n \n \n {fiche.emoji} {fiche.nom}\n \n {fiche.role ? {fiche.role} : null}\n \n \n \n \n \n
\n \n \n {t.statuses[statut]}\n \n {fiche.rythme ? {fiche.rythme} : null}\n
\n

\n {t.lastRun} {depuis(brut.dernierPassage, maintenant, t)}\n {prochain ? ` · ${t.nextRun} ${heureCourte(prochain, maintenant, t.locale)}` : ''}\n

\n {brut.dernierMessage && statut !== 'absent' ? (\n

{brut.dernierMessage}

\n ) : null}\n \n {lancer ? (\n \n {\n setEnCours(true)\n try {\n await lancer(agent.source)\n } finally {\n setEnCours(false)\n }\n }}\n >\n {enCours ? t.launching : travaille ? t.running : t.runNow}\n \n \n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/pixel-openspace/card.tsx" }, { "path": "registry/pixel-openspace/decor.tsx", "content": "'use client'\n\n/*\n * Ce qui meuble la salle autour des agents : la nuit, l'écran mural, le tableau blanc, les records, les colis, l'horloge, la fenêtre, le chat, les plantes, la poussière, les confettis et la lampe.\n */\n\nimport { LARGEUR, type Statut } from './engine'\nimport { ACCENT, Anim, LAMPE_PLAN, Pixels, etapes, useTextes, type Lumiere } from './primitives'\nimport type { WallTile, Weather } from './types'\nimport { type Pose } from './vue'\n\n/**\n * La nuit tombe sur la salle, percée par les lumières : un voile bleu nuit,\n * avec un trou doux autour de chaque écran allumé. Les LED, les néons et les\n * écrans au travail jettent en plus une lueur de leur couleur.\n */\nexport function Nuit({\n niveau,\n lumieres,\n hauteur,\n voile = { couleur: '#0a1033', opacite: 0.62 },\n}: {\n niveau: number\n lumieres: Array\n hauteur: number\n voile?: { couleur: string; opacite: number }\n}) {\n if (!niveau) return null\n // L'obscurité va jusqu'à 0,62 ; le thème choisit jusqu'où son voile descend.\n const opacite = (niveau / 0.62) * voile.opacite\n return (\n \n \n \n \n \n \n \n {lumieres.map((l, i) =>\n l.couleur ? (\n \n \n \n \n ) : null,\n )}\n \n \n {lumieres.map((l, i) => (\n \n ))}\n \n \n \n {lumieres.map((l, i) =>\n l.couleur ? (\n \n ) : null,\n )}\n \n )\n}\n\n/* La couleur d'une tuile selon son ton. */\nexport const TONS: Record, string> = {\n neutral: '#e5e7eb',\n ok: '#4ade80',\n info: '#38bdf8',\n warn: '#fb923c',\n alert: '#ef4444',\n}\n\n/**\n * Le grand écran accroché au mur de la grande salle : jusqu'à quatre tuiles,\n * leur valeur, et une jauge pour celles qui en ont une.\n */\nexport function EcranMural({ tuiles }: { tuiles: Array }) {\n const affichees = tuiles.slice(0, 4)\n if (!affichees.length) return null\n const largeur = 196 / affichees.length\n return (\n \n \n \n {affichees.map((tuile, i) => {\n const x = 34 + i * largeur\n const l = largeur - 2.5\n const couleur = tuile.tone ? TONS[tuile.tone] : ACCENT\n return (\n \n \n \n {tuile.label.toUpperCase()}\n \n \n {tuile.value}\n \n {tuile.progress !== undefined ? (\n <>\n \n \n \n ) : null}\n \n )\n })}\n \n )\n}\n\n/* ——— Le tableau blanc, les records, la porte, les colis, les fêtes ——— */\n\n/** Le tableau blanc du bureau du chef : les prochains passages, au feutre. */\nexport function TableauBlanc({ prochains }: { prochains: Array<{ heure: string; nom: string }> }) {\n const t = useTextes()\n return (\n \n \n \n \n \n \n \n \n \n {t.nextRuns}\n \n {prochains.length ? (\n prochains.map((p, i) => (\n \n {p.heure} · {p.nom}\n \n ))\n ) : (\n \n {t.nothingPlanned}\n \n )}\n \n )\n}\n\n/** Le panneau des records, accroché au mur à côté du coin gaming. */\nexport function Records({ snake, casse }: { snake: number; casse: number }) {\n const t = useTextes()\n const pad = (n: number) => String(n).padStart(3, '0')\n return (\n \n \n \n \n {t.hiScores}\n \n \n \n SNAKE\n \n \n {pad(snake)}\n \n \n CASSE\n \n \n {pad(casse)}\n \n \n )\n}\n\n/** Les colis déposés par le livreur depuis l'ouverture de la page. */\nexport function ColisDeposes({ nombre, bas }: { nombre: number; bas: number }) {\n return (\n \n {Array.from({ length: nombre }, (_, i) => (\n \n \n \n \n \n ))}\n \n )\n}\n\n/**\n * L'horloge du bureau du chef, à la vraie heure. Les aiguilles des heures et\n * des minutes suivent la page, rafraîchie toutes les cinq secondes ; la\n * trotteuse tourne seule, calée sur la seconde d'ouverture de la page.\n */\nexport function Horloge({ maintenant, ouverture }: { maintenant: number; ouverture: number }) {\n const t = useTextes()\n const cx = 302\n const cy = 36\n const d = new Date(maintenant)\n const minutes = d.getMinutes() + d.getSeconds() / 60\n const heures = (d.getHours() % 12) + minutes / 60\n const aiguille = (angle: number, longueur: number, epaisseur: number, couleur: string) => (\n \n )\n return (\n \n {d.toLocaleTimeString(t.locale, { hour: '2-digit', minute: '2-digit' })}\n \n \n {Array.from({ length: 12 }, (_, i) => (\n \n ))}\n {aiguille(heures * 30, 6, 2, '#111827')}\n {aiguille(minutes * 6, 9, 1.5, '#111827')}\n \n \n \n )\n}\n\n/* ——— La météo, le chat, les plantes, les confettis ——— */\n\nexport const CIEL: Record = {\n clear: 'soleil',\n clouds: 'nuages',\n fog: 'brouillard',\n rain: 'pluie',\n snow: 'neige',\n storm: 'orage',\n}\n\n/** La fenêtre du bureau du chef, ouverte sur le ciel qu'on lui donne. */\nexport function Fenetre({ meteo: temps }: { meteo: Weather | null }) {\n const t = useTextes()\n const meteo = temps\n ? { temperature: Math.round(temps.temperature), ciel: CIEL[temps.sky], jour: temps.day, lieu: temps.place ?? '' }\n : null\n const x = 94\n const l = 56\n const ciel = !meteo\n ? '#1e293b'\n : !meteo.jour\n ? '#0f172a'\n : { soleil: '#7dd3fc', nuages: '#94a3b8', brouillard: '#cbd5e1', pluie: '#64748b', neige: '#cbd5e1', orage: '#334155' }[meteo.ciel]\n const nuage = meteo?.ciel === 'orage' ? '#475569' : '#f1f5f9'\n return (\n \n {meteo ? `${meteo.lieu ? `${meteo.lieu}: ` : ''}${meteo.temperature} °C` : t.noWeather}\n \n \n \n {meteo?.jour && meteo.ciel === 'soleil' ? (\n \n \n \n \n \n \n \n ) : null}\n {meteo && !meteo.jour ? (\n \n \n \n {[\n [8, 6],\n [20, 3],\n [28, 9],\n [14, 12],\n ].map(([sx, sy]) => (\n \n \n \n ))}\n \n ) : null}\n {meteo && meteo.ciel !== 'soleil'\n ? [0, 1].map((i) => (\n \n \n \n `${v} 0`)\n .join(';')}\n dur={`${14 + i * 6}s`}\n begin={`${-i * 7}s`}\n repeatCount=\"indefinite\"\n />\n \n ))\n : null}\n {meteo?.ciel === 'pluie' || meteo?.ciel === 'orage'\n ? Array.from({ length: 9 }, (_, i) => (\n \n \n \n ))\n : null}\n {meteo?.ciel === 'neige'\n ? Array.from({ length: 8 }, (_, i) => (\n \n \n \n ))\n : null}\n {meteo?.ciel === 'brouillard'\n ? [8, 15, 21].map((y) => )\n : null}\n {meteo?.ciel === 'orage' ? (\n \n \n \n ) : null}\n \n \n {meteo ? `${meteo.temperature}°` : '—'}\n \n \n \n \n \n {meteo?.lieu.toUpperCase()}\n \n \n )\n}\n\n/* Le chat roux tigré : debout de profil, deux temps de marche, et roulé en boule pour la sieste. */\nexport const CHAT_DEBOUT = [\n ['.......k.k', 'k......kkk', '.K.....kek', '.kKkKkKkk.', '..kkkkkkk.', '..k.k..k.k'],\n ['.......k.k', 'k......kkk', '.K.....kek', '.kKkKkKkk.', '..kkkkkkk.', '...k.k.k.k'],\n]\nexport const CHAT_ROULE = ['..kkkk..', '.kKkKkk.', 'kkkkkKkk', 'Kkkkkkkk', '.kkkkkkK']\nexport const PELAGE = { k: '#f59e0b', K: '#b45309', e: '#111827' }\n\n/** Le chat d'atelier : il marche de profil, ou dort roulé en boule là où il s'est posé. */\nexport function Chat({ pose }: { pose: Pose }) {\n const t = useTextes()\n if (!pose.marche) {\n return (\n \n {t.catNap}\n \n \n \n {pose.parole ? (\n \n z\n \n \n \n ) : null}\n \n )\n }\n const versLaDroite = Math.sin((pose.angle * Math.PI) / 180) >= 0\n const grille = CHAT_DEBOUT[Math.floor(pose.pas / 140) % 2]\n return (\n \n \n \n \n \n \n )\n}\n\n/* La petite plante au pied de chaque bureau ; fanée quand l'agent ne passe plus. */\nexport const PLANTE_VIVE = ['.g..g.', 'gGggGg', '.gGGg.', '..gg..', '.pppp.', '.PPPP.', '..PP..']\nexport const PLANTE_FANEE = ['......', 'b....b', '.b..b.', '..bb..', '.pppp.', '.PPPP.', '..PP..']\n\nexport function PlanteDeBureau({ x, y, fanee }: { x: number; y: number; fanee: boolean }) {\n return (\n \n \n \n )\n}\n\n/** La poussière et la toile sur l'écran d'un agent oublié. */\nexport function Poussiere({ cx, dy }: { cx: number; dy: number }) {\n const g = cx - 4 - 27\n return (\n \n {[\n [4, 2],\n [12, 8],\n [22, 4],\n [31, 12],\n [40, 6],\n [48, 14],\n [8, 15],\n [26, 17],\n [44, 2],\n ].map(([px, py]) => (\n \n ))}\n \n \n )\n}\n\n/** Des confettis qui tombent sur toute la salle : une machine fête son anniversaire. */\nexport function Confettis({ hauteur }: { hauteur: number }) {\n const couleurs = ['#f472b6', '#facc15', '#22d3ee', '#4ade80', '#a855f7', '#fb923c']\n return (\n \n {Array.from({ length: 36 }, (_, i) => {\n const x = (i * 137) % LARGEUR\n const duree = 4 + (i % 5)\n return (\n \n \n \n \n )\n })}\n \n )\n}\n\nexport function Lampe({ x, y, statut }: { x: number; y: number; statut: Statut }) {\n return (\n \n {statut === 'au-travail' || statut === 'en-echec' ? (\n \n ) : null}\n \n )\n}\n", "type": "registry:component", "target": "components/pixel-openspace/decor.tsx" }, { "path": "registry/pixel-openspace/festivities.tsx", "content": "'use client'\n\n/*\n * Les décorations de saison : Halloween, Noël et Pâques.\n */\n\nimport { LARGEUR } from './engine'\nimport { Anim, MUR_SALLE, Pixels, etapes } from './primitives'\nimport { type Fete } from './seasons'\n\n/** Les fêtes : Halloween tout le mois d'octobre, Noël tout le mois de décembre. */\n\n/* Pâques : un œuf, le poussin, le lapin de profil. */\nexport const OEUF = ['..ee..', '.eeee.', 'ebbbbe', 'eeeeee', 'ewewew', '.eeee.', '..ee..']\nexport const POUSSIN = ['.yy...', 'yyey..', 'yyyyo.', '.yyy..', '.o.o..']\nexport const LAPIN = ['.....gw.gw', '.....gw.gw', '....wwwwww', 'w..wwwwwep', 'wwwwwwwwww', '.wwwwwwww.', '.ww....ww.']\n/* Où sont cachés les œufs, et de quelles couleurs : x, y (ou « bas », au pied du mur du fond), fond, rayure, points. */\nexport const OEUFS: Array<[number, number | 'bas', string, string, string]> = [\n [44, 182, '#f9a8d4', '#f472b6', '#fdf2f8'],\n [318, 96, '#7c2d12', '#facc15', '#92400e'],\n [470, 182, '#a5f3fc', '#22d3ee', '#ecfeff'],\n [610, 176, '#7c2d12', '#facc15', '#92400e'],\n [846, 46, '#bbf7d0', '#4ade80', '#f0fdf4'],\n [962, 176, '#ddd6fe', '#a78bfa', '#f5f3ff'],\n [70, 300, '#fde68a', '#f59e0b', '#fffbeb'],\n [955, 470, '#7c2d12', '#facc15', '#92400e'],\n [420, 'bas', '#fecdd3', '#fb7185', '#fff1f2'],\n [690, 'bas', '#a5f3fc', '#38bdf8', '#ecfeff'],\n]\n\nexport const CITROUILLE = ['...g....', '.oooooo.', 'ooyooyoo', 'oooooooo', 'oyyyyyyo', '.oooooo.']\nexport const FANTOME = ['.www.', 'wwwww', 'wewew', 'wwwww', 'wwwww', 'w.w.w']\nexport const SAPIN = [\n '....y....',\n '...ggg...',\n '..ggrgg..',\n '...ggg...',\n '..gbgggg.',\n '.gggggyg.',\n '..ggggg..',\n '.grggggbg',\n 'ggggygggg',\n '....t....',\n '...ttt...',\n]\n\nexport function Citrouille({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n )\n}\n\n/** Une toile d'araignée dans un coin de pièce, sous le mur du fond. */\nexport function Toile({ x, y, sens = 1 }: { x: number; y: number; sens?: 1 | -1 }) {\n const d = (n: number) => x + n * sens\n return (\n \n )\n}\n\nexport function Fetes({ quoi, bas }: { quoi: Fete; bas: number }) {\n if (quoi === 'halloween') {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {/* Le fantôme qui flotte dans le coin gaming. */}\n \n \n \n \n \n )\n }\n if (quoi === 'paques') {\n const bas2 = bas - 36\n return (\n \n {/* Les œufs cachés : peints en pastel, ou en chocolat dans leur papier doré. */}\n {OEUFS.map(([x, y, base, rayure, points], i) => (\n \n \n \n ))}\n {/* Le poussin perché sur le tableau blanc du chef. */}\n \n \n \n {/* Le lapin qui traverse la grande salle, par petits bonds. */}\n \n `${x} ${bas - 50}`)\n .join(';')}\n dur=\"18s\"\n repeatCount=\"indefinite\"\n />\n \n \n \n \n \n \n )\n }\n if (quoi === 'noel') {\n return (\n \n {/* Le sapin, ses boules qui clignotent, les cadeaux au pied. */}\n \n \n {[\n [12, 22, '#f472b6'],\n [28, 32, '#facc15'],\n [16, 42, '#22d3ee'],\n ].map(([cx, cy, c], i) => (\n \n \n \n ))}\n \n {[\n [856, '#dc2626'],\n [928, '#2563eb'],\n ].map(([x, c]) => (\n \n \n \n \n \n ))}\n {/* La guirlande le long du mur de la grande salle. */}\n {MUR_SALLE.flatMap(([de, a]) =>\n Array.from({ length: Math.floor((a - de) / 12) }, (_, i) => (\n \n \n \n )),\n )}\n {/* Un bonnet sur la baie serveur. */}\n \n \n \n \n )\n }\n return null\n}\n", "type": "registry:component", "target": "components/pixel-openspace/festivities.tsx" }, { "path": "registry/pixel-openspace/people.tsx", "content": "'use client'\n\n/*\n * Les postes et les gens : le bureau de chaque agent, les sprites des bonshommes, leurs bulles et leurs étiquettes.\n */\n\nimport { memo } from 'react'\nimport { BUREAU, CHEF_ID, LARGEUR, type PlaceBureau } from './engine'\nimport { Anim, LAMPE_PLAN, Pixels, useTextes } from './primitives'\nimport { type Assise, type Pose, type Vue } from './vue'\nimport { useTheme } from './contexte'\nimport { Lampe, PlanteDeBureau, Poussiere } from './decor'\n\n/* ——— Les postes ——— */\n\nexport function Poste({\n vue,\n place,\n occupe,\n bientot,\n monte,\n oublie,\n choisi,\n choisir,\n}: {\n vue: Vue\n place: PlaceBureau\n occupe: boolean\n bientot: number | null\n /** Le bureau d'un agent qui arrive : il tombe du plafond et se pose. */\n monte: boolean\n /** Un agent qui ne passe plus depuis des jours : plante fanée, écran poussiéreux. */\n oublie: boolean\n choisi: boolean\n choisir: () => void\n}) {\n const t = useTextes()\n const theme = useTheme()\n const { fiche, statut } = vue\n const { cx, dy } = place\n const x = cx - BUREAU.largeur / 2\n const dessus = BUREAU.hauteur - 12\n const chaise = { x: place.siege.pos.x, y: place.siege.pos.y + 4 }\n const chef = place.id === CHEF_ID\n const accent = chef ? '#e3b95a' : theme.tenue(fiche.id).c\n const allume = statut !== 'absent'\n const bureau = { cx, dy, x, dessus, statut, accent, bientot, emoji: fiche.emoji }\n\n const largeurMontage = Math.max(68, t.newDesk.length * 5 + 16)\n return (\n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n choisir()\n }\n }}\n >\n {`${fiche.nom} — ${t.statuses[statut]}`}\n {monte ? (\n // Le cadre suit la longueur du texte, et le texte tient dans le cadre même dans une police de secours plus large.\n \n \n \n \n {t.newDesk}\n \n \n \n ) : null}\n {choisi ? (\n \n ) : null}\n\n {chef ? (\n <>\n \n \n {/* La plaque du chef, en laiton, tournée vers la pièce. */}\n \n \n \n \n {fiche.nom}\n \n \n ) : (\n <>\n \n {/* La tranche porte le nom, avec la lampe. */}\n \n \n {fiche.nom}\n \n {oublie ? : null}\n \n\n {/* Le siège : l'assise seule quand l'agent y est (son dossier passe devant lui), repoussé sinon. */}\n {occupe ? (\n \n ) : (\n \n \n \n \n )}\n \n )}\n \n )\n}\n\nexport type Direction = 'haut' | 'bas' | 'gauche' | 'droite'\n\nexport function direction(angle: number): Direction {\n const a = ((angle % 360) + 360) % 360\n if (a < 45 || a >= 315) return 'haut'\n if (a < 135) return 'droite'\n if (a < 225) return 'bas'\n return 'gauche'\n}\n\n/* Un bonhomme fait 8 pixels sur 12 : la tête, le sweat à capuche, les jambes. */\nexport const TETE: Record<'haut' | 'bas' | 'droite', Array> = {\n bas: ['..hhhh..', '.hhhhhh.', '.hssssh.', '.sesses.', '.cssssc.'],\n haut: ['..hhhh..', '.hhhhhh.', '.hhhhhh.', '.hhhhhh.', '.cchhcc.'],\n droite: ['..hhhh..', '.hhhhhh.', '.hhhsss.', '.hhhses.', '.ccsss..'],\n}\n/* La même, casque audio sur les oreilles. */\nexport const TETE_CASQUE: Record<'haut' | 'bas' | 'droite', Array> = {\n bas: ['..kkkk..', '.khhhhk.', 'khsssshk', 'ksessesk', '.cssssc.'],\n haut: ['..kkkk..', '.khhhhk.', 'khhhhhhk', 'khhhhhhk', '.cchhcc.'],\n droite: ['..kkkk..', '.hhhkhh.', '.hhkkss.', '.hhkses.', '.ccsss..'],\n}\n/* Le sweat : la poche ventrale et les cordons de capuche (`t`). */\nexport const BUSTE: Record<'haut' | 'bas' | 'droite', Array> = {\n bas: ['.ctcctc.', 'cctcctcc', 'sccccccs', '.cCCCCc.'],\n haut: ['.cccccc.', 'cccccccc', 'sccccccs', '.cccccc.'],\n droite: ['..cccc..', '..cccc..', '..ccsc..', '..cCCc..'],\n}\n/* Les jambes : debout, puis les deux temps du pas. */\nexport const JAMBES: Record<'face' | 'cote', Array>> = {\n face: [\n ['.pp..pp.', '.pp..pp.', '.bb..bb.'],\n ['.pp..pp.', '.pp..bb.', '.bb.....'],\n ['.pp..pp.', '.bb..pp.', '.....bb.'],\n ],\n cote: [\n ['..pppp..', '..pp.p..', '..bb.bb.'],\n ['..pppp..', '.pp...p.', '.bb...bb'],\n ['..pppp..', '...pp...', '...bbb..'],\n ],\n}\n\n/* Les bras levés de l'agent qui s'étire, vu de dos. */\nexport const ETIREMENT = ['s.hhhh.s', 'chhhhhhc', 'chhhhhhc', 'chhhhhhc', 'c.hhhh.c', '.cccccc.', 'cccccccc', 'cccccccc']\n\nexport function grilleSprite(sens: Direction, temps: number, assise: Assise, etire: boolean, casque: boolean): Array {\n if (etire && assise === 'bureau' && sens === 'haut') return ETIREMENT\n const tete = casque ? TETE_CASQUE : TETE\n // Au bureau ou sur un pouf, de dos devant l'écran ; le chef, lui, trône face à la pièce.\n if (assise) return sens === 'bas' ? [...tete.bas, ...BUSTE.bas.slice(0, 3)] : [...tete.haut, ...BUSTE.haut.slice(0, 3)]\n const miroir = sens === 'gauche'\n const s = miroir ? 'droite' : sens\n const g = [...tete[s], ...BUSTE[s], ...JAMBES[s === 'droite' ? 'cote' : 'face'][temps]]\n return miroir ? g.map((l) => [...l].reverse().join('')) : g\n}\n\nexport const CONTOUR = Object.fromEntries([...'hsectCkpb'].map((c) => [c, '#0b0d10']))\n\n/** Le bonhomme, contour sombre compris. Mémorisé : il ne change qu'au pas suivant. */\nexport const Sprite = memo(function Sprite({\n id,\n sens,\n temps,\n assise,\n etire,\n}: {\n id: string\n sens: Direction\n temps: number\n assise: Assise\n etire: boolean\n}) {\n const theme = useTheme()\n const grille = grilleSprite(sens, temps, assise, etire, theme.casque(id))\n return (\n <>\n {[\n [-1, 0],\n [1, 0],\n [0, -1],\n [0, 1],\n ].map(([dx, dy]) => (\n \n \n \n ))}\n \n \n )\n})\n\n/** La hauteur du sprite au-dessus du point où il se tient, et le haut de sa tête. */\nexport function cadrage(pose: Pose) {\n const rangs = pose.assise ? 8 : 12\n // Assis, il s'enfonce dans son fauteuil ou son pouf : au bureau, sa tête passe sous la plaque.\n const bas = pose.assise ? pose.y + 8 : pose.y\n return { haut: bas - rangs * 3, bas }\n}\n\nexport function Personnage({ id, pose, etire, choisir }: { id: string; pose: Pose; etire: boolean; choisir?: (id: string) => void }) {\n const theme = useTheme()\n const temps = pose.marche ? 1 + (Math.floor(pose.pas / 170) % 2) : 0\n const { haut, bas } = cadrage(pose)\n return (\n choisir(id) : undefined}>\n {pose.assise ? null : }\n \n \n {/* Le colis du livreur, porté à bout de bras. */}\n {pose.porte ? (\n \n \n \n \n \n ) : !pose.assise && theme.tasse?.(id) ? (\n /* La tasse, tenue à la main droite. */\n \n \n \n \n \n \n ) : null}\n \n \n )\n}\n\n/**\n * Au-dessus de la tête, une chose à la fois : la bulle de celui qui parle,\n * l'icône de celui qui a un souci, ou l'étiquette de celui qui travaille.\n */\nexport function Annonce({ vue, pose, parole }: { vue: Vue; pose: Pose; parole: string | null }) {\n const t = useTextes()\n const { statut, fiche } = vue\n const { haut } = cadrage(pose)\n const x = Math.round(pose.x)\n\n if (parole) return \n\n if (pose.assise === 'bureau' && (statut === 'en-echec' || statut === 'en-retard')) {\n return (\n \n \n \n \n {statut === 'en-echec' ? '!' : 'z'}\n \n \n \n )\n }\n\n /* Endormi : la machine dormait, rien n'est cassé. Pas de pancarte d'alerte,\n des « z » qui montent doucement, dans un indigo de nuit. */\n if (pose.assise === 'bureau' && statut === 'endormi') {\n return (\n \n {[0, 1, 2].map((i) => (\n /* Visibles d'emblée : la boucle de la salle se fige au calme, et un « z »\n parti de zéro y resterait. L'animation ne fait que les faire respirer. */\n \n z\n \n \n ))}\n \n )\n }\n\n if (statut !== 'au-travail') return null\n const libelle = t.statuses[statut]\n const largeur = Math.round(Math.max(fiche.nom.length * 5.4, libelle.length * 4.6 + 12) + 12)\n return (\n \n \n \n \n {fiche.nom}\n \n \n \n {libelle}\n \n \n )\n}\n\n/** Une bulle de bande dessinée, en pixels ; « … » fait danser trois points. */\nexport function Parole({ x, haut, texte }: { x: number; haut: number; texte: string }) {\n const points = texte === '…'\n const court = texte.length > 46 ? `${texte.slice(0, 45)}…` : texte\n const largeur = points ? 26 : Math.round(court.length * 4.5 + 12)\n const gauche = Math.min(Math.max(x - largeur / 2, 8), LARGEUR - largeur - 8)\n const y = haut - 24\n return (\n \n \n \n \n \n {points ? (\n [7, 13, 19].map((dx, i) => (\n \n \n \n ))\n ) : (\n \n {court}\n \n )}\n \n )\n}\n", "type": "registry:component", "target": "components/pixel-openspace/people.tsx" }, { "path": "registry/pixel-openspace/sound.ts", "content": "/*\n * Le son 8 bits, joué sans fichier : quelques notes carrées.\n */\n\n/** Un son 8 bits, joué à la volée sans fichier : quelques notes carrées. */\nexport function jouerNotes(audio: AudioContext, notes: Array<[number, number]>) {\n let t = audio.currentTime\n for (const [frequence, duree] of notes) {\n const osc = audio.createOscillator()\n const volume = audio.createGain()\n osc.type = 'square'\n osc.frequency.value = frequence\n volume.gain.setValueAtTime(0.04, t)\n volume.gain.exponentialRampToValueAtTime(0.0001, t + duree)\n osc.connect(volume).connect(audio.destination)\n osc.start(t)\n osc.stop(t + duree)\n t += duree\n }\n}\n\nexport const SONS = {\n /** Un agent se met au travail : un petit bip montant. */\n travail: [\n [660, 0.07],\n [880, 0.09],\n ],\n /** Un agent tombe en échec : deux notes qui descendent. */\n echec: [\n [440, 0.18],\n [262, 0.3],\n ],\n /** Un visiteur pousse la porte : ding-dong. */\n sonnette: [\n [988, 0.2],\n [784, 0.35],\n ],\n} satisfies Record>\n", "type": "registry:lib", "target": "components/pixel-openspace/sound.ts" }, { "path": "registry/pixel-openspace/engine.ts", "content": "/**\n * Le plan de l'open space et la vie qui s'y mène : où sont les bureaux, le\n * coin café, le bureau vitré du chef, et comment chacun s'y déplace. Sans\n * React ni DOM, pour que les trajets se testent seuls ; la page dessine ce\n * que `avancer` calcule.\n *\n * Les coordonnées sont celles du `viewBox` SVG. Un angle de 0 regarde vers le\n * haut, 90 vers la droite.\n */\n\nimport type { Columns } from './types'\nimport { TEXTS, type Phrases } from './i18n'\n\n/** An agent's state, as the engine reads it. */\nexport type Statut = 'au-travail' | 'a-jour' | 'en-retard' | 'endormi' | 'en-echec' | 'absent' | 'jamais' | 'a-la-demande'\n\nexport type Point = { x: number; y: number }\n\n/**\n * Un endroit où se tenir, le chemin qui y mène depuis l'allée, où regarder\n * une fois arrivé, et si l'on s'y assoit.\n */\nexport type Lieu = { nom: string; pos: Point; acces: Array; face: number; assis?: boolean }\n\n/** Où aller, combien de temps y rester, et ce qu'on y dit en arrivant. */\nexport type Etape = { lieu: Lieu; pause: number; dire?: string }\n\nexport const LARGEUR = 1000\n/** Le plateau d'un bureau. */\nexport const BUREAU = { largeur: 120, hauteur: 50 }\n/**\n * L'écart entre deux bureaux voisins, selon le nombre de colonnes. Les rangées\n * restent centrées dans la salle ; à six, le couloir entre deux bureaux se\n * resserre, mais laisse encore passer quelqu'un.\n */\nconst PAS: Record = { 4: 200, 5: 175, 6: 152 }\nconst HAUT = 300\nconst RANGEE = 170\n/** L'allée du haut, qui longe le bureau du chef et le coin café. */\nconst ALLEE_HAUT = 262\n/** Des unités du plan par seconde : un pas tranquille. */\nconst VITESSE = 85\n\nexport const CHEF_ID = 'chef'\n\nexport type PlaceBureau = { id: string; cx: number; dy: number; siege: Lieu; visite: Lieu }\n\nexport type Plan = {\n hauteur: number\n bureaux: Array\n chef: PlaceBureau\n /** Les coins où l'on va se dégourdir les jambes. */\n pauses: Array\n /** La porte d'entrée, en bas de la grande salle, par où passent visiteurs et livreurs. */\n entree: Lieu\n /** Le pied de la pile de cartons, où le livreur dépose son colis. */\n cartons: Lieu\n /** Devant le grand écran mural, où le chef fait son rapport. */\n ecranMural: Lieu\n /** Ce que disent les gens de la salle, dans la langue choisie. */\n phrases: Phrases\n /** Les passages verticaux entre les colonnes de bureaux. */\n couloirs: Array\n}\n\nconst chaiseY = (dy: number) => dy + BUREAU.hauteur + 22\n\n/**\n * Un coin de pause d'un thème, dans les pièces du haut : où se tenir, où regarder\n * (0 vers le haut, 180 vers le bas), et si l'on s'y assoit. Le premier compte\n * double, comme le second : c'est le café et son voisin.\n */\nexport type CoinDePause = { nom: string; x: number; y: number; face?: number; assis?: boolean }\n\n/* Les coins du thème geek : la cuisine à droite, le coin gaming au milieu. */\nexport const COINS_GEEK: Array = [\n { nom: 'cafe', x: 768, y: 100 },\n { nom: 'distributeur', x: 881, y: 104 },\n { nom: 'frigo', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'etabli', x: 636, y: 108 },\n // Sur les poufs, face à la télé : de dos.\n { nom: 'pouf-gauche', x: 482, y: 146, assis: true },\n { nom: 'pouf-droite', x: 538, y: 146, assis: true },\n]\n\nexport function plan(\n ids: Array,\n phrases: Phrases = TEXTS.en.phrases,\n coins: Array = COINS_GEEK,\n colonnes: Columns = 5,\n): Plan {\n const pas = PAS[colonnes] ?? PAS[5]\n const parRangee = PAS[colonnes] ? colonnes : 5\n const x0 = LARGEUR / 2 - ((parRangee - 1) * pas) / 2\n const rangees = Math.max(1, Math.ceil(ids.length / parRangee))\n const bureaux = ids.map((id, i) => {\n const cx = x0 + (i % parRangee) * pas\n const dy = HAUT + Math.floor(i / parRangee) * RANGEE\n const allee = dy + 108\n return {\n id,\n cx,\n dy,\n siege: { nom: `siege:${id}`, pos: { x: cx, y: chaiseY(dy) - 4 }, acces: [{ x: cx, y: allee }], face: 0, assis: true },\n visite: { nom: `visite:${id}`, pos: { x: cx + 76, y: chaiseY(dy) }, acces: [{ x: cx + 76, y: allee }], face: -90 },\n }\n })\n\n // Le chef trône derrière son bureau, face à la pièce : il en fait le tour par la droite pour s'asseoir.\n const chef: PlaceBureau = {\n id: CHEF_ID,\n cx: 205,\n dy: 110,\n siege: {\n nom: 'siege:chef',\n pos: { x: 205, y: 102 },\n acces: [\n { x: 260, y: ALLEE_HAUT },\n { x: 260, y: 182 },\n { x: 300, y: 182 },\n { x: 300, y: 96 },\n { x: 205, y: 96 },\n ],\n face: 180,\n assis: true,\n },\n visite: {\n nom: 'visite:chef',\n pos: { x: 300, y: 140 },\n acces: [\n { x: 260, y: ALLEE_HAUT },\n { x: 260, y: 182 },\n { x: 300, y: 182 },\n ],\n face: -90,\n },\n }\n\n // Les coins de pause viennent du thème : on y entre par le bas, droit devant soi, depuis l'allée du haut.\n const pauses: Array = coins.map((c) => ({\n nom: c.nom,\n pos: { x: c.x, y: c.y },\n acces: [{ x: c.x, y: ALLEE_HAUT }],\n face: c.face ?? 0,\n assis: c.assis ?? false,\n }))\n\n const hauteur = HAUT + rangees * RANGEE + 10\n const derniereAllee = HAUT + (rangees - 1) * RANGEE + 108\n return {\n hauteur,\n bureaux,\n chef,\n pauses,\n phrases,\n entree: { nom: 'entree', pos: { x: 500, y: hauteur - 26 }, acces: [{ x: 500, y: derniereAllee }], face: 0 },\n cartons: { nom: 'cartons', pos: { x: 140, y: hauteur - 46 }, acces: [{ x: 140, y: derniereAllee }], face: -90 },\n ecranMural: { nom: 'ecran-mural', pos: { x: 130, y: ALLEE_HAUT + 4 }, acces: [{ x: 130, y: ALLEE_HAUT }], face: 0 },\n couloirs: Array.from({ length: parRangee + 1 }, (_, k) => x0 - pas / 2 + k * pas),\n }\n}\n\n/**\n * Le chemin d'un lieu à un autre : sortir par son accès jusqu'à l'allée,\n * changer d'allée par le couloir le plus proche, puis entrer par l'accès du\n * lieu visé. On ne traverse jamais un bureau.\n */\nexport function trajet(de: Lieu, vers: Lieu, couloirs: Array): Array {\n if (de === vers) return []\n const points = [...de.acces].reverse()\n const a = points.at(-1) ?? de.pos\n const b = vers.acces[0] ?? vers.pos\n if (Math.abs(a.y - b.y) > 1) {\n const milieu = (a.x + b.x) / 2\n const x = couloirs.reduce((p, c) => (Math.abs(c - milieu) < Math.abs(p - milieu) ? c : p))\n points.push({ x, y: a.y }, { x, y: b.y })\n }\n points.push(...vers.acces, vers.pos)\n return points\n}\n\nexport type Marcheur = {\n id: string\n pos: Point\n angle: number\n lieu: Lieu\n chemin: Array\n /** Le temps à rester où l'on est, en ms. */\n attente: number\n programme: Array\n /** Le temps passé à marcher, qui balance les pieds. */\n pas: number\n /** Ce qu'il dira en arrivant, puis ce qu'il dit une fois arrivé. */\n dire: string | null\n parole: string | null\n /** Le livreur porte son colis jusqu'aux cartons. */\n porte: boolean\n /** Un visiteur ressorti par la porte : la page peut l'oublier. */\n parti: boolean\n}\n\nexport function marcheur(id: string, siege: Lieu, attente: number): Marcheur {\n return {\n id,\n pos: { ...siege.pos },\n angle: siege.face,\n lieu: siege,\n chemin: [],\n attente,\n programme: [],\n pas: 0,\n dire: null,\n parole: null,\n porte: false,\n parti: false,\n }\n}\n\n/** Ceux qui ne font que passer : le client qui apporte sa demande, le livreur et son colis. */\nexport type Invite = 'visiteur' | 'livreur'\n\nexport const estInvite = (id: string) => id.startsWith('visiteur:') || id.startsWith('livreur:')\n\nexport const CHAT_ID = 'chat'\n\n/** Le chat d'atelier, qui commence sa journée roulé sur un siège. */\nexport function chat(p: Plan): Marcheur {\n // Le dernier siège du thème (un pouf, un banc…), sinon le premier coin venu.\n const pouf = [...p.pauses].reverse().find((l) => l.assis) ?? p.pauses[0]\n return marcheur(CHAT_ID, pouf, 6_000)\n}\n\n/** Le dessus d'un bureau, où le chat saute faire la sieste. */\nconst bureauDuChat = (b: PlaceBureau): Lieu => {\n const allee = b.siege.acces[0].y\n return { nom: `bureau-chat:${b.id}`, pos: { x: b.cx + 32, y: b.dy + 38 }, acces: [{ x: b.cx + 32, y: allee }], face: 90, assis: true }\n}\n\n/**\n * Le chat va où il veut : faire la sieste sur un bureau dont l'agent s'est\n * levé (ou est absent), traîner au coin café ou sur les poufs, longtemps.\n */\nfunction programmeChat(p: Plan, marcheurs: Array, statuts: Map, hasard: () => number): Array {\n const libres = p.bureaux.filter((b) => {\n const agent = marcheurs.find((m) => m.id === b.id)\n return statuts.get(b.id) === 'absent' || (agent && agent.lieu !== b.siege)\n })\n if (libres.length && hasard() < 0.6) {\n const b = libres[Math.floor(hasard() * libres.length)]\n return [{ lieu: bureauDuChat(b), pause: entre(180_000, 360_000, hasard), dire: 'z' }]\n }\n const coin = p.pauses[Math.floor(hasard() * p.pauses.length)]\n return [{ lieu: coin, pause: entre(60_000, 180_000, hasard) }]\n}\n\n/**\n * Un invité entre par la porte : le visiteur va saluer le chef dans son\n * bureau, le livreur dépose son colis au pied des cartons ; puis chacun\n * ressort par où il est venu.\n */\nexport function invite(p: Plan, genre: Invite, numero: number): Marcheur {\n const m = marcheur(`${genre}:${numero}`, p.entree, 0)\n m.programme =\n genre === 'visiteur'\n ? [\n { lieu: p.chef.visite, pause: 5_000, dire: p.phrases.visitor },\n { lieu: p.entree, pause: 0 },\n ]\n : [\n { lieu: p.cartons, pause: 3_000, dire: p.phrases.courier },\n { lieu: p.entree, pause: 0 },\n ]\n m.porte = genre === 'livreur'\n return m\n}\n\n/** Ceux que leur état cloue au bureau : le travail, ou le souci qui les y retient. */\nexport const auBureau = (s: Statut | undefined) =>\n s === 'au-travail' || s === 'en-echec' || s === 'en-retard' || s === 'endormi'\n\nfunction partir(m: Marcheur, etape: Etape, couloirs: Array) {\n m.chemin = trajet(m.lieu, etape.lieu, couloirs)\n m.lieu = etape.lieu\n m.attente = etape.pause\n m.dire = etape.dire ?? null\n m.parole = null\n if (!m.chemin.length) arriver(m)\n}\n\nfunction arriver(m: Marcheur) {\n m.angle = m.lieu.face\n m.parole = m.dire\n if (m.lieu.nom === 'cartons') m.porte = false\n}\n\nfunction marcher(m: Marcheur, dt: number) {\n let reste = (VITESSE * dt) / 1000\n while (reste > 0 && m.chemin.length) {\n const cible = m.chemin[0]\n const dx = cible.x - m.pos.x\n const dy = cible.y - m.pos.y\n const d = Math.hypot(dx, dy)\n if (d > 0.01) m.angle = (Math.atan2(dx, -dy) * 180) / Math.PI\n if (d <= reste) {\n m.pos = { ...cible }\n m.chemin.shift()\n reste -= d\n } else {\n m.pos = { x: m.pos.x + (dx / d) * reste, y: m.pos.y + (dy / d) * reste }\n reste = 0\n }\n }\n m.pas += dt\n if (!m.chemin.length) arriver(m)\n}\n\nconst entre = (min: number, max: number, hasard: () => number) => min + hasard() * (max - min)\n\n/** Un agent désœuvré : un tour au café, à la fontaine ou chez un collègue, puis retour au bureau. */\nfunction programmeAgent(p: Plan, place: PlaceBureau, presents: Array, hasard: () => number): Array {\n const collegues = presents.filter((b) => b.id !== place.id).map((b) => b.visite)\n const collegue = collegues[Math.floor(hasard() * collegues.length)]\n // Le café et la fontaine comptent double, et l'on passe parfois voir un collègue.\n const choix = [...p.pauses, ...p.pauses.slice(0, 2), ...(collegue ? [collegue, collegue] : [])]\n const lieu = choix[Math.floor(hasard() * choix.length)] ?? p.pauses[0]\n return [\n // Chez un collègue, on bavarde. Les sorties sont rares et longues : moins de pas, moins à redessiner.\n { lieu, pause: entre(30_000, 90_000, hasard), dire: lieu === collegue ? '…' : undefined },\n { lieu: place.siege, pause: entre(180_000, 480_000, hasard) },\n ]\n}\n\n/**\n * Le chef en ronde commence par ceux qui ont un souci, qu'il relance, puis\n * passe aux autres bureaux. Hors de sa ronde, il reste au chevet d'un agent\n * en échec jusqu'à ce qu'il soit relancé ; sinon il va voir qui est en\n * retard, ou se sert un café.\n */\nfunction programmeChef(\n p: Plan,\n statut: Statut | undefined,\n presents: Array,\n soucis: Array,\n echecs: Set,\n annonces: Array,\n hasard: () => number,\n): Array {\n const annoncer = annonces.map((a) => ({ lieu: p.ecranMural, pause: 6_000, dire: a }))\n if (statut === 'au-travail') {\n const autres = presents.filter((b) => !soucis.includes(b))\n const rapport = p.phrases.report(autres.length, soucis.length)\n return [\n ...soucis.map((b) => ({ lieu: b.visite, pause: 3_500, dire: p.phrases.relaunch })),\n ...autres.map((b) => ({ lieu: b.visite, pause: 1_500 })),\n // La ronde finie, il fait son rapport devant le grand écran.\n { lieu: p.ecranMural, pause: 6_000, dire: rapport },\n // Puis ce qui ne doit pas être oublié : les annonces qu'on lui a confiées.\n ...annoncer,\n { lieu: p.chef.siege, pause: 3_000 },\n ]\n }\n const enEchec = soucis.find((b) => echecs.has(b.id))\n if (enEchec) return [{ lieu: enEchec.visite, pause: 60_000, dire: p.phrases.stayingHere }]\n // Une annonce en attente : de temps en temps, il va la redire devant l'écran.\n if (annoncer.length && hasard() < 0.5) return [...annoncer, { lieu: p.chef.siege, pause: entre(240_000, 600_000, hasard) }]\n const souci = soucis.length ? soucis[Math.floor(hasard() * soucis.length)] : null\n return [\n souci\n ? { lieu: souci.visite, pause: entre(3_000, 5_000, hasard), dire: p.phrases.anyTrouble }\n : { lieu: p.pauses[0], pause: entre(3_000, 5_000, hasard) },\n { lieu: p.chef.siege, pause: entre(240_000, 600_000, hasard) },\n ]\n}\n\n/** Fait vivre l'open space pendant `dt` millisecondes. */\nexport function avancer(\n p: Plan,\n marcheurs: Array,\n statuts: Map,\n dt: number,\n hasard: () => number = Math.random,\n annonces: Array = [],\n /** La nuit, les désœuvrés regagnent leur bureau et n'en bougent plus ; le chat dort où il est. */\n nuit = false,\n) {\n const presents = p.bureaux.filter((b) => statuts.get(b.id) !== 'absent')\n const soucis = presents.filter((b) => ['en-echec', 'en-retard'].includes(statuts.get(b.id) ?? ''))\n const echecs = new Set(soucis.filter((b) => statuts.get(b.id) === 'en-echec').map((b) => b.id))\n\n for (const m of marcheurs) {\n if (m.id === CHAT_ID) {\n if (m.chemin.length) marcher(m, dt)\n else if (!nuit && (m.attente -= dt) <= 0) partir(m, programmeChat(p, marcheurs, statuts, hasard)[0], p.couloirs)\n continue\n }\n if (estInvite(m.id)) {\n if (m.chemin.length) marcher(m, dt)\n else if ((m.attente -= dt) > 0) continue\n else if (m.programme.length) partir(m, m.programme.shift()!, p.couloirs)\n else m.parti = true\n continue\n }\n const chef = m.id === CHEF_ID\n const place = chef ? p.chef : p.bureaux.find((b) => b.id === m.id)\n if (!place) continue\n const statut = statuts.get(m.id)\n\n if (m.chemin.length) {\n marcher(m, dt)\n continue\n }\n if (statut === 'absent') {\n Object.assign(m, marcheur(m.id, place.siege, 0))\n continue\n }\n const cloue = chef ? statut === 'en-echec' || statut === 'en-retard' : auBureau(statut)\n if (cloue) {\n m.programme = []\n if (m.lieu !== place.siege) partir(m, { lieu: place.siege, pause: 1_000 }, p.couloirs)\n continue\n }\n // Le chef lancé pendant qu'il est assis part en ronde sans finir son café.\n if (chef && statut === 'au-travail' && m.lieu === place.siege && !m.programme.length) m.attente = Math.min(m.attente, 1_500)\n // Au chevet d'un agent qui n'est plus en échec, il s'en va ; et un nouvel échec le fait se lever.\n if (chef && !m.programme.length) {\n const veille = m.lieu.nom.startsWith('visite:') ? m.lieu.nom.slice('visite:'.length) : null\n if (veille && m.dire === p.phrases.stayingHere && !echecs.has(veille)) m.attente = Math.min(m.attente, 1_000)\n if (m.lieu === place.siege && echecs.size && statut !== 'au-travail') m.attente = Math.min(m.attente, 2_000)\n }\n\n // La nuit, hors de la ronde du chef, chacun reste ou rentre à son bureau.\n if (nuit && !(chef && statut === 'au-travail')) {\n m.programme = []\n if (m.lieu !== place.siege) partir(m, { lieu: place.siege, pause: 1_000 }, p.couloirs)\n continue\n }\n m.attente -= dt\n if (m.attente > 0) continue\n if (!m.programme.length) {\n m.programme = chef ? programmeChef(p, statut, presents, soucis, echecs, annonces, hasard) : programmeAgent(p, place, presents, hasard)\n }\n partir(m, m.programme.shift()!, p.couloirs)\n }\n}\n", "type": "registry:component", "target": "components/pixel-openspace/engine.ts" }, { "path": "registry/pixel-openspace/arcade.tsx", "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'\nimport { Kbd } from '@/components/ui/kbd'\nimport type { Texts } from './i18n'\n\n/** Les jeux des deux bornes du coin gaming. */\nexport type Jeu = 'snake' | 'casse-briques'\n\n/** La toile, carrée, en pixels. */\nconst COTE = 320\n\ntype Partie = {\n /** Appelé à chaque point marqué, avec le total. */\n marquer: (points: number) => void\n /** Appelé quand la partie est perdue. */\n perdre: () => void\n}\n\n/** Ce qu'une borne sait de son jeu : son nom, ses couleurs, ses commandes, et comment le lancer. */\nconst BORNES: Record<\n Jeu,\n { cadre: string; fond: string; accent: string; lancer: (ctx: CanvasRenderingContext2D, p: Partie) => () => void }\n> = {\n snake: {\n cadre: 'border-violet-700',\n fond: 'bg-violet-950',\n accent: 'text-pink-400',\n lancer: lancerSnake,\n },\n 'casse-briques': {\n cadre: 'border-cyan-600',\n fond: 'bg-slate-950',\n accent: 'text-cyan-300',\n lancer: lancerCasseBriques,\n },\n}\n\nconst cleRecord = (jeu: Jeu) => `pixel-openspace:record-${jeu}`\n\n/** Le meilleur score de ce jeu dans ce navigateur. */\nexport function lireRecord(jeu: Jeu): number {\n try {\n return Number(localStorage.getItem(cleRecord(jeu)) ?? 0)\n } catch {\n return 0\n }\n}\n\n/** L'écran d'une borne au repos, ou après une partie perdue. */\nfunction ecranTitre(ctx: CanvasRenderingContext2D, jeu: Jeu, perdu: boolean, textes: Texts) {\n ctx.fillStyle = '#0b0d10'\n ctx.fillRect(0, 0, COTE, COTE)\n ctx.textAlign = 'center'\n if (perdu) {\n ctx.fillStyle = '#ef4444'\n ctx.font = '22px monospace'\n ctx.fillText(textes.arcade.gameOver, COTE / 2, COTE / 2 - 16)\n } else {\n ctx.fillStyle = jeu === 'snake' ? '#f472b6' : '#67e8f9'\n ctx.font = '18px monospace'\n ctx.fillText(textes.arcade.title[jeu === 'snake' ? 'snake' : 'breakout'], COTE / 2, COTE / 2 - 16)\n }\n ctx.fillStyle = '#e5e7eb'\n ctx.font = '12px monospace'\n ctx.fillText(perdu ? textes.arcade.replay : textes.arcade.pressPlay, COTE / 2, COTE / 2 + 14)\n}\n\n/**\n * Une borne d'arcade du coin gaming. Elle s'allume sur son écran titre et\n * attend qu'on appuie sur JOUER (ou Entrée, ou Espace) ; Échap la ferme. Le\n * record de chaque jeu reste dans ce navigateur.\n */\nexport function JeuArcade({ jeu, textes, fermer }: { jeu: Jeu; textes: Texts; fermer: () => void }) {\n const titre = textes.arcade.title[jeu === 'snake' ? 'snake' : 'breakout']\n const aide = textes.arcade.help[jeu === 'snake' ? 'snake' : 'breakout']\n const borne = BORNES[jeu]\n const [toile, setToile] = useState(null)\n const [score, setScore] = useState(0)\n // La borne ne s'ouvre que dans le navigateur, sur un clic : son record s'y lit dès l'ouverture.\n const [record, setRecord] = useState(() => lireRecord(jeu))\n const [phase, setPhase] = useState<'titre' | 'jeu' | 'perdu'>('titre')\n const [partie, setPartie] = useState(0)\n\n /* Hors partie, l'écran titre ; en partie, le jeu tourne jusqu'à la défaite. */\n useEffect(() => {\n const ctx = toile?.getContext('2d')\n if (!ctx) return\n if (phase !== 'jeu') {\n ecranTitre(ctx, jeu, phase === 'perdu', textes)\n return\n }\n let total = 0\n return borne.lancer(ctx, {\n marquer: (points) => {\n total = points\n setScore(points)\n },\n perdre: () => {\n if (total > lireRecord(jeu)) {\n try {\n localStorage.setItem(cleRecord(jeu), String(total))\n } catch {\n /* Pas de stockage : le record ne survivra pas, tant pis. */\n }\n setRecord(total)\n }\n setPhase('perdu')\n },\n })\n }, [phase, partie, jeu, borne, textes, toile])\n\n const jouer = () => {\n setScore(0)\n setPartie((p) => p + 1)\n setPhase('jeu')\n }\n\n useEffect(() => {\n const touche = (e: KeyboardEvent) => {\n if ((e.key === 'Enter' || e.key === ' ') && phase !== 'jeu') {\n e.preventDefault()\n jouer()\n }\n }\n window.addEventListener('keydown', touche)\n return () => window.removeEventListener('keydown', touche)\n })\n\n return (\n !ouverte && fermer()}>\n \n \n {titre}\n \n \n \n \n {textes.arcade.score} {String(score).padStart(3, '0')}\n \n \n \n {textes.arcade.record} {String(record).padStart(3, '0')}\n \n \n

\n {aide} · Enter {textes.arcade.toPlay} · Esc {textes.arcade.toClose}\n

\n \n \n )\n}\n\n/* ——— Le Snake des composants ——— */\n\nconst CASES = 20\nconst CASE = COTE / CASES\n\ntype Case = { x: number; y: number }\n\n/* Ce que le serpent mange : des composants, chacun sa couleur. */\nconst COMPOSANTS = ['#22c55e', '#e3b95a', '#38bdf8', '#a855f7']\n\nconst DIRECTIONS: Record = {\n ArrowUp: { x: 0, y: -1 },\n ArrowDown: { x: 0, y: 1 },\n ArrowLeft: { x: -1, y: 0 },\n ArrowRight: { x: 1, y: 0 },\n z: { x: 0, y: -1 },\n s: { x: 0, y: 1 },\n q: { x: -1, y: 0 },\n d: { x: 1, y: 0 },\n}\n\n/** Un serpent en nappe de câbles RGB, qui avale des composants et grandit d'autant. */\nfunction lancerSnake(ctx: CanvasRenderingContext2D, { marquer, perdre }: Partie) {\n let serpent: Array = [\n { x: 9, y: 10 },\n { x: 8, y: 10 },\n { x: 7, y: 10 },\n ]\n let direction: Case = { x: 1, y: 0 }\n let prochaine = direction\n let points = 0\n const poser = () => {\n let c: Case\n do c = { x: Math.floor(Math.random() * CASES), y: Math.floor(Math.random() * CASES) }\n while (serpent.some((s) => s.x === c.x && s.y === c.y))\n return { ...c, couleur: COMPOSANTS[Math.floor(Math.random() * COMPOSANTS.length)] }\n }\n let miam = poser()\n\n const dessiner = () => {\n ctx.fillStyle = '#0b0d10'\n ctx.fillRect(0, 0, COTE, COTE)\n ctx.fillStyle = '#111827'\n for (let i = 0; i < CASES; i++) for (let j = i % 2; j < CASES; j += 2) ctx.fillRect(i * CASE, j * CASE, CASE, CASE)\n // Le composant à avaler, avec ses pattes de puce.\n ctx.fillStyle = miam.couleur\n ctx.fillRect(miam.x * CASE + 3, miam.y * CASE + 3, CASE - 6, CASE - 6)\n ctx.fillStyle = '#9ca3af'\n for (let k = 0; k < 3; k++) {\n ctx.fillRect(miam.x * CASE + 4 + k * 3, miam.y * CASE + 1, 1, 2)\n ctx.fillRect(miam.x * CASE + 4 + k * 3, miam.y * CASE + CASE - 3, 1, 2)\n }\n serpent.forEach((s, i) => {\n ctx.fillStyle = i === 0 ? '#f8fafc' : `hsl(${(i * 24 + points * 10) % 360} 85% 60%)`\n ctx.fillRect(s.x * CASE + 1, s.y * CASE + 1, CASE - 2, CASE - 2)\n })\n }\n\n const avancer = () => {\n direction = prochaine\n const tete = { x: serpent[0].x + direction.x, y: serpent[0].y + direction.y }\n const mur = tete.x < 0 || tete.y < 0 || tete.x >= CASES || tete.y >= CASES\n if (mur || serpent.some((s) => s.x === tete.x && s.y === tete.y)) {\n clearInterval(t)\n perdre()\n return\n }\n serpent = [tete, ...serpent]\n if (tete.x === miam.x && tete.y === miam.y) {\n points += 1\n marquer(points)\n miam = poser()\n } else {\n serpent.pop()\n }\n dessiner()\n }\n\n const touche = (e: KeyboardEvent) => {\n const d = DIRECTIONS[e.key]\n if (!d) return\n e.preventDefault()\n // Pas de demi-tour sur soi-même.\n if (d.x !== -direction.x || d.y !== -direction.y) prochaine = d\n }\n window.addEventListener('keydown', touche)\n dessiner()\n const t = setInterval(avancer, 120)\n return () => {\n clearInterval(t)\n window.removeEventListener('keydown', touche)\n }\n}\n\n/* ——— Le Casse-puces ——— */\n\nconst COLONNES = 8\nconst RANGEES = 5\nconst BRIQUE = { largeur: 36, hauteur: 12, marge: 3, haut: 36 }\nconst RAQUETTE = { largeur: 56, hauteur: 6, y: COTE - 22 }\n/* Une rangée par famille de puces : GPU, CPU, RAM, SSD, carte mère. */\nconst RANGS = ['#e3b95a', '#22c55e', '#38bdf8', '#a855f7', '#ef4444']\n\n/**\n * Un casse-briques où les briques sont des puces : la raquette renvoie la\n * bille, chaque puce cassée rapporte dix points, et un tableau vidé en remet\n * un, plus rapide. Trois billes par partie.\n */\nfunction lancerCasseBriques(ctx: CanvasRenderingContext2D, { marquer, perdre }: Partie) {\n const gauche = (COTE - COLONNES * (BRIQUE.largeur + BRIQUE.marge) + BRIQUE.marge) / 2\n const nouveauTableau = () =>\n Array.from({ length: RANGEES * COLONNES }, (_, i) => ({\n x: gauche + (i % COLONNES) * (BRIQUE.largeur + BRIQUE.marge),\n y: BRIQUE.haut + Math.floor(i / COLONNES) * (BRIQUE.hauteur + BRIQUE.marge),\n couleur: RANGS[Math.floor(i / COLONNES)],\n vivante: true,\n }))\n let briques = nouveauTableau()\n let raquette = (COTE - RAQUETTE.largeur) / 2\n let vitesse = 3.2\n let bille = { x: COTE / 2, y: RAQUETTE.y - 10, vx: 2, vy: -vitesse }\n let billes = 3\n let points = 0\n const appuyees = new Set()\n\n const relancer = () => {\n bille = { x: raquette + RAQUETTE.largeur / 2, y: RAQUETTE.y - 10, vx: (Math.random() < 0.5 ? -1 : 1) * 2, vy: -vitesse }\n }\n\n const dessiner = () => {\n ctx.fillStyle = '#020617'\n ctx.fillRect(0, 0, COTE, COTE)\n for (const b of briques) {\n if (!b.vivante) continue\n ctx.fillStyle = b.couleur\n ctx.fillRect(b.x, b.y, BRIQUE.largeur, BRIQUE.hauteur)\n // Les pattes dorées de la puce.\n ctx.fillStyle = 'rgb(0 0 0 / 0.35)'\n ctx.fillRect(b.x + 4, b.y + 3, BRIQUE.largeur - 8, BRIQUE.hauteur - 6)\n }\n ctx.fillStyle = '#e5e7eb'\n ctx.fillRect(raquette, RAQUETTE.y, RAQUETTE.largeur, RAQUETTE.hauteur)\n ctx.fillStyle = '#22d3ee'\n ctx.fillRect(raquette, RAQUETTE.y + RAQUETTE.hauteur - 2, RAQUETTE.largeur, 2)\n ctx.fillStyle = '#f8fafc'\n ctx.fillRect(bille.x - 3, bille.y - 3, 6, 6)\n for (let i = 0; i < billes; i++) {\n ctx.fillStyle = '#f472b6'\n ctx.fillRect(8 + i * 10, 10, 6, 6)\n }\n }\n\n let image = 0\n const tour = () => {\n if (appuyees.has('ArrowLeft') || appuyees.has('q')) raquette -= 6\n if (appuyees.has('ArrowRight') || appuyees.has('d')) raquette += 6\n raquette = Math.max(0, Math.min(COTE - RAQUETTE.largeur, raquette))\n\n bille.x += bille.vx\n bille.y += bille.vy\n if (bille.x < 3 || bille.x > COTE - 3) bille.vx *= -1\n if (bille.y < 3) bille.vy = Math.abs(bille.vy)\n\n // La raquette renvoie la bille, d'autant plus en biais qu'elle frappe au bord.\n if (\n bille.vy > 0 &&\n bille.y >= RAQUETTE.y - 3 &&\n bille.y <= RAQUETTE.y + 4 &&\n bille.x >= raquette &&\n bille.x <= raquette + RAQUETTE.largeur\n ) {\n const decalage = (bille.x - (raquette + RAQUETTE.largeur / 2)) / (RAQUETTE.largeur / 2)\n bille.vx = decalage * 4\n bille.vy = -vitesse\n }\n\n for (const b of briques) {\n if (!b.vivante) continue\n if (bille.x > b.x && bille.x < b.x + BRIQUE.largeur && bille.y > b.y && bille.y < b.y + BRIQUE.hauteur) {\n b.vivante = false\n bille.vy *= -1\n points += 10\n marquer(points)\n break\n }\n }\n\n if (briques.every((b) => !b.vivante)) {\n vitesse += 0.6\n briques = nouveauTableau()\n relancer()\n }\n\n if (bille.y > COTE) {\n billes -= 1\n if (billes === 0) {\n dessiner()\n perdre()\n return\n }\n relancer()\n }\n\n dessiner()\n image = requestAnimationFrame(tour)\n }\n\n const bas = (e: KeyboardEvent) => {\n if (['ArrowLeft', 'ArrowRight', 'q', 'd'].includes(e.key)) {\n e.preventDefault()\n appuyees.add(e.key)\n }\n }\n const haut = (e: KeyboardEvent) => appuyees.delete(e.key)\n const souris = (e: MouseEvent) => {\n const r = ctx.canvas.getBoundingClientRect()\n raquette = ((e.clientX - r.left) / r.width) * COTE - RAQUETTE.largeur / 2\n }\n window.addEventListener('keydown', bas)\n window.addEventListener('keyup', haut)\n ctx.canvas.addEventListener('mousemove', souris)\n image = requestAnimationFrame(tour)\n return () => {\n cancelAnimationFrame(image)\n window.removeEventListener('keydown', bas)\n window.removeEventListener('keyup', haut)\n ctx.canvas.removeEventListener('mousemove', souris)\n }\n}\n", "type": "registry:component", "target": "components/pixel-openspace/arcade.tsx" }, { "path": "registry/pixel-openspace/preferences.ts", "content": "/*\n * Ce que le visiteur a réglé derrière la roue dentée, tel qu'il est gardé dans\n * son navigateur. Relu champ par champ : une valeur abîmée ou d'une ancienne\n * version est ignorée plutôt que de faire planter la salle.\n */\n\nimport type { Columns, Language, ThemeName } from './types'\n\n/** Ce que le visiteur a changé ; ce qu'il n'a pas touché suit les props. */\nexport type Preferences = {\n title?: string\n /** Le lieu de la météo à la fenêtre, à la place de celle des props. */\n weatherPlace?: string\n theme?: ThemeName\n language?: Language\n columns?: Columns\n seasonal?: boolean\n night?: boolean\n motion?: boolean\n timeline?: boolean\n}\n\nexport const THEMES: Array = ['geek', 'eighties', 'gym', 'modern', 'kitchen', 'neon']\nexport const LANGUES: Array = ['en', 'fr']\nexport const COLONNES: Array = [4, 5, 6]\nexport const LONGUEUR_ENSEIGNE = 24\n\nconst INTERRUPTEURS = ['seasonal', 'night', 'motion', 'timeline'] as const\n\n/** Ne garde que les réglages valides d'un objet venu du stockage. */\nexport function nettoyerPreferences(brut: unknown): Preferences {\n if (!brut || typeof brut !== 'object' || Array.isArray(brut)) return {}\n const b = brut as Record\n const p: Preferences = {}\n if (typeof b.title === 'string' && b.title.trim()) p.title = b.title.slice(0, LONGUEUR_ENSEIGNE)\n if (typeof b.weatherPlace === 'string' && b.weatherPlace.trim()) p.weatherPlace = b.weatherPlace\n if (THEMES.includes(b.theme as ThemeName)) p.theme = b.theme as ThemeName\n if (LANGUES.includes(b.language as Language)) p.language = b.language as Language\n if (COLONNES.includes(b.columns as Columns)) p.columns = b.columns as Columns\n for (const cle of INTERRUPTEURS) if (typeof b[cle] === 'boolean') p[cle] = b[cle]\n return p\n}\n\nconst CLE = 'pixel-openspace:settings'\n\nexport function lirePreferences(): Preferences {\n try {\n return nettoyerPreferences(JSON.parse(localStorage.getItem(CLE) ?? '{}'))\n } catch {\n return {}\n }\n}\n\nexport function ecrirePreferences(preferences: Preferences) {\n try {\n if (Object.keys(preferences).length) localStorage.setItem(CLE, JSON.stringify(preferences))\n else localStorage.removeItem(CLE)\n } catch {\n /* Navigation privée ou stockage bloqué : le réglage vaut pour cette visite. */\n }\n}\n\n/*\n * Le magasin des préférences : le stockage n'est lu qu'une fois, et toutes les\n * salles ouvertes sont prévenues d'un changement, même dans un autre onglet.\n * Sans React : `navigateur.ts` le branche sur useSyncExternalStore.\n */\nconst AUCUNE: Preferences = {}\nlet enCache: Preferences | null = null\nconst abonnes = new Set<() => void>()\n\nconst prevenir = () => abonnes.forEach((f) => f())\n\n/** Un autre onglet a changé les réglages : on les relira. */\nfunction changeAilleurs(e: StorageEvent) {\n if (e.key !== CLE) return\n enCache = null\n prevenir()\n}\n\nexport function preferencesActuelles(): Preferences {\n return (enCache ??= lirePreferences())\n}\n\n/** Au rendu serveur et pendant l'hydratation : rien n'est encore réglé. */\nexport const preferencesServeur = (): Preferences => AUCUNE\n\nexport function abonnerPreferences(f: () => void) {\n if (!abonnes.size) window.addEventListener('storage', changeAilleurs)\n abonnes.add(f)\n return () => {\n abonnes.delete(f)\n if (!abonnes.size) window.removeEventListener('storage', changeAilleurs)\n }\n}\n\n/** Change quelques réglages ; `null` les efface tous, et les props reprennent la main. */\nexport function changerPreferences(modif: Preferences | null) {\n const apres = modif === null ? {} : nettoyerPreferences({ ...preferencesActuelles(), ...modif })\n enCache = apres\n ecrirePreferences(apres)\n prevenir()\n}\n", "type": "registry:lib", "target": "components/pixel-openspace/preferences.ts" }, { "path": "registry/pixel-openspace/navigateur.ts", "content": "'use client'\n\n/*\n * Ce que seul le navigateur connaît, lu sans décalage avec le rendu serveur :\n * useSyncExternalStore donne la valeur du serveur pendant l'hydratation, puis\n * celle du navigateur, sans état recopié dans un effet.\n */\n\nimport { useSyncExternalStore } from 'react'\nimport { abonnerPreferences, preferencesActuelles, preferencesServeur } from './preferences'\n\nconst sansAbonnement = () => () => {}\n\n/** Vrai dans le navigateur ; faux au rendu serveur et pendant l'hydratation. */\nexport function useDansLeNavigateur() {\n return useSyncExternalStore(\n sansAbonnement,\n () => true,\n () => false,\n )\n}\n\n/** Les réglages du visiteur, à jour dans toutes les salles ouvertes. */\nexport function usePreferences() {\n return useSyncExternalStore(abonnerPreferences, preferencesActuelles, preferencesServeur)\n}\n", "type": "registry:lib", "target": "components/pixel-openspace/navigateur.ts" }, { "path": "registry/pixel-openspace/settings.tsx", "content": "'use client'\n\n/*\n * La fenêtre des réglages, derrière la roue dentée : le thème, la langue, le\n * son, les alertes, les saisons, la nuit et les déplacements. Ce que le\n * visiteur choisit est gardé dans son navigateur et passe avant les props.\n */\n\nimport { SettingsIcon } from 'lucide-react'\nimport { useEffect, useId, useState, type ReactNode } from 'react'\nimport { Button } from '@/components/ui/button'\nimport { ButtonGroup } from '@/components/ui/button-group'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\nimport { Switch } from '@/components/ui/switch'\nimport { COLONNES, LONGUEUR_ENSEIGNE, THEMES, type Preferences } from './preferences'\nimport { useTextes } from './primitives'\nimport type { Columns, Language, ThemeName, Weather } from './types'\nimport { lireMeteo, localiser, type Endroit } from './weather'\n\n/** Où en est la recherche du lieu choisi dans les réglages. */\nexport type EtatMeteo = { etat: 'aucun' } | { etat: 'recherche' } | { etat: 'introuvable' } | { etat: 'trouve'; meteo: Weather }\n\n/**\n * La météo du lieu tapé dans les réglages : cherchée une fois la frappe\n * finie, puis relue toutes les quinze minutes.\n */\nexport function useMeteoDuLieu(lieu: string | undefined, langue: Language): EtatMeteo {\n const cherche = lieu?.trim()\n // Le dernier résultat, avec le lieu qu'il concerne : un résultat pour un autre lieu ne compte plus.\n const [resultat, setResultat] = useState<{ lieu: string; etat: EtatMeteo } | null>(null)\n useEffect(() => {\n if (!cherche) return\n let fini = false\n let endroit: Endroit | null = null\n const lire = async () => {\n try {\n endroit ??= await localiser(cherche, langue)\n const meteo = { ...(await lireMeteo(endroit)), place: endroit.nom ?? cherche }\n if (!fini) setResultat({ lieu: cherche, etat: { etat: 'trouve', meteo } })\n } catch {\n if (!fini && !endroit) setResultat({ lieu: cherche, etat: { etat: 'introuvable' } })\n }\n }\n // Une recherche par lieu, pas une par lettre tapée.\n const attente = setTimeout(lire, 700)\n const minuterie = setInterval(lire, 15 * 60_000)\n return () => {\n fini = true\n clearTimeout(attente)\n clearInterval(minuterie)\n }\n }, [cherche, langue])\n if (!cherche) return { etat: 'aucun' }\n return resultat?.lieu === cherche ? resultat.etat : { etat: 'recherche' }\n}\n\nconst NOMS_LANGUES: Array<[Language, string]> = [\n ['en', 'English'],\n ['fr', 'Français'],\n]\n\n/** Un réglage à interrupteur : son nom, une ligne d'explication, et l'interrupteur à droite. */\nfunction Interrupteur({\n nom,\n aide,\n actif,\n changer,\n desactive,\n}: {\n nom: string\n aide: ReactNode\n actif: boolean\n changer: (actif: boolean) => void\n desactive?: boolean\n}) {\n const id = useId()\n return (\n
\n
\n \n

{aide}

\n
\n \n
\n )\n}\n\n/** Un choix parmi quelques boutons, celui retenu en avant. */\nfunction Choix({\n nom,\n options,\n valeur,\n changer,\n}: {\n nom: string\n options: Array<[T, string]>\n valeur: T\n changer: (v: T) => void\n}) {\n return (\n
\n \n \n {options.map(([v, libelle]) => (\n \n ))}\n \n
\n )\n}\n\nexport function Reglages({\n titre,\n titreOrigine,\n lieu,\n lieuOrigine,\n etatMeteo,\n theme,\n colonnes,\n langue,\n saisons,\n nuit,\n mouvement,\n frise,\n son,\n alertes,\n alertesBloquees,\n changer,\n basculerSon,\n basculerAlertes,\n reinitialiser,\n}: {\n /** L'enseigne choisie par le visiteur, vide s'il garde celle des props. */\n titre: string\n titreOrigine: string\n /** Le lieu tapé par le visiteur, vide s'il garde la météo des props. */\n lieu: string\n lieuOrigine?: string\n etatMeteo: EtatMeteo\n theme: ThemeName\n colonnes: Columns\n langue: Language\n saisons: boolean\n nuit: boolean\n mouvement: boolean\n frise: boolean\n son: boolean\n alertes: boolean\n alertesBloquees: boolean\n changer: (preferences: Preferences) => void\n basculerSon: () => void\n basculerAlertes: () => void\n reinitialiser: () => void\n}) {\n const t = useTextes().settings\n // Ouverte et fermée à la main, sans `asChild` ni `render` : la même fenêtre marche avec les styles shadcn Radix et Base UI.\n const [ouverte, setOuverte] = useState(false)\n const idTitre = useId()\n const idLieu = useId()\n const aideMeteo =\n etatMeteo.etat === 'recherche'\n ? t.weatherSearching\n : etatMeteo.etat === 'introuvable'\n ? t.weatherNotFound\n : etatMeteo.etat === 'trouve'\n ? t.weatherFound(etatMeteo.meteo.place ?? lieu, etatMeteo.meteo.temperature)\n : null\n return (\n \n \n \n \n {t.title}\n {t.description}\n \n
\n
\n \n changer({ title: e.target.value || undefined })}\n />\n
\n
\n \n changer({ weatherPlace: e.target.value || undefined })}\n />\n {aideMeteo ? (\n

{aideMeteo}

\n ) : null}\n
\n [n, t.themes[n]])} valeur={theme} changer={(v) => changer({ theme: v })} />\n [String(n) as `${Columns}`, String(n)])}\n valeur={String(colonnes) as `${Columns}`}\n changer={(v) => changer({ columns: Number(v) as Columns })}\n />\n changer({ language: v })} />\n \n \n \n \n changer({ seasonal: v })} />\n changer({ night: v })} />\n changer({ motion: v })} />\n changer({ timeline: v })} />\n
\n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "components/pixel-openspace/settings.tsx" }, { "path": "registry/pixel-openspace/timeline.tsx", "content": "'use client'\n\n/*\n * La journée en frise, sous la salle : une ligne par agent, de minuit à\n * minuit, un point par passage (vert s'il s'est bien passé, rouge sinon), et\n * le trait de l'heure qu'il est. De quoi voir d'un coup d'œil qui a sauté un\n * passage cette nuit.\n */\n\nimport { Card, CardAction, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport { useTextes } from './primitives'\nimport type { Agent } from './types'\n\nconst JOUR_MS = 86_400_000\nconst HEURES = [0, 3, 6, 9, 12, 15, 18, 21, 24]\n\nexport function Frise({ agents, maintenant, choisir }: { agents: Array; maintenant: number; choisir: (id: string) => void }) {\n const t = useTextes()\n const minuit = new Date(maintenant)\n minuit.setHours(0, 0, 0, 0)\n const debut = minuit.getTime()\n const position = (ms: number) => `${Math.min(100, Math.max(0, ((ms - debut) / JOUR_MS) * 100))}%`\n // Seuls les passages d'aujourd'hui entrent dans la frise.\n const lignes = agents.map((a) => ({ agent: a, passages: (a.runs ?? []).filter((r) => Date.parse(r.at) >= debut) }))\n const total = lignes.reduce((n, l) => n + l.passages.length, 0)\n const rates = lignes.reduce((n, l) => n + l.passages.filter((r) => r.ok === false).length, 0)\n const heure = (iso: string) => new Date(iso).toLocaleTimeString(t.locale, { hour: '2-digit', minute: '2-digit' })\n\n return (\n \n \n {t.timeline.title}\n \n {t.timeline.runs(total)}\n {rates ? · {t.timeline.failed(rates)} : null}\n \n \n \n
\n {/* Les heures. */}\n \n
\n {HEURES.map((h) => (\n \n {t.timeline.hour(h)}\n \n ))}\n
\n\n {lignes.map(({ agent, passages }) => (\n
\n \n
\n {[6, 12, 18].map((h) => (\n \n ))}\n {passages.map((r, i) => (\n \n ))}\n \n
\n
\n ))}\n
\n \n \n )\n}\n", "type": "registry:component", "target": "components/pixel-openspace/timeline.tsx" }, { "path": "registry/pixel-openspace/weather.ts", "content": "/*\n * La vraie météo d'un lieu, par Open-Meteo : gratuit, sans clé, et ouvert aux\n * navigateurs (CORS). Le lieu est une ville (« Lanton », « Lyon, France ») ou\n * des coordonnées (« 44.70,-1.04 »). Sans React : le serveur local s'en sert aussi.\n */\n\nimport type { Language, Sky, Weather } from './types'\n\n/** Les codes météo de l'OMS, ramenés à ce qu'une fenêtre en pixels sait dessiner. */\nexport function cielDe(code: number): Sky {\n if (code === 0 || code === 1) return 'clear'\n if (code === 2 || code === 3) return 'clouds'\n if (code === 45 || code === 48) return 'fog'\n if ((code >= 71 && code <= 77) || code === 85 || code === 86) return 'snow'\n if (code >= 95) return 'storm'\n return 'rain'\n}\n\n/** « 44.70,-1.04 » : des coordonnées toutes prêtes, sans passer par la recherche de ville. */\nexport function coordonnees(lieu: string): { latitude: number; longitude: number } | null {\n const m = lieu.trim().match(/^(-?\\d+(?:\\.\\d+)?)\\s*,\\s*(-?\\d+(?:\\.\\d+)?)$/)\n if (!m) return null\n const [latitude, longitude] = [Number(m[1]), Number(m[2])]\n return Math.abs(latitude) <= 90 && Math.abs(longitude) <= 180 ? { latitude, longitude } : null\n}\n\nexport type Endroit = { latitude: number; longitude: number; nom?: string }\n\n/** Trouve une ville ; « Lyon, France » garde le premier mot pour la recherche. */\nexport async function localiser(lieu: string, langue: Language): Promise {\n const direct = coordonnees(lieu)\n if (direct) return direct\n const nom = lieu.split(',')[0].trim()\n const url = `https://geocoding-api.open-meteo.com/v1/search?name=${encodeURIComponent(nom)}&count=1&language=${langue}&format=json`\n const reponse = await fetch(url, { signal: AbortSignal.timeout(5000) })\n const { results } = (await reponse.json()) as { results?: Array<{ latitude: number; longitude: number; name: string }> }\n if (!results?.length) throw new Error(`place not found: ${lieu}`)\n return { latitude: results[0].latitude, longitude: results[0].longitude, nom: results[0].name }\n}\n\nexport async function lireMeteo(endroit: Endroit): Promise> {\n const url =\n `https://api.open-meteo.com/v1/forecast?latitude=${endroit.latitude}&longitude=${endroit.longitude}` +\n '¤t=temperature_2m,weather_code,is_day&timezone=auto'\n const reponse = await fetch(url, { signal: AbortSignal.timeout(5000) })\n if (!reponse.ok) throw new Error(`weather: HTTP ${reponse.status}`)\n const { current } = (await reponse.json()) as { current: { temperature_2m: number; weather_code: number; is_day: number } }\n return { temperature: Math.round(current.temperature_2m), sky: cielDe(current.weather_code), day: current.is_day === 1 }\n}\n", "type": "registry:lib", "target": "components/pixel-openspace/weather.ts" }, { "path": "registry/pixel-openspace/i18n.ts", "content": "import type { Language, ThemeName } from './types'\n\n/** Every word the open space writes or says, in English and in French. */\nexport type Texts = {\n locale: string\n statuses: Record<'au-travail' | 'a-jour' | 'en-retard' | 'endormi' | 'en-echec' | 'absent' | 'jamais' | 'a-la-demande', string>\n leadName: string\n leadRole: string\n leadOffice: string\n nextRuns: string\n nothingPlanned: string\n hiScores: string\n welcome: string\n newDesk: string\n inMinutes: (n: number) => string\n offNote: string\n justNow: string\n minutesAgo: (n: number) => string\n hoursAgo: (n: number) => string\n daysAgo: (n: number) => string\n never: string\n lastRun: string\n nextRun: string\n runNow: string\n running: string\n launching: string\n close: string\n fullscreen: string\n /** La frise de la journée, sous la salle. */\n timeline: {\n title: string\n run: string\n runs: (n: number) => string\n failed: (n: number) => string\n hour: (h: number) => string\n }\n /** La fenêtre des réglages, derrière la roue dentée. */\n settings: {\n open: string\n title: string\n description: string\n sign: string\n weather: string\n weatherPlaceholder: string\n weatherSearching: string\n weatherNotFound: string\n weatherFound: (place: string, temperature: number) => string\n theme: string\n themes: Record\n columns: string\n language: string\n sound: string\n soundHint: string\n alerts: string\n alertsHint: string\n alertsBlocked: string\n seasonal: string\n seasonalHint: string\n night: string\n nightHint: string\n motion: string\n motionHint: string\n timeline: string\n timelineHint: string\n reset: string\n done: string\n }\n sceneLabel: string\n /** Les tuiles de l'écran mural quand on ne lui en donne pas. */\n wall: { jobs: string; running: string; failed: string; late: string }\n phrases: Phrases\n objects: Record<\n 'workbench' | 'tv' | 'server-rack' | 'vending-machine' | 'fridge' | 'cpu-box' | 'gpu-box' | 'ram-box' | 'snake' | 'breakout',\n string\n >\n arcade: {\n play: string\n score: string\n record: string\n gameOver: string\n pressPlay: string\n replay: string\n help: Record<'snake' | 'breakout', string>\n keys: string\n toPlay: string\n toClose: string\n title: Record<'snake' | 'breakout', string>\n }\n catNap: string\n noWeather: string\n}\n\n/** What the people in the room say. */\nexport type Phrases = {\n relaunch: string\n anyTrouble: string\n stayingHere: string\n report: (upToDate: number, relaunched: number) => string\n visitor: string\n courier: string\n}\n\nconst EN: Texts = {\n locale: 'en-GB',\n statuses: {\n 'au-travail': 'working',\n 'a-jour': 'up to date',\n 'en-retard': 'late',\n endormi: 'asleep',\n 'en-echec': 'failed',\n absent: 'off',\n jamais: 'never ran',\n 'a-la-demande': 'on demand',\n },\n leadName: 'The lead',\n leadRole: 'Walks around the desks and relaunches whoever missed their run',\n leadOffice: 'LEAD OFFICE',\n nextRuns: 'NEXT RUNS',\n nothingPlanned: 'nothing planned',\n hiScores: 'HI-SCORES',\n welcome: 'WELCOME',\n newDesk: 'New desk!',\n inMinutes: (n) => `in ${n} min`,\n offNote: 'away',\n justNow: 'just now',\n minutesAgo: (n) => `${n} min ago`,\n hoursAgo: (n) => `${n} h ago`,\n daysAgo: (n) => `${n} d ago`,\n never: 'never',\n lastRun: 'last',\n nextRun: 'next',\n runNow: 'Run now',\n running: 'Running',\n launching: 'Launching…',\n close: 'Close',\n fullscreen: '⛶ Fullscreen',\n timeline: {\n title: 'Today',\n run: 'run',\n runs: (n) => `${n} run${n === 1 ? '' : 's'} since midnight`,\n failed: (n) => `${n} failed`,\n hour: (h) => (h === 0 || h === 24 ? '12am' : h === 12 ? '12pm' : h < 12 ? `${h}am` : `${h - 12}pm`),\n },\n settings: {\n open: 'Settings',\n title: 'Settings',\n description: 'Saved in this browser only.',\n sign: 'Sign on the wall',\n weather: 'Weather at the window',\n weatherPlaceholder: 'A city, or latitude,longitude',\n weatherSearching: 'Looking for it…',\n weatherNotFound: 'Place not found.',\n weatherFound: (place, temperature) => `${place}: ${temperature} °C right now, from Open-Meteo.`,\n theme: 'Theme',\n themes: { geek: 'Geek', eighties: '1980s', gym: 'Gym', modern: 'Modern', kitchen: 'Kitchen', neon: 'Neon city' },\n columns: 'Desks per row',\n language: 'Language',\n sound: '8-bit sound',\n soundHint: 'A jingle when a job starts, fails, or a visitor comes in.',\n alerts: 'Browser alerts',\n alertsHint: 'A notification when a job fails or falls behind.',\n alertsBlocked: 'Notifications are blocked for this site in your browser settings.',\n seasonal: 'Seasonal decorations',\n seasonalHint: 'Halloween in October, Christmas in December, Easter in spring.',\n night: 'Darken at night',\n nightHint: 'The room dims in the evening and the screens glow.',\n motion: 'People walk around',\n motionHint: 'Off: everybody stays at their desk, which saves CPU.',\n timeline: 'Day timeline',\n timelineHint: 'Under the room, one dot per run since midnight.',\n reset: 'Reset',\n done: 'Done',\n },\n sceneLabel: 'The agents’ open space',\n wall: { jobs: 'Jobs', running: 'Running', failed: 'Failed', late: 'Late' },\n phrases: {\n relaunch: 'Relaunching you!',\n anyTrouble: 'Any trouble?',\n stayingHere: 'I’m staying here.',\n report: (ok, n) => (n ? `Report: ${ok} up to date, ${n} relaunched.` : 'Report: everybody is up to date.'),\n visitor: 'Hello! I have a request.',\n courier: 'Parcel delivered!',\n },\n objects: {\n workbench: 'The workbench',\n tv: 'The TV',\n 'server-rack': 'The server rack',\n 'vending-machine': 'The vending machine',\n fridge: 'The fridge',\n 'cpu-box': 'The CPU box',\n 'gpu-box': 'The GPU box',\n 'ram-box': 'The RAM box',\n snake: 'The Snake cabinet: a game?',\n breakout: 'The Chip Breaker cabinet: a game?',\n },\n arcade: {\n play: 'PLAY',\n score: 'SCORE',\n record: 'RECORD',\n gameOver: 'GAME OVER',\n pressPlay: 'Press PLAY',\n replay: 'Press PLAY to replay',\n help: { snake: 'Arrows or W A S D', breakout: 'Arrows, A D or the mouse' },\n keys: 'Enter to play · Esc to close',\n toPlay: 'to play',\n toClose: 'to close',\n title: { snake: 'COMPONENT SNAKE', breakout: 'CHIP BREAKER' },\n },\n catNap: 'The office cat is napping',\n noWeather: 'No weather',\n}\n\nconst FR: Texts = {\n locale: 'fr-FR',\n statuses: {\n 'au-travail': 'au travail',\n 'a-jour': 'à jour',\n 'en-retard': 'en retard',\n endormi: 'endormi',\n 'en-echec': 'en échec',\n absent: 'absent',\n jamais: 'jamais passé',\n 'a-la-demande': 'à la demande',\n },\n leadName: 'Le chef',\n leadRole: 'Fait le tour des bureaux et relance qui a manqué son passage',\n leadOffice: 'BUREAU DU CHEF',\n nextRuns: 'PROCHAINS PASSAGES',\n nothingPlanned: 'rien de prévu',\n hiScores: 'HI-SCORES',\n welcome: 'BIENVENUE',\n newDesk: 'Nouveau poste !',\n inMinutes: (n) => `dans ${n} min`,\n offNote: 'absent',\n justNow: 'à l’instant',\n minutesAgo: (n) => `il y a ${n} min`,\n hoursAgo: (n) => `il y a ${n} h`,\n daysAgo: (n) => `il y a ${n} j`,\n never: 'jamais',\n lastRun: 'passé',\n nextRun: 'prochain',\n runNow: 'Lancer maintenant',\n running: 'Au travail',\n launching: 'Lancement…',\n close: 'Fermer',\n fullscreen: '⛶ Plein écran',\n timeline: {\n title: 'La journée',\n run: 'passage',\n runs: (n) => `${n} passage${n > 1 ? 's' : ''} depuis minuit`,\n failed: (n) => `${n} raté${n > 1 ? 's' : ''}`,\n hour: (h) => `${h} h`,\n },\n settings: {\n open: 'Réglages',\n title: 'Réglages',\n description: 'Enregistrés dans ce navigateur seulement.',\n sign: 'Enseigne au mur',\n weather: 'Météo à la fenêtre',\n weatherPlaceholder: 'Une ville, ou latitude,longitude',\n weatherSearching: 'Recherche…',\n weatherNotFound: 'Lieu introuvable.',\n weatherFound: (place, temperature) => `${place} : ${temperature} °C en ce moment, d’après Open-Meteo.`,\n theme: 'Thème',\n themes: { geek: 'Geek', eighties: 'Années 80', gym: 'Salle de sport', modern: 'Moderne', kitchen: 'Cuisine', neon: 'Ville néon' },\n columns: 'Bureaux par rangée',\n language: 'Langue',\n sound: 'Son 8 bits',\n soundHint: 'Une ritournelle quand une tâche démarre, plante, ou qu’un visiteur entre.',\n alerts: 'Alertes du navigateur',\n alertsHint: 'Une notification quand une tâche plante ou prend du retard.',\n alertsBlocked: 'Les notifications sont bloquées pour ce site dans les réglages du navigateur.',\n seasonal: 'Décorations de saison',\n seasonalHint: 'Halloween en octobre, Noël en décembre, Pâques au printemps.',\n night: 'Assombrir la nuit',\n nightHint: 'La salle s’assombrit le soir et les écrans s’allument.',\n motion: 'Les bonshommes circulent',\n motionHint: 'Désactivé : chacun reste à son bureau, et le processeur se repose.',\n timeline: 'Frise de la journée',\n timelineHint: 'Sous la salle, un point par passage depuis minuit.',\n reset: 'Réinitialiser',\n done: 'Terminé',\n },\n sceneLabel: 'L’open space des agents',\n wall: { jobs: 'Tâches', running: 'En cours', failed: 'En échec', late: 'En retard' },\n phrases: {\n relaunch: 'Je te relance !',\n anyTrouble: 'Un souci ?',\n stayingHere: 'Je reste là.',\n report: (ok, n) => (n ? `Rapport : ${ok} à jour, ${n} relancé${n > 1 ? 's' : ''}.` : 'Rapport : tout le monde est à jour.'),\n visitor: 'Bonjour ! J’ai une demande.',\n courier: 'Colis livré !',\n },\n objects: {\n workbench: 'L’établi',\n tv: 'La télé',\n 'server-rack': 'La baie serveur',\n 'vending-machine': 'Le distributeur',\n fridge: 'Le frigo',\n 'cpu-box': 'Le carton de processeurs',\n 'gpu-box': 'Le carton de cartes graphiques',\n 'ram-box': 'Le carton de mémoire',\n snake: 'La borne Snake : une partie ?',\n breakout: 'La borne Casse-puces : une partie ?',\n },\n arcade: {\n play: 'JOUER',\n score: 'SCORE',\n record: 'RECORD',\n gameOver: 'GAME OVER',\n pressPlay: 'Appuie sur JOUER',\n replay: 'Appuie sur JOUER pour rejouer',\n help: { snake: 'Flèches ou Z Q S D', breakout: 'Flèches, Q D ou la souris' },\n keys: 'Entrée pour jouer · Échap pour fermer',\n toPlay: 'pour jouer',\n toClose: 'pour fermer',\n title: { snake: 'SNAKE DES COMPOSANTS', breakout: 'CASSE-PUCES' },\n },\n catNap: 'Le chat de l’atelier fait la sieste',\n noWeather: 'Pas de météo',\n}\n\nexport const TEXTS: Record = { en: EN, fr: FR }\n", "type": "registry:component", "target": "components/pixel-openspace/i18n.ts" }, { "path": "registry/pixel-openspace/types.ts", "content": "import type { CSSProperties } from 'react'\n\n/** Where an agent stands right now. */\nexport type AgentStatus =\n /** Running at this very moment: it sits at its desk, screen on, typing. */\n | 'working'\n /** Up to date: it wanders off to the coffee machine between runs. */\n | 'ok'\n /** Missed its last run: it dozes at its desk. */\n | 'late'\n /**\n * Missed its last run while the machine was asleep (a laptop with its lid\n * closed): it sleeps at its desk, and the lead leaves it alone. Nothing is\n * broken, unlike `late`.\n */\n | 'asleep'\n /** Its last run failed: its PC smokes and the lead comes to see it. */\n | 'failed'\n /** Not loaded at all: empty chair, a post-it on a dark screen. */\n | 'off'\n /** Never ran yet. */\n | 'never'\n /** Runs only when asked. */\n | 'on-demand'\n\n/** One of your scheduled jobs, workers or AI agents, as the open space shows it. */\nexport type Agent = {\n /** Stable identifier: it also picks the agent's hair and hoodie colours. */\n id: string\n name: string\n emoji?: string\n /** One line about what it does; it says it when clicked. */\n role?: string\n status: AgentStatus\n /** What it said last time, shown on its card and in its speech bubble when it finishes. */\n lastMessage?: string | null\n /** ISO date of its last run. */\n lastRun?: string | null\n /** ISO date of its next run: its screen counts down the last ten minutes. */\n nextRun?: string | null\n /** Its rhythm, in words: \"every 30 min\", \"daily at 7:30\". */\n schedule?: string\n /** Hours without a run after which its plant wilts and dust covers its screen. Default 72. */\n staleAfterHours?: number\n /** Today's runs, oldest first: one dot each on the day timeline under the room. */\n runs?: Array\n}\n\n/** One run of an agent, for the day timeline. */\nexport type AgentRun = {\n /** ISO date of the run. */\n at: string\n /** False for a failed run: a red dot. Default true. */\n ok?: boolean\n /** Shown when hovering the dot. */\n message?: string\n}\n\n/** A tile of the big wall screen. */\nexport type WallTile = {\n label: string\n value: string | number\n tone?: 'neutral' | 'ok' | 'info' | 'warn' | 'alert'\n /** A gauge under the value, from 0 to 1. */\n progress?: number\n}\n\nexport type Sky = 'clear' | 'clouds' | 'fog' | 'rain' | 'snow' | 'storm'\n\n/** The weather behind the lead's window. */\nexport type Weather = {\n temperature: number\n sky: Sky\n /** False at night: moon and stars instead of the sun. */\n day: boolean\n /** Written under the window. */\n place?: string\n}\n\n/** The props in the room that can be clicked. */\nexport type SceneObject = 'workbench' | 'tv' | 'server-rack' | 'vending-machine' | 'fridge' | 'cpu-box' | 'gpu-box' | 'ram-box'\n\nexport type Language = 'en' | 'fr'\n\n/** The look of the room: a geek open space today, a corporate office around 1986, or a gym where every job rides an exercise bike. */\nexport type ThemeName = 'geek' | 'eighties' | 'gym' | 'modern' | 'kitchen' | 'neon'\n\n/** How many desks per row. */\nexport type Columns = 4 | 5 | 6\n\nexport type OpenSpaceProps = {\n /** Up to five per row; rows are added as needed. */\n agents: Array\n /**\n * The lead, in the glass office: it does its rounds while working, sits\n * with a failed agent until it recovers, and reports in front of the wall\n * screen. A decorative lead sits there when none is given.\n */\n lead?: Agent\n /** The neon sign on the main room wall. */\n title?: string\n /** Up to four tiles on the big wall screen. Without it, the screen counts your agents: total, running, failed, late. Pass `[]` to leave it dark. */\n wall?: Array\n /** What the lead announces in front of the wall screen after its rounds. */\n announcements?: Array\n weather?: Weather | null\n /** A counter: each time it goes up, a visitor walks in to greet the lead. */\n visitors?: number\n /** A counter: each time it goes up, a courier drops a parcel by the boxes. */\n deliveries?: number\n /** Confetti over the whole room: a birthday, a launch, a record month. */\n celebrate?: boolean\n /** The day timeline under the room, when agents have `runs`. Default true. */\n timeline?: boolean\n language?: Language\n /** The look of the room: furniture, outfits, break corners. Default 'geek'. */\n theme?: ThemeName\n /** How many desks per row: 4, 5 or 6. Default 5. */\n columns?: Columns\n /** Halloween all October, Christmas all December, Easter for the two weeks before Easter Monday. Default true. */\n seasonal?: boolean\n /** From what hour to what hour everybody stays at their desk. Default [22, 6]. */\n nightHours?: [number, number]\n /** The fullscreen button and the settings gear above the scene. Default true. */\n toolbar?: boolean\n /** Where each prop leads when clicked; a prop without a link is not clickable. */\n objectLinks?: Partial>\n /** Called instead of following the link, for client-side routers. */\n onObjectClick?: (object: SceneObject, href: string) => void\n /** Shows a \"Run now\" button on each agent's card. */\n onRun?: (agent: Agent) => void | Promise\n /** The current time, for server rendering: avoids a hydration mismatch on clocks and countdowns. */\n now?: number\n className?: string\n style?: CSSProperties\n}\n", "type": "registry:component", "target": "components/pixel-openspace/types.ts" }, { "path": "registry/pixel-openspace/seasons.ts", "content": "/**\n * Les fêtes de la salle : Halloween tout octobre, Noël tout décembre, et\n * Pâques des deux semaines qui la précèdent jusqu'au lundi de Pâques.\n */\nexport type Fete = 'halloween' | 'noel' | 'paques' | null\n\n/** Le dimanche de Pâques d'une année, par l'algorithme grégorien (Meeus, Jones, Butcher). */\nexport function dimancheDePaques(annee: number): Date {\n const a = annee % 19\n const b = Math.floor(annee / 100)\n const c = annee % 100\n const d = Math.floor(b / 4)\n const e = b % 4\n const f = Math.floor((b + 8) / 25)\n const g = Math.floor((b - f + 1) / 3)\n const h = (19 * a + b - d - g + 15) % 30\n const i = Math.floor(c / 4)\n const k = c % 4\n const l = (32 + 2 * e + 2 * i - h - k) % 7\n const m = Math.floor((a + 11 * h + 22 * l) / 451)\n const mois = Math.floor((h + l - 7 * m + 114) / 31)\n const jour = ((h + l - 7 * m + 114) % 31) + 1\n return new Date(annee, mois - 1, jour)\n}\n\nconst JOUR_MS = 86_400_000\n\nexport function fete(maintenant: number): Fete {\n const d = new Date(maintenant)\n if (d.getMonth() === 9) return 'halloween'\n if (d.getMonth() === 11) return 'noel'\n const paques = dimancheDePaques(d.getFullYear()).getTime()\n const aujourdhui = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime()\n // Deux semaines avant le dimanche de Pâques, jusqu'au lundi de Pâques inclus.\n if (aujourdhui >= paques - 14 * JOUR_MS && aujourdhui <= paques + JOUR_MS) return 'paques'\n return null\n}\n", "type": "registry:component", "target": "components/pixel-openspace/seasons.ts" }, { "path": "registry/pixel-openspace/primitives.tsx", "content": "'use client'\n\n/*\n * Les briques communes à tous les thèmes : la grille de pixels, les plantes,\n * les néons, les objets cliquables, les animations par sauts, les mots de la\n * scène et la couleur des lampes.\n */\n\nimport { createContext, useContext, useEffect, useRef, type ReactNode } from 'react'\nimport type { Statut } from './engine'\nimport { TEXTS, type Texts } from './i18n'\n\n/* Les mots de la scène, dans la langue choisie, à portée de chaque morceau du décor. */\nexport const TextesContexte = createContext(TEXTS.en)\nexport const useTextes = () => useContext(TextesContexte)\n\n/* La couleur d'accent : le laiton de l'atelier, réglable par --po-accent. */\nexport const ACCENT = 'var(--po-accent)'\n\n/* La couleur de la lampe, sur le plan. */\nexport const LAMPE_PLAN: Record = {\n 'au-travail': ACCENT,\n 'a-jour': '#4ade80',\n 'en-retard': '#fb923c',\n endormi: '#818cf8',\n 'en-echec': '#ef4444',\n absent: '#52525b',\n jamais: '#a1a1aa',\n 'a-la-demande': '#38bdf8',\n}\n\n/*\n * Les animations du décor (LED, néons, télé, ventilateurs, pluie…) ne passent\n * pas par les animations SVG du navigateur : Chrome les recalcule toutes à\n * chaque image, même quand rien ne change, et la page mangeait un tiers de\n * processeur pour des diodes. Chacune s'inscrit ici, et la boucle de la scène\n * les fait avancer par sauts, comme dans un vieux jeu : un élément n'est touché\n * que quand sa valeur change vraiment, et tout se fige au calme.\n *\n * `` reprend la syntaxe de `` (values, dur, begin, keyTimes) :\n * les valeurs se succèdent à intervalles égaux, ou aux instants de keyTimes.\n */\nexport type Piste = {\n cible: Element\n attribut: string\n /** Pour une transformation : translate, rotate… */\n type?: string\n valeurs: Array\n instants: Array | null\n dureeMs: number\n debutMs: number\n derniere?: string\n}\n\nexport const pistes = new Set()\n\nexport const enMs = (duree: string | undefined) => (duree ? Number.parseFloat(duree) * (duree.endsWith('ms') ? 1 : 1000) : 0)\n\nexport function Anim({\n attributeName,\n type,\n values,\n dur,\n begin,\n keyTimes,\n}: {\n attributeName: string\n type?: string\n values: string\n dur: string\n begin?: string\n keyTimes?: string\n repeatCount?: string\n}) {\n const repere = useRef(null)\n useEffect(() => {\n const cible = repere.current?.parentElement\n if (!cible) return\n const piste: Piste = {\n cible,\n attribut: attributeName,\n type,\n valeurs: values.split(';').map((v) => v.trim()),\n instants: keyTimes ? keyTimes.split(';').map(Number) : null,\n dureeMs: enMs(dur),\n debutMs: enMs(begin),\n }\n pistes.add(piste)\n return () => {\n pistes.delete(piste)\n }\n }, [attributeName, type, values, dur, begin, keyTimes])\n return \n}\n\n/** Fait avancer toutes les animations du décor à l'instant `t` (ms). */\nexport function animerLeDecor(t: number) {\n for (const p of pistes) {\n if (!p.dureeMs) continue\n const phase = ((((t - p.debutMs) % p.dureeMs) + p.dureeMs) % p.dureeMs) / p.dureeMs\n let i = Math.min(p.valeurs.length - 1, Math.floor(phase * p.valeurs.length))\n if (p.instants) {\n i = 0\n while (i + 1 < p.instants.length && p.instants[i + 1] <= phase) i++\n }\n const v = p.type ? `${p.type}(${p.valeurs[i]})` : p.valeurs[i]\n if (v !== p.derniere) {\n p.derniere = v\n p.cible.setAttribute(p.attribut, v)\n }\n }\n}\n\n/** Un trajet découpé en étapes, pour les animations qui déplacent quelque chose. */\nexport function etapes(de: number, a: number, n: number): string {\n return Array.from({ length: n + 1 }, (_, i) => Math.round((de + ((a - de) * i) / n) * 100) / 100).join(';')\n}\n\nexport const allerRetour = (de: number, a: number, n: number) => `${etapes(de, a, n)};${etapes(a, de, n).split(';').slice(1).join(';')}`\n\n/* ——— Le pixel ——— */\n\n/** Dessine une grille de caractères, un caractère par pixel, en fusionnant les pixels voisins d'une ligne. */\nexport function Pixels({ grille, couleurs, u = 3 }: { grille: Array; couleurs: Record; u?: number }) {\n const rects: Array = []\n grille.forEach((ligne, y) => {\n let x = 0\n while (x < ligne.length) {\n const c = ligne[x]\n let n = 1\n while (ligne[x + n] === c) n++\n if (couleurs[c]) rects.push()\n x += n\n }\n })\n return <>{rects}\n}\n\nexport const PLANTE = ['..g...g.', '.gGg.gGg', 'gGgggGg.', '.gGgGggg', '..gggGg.', '...ggg..', '.pppppp.', '.PPPPPP.', '..PPPP..']\n\nexport function Plante({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n )\n}\n\n/* ——— Le décor ——— */\n\n/* Les pans du mur de la grande salle, entre ses entrées : le bureau du chef, le coin gaming, la cuisine. */\nexport const MUR_SALLE = [\n [20, 238],\n [282, 360],\n [650, 740],\n [975, 980],\n]\n\n/** Un néon : le texte, et son halo flou derrière. */\nexport function Neon({ x, y, texte, couleur, taille = 9 }: { x: number; y: number; texte: string; couleur: string; taille?: number }) {\n return (\n \n \n {texte}\n \n \n {texte}\n \n \n \n )\n}\n\n/** Un objet du décor qu'on peut cliquer : il s'éclaire au survol et mène quelque part. */\nexport function Cliquable({\n titre,\n faire,\n actif = true,\n children,\n}: {\n titre: string\n faire: () => void\n actif?: boolean\n children: ReactNode\n}) {\n if (!actif) return <>{children}\n return (\n {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n faire()\n }\n }}\n >\n {titre}\n {children}\n \n )\n}\n\n/** Une source de lumière dans la nuit ; colorée, elle jette en plus une lueur de sa couleur. */\nexport type Lumiere = { x: number; y: number; r: number; couleur?: string }\n\n/** Ce dont tous les thèmes ont besoin : la trotteuse de l'horloge, la chute d'un bureau qui se monte, le flou des néons. */\nexport function DefsCommunes() {\n return (\n \n \n \n \n \n \n )\n}\n\n/**\n * Un nombre stable tiré d'un identifiant : il choisit les cheveux, la peau et\n * la tenue d'un agent, qui restent les mêmes d'une visite à l'autre.\n */\nexport function hacher(id: string, graine: number, facteur: number) {\n let h = graine\n for (const c of id) h = (h * facteur + c.charCodeAt(0)) >>> 0\n return h\n}\n", "type": "registry:component", "target": "components/pixel-openspace/primitives.tsx" }, { "path": "registry/pixel-openspace/theme.ts", "content": "import type { ComponentType } from 'react'\nimport type { CoinDePause, Statut } from './engine'\nimport type { Lumiere } from './primitives'\nimport type { SceneObject } from './types'\n\n/** Ce que le décor reçoit pour se dessiner et se rendre cliquable. */\nexport type PropsDecor = {\n hauteur: number\n /** L'enseigne du mur de la grande salle. */\n titre: string\n liens: Partial>\n aller: (objet: SceneObject) => void\n jouer: (jeu: 'snake' | 'casse-briques') => void\n}\n\n/** Ce qu'un bureau reçoit : sa place sur le plan, l'état de son agent, ce qui s'affiche sur son poste. */\nexport type PropsBureau = {\n /** Le centre du bureau, le haut du plateau, son bord gauche, et la hauteur du plateau sans sa tranche. */\n cx: number\n dy: number\n x: number\n dessus: number\n statut: Statut\n /** La couleur de l'agent : ses LED, son fauteuil. */\n accent: string\n /** Les minutes avant le prochain passage, quand il approche. */\n bientot: number | null\n emoji: string\n}\n\nexport type PropsSiege = { x: number; y: number; couleur: string }\n\n/**\n * Un thème d'open space : le décor des pièces, les postes, les tenues, les\n * coins de pause et les lumières de nuit. Le moteur, les bonshommes, les\n * bulles, le tableau blanc, l'horloge, la fenêtre et les saisons sont\n * communs à tous.\n */\nexport type Theme = {\n /** Les coins des pièces du haut où les agents vont faire une pause. */\n coins: Array\n /** Le coin où le café coule quand quelqu'un attend devant. */\n coinCafe?: string\n /** Le fond autour de la scène. */\n fond: string\n /** Les sols, les murs et les pièces du haut, avec leurs objets. */\n Decor: ComponentType\n /** Le bureau d'un agent : plateau, tranche, et tout ce qui est posé dessus. */\n Bureau: ComponentType\n /** Le bureau du chef, derrière lequel il trône face à la pièce. */\n BureauChef: ComponentType\n /** La couleur du nom sur la tranche des bureaux. */\n plaque: string\n /** L'assise du siège, son dossier (qui passe devant le dos de l'agent assis), et le fauteuil du chef. */\n Assise: ComponentType\n Dossier: ComponentType\n Fauteuil: ComponentType<{ x: number; y: number }>\n /** Les couleurs d'un bonhomme, d'après son identifiant : cheveux, peau, haut, bas… */\n tenue: (id: string) => Record\n /** Porte-t-il un casque audio ? */\n casque: (id: string) => boolean\n /** Le café qui coule, quand quelqu'un attend au coin café. */\n CafeQuiCoule?: ComponentType\n /** Les lumières du décor dans la nuit. */\n lumieres: Array\n /** Le voile de la nuit : sa couleur, et son opacité au plus noir (bleu nuit à 0,62 par défaut). */\n nuit?: { couleur: string; opacite: number }\n /** Se promène-t-il une tasse à la main ? */\n tasse?: (id: string) => boolean\n /** Une lumière de plus par poste occupé (une tour RGB…). */\n lumierePoste?: (cx: number, dy: number, accent: string) => Array\n}\n", "type": "registry:component", "target": "components/pixel-openspace/theme.ts" }, { "path": "registry/pixel-openspace/themes/geek.tsx", "content": "'use client'\n\n/*\n * Le thème geek : un open space moderne de passionnés de matériel. Bureaux\n * blancs à bande LED, tours vitrées aux ventilateurs RGB, claviers\n * mécaniques, fauteuils gamer ; le chef derrière sa baie serveur, un coin\n * gaming avec deux bornes d'arcade et un établi de montage, une cuisine au\n * frigo plein de canettes. Les bonshommes sont en sweat à capuche.\n */\n\nimport { BUREAU, COINS_GEEK, estInvite, CHEF_ID, type Statut } from '../engine'\nimport {\n ACCENT,\n Anim,\n Cliquable,\n LAMPE_PLAN,\n MUR_SALLE,\n Neon,\n Plante,\n allerRetour,\n etapes,\n useTextes,\n type Lumiere,\n hacher,\n} from '../primitives'\nimport type { PropsBureau, Theme } from '../theme'\nimport type { Jeu } from '../arcade'\nimport type { SceneObject } from '../types'\n\n/** Le café qui coule dans la tasse quand quelqu'un attend devant la machine. */\nexport function CafeQuiCoule() {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les animations par sauts ——— */\n\nexport const MUR = { arete: '#0f1115', face: '#262a31', plinthe: '#1a1d22' }\n\n/** Un mur vu de biais : son arête sombre, sa face, et la bande LED qui court à son pied. */\nexport function MurHaut({ x, largeur, led }: { x: number; largeur: number; led: string }) {\n return (\n <>\n \n \n \n \n \n )\n}\n\nexport function Decor({\n hauteur,\n titre,\n liens,\n aller,\n jouer,\n}: {\n hauteur: number\n titre: string\n liens: Partial>\n aller: (objet: SceneObject) => void\n jouer: (jeu: Jeu) => void\n}) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols. */}\n \n \n \n \n\n {/* Les murs du fond, chacun avec sa bande LED. */}\n \n \n \n\n {/* Le bureau du chef : baie serveur, enseigne néon, plantes. */}\n \n \n \n \n \n\n {/* Le coin gaming : la borne d'arcade, la grande télé et sa console, les poufs, l'établi de montage. */}\n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* La cuisine : machine espresso, distributeur, frigo vitré plein de canettes, mange-debout. */}\n \n \n \n \n {[734, 774, 814].map((x) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {[786, 850].map((x) => (\n \n \n \n \n ))}\n \n\n {/* La grande salle : les cartons de matériel qui attendent, les plantes. */}\n \n \n\n {/* Le mur de la grande salle, percé de ses trois entrées, avec sa bande LED ; l'écran y est accroché. */}\n {MUR_SALLE.map(([de, a]) => (\n \n \n \n \n \n \n ))}\n 14 ? 7 : 9} />\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La baie serveur : ses tiroirs et leurs diodes qui clignotent chacune à son rythme. */\nexport function BaieServeur({ x }: { x: number }) {\n return (\n \n \n \n {Array.from({ length: 7 }, (_, i) => (\n \n \n \n {[0, 1, 2].map((j) => (\n \n \n \n ))}\n \n ))}\n \n )\n}\n\n/** La borne d'arcade : marquee néon, écran qui joue tout seul, boutons. */\nexport function Arcade({ x }: { x: number }) {\n // Le serpent avance par à-coups vers la puce, comme dans le jeu.\n const anneaux = ['#f472b6', '#a855f7', '#38bdf8', '#22c55e']\n return (\n \n \n \n \n SNAKE\n \n \n \n \n \n \n {anneaux.map((c, i) => (\n \n ))}\n \n \n \n \n \n {[20, 26, 32].map((dx, i) => (\n \n ))}\n \n \n \n )\n}\n\n/** La deuxième borne, cyan : son écran rejoue un casse-briques, la bille rebondit sous les puces. */\nexport function BorneCasseBriques({ x }: { x: number }) {\n const rangs = ['#e3b95a', '#22c55e', '#38bdf8']\n return (\n \n \n \n \n CASSE-PUCES\n \n \n \n {rangs.map((c, r) =>\n [0, 1, 2, 3].map((i) => ),\n )}\n \n \n \n \n \n \n \n \n \n \n {[26, 32].map((dx, i) => (\n \n ))}\n \n \n \n )\n}\n\n/** La grande télé, la console dessous, et un jeu de plateforme qui tourne en boucle. */\nexport function Tele({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n {/* Le héros qui court et saute. */}\n \n \n \n \n \n \n \n \n \n )\n}\n\nexport function Pouf({ x, y, couleur }: { x: number; y: number; couleur: string }) {\n return (\n \n \n \n \n \n \n )\n}\n\n/** L'établi de montage : panneau à outils, tapis antistatique, PC ouvert, barrettes, tournevis. */\nexport function Etabli({ x }: { x: number }) {\n return (\n \n \n {Array.from({ length: 4 }, (_, i) =>\n Array.from({ length: 10 }, (_, j) => (\n \n )),\n )}\n \n \n \n \n \n \n \n \n \n \n {/* Le boîtier ouvert : carte mère verte, carte graphique, ventilateur RGB. */}\n \n \n \n \n \n \n \n \n \n {/* Barrettes, tournevis, carton de GPU. */}\n \n \n \n \n \n \n GPU\n \n \n )\n}\n\n/** Le distributeur : vitrine de snacks et canettes, monnayeur. */\nexport function Distributeur({ x }: { x: number }) {\n const snacks = ['#f59e0b', '#ef4444', '#22c55e', '#3b82f6', '#a855f7', '#f472b6']\n return (\n \n \n \n {[0, 1, 2, 3].map((r) =>\n [0, 1, 2].map((c) => (\n \n )),\n )}\n {[0, 1, 2, 3].map((r) => (\n \n ))}\n \n \n {[0, 1, 2].map((r) => (\n \n ))}\n \n \n )\n}\n\n/** Le frigo vitré, éclairé, rempli de canettes de boisson énergisante. */\nexport function FrigoVitre({ x }: { x: number }) {\n const canettes = ['#22c55e', '#0ea5e9', '#f43f5e', '#facc15']\n return (\n \n \n \n {[0, 1, 2, 3].map((r) => (\n \n {Array.from({ length: 7 }, (_, i) => (\n \n ))}\n \n \n ))}\n \n \n \n )\n}\n\n/** Des cartons de composants empilés, en attente de montage ; chacun ouvre sa table de référence. */\nexport function Cartons({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n return (\n \n \n \n \n \n CPU\n \n \n \n \n \n \n RTX\n \n \n \n \n \n RAM\n \n \n \n )\n}\n\n/** La porte vitrée d'entrée, au bas de la grande salle, et son paillasson. */\nexport function Porte({ bas }: { bas: number }) {\n const t = useTextes()\n return (\n \n \n \n \n {t.welcome}\n \n \n \n \n )\n}\n\n/** L'écran ultra-large ; `bientot` affiche les minutes avant le prochain passage. */\nexport function Ecran({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n const travaille = statut === 'au-travail'\n const l = 54\n const g = cx - l / 2\n return (\n \n \n \n \n {statut === 'endormi' ? (\n // En veille : l'écran noir, sans le post-it de l'absent.\n \n ) : statut === 'absent' ? (\n <>\n \n {/* Le post-it laissé en partant. */}\n \n \n \n \n {t.offNote}\n \n \n \n ) : statut === 'en-echec' ? (\n <>\n \n \n \n \n \n \n ) : travaille ? (\n <>\n \n {[0, 1, 2, 3].map((i) => {\n const w = [30, 18, 36, 14][i]\n return (\n \n \n \n )\n })}\n \n ) : (\n <>\n {/* Le bureau du système : un fond dégradé, deux fenêtres. */}\n \n \n \n \n \n \n \n )}\n {bientot ? (\n \n \n \n {t.inMinutes(bientot)}\n \n \n \n ) : null}\n \n )\n}\n\n/**\n * La tour sur le bureau, vitrée, avec deux ventilateurs RGB qui tournent tant\n * que l'agent est là. En échec, elle vire au rouge et fume.\n */\nexport function Tour({\n x,\n y,\n couleur,\n allumee,\n fume,\n tourne,\n}: {\n x: number\n y: number\n couleur: string\n allumee: boolean\n fume: boolean\n /** Les ventilateurs ne tournent que sous la charge : au repos, la tour reste immobile (et ne coûte rien). */\n tourne: boolean\n}) {\n return (\n \n {fume\n ? [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n \n \n ))\n : null}\n \n \n {[8, 22].map((dy) => (\n \n \n \n \n \n {tourne ? : null}\n \n \n \n ))}\n {allumee ? (\n \n {tourne ? : null}\n \n ) : null}\n \n )\n}\n\n/** Le clavier mécanique : ses touches arc-en-ciel n'ondulent que quand l'agent tape. */\nexport function Clavier({ x, y, allume, ondule }: { x: number; y: number; allume: boolean; ondule: boolean }) {\n const arc = ['#ef4444', '#f59e0b', '#22c55e', '#22d3ee', '#a855f7']\n return (\n \n \n {arc.map((c, i) => (\n \n {ondule ? (\n \n ) : null}\n \n ))}\n \n )\n}\n\n/** Le fauteuil gamer du chef, derrière son bureau : noir et laiton, le dossier haut au-dessus de sa tête. */\nexport function Fauteuil({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le dossier du fauteuil gamer, vu de dos : noir, deux bandes de couleur, l'appui-tête. */\nexport function Dossier({ x, y, couleur }: { x: number; y: number; couleur: string }) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les bonshommes ——— */\n\nexport const CHEMISES = [\n '#3b82f6',\n '#10b981',\n '#e11d48',\n '#8b5cf6',\n '#f59e0b',\n '#0ea5e9',\n '#14b8a6',\n '#f97316',\n '#6366f1',\n '#84cc16',\n '#ec4899',\n '#475569',\n]\nexport const CHEVEUX = ['#2a1d14', '#5a3a22', '#c8a165', '#111111', '#8a4b2a', '#e5e5e5', '#b45309']\nexport const PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nexport const PANTALONS = ['#334155', '#1e3a8a', '#44403c', '#3f3f46', '#365314']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nexport const hachage = (id: string) => hacher(id, 7, 31)\n\n/** Un agent sur deux travaille casque sur les oreilles ; le chef, jamais. */\nexport const porteCasque = (id: string) => id !== CHEF_ID && !estInvite(id) && ((hachage(id) >>> 16) & 1) === 1\n\n/** Chacun garde son sweat et sa coupe d'une visite à l'autre. */\nexport function teint(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#9ca3af', s: '#f1c9a5', e: '#1c1917', c: '#111827', C: '#1f2937', t: '#e3b95a', k: '#111827', p: '#1f2937', b: '#e5e7eb' }\n }\n // Le livreur, en uniforme marron et casquette.\n if (id.startsWith('livreur:')) {\n return { h: '#5b3a1a', s: '#d9a57a', e: '#1c1917', c: '#7c4a1e', C: '#5b3a1a', t: '#facc15', k: '#111827', p: '#5b3a1a', b: '#111827' }\n }\n const h = hachage(id)\n const sweat = CHEMISES[h % CHEMISES.length]\n return {\n h: CHEVEUX[(h >>> 4) % CHEVEUX.length],\n s: PEAUX[(h >>> 8) % PEAUX.length],\n e: '#1c1917',\n c: sweat,\n C: `color-mix(in oklab, ${sweat} 70%, black)`,\n t: '#f8fafc',\n k: '#111827',\n p: PANTALONS[(h >>> 12) % PANTALONS.length],\n b: '#f8fafc',\n }\n}\n\nexport function Assise({ x, y, couleur }: { x: number; y: number; couleur: string }) {\n return (\n \n \n \n \n \n )\n}\n\n/** Le bureau d'un agent : plateau blanc, bande LED à la couleur de l'état, écran ultra-large, tour, clavier, tasse. */\nfunction BureauGeek({ cx, dy, x, dessus, statut, accent, bientot, emoji }: PropsBureau) {\n const allume = statut !== 'absent'\n return (\n \n \n \n \n \n \n \n {/* La tasse et l'emoji de l'agent, en sticker sur le plateau. */}\n \n \n \n \n {emoji}\n \n \n )\n}\n\n/** Le bureau du chef : deux écrans vus de dos sur le côté, le portable, le téléphone. */\nfunction BureauChefGeek({ dy, x, dessus, statut }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le plateau blanc, sa tranche, et la bande LED dessous, à la couleur de l'état. */\nfunction PlateauGeek({ x, dy, dessus, statut }: { x: number; dy: number; dessus: number; statut: Statut }) {\n return (\n <>\n \n \n \n \n {statut === 'au-travail' || statut === 'en-echec' ? (\n \n ) : null}\n \n \n \n \n )\n}\n\n/* Les lumières du décor dans la nuit : l'enseigne, la baie serveur, les bornes, la télé, la cuisine. */\nconst LUMIERES_GEEK: Array = [\n { x: 222, y: 36, r: 60, couleur: ACCENT },\n { x: 59, y: 60, r: 40, couleur: '#22c55e' },\n { x: 373, y: 50, r: 50, couleur: '#a855f7' },\n { x: 417, y: 50, r: 45, couleur: '#22d3ee' },\n { x: 516, y: 44, r: 80, couleur: '#38bdf8' },\n { x: 768, y: 40, r: 40 },\n { x: 882, y: 56, r: 45, couleur: '#f87171' },\n { x: 949, y: 56, r: 55, couleur: '#e0f2fe' },\n]\n\nexport const THEME_GEEK: Theme = {\n coins: COINS_GEEK,\n coinCafe: 'cafe',\n fond: '#120e0b',\n Decor,\n Bureau: BureauGeek,\n BureauChef: BureauChefGeek,\n plaque: '#1f2937',\n Assise,\n Dossier,\n Fauteuil,\n tenue: teint,\n casque: porteCasque,\n CafeQuiCoule,\n lumieres: LUMIERES_GEEK,\n // La tour RGB de chaque poste éclaire de la couleur de son agent.\n lumierePoste: (cx, dy, accent) => [{ x: cx + 45, y: dy + 2, r: 34, couleur: accent }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/geek.tsx" }, { "path": "registry/pixel-openspace/themes/eighties.tsx", "content": "'use client'\n\n/*\n * Le thème années 80 : un bureau d'entreprise vers 1986. Boiseries aux\n * murs, moquette orange, écrans cathodiques beiges au texte vert phosphore,\n * téléphones à cadran et bannettes à courrier. Le chef a son ordinateur\n * central à bandes magnétiques et sa lampe de banquier ; la salle de pause a\n * ses bornes d'arcade, sa télé à pieds qui diffuse la mire, son canapé en\n * velours côtelé et sa photocopieuse ; la cuisine, sa cafetière à filtre et\n * son frigo vert avocat. Costumes, cravates, pulls de couleur, et un Walkman\n * sur les oreilles de certains.\n */\n\nimport { BUREAU, CHEF_ID, estInvite, type CoinDePause, type Statut } from '../engine'\nimport { Anim, Cliquable, MUR_SALLE, Neon, Plante, etapes, useTextes, hacher, type Lumiere } from '../primitives'\nimport type { PropsBureau, PropsDecor, PropsSiege, Theme } from '../theme'\nimport { Arcade, BorneCasseBriques } from './geek'\nimport type { SceneObject } from '../types'\n\n/* Les coins de pause : la même géographie que le thème geek, d'autres objets. */\nconst COINS_80: Array = [\n { nom: 'cafe', x: 768, y: 100 },\n { nom: 'fontaine', x: 881, y: 104 },\n { nom: 'frigo', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'photocopieuse', x: 636, y: 108 },\n // Sur le canapé, face à la télé : de dos.\n { nom: 'canape-gauche', x: 482, y: 146, assis: true },\n { nom: 'canape-droite', x: 538, y: 146, assis: true },\n]\n\nconst BOIS = { arete: '#2b1a0e', face: '#7b4a24', rainure: '#6a3d1c', plinthe: '#3b2412' }\nconst PHOSPHORE = '#4ade80'\n\n/** Un mur lambrissé, vu de biais : son arête, ses lames de bois, sa plinthe. */\nfunction Lambris({ x, largeur, y = 20, hauteur = 32 }: { x: number; largeur: number; y?: number; hauteur?: number }) {\n return (\n <>\n \n \n {Array.from({ length: Math.floor(largeur / 12) }, (_, i) => (\n \n ))}\n \n \n )\n}\n\nfunction Decor({ hauteur, titre, liens, aller, jouer }: PropsDecor) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols : moquette bordeaux chez le chef, orange à poils longs en salle de pause, lino en damier en cuisine. */}\n \n \n \n \n\n {/* Les murs du fond : lambris, et faïence jaune en cuisine. */}\n \n \n \n \n\n {/* Le bureau du chef : l'ordinateur central, la plaque en laiton, le ficus. */}\n \n \n \n \n \n \n {t.leadOffice}\n \n \n\n {/* La salle de pause : les bornes, la télé à pieds et son magnétoscope, le canapé, la photocopieuse. */}\n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n \n \n\n {/* La cuisine : plan de travail stratifié, cafetière à filtre, fontaine, frigo vert avocat, téléphone mural, table orange. */}\n \n \n \n {[734, 774, 814].map((x) => (\n \n \n \n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {[784, 850].map((x) => (\n \n \n \n \n ))}\n \n\n {/* La grande salle : les cartons de fournitures, les plantes. */}\n \n \n\n {/* Le mur de la grande salle, lambrissé, percé de ses trois entrées. */}\n {MUR_SALLE.map(([de, a]) => (\n \n \n \n ))}\n 14 ? 7 : 9} />\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** L'ordinateur central : une armoire beige, deux bobines de bande qui tournent, un pupitre de voyants. */\nfunction OrdinateurCentral({ x }: { x: number }) {\n return (\n \n \n \n \n {[x + 16, x + 38].map((cx) => (\n \n \n \n \n \n \n \n ))}\n \n {Array.from({ length: 6 }, (_, i) => (\n \n \n \n ))}\n \n \n \n \n )\n}\n\n/** La télé à pieds en bois : un écran bombé qui diffuse la mire, deux boutons, un magnétoscope dessous. */\nfunction TeleCathodique({ x }: { x: number }) {\n const mire = ['#e5e7eb', '#facc15', '#22d3ee', '#22c55e', '#d946ef', '#ef4444', '#2563eb']\n return (\n \n \n \n \n {mire.map((c, i) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le canapé en velours côtelé, vu de dos depuis la salle. */\nfunction Canape({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n {Array.from({ length: 12 }, (_, i) => (\n \n ))}\n \n \n \n )\n}\n\n/** La photocopieuse : une grosse caisse beige, son couvercle, son pupitre et sa pile de feuilles. */\nfunction Photocopieuse({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La cafetière à filtre : son réservoir, son filtre, sa verseuse où le café attend. */\nfunction Cafetiere({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/** Le café qui coule dans la verseuse, quand quelqu'un attend devant. */\nfunction CafeQuiCoule80() {\n return (\n \n \n \n \n \n )\n}\n\n/** La fontaine à eau, sa grosse bonbonne bleue retournée et ses gobelets. */\nfunction Fontaine({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le frigo vert avocat, poignées chromées. */\nfunction FrigoAvocat({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/** Les cartons de fournitures : processeurs 8086, cartes EGA, mémoire 64 Ko. */\nfunction Cartons80({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n return (\n \n \n \n \n \n 8086\n \n \n \n \n \n \n EGA\n \n \n \n \n \n 64K\n \n \n \n )\n}\n\n/** La porte d'entrée en bois, sa poignée en laiton, son paillasson. */\nfunction Porte80({ bas }: { bas: number }) {\n const t = useTextes()\n return (\n \n \n \n \n {t.welcome}\n \n \n \n \n \n \n )\n}\n\n/* ——— Les postes ——— */\n\n/** Le plateau en bois veiné, sa tranche, ses pieds pleins. */\nfunction PlateauBois({ x, dy, dessus, fonce = false }: { x: number; dy: number; dessus: number; fonce?: boolean }) {\n const [plateau, veine, tranche] = fonce ? ['#5a2e1a', '#4a2414', '#3d1d10'] : ['#9a6235', '#8a5530', '#74451f']\n return (\n <>\n \n \n {[10, 22, 31].map((v) => (\n \n ))}\n \n \n \n \n )\n}\n\n/**\n * L'écran cathodique beige et son unité centrale. Au repos, l'invite\n * `C:\\>` clignote ; au travail, des lignes vertes défilent ; en échec,\n * ERROR clignote en rouge et l'unité centrale fume ; absent, l'écran est\n * noir et un post-it y est collé.\n */\nfunction Cathodique({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n const g = cx - 22\n return (\n \n {/* L'unité centrale, centrée sous l'écran : son lecteur de disquettes et son voyant. */}\n \n \n \n \n {statut === 'au-travail' ? : null}\n \n {/* L'écran, bombé dans son boîtier beige. */}\n \n \n \n {statut === 'endormi' ? null : statut === 'absent' ? (\n \n \n \n \n {t.offNote}\n \n \n ) : statut === 'en-echec' ? (\n \n ERROR\n \n \n ) : statut === 'au-travail' ? (\n \n {[0, 1, 2, 3].map((i) => {\n const w = [30, 18, 34, 12][i]\n return (\n \n \n \n )\n })}\n \n ) : (\n \n \n {'C:\\\\>'}\n \n \n \n \n \n )}\n {bientot ? (\n \n {t.inMinutes(bientot)}\n \n \n ) : null}\n {/* En échec, l'unité centrale fume. */}\n {statut === 'en-echec'\n ? [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n ))\n : null}\n \n )\n}\n\n/** Le bureau d'un agent : bois veiné, écran cathodique, clavier beige, téléphone à cadran, bannette à courrier. */\nfunction Bureau80({ cx, dy, x, dessus, statut, bientot, emoji }: PropsBureau) {\n return (\n \n \n \n {/* Le clavier beige, ses rangées de touches. */}\n \n \n \n {/* Le téléphone à cadran. */}\n \n \n \n \n {/* La bannette à courrier, et sa pile de feuilles. */}\n \n \n {/* La tasse et l'emoji de l'agent, en autocollant. */}\n \n \n \n \n {emoji}\n \n \n )\n}\n\n/** Le bureau du chef : acajou, lampe de banquier verte, téléphone, sous-main et stylos. */\nfunction BureauChef80({ dy, x, dessus }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le grand fauteuil de cuir sang-de-bœuf du chef, capitonné. */\nfunction Fauteuil80({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n {[0, 1, 2].map((r) =>\n [0, 1, 2].map((c) => ),\n )}\n \n \n \n )\n}\n\n/** La chaise de bureau en tissu orangé ; un liseré de la couleur de l'agent. */\nfunction Assise80({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n )\n}\n\nfunction Dossier80({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les tenues ——— */\n\nconst VESTES = ['#1e3a8a', '#4b5563', '#7c2d12', '#991b1b', '#065f46', '#b45309', '#6d28d9', '#be185d', '#0e7490', '#57534e']\nconst CRAVATES = ['#dc2626', '#facc15', '#f5f5f4', '#2563eb', '#16a34a', '#f472b6']\nconst CHEVEUX = ['#2a1d14', '#5a3a22', '#c8a165', '#111111', '#8a4b2a', '#fde68a', '#b45309']\nconst PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nconst PANTALONS = ['#44403c', '#78716c', '#1c1917', '#7c2d12', '#d6d3d1']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nconst hachage = (id: string) => hacher(id, 11, 33)\n\n/** Costumes, cravates de couleur, pulls vifs ; le chef en costume bleu nuit et cravate rouge. */\nfunction tenue80(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#9ca3af', s: '#f1c9a5', e: '#1c1917', c: '#172554', C: '#0f172a', t: '#dc2626', k: '#f97316', p: '#172554', b: '#1c1917' }\n }\n // Le livreur, en blouse grise.\n if (id.startsWith('livreur:')) {\n return { h: '#5b3a1a', s: '#d9a57a', e: '#1c1917', c: '#78716c', C: '#57534e', t: '#facc15', k: '#111827', p: '#44403c', b: '#111827' }\n }\n const h = hachage(id)\n const veste = VESTES[h % VESTES.length]\n return {\n h: CHEVEUX[(h >>> 4) % CHEVEUX.length],\n s: PEAUX[(h >>> 8) % PEAUX.length],\n e: '#1c1917',\n c: veste,\n C: `color-mix(in oklab, ${veste} 70%, black)`,\n t: CRAVATES[(h >>> 12) % CRAVATES.length],\n // Le casque du Walkman, mousse orange.\n k: '#f97316',\n p: PANTALONS[(h >>> 16) % PANTALONS.length],\n b: '#1c1917',\n }\n}\n\n/** Un agent sur trois a son Walkman sur les oreilles. */\nconst walkman = (id: string) => id !== CHEF_ID && !estInvite(id) && hachage(id) % 3 === 0\n\n/* Les lumières dans la nuit : la lampe de banquier, la télé, les bornes, la fontaine, l'enseigne. */\nconst LUMIERES_80: Array = [\n { x: 222, y: 36, r: 50, couleur: '#d4a93b' },\n { x: 61, y: 60, r: 40, couleur: '#ef4444' },\n { x: 373, y: 50, r: 50, couleur: '#a855f7' },\n { x: 417, y: 50, r: 45, couleur: '#22d3ee' },\n { x: 500, y: 50, r: 70, couleur: '#93c5fd' },\n { x: 768, y: 40, r: 35 },\n { x: 881, y: 40, r: 40, couleur: '#60a5fa' },\n { x: 695, y: 226, r: 60, couleur: '#fb923c' },\n]\n\nexport const THEME_80: Theme = {\n coins: COINS_80,\n coinCafe: 'cafe',\n fond: '#1a120c',\n Decor,\n Bureau: Bureau80,\n BureauChef: BureauChef80,\n plaque: '#f5deb3',\n Assise: Assise80,\n Dossier: Dossier80,\n Fauteuil: Fauteuil80,\n tenue: tenue80,\n casque: walkman,\n CafeQuiCoule: CafeQuiCoule80,\n lumieres: LUMIERES_80,\n // Le vert phosphore de chaque écran cathodique.\n lumierePoste: (cx, dy) => [{ x: cx - 4, y: dy - 8, r: 42, couleur: '#22c55e' }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/eighties.tsx" }, { "path": "registry/pixel-openspace/themes/gym.tsx", "content": "'use client'\n\n/*\n * Le thème salle de sport : chaque agent a son vélo d'appartement et sa\n * console. Au travail il pédale, la roue d'inertie tourne et la console\n * affiche son effort ; au repos elle attend, READY ; en échec elle passe au\n * rouge et le moteur fume. Le coach a son bureau vitré et sa vitrine à\n * trophées ; la salle de musculation, ses miroirs, sa télé qui passe une\n * séance, ses bancs et son rack à squat ; le bar, son blender, sa fontaine\n * et ses casiers. Débardeurs, shorts, baskets et casques de sport.\n */\n\nimport { BUREAU, CHEF_ID, estInvite, type CoinDePause, type Statut } from '../engine'\nimport { Anim, Cliquable, MUR_SALLE, Neon, Plante, etapes, useTextes, hacher, type Lumiere } from '../primitives'\nimport type { PropsBureau, PropsDecor, PropsSiege, Theme } from '../theme'\nimport { Arcade, BorneCasseBriques, Porte } from './geek'\nimport type { SceneObject } from '../types'\n\n/* Les coins de pause : la même géographie que les autres thèmes, d'autres agrès. */\nconst COINS_GYM: Array = [\n { nom: 'smoothie', x: 768, y: 100 },\n { nom: 'fontaine', x: 881, y: 104 },\n { nom: 'casiers', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'rack', x: 636, y: 108 },\n // Sur les bancs de muscu, face aux miroirs : de dos.\n { nom: 'banc-gauche', x: 482, y: 146, assis: true },\n { nom: 'banc-droite', x: 538, y: 146, assis: true },\n]\n\nconst MUR = { arete: '#0f172a', face: '#1e293b', bande: '#f97316', plinthe: '#0b1220' }\nconst CYAN = '#22d3ee'\n\n/** Un mur peint, vu de biais, avec sa bande de couleur à hauteur d'épaule. */\nfunction MurPeint({\n x,\n largeur,\n y = 20,\n hauteur = 32,\n bande = MUR.bande,\n}: {\n x: number\n largeur: number\n y?: number\n hauteur?: number\n bande?: string\n}) {\n return (\n <>\n \n \n \n \n \n )\n}\n\nfunction Decor({ hauteur, titre, liens, aller, jouer }: PropsDecor) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n \n \n \n \n {[\n [6, 8],\n [21, 15],\n [33, 4],\n [12, 29],\n [28, 33],\n [36, 22],\n ].map(([x, y]) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols : parquet chez le coach, dalles de caoutchouc en musculation, carrelage au bar, sol sportif moucheté dans la grande salle. */}\n \n \n \n \n\n {/* Les murs du fond. */}\n \n \n \n\n {/* Le bureau du coach : la vitrine à trophées, l'enseigne, la plante. */}\n \n \n \n \n \n\n {/* La salle de musculation : le mur de miroirs, les bornes, la télé, les bancs, le rack à squat. */}\n \n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Le bar à smoothies : comptoir, blender, corbeille de fruits, fontaine, casiers, mange-debout. */}\n \n \n \n \n \n {[\n [812, '#f97316'],\n [820, '#facc15'],\n [828, '#ef4444'],\n [816, '#84cc16'],\n [824, '#fb923c'],\n ].map(([x, c], i) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n \n {[786, 850].map((x) => (\n \n \n \n \n ))}\n \n\n {/* La grande salle : la pile de matériel, les plantes. */}\n \n \n\n {/* Le mur de la grande salle, percé de ses trois entrées. */}\n {MUR_SALLE.map(([de, a]) => (\n \n \n \n ))}\n 14 ? 7 : 9} />\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La vitrine à trophées : coupes dorées et argentées, médailles. */\nfunction VitrineTrophees({ x }: { x: number }) {\n return (\n \n \n \n {[44, 70, 96].map((y) => (\n \n ))}\n {[\n [8, 30, '#facc15'],\n [24, 28, '#e5e7eb'],\n [38, 32, '#d97706'],\n [10, 56, '#e5e7eb'],\n [30, 54, '#facc15'],\n ].map(([dx, y, c], i) => (\n \n \n \n \n \n ))}\n {[10, 22, 34].map((dx, i) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** La télé murale, qui passe une séance : un bonhomme qui fait des jumping jacks. */\nfunction TeleSeance({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Un banc de musculation, vu de la salle. */\nfunction BancMuscu({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** Le rack à squat : montants d'acier, barre chargée de disques. */\nfunction RackSquat({ x }: { x: number }) {\n return (\n \n \n \n \n \n {[x - 2, x + 72].map((dx) => (\n \n \n \n \n ))}\n \n \n )\n}\n\nfunction Halteres({ x, y, paires = 2 }: { x: number; y: number; paires?: number }) {\n return (\n \n {[0, 10].slice(0, paires).map((dy) => (\n \n \n \n \n \n ))}\n \n )\n}\n\n/** Le blender du bar, et son bol de smoothie. */\nfunction Blender({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n )\n}\n\n/** Le smoothie qui tourne dans le blender, quand quelqu'un attend au bar. */\nfunction BlenderEnMarche() {\n return (\n \n \n \n \n \n )\n}\n\n/** La fontaine à eau en inox. */\nfunction FontaineInox({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** Les casiers bleus des vestiaires, l'un entrouvert. */\nfunction Casiers({ x }: { x: number }) {\n return (\n \n \n {[0, 1, 2].map((c) => (\n \n \n {[24, 30, 36].map((y) => (\n \n ))}\n \n \n ))}\n \n \n )\n}\n\n/** La pile de matériel : un bidon de protéines, des tapis roulés, des élastiques. */\nfunction PileMateriel({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n return (\n \n \n \n \n \n WHEY\n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les postes : un vélo d'appartement et sa console ——— */\n\n/** La console du vélo, qui dit l'état de son agent. */\nfunction Console({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n const g = cx - 22\n return (\n \n \n \n {statut === 'endormi' ? (\n \n ) : statut === 'absent' ? (\n <>\n \n \n \n \n \n {t.offNote}\n \n \n \n ) : statut === 'en-echec' ? (\n <>\n \n \n ERR\n \n \n \n ) : statut === 'au-travail' ? (\n <>\n \n {/* L'effort : des barres qui montent et descendent, comme un profil d'intervalle. */}\n {[0, 1, 2, 3, 4, 5].map((i) => (\n \n \n String(dy + Number(v) + 2))\n .join(';')}\n dur=\"1.2s\"\n repeatCount=\"indefinite\"\n />\n \n ))}\n \n ) : (\n <>\n \n \n READY\n \n \n )}\n {bientot ? (\n <>\n \n \n {t.inMinutes(bientot)}\n \n \n ) : null}\n \n )\n}\n\n/** Le tapis de sol, sa tranche où s'inscrit le nom. */\nfunction Tapis({ x, dy, dessus }: { x: number; dy: number; dessus: number }) {\n return (\n <>\n \n \n {[8, 16, 24, 32].map((v) => (\n \n ))}\n \n \n )\n}\n\n/** Le poste : un tapis, la console, le guidon, la roue d'inertie, une gourde, une serviette, des haltères. */\nfunction Velo({ cx, dy, x, dessus, statut, accent, bientot, emoji }: PropsBureau) {\n const pedale = statut === 'au-travail'\n const fx = cx + 30\n const fy = dy + 16\n return (\n \n \n {/* La roue d'inertie, qui tourne quand l'agent pédale. */}\n \n \n \n {pedale ? (\n \n ) : null}\n \n \n {/* Le guidon, poignées à la couleur de l'agent. */}\n \n \n \n {/* La gourde et l'emoji, la serviette, les haltères. */}\n \n \n \n {emoji}\n \n {/* La serviette pliée devant la gourde, les haltères au bout du tapis, loin de la roue. */}\n \n \n \n {/* En échec, le moteur de la roue fume. */}\n {statut === 'en-echec'\n ? [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n ))\n : null}\n \n )\n}\n\n/** Le bureau du coach : planchette, chronomètre, shaker, petite coupe. */\nfunction BureauCoach({ dy, x, dessus }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n {[14, 19, 24].map((v) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le fauteuil du coach, rouge et noir. */\nfunction FauteuilCoach({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** La selle du vélo. */\nfunction Selle({ x, y }: PropsSiege) {\n return (\n \n \n \n \n \n )\n}\n\n/** Le cadre arrière du vélo et son pied stabilisateur, qui passent devant le pédaleur. */\nfunction Cadre({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les tenues ——— */\n\nconst MAILLOTS = ['#ef4444', '#f97316', '#facc15', '#a3e635', '#22d3ee', '#3b82f6', '#a855f7', '#ec4899', '#f8fafc', '#111827']\nconst CHEVEUX = ['#2a1d14', '#5a3a22', '#c8a165', '#111111', '#8a4b2a', '#e5e5e5', '#b45309']\nconst PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nconst SHORTS = ['#111827', '#1e293b', '#374151', '#1e3a8a', '#7f1d1d']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nconst hachage = (id: string) => hacher(id, 13, 37)\n\n/** Débardeurs et t-shirts de couleur vive, shorts, baskets blanches ; le coach en survêtement rouge à bandes. */\nfunction tenueGym(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#4b5563', s: '#d9a57a', e: '#1c1917', c: '#dc2626', C: '#991b1b', t: '#f8fafc', k: '#111827', p: '#dc2626', b: '#f8fafc' }\n }\n if (id.startsWith('livreur:')) {\n return { h: '#5b3a1a', s: '#d9a57a', e: '#1c1917', c: '#7c4a1e', C: '#5b3a1a', t: '#facc15', k: '#111827', p: '#5b3a1a', b: '#111827' }\n }\n const h = hachage(id)\n const maillot = MAILLOTS[h % MAILLOTS.length]\n return {\n h: CHEVEUX[(h >>> 4) % CHEVEUX.length],\n s: PEAUX[(h >>> 8) % PEAUX.length],\n e: '#1c1917',\n c: maillot,\n C: `color-mix(in oklab, ${maillot} 75%, black)`,\n t: maillot,\n k: '#111827',\n p: SHORTS[(h >>> 12) % SHORTS.length],\n b: '#f8fafc',\n }\n}\n\n/** Un sportif sur deux s'entraîne casque sur les oreilles. */\nconst casqueSport = (id: string) => id !== CHEF_ID && !estInvite(id) && hachage(id) % 2 === 0\n\n/* Les lumières dans la nuit : l'enseigne du coach, la vitrine, les bornes, la télé, le bar, l'enseigne de la salle. */\nconst LUMIERES_GYM: Array = [\n { x: 222, y: 36, r: 60, couleur: '#f97316' },\n { x: 61, y: 60, r: 40, couleur: '#facc15' },\n { x: 373, y: 50, r: 50, couleur: '#a855f7' },\n { x: 417, y: 50, r: 45, couleur: '#22d3ee' },\n { x: 516, y: 44, r: 70, couleur: '#a855f7' },\n { x: 790, y: 56, r: 60, couleur: '#a3e635' },\n { x: 695, y: 226, r: 60, couleur: '#a3e635' },\n]\n\nexport const THEME_GYM: Theme = {\n coins: COINS_GYM,\n coinCafe: 'smoothie',\n fond: '#0b1220',\n Decor,\n Bureau: Velo,\n BureauChef: BureauCoach,\n plaque: '#e5e7eb',\n Assise: Selle,\n Dossier: Cadre,\n Fauteuil: FauteuilCoach,\n tenue: tenueGym,\n casque: casqueSport,\n CafeQuiCoule: BlenderEnMarche,\n lumieres: LUMIERES_GYM,\n // La console de chaque vélo éclaire en cyan.\n lumierePoste: (cx, dy) => [{ x: cx - 4, y: dy - 6, r: 40, couleur: CYAN }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/gym.tsx" }, { "path": "registry/pixel-openspace/themes/modern.tsx", "content": "'use client'\n\n/*\n * Le thème moderne épuré, le seul en clair : parquet de chêne, murs blancs,\n * bureaux assis-debout et portables, beaucoup de plantes. Le chef a sa\n * bibliothèque en chêne et ses lettres noires au mur ; l'espace détente, son\n * écran de présentation, son canapé vert sauge, sa table de ping-pong et ses\n * bornes ; la cuisine ouverte, son îlot, sa machine à espresso, sa fontaine à\n * eau pétillante et son frigo inox. T-shirts pastel, chinos et baskets\n * blanches.\n */\n\nimport { BUREAU, CHEF_ID, estInvite, type CoinDePause, type Statut } from '../engine'\nimport { Anim, Cliquable, MUR_SALLE, Plante, etapes, useTextes, hacher, type Lumiere } from '../primitives'\nimport type { PropsBureau, PropsDecor, PropsSiege, Theme } from '../theme'\nimport { Arcade, BorneCasseBriques, Porte } from './geek'\nimport type { SceneObject } from '../types'\n\n/* Les coins de pause : la même géographie que les autres thèmes. */\nconst COINS_MODERNE: Array = [\n { nom: 'cafe', x: 768, y: 100 },\n { nom: 'fontaine', x: 881, y: 104 },\n { nom: 'frigo', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'ping-pong', x: 636, y: 108 },\n // Sur le canapé, face à l'écran : de dos.\n { nom: 'canape-gauche', x: 482, y: 146, assis: true },\n { nom: 'canape-droite', x: 538, y: 146, assis: true },\n]\n\nconst MUR = { arete: '#a8a29e', face: '#f5f5f4', plinthe: '#e7e5e4', lame: '#c8a06a' }\nconst ENCRE = '#1c1917'\n\n/** Un mur blanc, vu de biais ; des lames de chêne verticales sur une partie. */\nfunction MurBlanc({\n x,\n largeur,\n y = 20,\n hauteur = 32,\n lames = 0,\n}: {\n x: number\n largeur: number\n y?: number\n hauteur?: number\n lames?: number\n}) {\n return (\n <>\n \n \n {Array.from({ length: lames }, (_, i) => (\n \n ))}\n \n \n )\n}\n\n/** Des lettres noires collées au mur : l'enseigne, sans néon. */\nfunction Lettres({ x, y, texte, taille = 10 }: { x: number; y: number; texte: string; taille?: number }) {\n return (\n \n {texte}\n \n )\n}\n\nfunction Decor({ hauteur, titre, liens, aller, jouer }: PropsDecor) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols : moquette grise chez le chef, béton clair dans l'espace détente, terrazzo en cuisine, chêne dans la grande salle. */}\n \n \n \n \n\n {/* Les murs du fond. */}\n \n \n \n\n {/* Le bureau du chef : la bibliothèque en chêne, les lettres au mur, les plantes. */}\n \n \n \n \n \n\n {/* L'espace détente : les bornes, l'écran de présentation, le canapé vert sauge, la table de ping-pong. */}\n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* La cuisine ouverte : l'îlot, la machine à espresso, la corbeille de fruits, la fontaine, le frigo inox. */}\n \n \n \n {[734, 774, 814].map((x) => (\n \n ))}\n \n \n {[\n [814, '#ef4444'],\n [821, '#facc15'],\n [828, '#84cc16'],\n ].map(([x, c]) => (\n \n ))}\n \n \n \n \n \n \n \n \n \n {[786, 848].map((x) => (\n \n \n \n \n ))}\n \n\n {/* La grande salle : les cartons, les plantes. */}\n \n \n\n {/* Le mur de la grande salle, blanc à lames de chêne, percé de ses trois entrées. */}\n {MUR_SALLE.map(([de, a]) => (\n \n 90 ? 4 : 0} />\n \n ))}\n 14 ? 7 : 9} />\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La bibliothèque en chêne : livres aux tons doux, plantes retombantes, un vase. */\nfunction Bibliotheque({ x }: { x: number }) {\n const livres = ['#fda4af', '#93c5fd', '#fde68a', '#a7f3d0', '#c4b5fd', '#fdba74', '#e7e5e4']\n return (\n \n \n \n {[44, 66, 88].map((y) => (\n \n ))}\n {[24, 46, 68].map((y, rang) => (\n \n {Array.from({ length: 6 }, (_, i) => (\n \n ))}\n \n ))}\n \n \n \n \n \n \n )\n}\n\n/** L'écran de présentation au mur : une courbe qui monte, des barres. */\nfunction EcranPresentation({ x }: { x: number }) {\n return (\n \n \n \n \n {[0, 1, 2, 3, 4].map((i) => (\n \n ))}\n \n \n \n \n \n \n )\n}\n\n/** Le canapé vert sauge, vu de dos depuis la salle. */\nfunction CanapeSauge({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La table de ping-pong, son filet, ses deux raquettes et la balle qui rebondit. */\nfunction PingPong({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La machine à espresso, chrome et noir. */\nfunction Espresso({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/** Le café qui coule dans la tasse, quand quelqu'un attend devant. */\nfunction CafeModerne() {\n return (\n \n \n \n \n \n )\n}\n\n/** La fontaine à eau pétillante, encastrée, avec ses carafes en verre. */\nfunction EauPetillante({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le grand frigo inox à deux portes. */\nfunction FrigoInox({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n )\n}\n\n/** Des cartons en kraft, juste livrés. */\nfunction CartonsKraft({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les postes ——— */\n\n/** Le portable, coque alu, ouvert sur le bureau ; ce que son écran affiche dit l'état de son agent. */\nfunction Portable({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n const l = 52\n const g = cx - l / 2\n return (\n \n {/* Le clavier du portable, puis la coque de l'écran. */}\n \n \n {[0, 1].map((rang) => (\n \n ))}\n \n \n {statut === 'endormi' ? (\n \n ) : statut === 'absent' ? (\n <>\n \n \n \n \n \n {t.offNote}\n \n \n \n ) : statut === 'en-echec' ? (\n <>\n \n \n \n \n ) : statut === 'au-travail' ? (\n <>\n \n {[0, 1, 2, 3].map((i) => {\n const w = [30, 18, 36, 14][i]\n return (\n \n \n \n )\n })}\n \n ) : (\n <>\n \n \n \n \n \n )}\n {bientot ? (\n <>\n \n \n {t.inMinutes(bientot)}\n \n \n ) : null}\n {statut === 'en-echec'\n ? [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n ))\n : null}\n \n )\n}\n\n/** Le plateau de chêne, sa tranche, ses pieds blancs de bureau assis-debout. */\nfunction PlateauChene({ x, dy, dessus }: { x: number; dy: number; dessus: number }) {\n return (\n <>\n \n \n \n \n \n \n \n \n )\n}\n\n/** Le poste : le portable, une souris, carnet, tasse en céramique, une petite plante grasse. */\nfunction BureauModerne({ cx, dy, x, dessus, statut, bientot, emoji }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n {emoji}\n \n \n )\n}\n\n/** Le bureau du chef : un grand écran fin vu de dos, un portable, un carnet, une plante. */\nfunction BureauChefModerne({ dy, x, dessus }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le fauteuil blanc du chef, coque moulée. */\nfunction FauteuilModerne({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n )\n}\n\n/** La chaise en maille graphite ; un liseré de la couleur de l'agent. */\nfunction AssiseMaille({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n )\n}\n\nfunction DossierMaille({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les tenues ——— */\n\nconst HAUTS = ['#fda4af', '#93c5fd', '#fde68a', '#a7f3d0', '#c4b5fd', '#fdba74', '#f5f5f4', '#cbd5e1', '#99f6e4', '#1c1917']\nconst CHEVEUX = ['#2a1d14', '#5a3a22', '#c8a165', '#111111', '#8a4b2a', '#e5e5e5', '#b45309']\nconst PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nconst BAS = ['#d6c4a1', '#a8a29e', '#1e3a8a', '#44403c', '#e7e5e4']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nconst hachage = (id: string) => hacher(id, 17, 41)\n\n/** T-shirts pastel, chinos, baskets blanches ; le chef en surchemise bleu marine. */\nfunction tenueModerne(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#78716c', s: '#f1c9a5', e: '#1c1917', c: '#1e3a8a', C: '#172554', t: '#f5f5f4', k: '#1c1917', p: '#d6c4a1', b: '#fafaf9' }\n }\n if (id.startsWith('livreur:')) {\n return { h: '#5b3a1a', s: '#d9a57a', e: '#1c1917', c: '#7c4a1e', C: '#5b3a1a', t: '#facc15', k: '#111827', p: '#5b3a1a', b: '#111827' }\n }\n const h = hachage(id)\n const haut = HAUTS[h % HAUTS.length]\n return {\n h: CHEVEUX[(h >>> 4) % CHEVEUX.length],\n s: PEAUX[(h >>> 8) % PEAUX.length],\n e: '#1c1917',\n c: haut,\n C: `color-mix(in oklab, ${haut} 80%, black)`,\n t: haut,\n k: '#f5f5f4',\n p: BAS[(h >>> 12) % BAS.length],\n b: '#fafaf9',\n }\n}\n\n/** Un sur trois écoute de la musique, casque blanc. */\nconst casqueBlanc = (id: string) => id !== CHEF_ID && !estInvite(id) && hachage(id) % 3 === 0\n\n/* La nuit : de grosses suspensions chaudes au-dessus des pièces, l'écran de présentation, le frigo. */\nconst LUMIERES_MODERNE: Array = [\n { x: 175, y: 110, r: 90, couleur: '#fde68a' },\n { x: 510, y: 120, r: 90, couleur: '#fde68a' },\n { x: 835, y: 110, r: 90, couleur: '#fde68a' },\n { x: 510, y: 44, r: 60, couleur: '#e0f2fe' },\n { x: 373, y: 50, r: 45, couleur: '#a855f7' },\n { x: 417, y: 50, r: 40, couleur: '#22d3ee' },\n]\n\nexport const THEME_MODERNE: Theme = {\n coins: COINS_MODERNE,\n coinCafe: 'cafe',\n fond: '#e7e5e4',\n Decor,\n Bureau: BureauModerne,\n BureauChef: BureauChefModerne,\n plaque: '#44403c',\n Assise: AssiseMaille,\n Dossier: DossierMaille,\n Fauteuil: FauteuilModerne,\n tenue: tenueModerne,\n casque: casqueBlanc,\n CafeQuiCoule: CafeModerne,\n lumieres: LUMIERES_MODERNE,\n // La nuit claire : un crépuscule bleu ardoise, plus léger que les autres thèmes.\n nuit: { couleur: '#1e293b', opacite: 0.42 },\n // Le chef, sans cravate, sa tasse à la main.\n tasse: (id) => id === CHEF_ID,\n // Une lampe de bureau chaude au-dessus de chaque poste.\n lumierePoste: (cx, dy) => [{ x: cx, y: dy + 10, r: 55, couleur: '#fde68a' }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/modern.tsx" }, { "path": "registry/pixel-openspace/themes/kitchen.tsx", "content": "'use client'\n\n/*\n * La cuisine de restaurant : damier gris, carrelage métro, pianos de\n * cuisson en inox. Au travail, la poêle grésille sur la flamme ; en échec,\n * elle brûle et fume noir. Le chef de cuisine a son bureau, sa cave à vins et\n * son ardoise ; la salle a ses bornes, l'ardoise du menu, sa banquette rouge\n * et le passe avec sa sonnette ; l'arrière-cuisine a la machine à café, la\n * plonge, le lave-vaisselle et la chambre froide. Des vestes de brigade de\n * toutes les couleurs, une toque pour la moitié, un bandana pour les autres.\n */\n\nimport { BUREAU, CHEF_ID, type CoinDePause, type Statut } from '../engine'\nimport { Anim, Cliquable, MUR_SALLE, etapes, hacher, useTextes, type Lumiere } from '../primitives'\nimport type { PropsBureau, PropsDecor, PropsSiege, Theme } from '../theme'\nimport { Arcade, BorneCasseBriques, Porte } from './geek'\nimport type { SceneObject } from '../types'\n\n/* Les coins de pause : la même géographie que les autres thèmes. */\nconst COINS_CUISINE: Array = [\n { nom: 'cafe', x: 768, y: 100 },\n { nom: 'plonge', x: 881, y: 104 },\n { nom: 'chambre-froide', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'passe', x: 636, y: 108 },\n // Sur la banquette de la salle, face au menu : de dos.\n { nom: 'banquette-gauche', x: 482, y: 146, assis: true },\n { nom: 'banquette-droite', x: 538, y: 146, assis: true },\n]\n\nconst INOX = { clair: '#e2e8f0', moyen: '#cbd5e1', sombre: '#94a3b8', ombre: '#64748b' }\nconst CRAIE = '#f1f5f9'\nconst ARDOISE = '#1f2937'\n\n/** Un mur en carrelage métro blanc, ses joints gris, et sa frise noire en haut. */\nfunction MurCarrele({ x, largeur, y = 20, hauteur = 32 }: { x: number; largeur: number; y?: number; hauteur?: number }) {\n return (\n <>\n \n \n \n \n \n )\n}\n\n/** Une ardoise, son cadre en bois et un texte à la craie. */\nfunction Ardoise({\n x,\n y,\n largeur,\n hauteur,\n texte,\n taille = 9,\n}: {\n x: number\n y: number\n largeur: number\n hauteur: number\n texte: string\n taille?: number\n}) {\n return (\n \n \n \n \n {texte}\n \n \n )\n}\n\nfunction Decor({ hauteur, titre, liens, aller, jouer }: PropsDecor) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n {/* Un damier adouci : en noir et blanc francs, les postes et les vestes blanches s'y perdaient. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols : parquet foncé chez le chef, tomettes en salle, carreaux gris en arrière-cuisine, damier en cuisine. */}\n \n \n \n \n\n {/* Les murs du fond. */}\n \n \n \n\n {/* Le bureau du chef de cuisine : la cave à vins, l'ardoise, le pot d'herbes. */}\n \n \n \n \n \n\n {/* La salle : les bornes, l'ardoise du menu, la banquette rouge et sa table, le passe. */}\n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n \n \n\n {/* L'arrière-cuisine : la machine à café, la plonge, le lave-vaisselle, la chambre froide. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* La cuisine : les cagettes de légumes livrées. */}\n \n\n {/* Le mur de la cuisine, carrelé, percé de ses trois entrées ; l'enseigne à la craie. */}\n {MUR_SALLE.map(([de, a]) => (\n \n \n \n ))}\n 14 ? 6 : 8} />\n \n \n \n \n \n \n \n \n )\n}\n\n/** La cave à vins du chef : des casiers en bois, des bouteilles couchées. */\nfunction CaveAVins({ x }: { x: number }) {\n const vins = ['#7f1d1d', '#14532d', '#7f1d1d', '#fde68a', '#7f1d1d', '#14532d']\n return (\n \n \n \n {[0, 1, 2, 3].map((rang) =>\n [0, 1, 2, 3, 4].map((col) => (\n \n \n \n \n )),\n )}\n \n )\n}\n\n/** Un pot de terre cuite et ses herbes : basilic, thym, romarin. */\nfunction PotDHerbes({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** L'ardoise du menu, au mur de la salle : le plat du jour, à la craie. */\nfunction ArdoiseMenu({ x }: { x: number }) {\n return (\n \n \n \n \n MENU\n \n {[40, 46, 52, 58].map((y, i) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** La table de la salle, sa nappe à carreaux rouges, deux assiettes, une bougie. */\nfunction TableNappe({ x, y }: { x: number; y: number }) {\n return (\n \n \n {Array.from({ length: 8 }, (_, i) => (\n \n ))}\n {[0, 1].map((i) => (\n \n ))}\n \n \n \n \n \n \n \n )\n}\n\n/** La banquette en skaï rouge, capitonnée, vue de dos. */\nfunction Banquette({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n {[16, 36, 56, 76].map((dx) => (\n \n ))}\n \n \n \n )\n}\n\n/** Le passe : le comptoir inox, les lampes chauffantes, les assiettes qui attendent, la sonnette. */\nfunction Passe({ x }: { x: number }) {\n return (\n \n \n {[x + 8, x + 34, x + 60].map((lx) => (\n \n \n \n \n \n \n ))}\n \n \n {[x + 8, x + 30, x + 52].map((px) => (\n \n \n \n \n \n ))}\n \n \n \n )\n}\n\n/** La machine à café du personnel, inox et noir. */\nfunction MachineACafe({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** Le café qui coule dans la tasse, quand quelqu'un attend devant. */\nfunction CafeCuisine() {\n return (\n \n \n \n \n \n )\n}\n\n/** La plonge : le bac inox, le robinet col de cygne, la pile d'assiettes. */\nfunction Plonge({ x }: { x: number }) {\n return (\n \n \n \n \n \n {[0, 1, 2, 3].map((i) => (\n \n ))}\n \n )\n}\n\n/** Le lave-vaisselle à capot, qui fume à chaque cycle. */\nfunction LaveVaisselle({ x }: { x: number }) {\n return (\n \n \n \n \n \n {[0, 0.8].map((debut) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** La chambre froide : sa porte inox épaisse, sa poignée, son givre. */\nfunction ChambreFroide({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n -2°\n \n {[24, 40, 56].map((y) => (\n \n ))}\n \n )\n}\n\n/** Les cagettes de légumes livrées : tomates, carottes, salades. */\nfunction Cagettes({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n const cagette = (cx: number, cy: number, largeur: number, legume: string) => (\n <>\n \n \n {Array.from({ length: Math.floor(largeur / 7) }, (_, i) => (\n \n ))}\n \n )\n return (\n \n {cagette(x, y + 24, 40, '#dc2626')}\n {cagette(x + 6, y + 4, 30, '#f97316')}\n {cagette(x + 46, y + 24, 22, '#22c55e')}\n \n )\n}\n\n/* ——— Les postes ——— */\n\n/** La barre à bons au-dessus du piano : le bon en cours, ou le post-it d'un poste fermé. */\nfunction BarreABons({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n return (\n \n \n {statut === 'absent' ? (\n \n \n \n {t.offNote}\n \n \n ) : (\n [-20, -4, 12].map((dx, i) => (\n \n \n \n \n \n ))\n )}\n {bientot ? (\n <>\n \n \n {t.inMinutes(bientot)}\n \n \n ) : null}\n \n )\n}\n\n/** La poêle sur son feu : ce qui s'y passe dit l'état de l'agent. */\nfunction Feu({ cx, dy, statut }: { cx: number; dy: number; statut: Statut }) {\n const flamme = statut === 'au-travail' || statut === 'en-echec'\n const echec = statut === 'en-echec'\n return (\n \n {/* Le brûleur, puis ses flammes. */}\n \n {flamme\n ? [-10, -4, 2, 8].map((dx, i) => (\n \n \n \n ))\n : null}\n {statut === 'absent' || statut === 'endormi' ? (\n // Feux éteints, le couvercle posé sur la marmite.\n <>\n \n \n \n \n ) : statut === 'au-travail' || statut === 'en-echec' ? (\n // La poêle et son manche ; dedans, ce qui saute, ou ce qui brûle.\n <>\n \n \n \n {echec ? null : (\n <>\n \n \n \n \n \n \n \n )}\n \n ) : (\n // Au repos, la marmite mijote.\n <>\n \n \n \n \n )}\n {/* La vapeur de ce qui cuit, ou la fumée noire de ce qui brûle. */}\n {statut === 'absent' || statut === 'endormi'\n ? null\n : [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** Le piano de cuisson : le dessus inox, la façade et ses boutons. */\nfunction Piano({ x, dy, dessus }: { x: number; dy: number; dessus: number }) {\n return (\n <>\n \n \n \n {[0.18, 0.82].map((k) => (\n \n ))}\n \n )\n}\n\n/** Le poste : le piano, le feu, la barre à bons, la planche à découper et le sel. */\nfunction PosteCuisson({ cx, dy, x, dessus, statut, bientot, emoji }: PropsBureau) {\n return (\n \n \n \n {/* Le feu, grossi de moitié : c'est lui qui dit l'état du poste, il doit se lire de loin. */}\n \n \n \n {/* La planche à découper et ses légumes, le sel, le torchon. */}\n \n \n \n \n \n \n \n {emoji}\n \n \n )\n}\n\n/** Le bureau du chef de cuisine : le livre de recettes, le portable, un verre de vin. */\nfunction BureauChefCuisine({ dy, x, dessus }: PropsBureau) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le fauteuil en cuir du chef de cuisine. */\nfunction FauteuilCuir({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n )\n}\n\n/** Le tabouret inox des postes, un liseré de la couleur de l'agent. */\nfunction AssiseTabouret({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n )\n}\n\nfunction PiedsTabouret({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les tenues ——— */\n\nconst TABLIERS = ['#f8fafc', '#1e3a8a', '#1f2937', '#7f1d1d', '#f8fafc', '#334155']\n/* Des vestes de toutes les brigades : tout en blanc, de dos, les cuisiniers ne se distinguaient plus. */\nconst VESTES = ['#f8fafc', '#1f2937', '#f8fafc', '#334155', '#1e3a8a', '#7f1d1d', '#e2e8f0']\nconst BANDANAS = ['#dc2626', '#2563eb', '#16a34a', '#f59e0b', '#9333ea']\nconst PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nconst PANTALONS = ['#1f2937', '#374151', '#111827']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nconst hachage = (id: string) => hacher(id, 19, 43)\n\n/** Vestes de brigade de toutes les couleurs, toque ou bandana ; le chef de cuisine en veste noire et toque. */\nfunction tenueCuisine(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#ffffff', s: '#f1c9a5', e: '#1c1917', c: '#111827', C: '#030712', t: '#f8fafc', k: '#e5e7eb', p: '#1f2937', b: '#111827' }\n }\n if (id.startsWith('livreur:')) {\n return { h: '#5b3a1a', s: '#d9a57a', e: '#1c1917', c: '#16a34a', C: '#14532d', t: '#facc15', k: '#111827', p: '#1f2937', b: '#111827' }\n }\n const h = hachage(id)\n const veste = VESTES[(h >>> 15) % VESTES.length]\n return {\n // Une toque blanche pour la moitié, un bandana de couleur pour les autres.\n h: h % 2 === 0 ? BANDANAS[(h >>> 3) % BANDANAS.length] : '#ffffff',\n s: PEAUX[(h >>> 6) % PEAUX.length],\n e: '#1c1917',\n c: veste,\n C: `color-mix(in oklab, ${veste} 75%, black)`,\n t: TABLIERS[(h >>> 9) % TABLIERS.length],\n k: '#e5e7eb',\n p: PANTALONS[(h >>> 12) % PANTALONS.length],\n b: '#111827',\n }\n}\n\n/* La nuit : les hottes au-dessus des pièces, les lampes chauffantes du passe, la bougie de la salle. */\nconst LUMIERES_CUISINE: Array = [\n { x: 175, y: 110, r: 85, couleur: '#fbbf24' },\n { x: 510, y: 120, r: 80, couleur: '#fdba74' },\n { x: 835, y: 110, r: 85, couleur: '#e2e8f0' },\n { x: 636, y: 34, r: 50, couleur: '#f97316' },\n { x: 510, y: 104, r: 30, couleur: '#f59e0b' },\n { x: 373, y: 50, r: 45, couleur: '#a855f7' },\n { x: 417, y: 50, r: 40, couleur: '#22d3ee' },\n]\n\nexport const THEME_CUISINE: Theme = {\n coins: COINS_CUISINE,\n coinCafe: 'cafe',\n fond: '#1c1917',\n Decor,\n Bureau: PosteCuisson,\n BureauChef: BureauChefCuisine,\n plaque: '#0f172a',\n Assise: AssiseTabouret,\n Dossier: PiedsTabouret,\n Fauteuil: FauteuilCuir,\n tenue: tenueCuisine,\n // Des toques et des bandanas, pas de casque.\n casque: () => false,\n CafeQuiCoule: CafeCuisine,\n lumieres: LUMIERES_CUISINE,\n // La hotte de chaque poste, et la flamme quand elle est allumée.\n lumierePoste: (cx, dy) => [{ x: cx, y: dy + 8, r: 55, couleur: '#fdba74' }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/kitchen.tsx" }, { "path": "registry/pixel-openspace/themes/neon.tsx", "content": "'use client'\n\n/*\n * La ville néon, la nuit : béton sombre, tubes roses et cyan, enseignes en\n * katakana. Le chef est un fixer, derrière sa baie de serveurs ; l'espace\n * détente a ses bornes, un panneau holographique, un banc éclairé par en\n * dessous et l'établi où l'on répare un drone ; le coin repas est un stand de\n * ramen sous ses rideaux rouges, avec un distributeur de canettes qui\n * clignote et un frigo couvert d'autocollants. Les postes sont des écrans\n * holographiques : le code y défile en vert, une panne y crache des glitchs.\n * Sweats sombres, cheveux parfois roses, cyan ou violets, un casque sur deux.\n */\n\nimport { BUREAU, CHEF_ID, estInvite, type CoinDePause, type Statut } from '../engine'\nimport { Anim, Cliquable, MUR_SALLE, Neon, etapes, useTextes, hacher, type Lumiere } from '../primitives'\nimport type { PropsBureau, PropsDecor, PropsSiege, Theme } from '../theme'\nimport { Arcade, BorneCasseBriques, Porte } from './geek'\nimport type { SceneObject } from '../types'\n\n/* Les coins de pause : la même géographie que les autres thèmes. */\nconst COINS_NEON: Array = [\n { nom: 'cafe', x: 768, y: 100 },\n { nom: 'distributeur', x: 881, y: 104 },\n { nom: 'frigo', x: 950, y: 108 },\n { nom: 'arcade', x: 372, y: 112 },\n { nom: 'arcade-2', x: 415, y: 112 },\n { nom: 'etabli', x: 636, y: 108 },\n // Sur le banc, face au panneau holographique : de dos.\n { nom: 'banc-gauche', x: 482, y: 146, assis: true },\n { nom: 'banc-droite', x: 538, y: 146, assis: true },\n]\n\nconst ROSE = '#f472b6'\nconst CYAN = '#22d3ee'\nconst VIOLET = '#a855f7'\nconst NUIT = '#0b0714'\nconst BETON = { arete: '#2a2238', face: '#171124', plinthe: '#0f0a1a' }\n\n/** Un mur de béton sombre, son tube néon en haut. */\nfunction MurNeon({\n x,\n largeur,\n y = 20,\n hauteur = 32,\n tube,\n}: {\n x: number\n largeur: number\n y?: number\n hauteur?: number\n tube?: string\n}) {\n return (\n <>\n \n \n {tube ? (\n <>\n \n \n \n ) : null}\n \n \n )\n}\n\n/** Des katakana qui tombent sur un écran, colonne par colonne. */\nfunction Pluie({ x, y, largeur, hauteur, couleur = '#4ade80' }: { x: number; y: number; largeur: number; hauteur: number; couleur?: string }) {\n const colonnes = Math.floor(largeur / 8)\n const signes = 'アイウエオカキクケコサシスセソ'\n return (\n \n {Array.from({ length: colonnes }, (_, i) => (\n \n {signes[(i * 5) % signes.length]}\n \n \n ))}\n \n )\n}\n\nfunction Decor({ hauteur, titre, liens, aller, jouer }: PropsDecor) {\n const t = useTextes()\n const bas = hauteur - 20\n const lien = (objet: SceneObject) => ({ titre: t.objects[objet], faire: () => aller(objet), actif: Boolean(liens[objet]) })\n return (\n <>\n \n \n \n \n \n {/* Les reflets mouillés des néons sur le sol. */}\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n {/* Les sols : moquette violette chez le fixer, dalles quadrillées de rose à la détente, planches au stand de ramen, métal mouillé dans la grande salle. */}\n \n \n \n \n\n {/* Les murs du fond, chacun son tube. */}\n \n \n \n\n {/* Chez le fixer : la baie de serveurs, son enseigne au néon rose. */}\n \n \n \n \n\n {/* L'espace détente : les bornes, le panneau holographique, le banc, l'établi du drone. */}\n jouer('snake')}>\n \n \n jouer('casse-briques')}>\n \n \n \n \n \n \n \n \n \n\n {/* Le stand de ramen : le comptoir, les rideaux rouges, le bol qui fume, le distributeur, le frigo. */}\n \n \n \n \n \n \n \n {[786, 848].map((x) => (\n \n \n \n \n \n ))}\n\n {/* La grande salle : les caisses de matériel. */}\n \n\n {/* Le mur de la grande salle, son enseigne au néon cyan. */}\n {MUR_SALLE.map(([de, a]) => (\n 90 ? CYAN : undefined} />\n ))}\n 14 ? 7 : 9} />\n \n \n \n \n \n \n \n \n \n )\n}\n\n/** La baie de serveurs du fixer : ses tiroirs, ses diodes qui clignotent. */\nfunction BaieServeurs({ x }: { x: number }) {\n return (\n \n \n \n {Array.from({ length: 7 }, (_, i) => (\n \n \n {[0, 1, 2].map((d) => (\n \n \n \n ))}\n \n \n ))}\n \n )\n}\n\n/** Le panneau holographique : un visage en lignes cyan, des katakana qui tombent. */\nfunction Hologramme({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/** Le banc, vu de dos depuis la salle, éclairé par un tube rose en dessous. */\nfunction Banc({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** L'établi du drone : le drone ouvert, ses hélices, le fer à souder qui fume. */\nfunction EtabliDrone({ x }: { x: number }) {\n return (\n \n \n \n \n \n {/* Le drone : son corps, ses quatre bras, ses hélices qui tournent à vide. */}\n \n \n {[\n [x + 16, 50],\n [x + 50, 50],\n [x + 16, 72],\n [x + 50, 72],\n ].map(([hx, hy], i) => (\n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n )\n}\n\n/** Le stand de ramen : le comptoir, les rideaux rouges (noren), la lanterne, le bol qui fume. */\nfunction StandRamen() {\n return (\n \n \n {[0, 1, 2, 3].map((i) => (\n \n \n \n \n ))}\n \n ラーメン\n \n \n \n \n {/* La lanterne rouge. */}\n \n \n \n {/* Le bol, ses baguettes. */}\n \n \n \n \n \n \n \n )\n}\n\n/** La vapeur du bol, quand quelqu'un attend au comptoir. */\nfunction VapeurRamen() {\n return (\n \n {[0, 0.5, 1].map((debut, i) => (\n \n \n \n \n ))}\n \n )\n}\n\n/** Le distributeur de canettes : sa façade qui clignote, ses rangées de canettes. */\nfunction DistributeurCanettes({ x }: { x: number }) {\n const canettes = [ROSE, CYAN, '#facc15', VIOLET, '#4ade80']\n return (\n \n \n \n \n \n \n {[0, 1, 2, 3].map((rang) =>\n [0, 1, 2].map((col) => (\n \n )),\n )}\n \n \n \n \n )\n}\n\n/** Le frigo couvert d'autocollants. */\nfunction FrigoAutocollants({ x }: { x: number }) {\n return (\n \n \n \n \n \n \n \n \n \n \n ⚡\n \n \n )\n}\n\n/** Des caisses de matériel, marquées au pochoir. */\nfunction Caisses({\n x,\n y,\n lien,\n}: {\n x: number\n y: number\n lien: (objet: SceneObject) => { titre: string; faire: () => void; actif: boolean }\n}) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les postes ——— */\n\n/** L'écran holographique : ce qu'il affiche dit l'état de son agent. */\nfunction EcranHolo({ cx, dy, statut, bientot }: { cx: number; dy: number; statut: Statut; bientot: number | null }) {\n const t = useTextes()\n const l = 52\n const g = cx - l / 2\n return (\n \n {/* Le projecteur posé sur le plateau, puis le cadre de lumière de l'écran. */}\n \n \n \n {statut === 'endormi' ? (\n // En veille : l'écran noir, sans le post-it de l'absent.\n \n ) : statut === 'absent' ? (\n <>\n \n \n \n \n \n {t.offNote}\n \n \n \n ) : statut === 'en-echec' ? (\n // Le glitch : des bandes roses et cyan décalées, qui sautent.\n <>\n \n {[0, 1, 2, 3, 4].map((i) => (\n \n \n \n ))}\n \n ERR\n \n \n ) : statut === 'au-travail' ? (\n <>\n \n {[0, 1, 2, 3].map((i) => {\n const w = [30, 18, 36, 14][i]\n return (\n \n \n \n )\n })}\n \n ) : (\n // Au repos : le bureau néon, une fenêtre rose, une fenêtre cyan.\n <>\n \n \n \n \n )}\n {bientot ? (\n <>\n \n \n {t.inMinutes(bientot)}\n \n \n ) : null}\n {statut === 'en-echec'\n ? [0, 0.6, 1.2].map((debut, i) => (\n \n \n \n \n ))\n : null}\n \n )\n}\n\n/** Le plateau en métal noir, son liseré néon de la couleur de l'agent. */\nfunction PlateauNoir({ x, dy, dessus, accent }: { x: number; dy: number; dessus: number; accent: string }) {\n return (\n <>\n \n \n \n \n \n \n \n )\n}\n\n/** Le poste : l'écran holographique, un clavier qui luit, une canette, l'emoji de l'agent en autocollant. */\nfunction BureauNeon({ cx, dy, x, dessus, statut, accent, bientot, emoji }: PropsBureau) {\n const allume = statut !== 'absent' && statut !== 'endormi'\n return (\n \n \n \n \n \n \n \n \n \n {emoji}\n \n \n )\n}\n\n/** Le bureau du fixer : deux écrans vus de dos, une mallette, une canette. */\nfunction BureauChefNeon({ dy, x, dessus }: PropsBureau) {\n return (\n \n \n {[6, 42].map((dx) => (\n \n \n \n \n ))}\n \n \n \n \n )\n}\n\n/** Le fauteuil du fixer, cuir noir et liseré rose. */\nfunction FauteuilNeon({ x, y }: { x: number; y: number }) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/** Le siège baquet noir, un liseré de la couleur de l'agent. */\nfunction AssiseBaquet({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n )\n}\n\nfunction DossierBaquet({ x, y, couleur }: PropsSiege) {\n return (\n \n \n \n \n \n \n \n )\n}\n\n/* ——— Les tenues ——— */\n\nconst SWEATS = ['#18181b', '#1e1b4b', '#3b0764', '#0f172a', '#27272a', '#111827', '#4c0519', '#164e63']\nconst CORDONS = [ROSE, CYAN, VIOLET, '#facc15', '#4ade80']\nconst CHEVEUX = ['#111111', '#2a1d14', ROSE, CYAN, VIOLET, '#e5e5e5', '#5a3a22', '#111111']\nconst PEAUX = ['#f1c9a5', '#d9a57a', '#a86f48', '#7a4a2c', '#f5d6bf']\nconst BAS = ['#18181b', '#27272a', '#1e293b', '#0f172a']\n\n/** Le nombre de cet agent dans ce thème : chaque thème a sa graine, pour des tenues qui changent d'un thème à l'autre. */\nconst hachage = (id: string) => hacher(id, 29, 43)\n\n/** Sweats sombres aux cordons fluo, cheveux parfois teints ; le fixer en manteau long. */\nfunction tenueNeon(id: string): Record {\n if (id === CHEF_ID) {\n return { h: '#111111', s: '#d9a57a', e: '#f472b6', c: '#09090b', C: '#18181b', t: ROSE, k: CYAN, p: '#18181b', b: '#09090b' }\n }\n if (id.startsWith('livreur:')) {\n return { h: '#111111', s: '#d9a57a', e: '#1c1917', c: '#facc15', C: '#ca8a04', t: '#18181b', k: '#18181b', p: '#18181b', b: '#09090b' }\n }\n const h = hachage(id)\n const sweat = SWEATS[h % SWEATS.length]\n const cordon = CORDONS[(h >>> 3) % CORDONS.length]\n return {\n h: CHEVEUX[(h >>> 6) % CHEVEUX.length],\n s: PEAUX[(h >>> 9) % PEAUX.length],\n e: '#0b0714',\n c: sweat,\n C: cordon,\n t: cordon,\n k: cordon,\n p: BAS[(h >>> 12) % BAS.length],\n b: '#09090b',\n }\n}\n\n/** Un sur deux a son casque sur les oreilles, cerclé de néon. */\nconst casqueNeon = (id: string) => id !== CHEF_ID && !estInvite(id) && hachage(id) % 2 === 0\n\n/* La nuit : les tubes des murs, les enseignes, le panneau holographique, le distributeur, la lanterne. */\nconst LUMIERES_NEON: Array = [\n { x: 175, y: 40, r: 80, couleur: VIOLET },\n { x: 222, y: 42, r: 60, couleur: ROSE },\n { x: 510, y: 40, r: 90, couleur: ROSE },\n { x: 510, y: 44, r: 60, couleur: CYAN },\n { x: 835, y: 40, r: 80, couleur: CYAN },\n { x: 884, y: 30, r: 45, couleur: CYAN },\n { x: 721, y: 38, r: 30, couleur: '#ef4444' },\n { x: 373, y: 50, r: 45, couleur: VIOLET },\n { x: 417, y: 50, r: 40, couleur: CYAN },\n { x: 510, y: 165, r: 60, couleur: ROSE },\n { x: 695, y: 228, r: 70, couleur: CYAN },\n]\n\nexport const THEME_NEON: Theme = {\n coins: COINS_NEON,\n coinCafe: 'cafe',\n fond: NUIT,\n Decor,\n Bureau: BureauNeon,\n BureauChef: BureauChefNeon,\n plaque: CYAN,\n Assise: AssiseBaquet,\n Dossier: DossierBaquet,\n Fauteuil: FauteuilNeon,\n tenue: tenueNeon,\n casque: casqueNeon,\n CafeQuiCoule: VapeurRamen,\n lumieres: LUMIERES_NEON,\n // Il fait déjà nuit dans la salle : un voile violet plus léger, que les néons percent.\n nuit: { couleur: '#0b0620', opacite: 0.45 },\n // Le halo de l'écran holographique au-dessus de chaque poste occupé.\n lumierePoste: (cx, dy, accent) => [{ x: cx, y: dy, r: 45, couleur: accent }],\n}\n", "type": "registry:component", "target": "components/pixel-openspace/themes/neon.tsx" } ], "type": "registry:block" }