From e7478d3c64889ab35d91fe69fd06969e4aeb71bd Mon Sep 17 00:00:00 2001 From: yasder5 <102179445+Yasder5@users.noreply.github.com> Date: Sun, 4 Oct 2026 14:22:40 +0200 Subject: [PATCH] =?UTF-8?q?Navigation=20manette=20:=20focus=20spatial,=20G?= =?UTF-8?q?amepad=20API=20Xbox/PlayStation,=20r=C3=A9p=C3=A9tition,=20glyp?= =?UTF-8?q?hes=20adapt=C3=A9s,=20vibration,=20i18n=20FR/EN?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/src/i18n/en.ts | 14 ++++ src/renderer/src/i18n/fr.ts | 12 ++++ src/renderer/src/i18n/i18n.tsx | 18 ++++++ src/renderer/src/nav/glyph-map.ts | 10 +++ src/renderer/src/nav/glyphs.tsx | 22 +++++++ src/renderer/src/nav/input.ts | 103 ++++++++++++++++++++++++++++++ src/renderer/src/nav/nav.tsx | 94 +++++++++++++++++++++++++++ src/renderer/src/nav/sounds.ts | 38 +++++++++++ src/renderer/src/nav/spatial.ts | 27 ++++++++ tests/i18n.test.ts | 13 ++++ tests/input.test.ts | 38 +++++++++++ tests/spatial.test.ts | 32 ++++++++++ 12 files changed, 421 insertions(+) create mode 100644 src/renderer/src/i18n/en.ts create mode 100644 src/renderer/src/i18n/fr.ts create mode 100644 src/renderer/src/i18n/i18n.tsx create mode 100644 src/renderer/src/nav/glyph-map.ts create mode 100644 src/renderer/src/nav/glyphs.tsx create mode 100644 src/renderer/src/nav/input.ts create mode 100644 src/renderer/src/nav/nav.tsx create mode 100644 src/renderer/src/nav/sounds.ts create mode 100644 src/renderer/src/nav/spatial.ts create mode 100644 tests/i18n.test.ts create mode 100644 tests/input.test.ts create mode 100644 tests/spatial.test.ts diff --git a/src/renderer/src/i18n/en.ts b/src/renderer/src/i18n/en.ts new file mode 100644 index 0000000..0a76169 --- /dev/null +++ b/src/renderer/src/i18n/en.ts @@ -0,0 +1,14 @@ +import type { fr } from './fr' + +export const en: Record = { + 'hint.select': 'Select', + 'hint.back': 'Back', + 'hint.ok': 'Confirm', + 'hint.delete': 'Delete', + 'hint.space': 'Space', + 'hint.shift': 'Shift', + 'kb.title': 'Input', + 'kb.ok': 'OK', + 'kb.space': 'Space', + 'kb.delete': 'Delete' +} diff --git a/src/renderer/src/i18n/fr.ts b/src/renderer/src/i18n/fr.ts new file mode 100644 index 0000000..940abf2 --- /dev/null +++ b/src/renderer/src/i18n/fr.ts @@ -0,0 +1,12 @@ +export const fr = { + 'hint.select': 'Choisir', + 'hint.back': 'Retour', + 'hint.ok': 'Valider', + 'hint.delete': 'Effacer', + 'hint.space': 'Espace', + 'hint.shift': 'Majuscules', + 'kb.title': 'Saisie', + 'kb.ok': 'OK', + 'kb.space': 'Espace', + 'kb.delete': 'Effacer' +} diff --git a/src/renderer/src/i18n/i18n.tsx b/src/renderer/src/i18n/i18n.tsx new file mode 100644 index 0000000..622dcd1 --- /dev/null +++ b/src/renderer/src/i18n/i18n.tsx @@ -0,0 +1,18 @@ +/* Traductions : FR par défaut, EN. Clés plates, variables {nom}. */ +import { useCallback } from 'react' +import { useSettings } from '../state/settings' +import { en } from './en' +import { fr } from './fr' + +export type Key = keyof typeof fr +export const dicts = { fr, en } satisfies Record> + +export function translate(lang: 'fr' | 'en', key: string, vars?: Record): string { + const s = (dicts[lang] as Record)[key] ?? (fr as Record)[key] ?? key + return vars ? s.replace(/\{(\w+)\}/g, (_, k) => String(vars[k] ?? '')) : s +} + +export function useT() { + const { settings } = useSettings() + return useCallback((key: string, vars?: Record) => translate(settings.language, key, vars), [settings.language]) +} diff --git a/src/renderer/src/nav/glyph-map.ts b/src/renderer/src/nav/glyph-map.ts new file mode 100644 index 0000000..8fff9ad --- /dev/null +++ b/src/renderer/src/nav/glyph-map.ts @@ -0,0 +1,10 @@ +/* Libellés des boutons selon la manette (pur, testé). */ +import type { Action, InputKind } from './input' + +const XBOX: Partial> = { accept: 'A', back: 'B', x: 'X', y: 'Y', lb: 'LB', rb: 'RB', lt: 'LT', rt: 'RT', menu: '☰', view: '⧉' } +const PS: Partial> = { accept: '✕', back: '○', x: '□', y: '△', lb: 'L1', rb: 'R1', lt: 'L2', rt: 'R2', menu: 'OPTIONS', view: 'SHARE' } +const KEY: Partial> = { accept: 'Entrée', back: 'Échap', x: 'X', y: 'Y', lb: 'Q', rb: 'E', lt: 'PgPréc', rt: 'PgSuiv', menu: 'F1', view: 'Tab' } + +export function glyph(a: Action, kind: InputKind): string { + return (kind === 'ps' ? PS : kind === 'xbox' ? XBOX : KEY)[a] ?? a +} diff --git a/src/renderer/src/nav/glyphs.tsx b/src/renderer/src/nav/glyphs.tsx new file mode 100644 index 0000000..3c118ee --- /dev/null +++ b/src/renderer/src/nav/glyphs.tsx @@ -0,0 +1,22 @@ +/* Boutons affichés selon la manette détectée (A/B Xbox, Croix/Rond PlayStation, touches clavier). */ +import { glyph } from './glyph-map' +import type { Action } from './input' +import { useNavCtx } from './nav' +import { useT } from '../i18n/i18n' + +export function Glyph({ action }: { action: Action }) { + const { kind } = useNavCtx() + return {glyph(action, kind)} +} + +/* Barre d'aide en bas d'écran : ce que fait chaque bouton ici */ +export function HintBar({ items }: { items: [Action, string][] }) { + const t = useT() + return ( +
+ {items.map(([a, label]) => ( + {t(label)} + ))} +
+ ) +} diff --git a/src/renderer/src/nav/input.ts b/src/renderer/src/nav/input.ts new file mode 100644 index 0000000..bf82be8 --- /dev/null +++ b/src/renderer/src/nav/input.ts @@ -0,0 +1,103 @@ +/* Entrées : manette (Gamepad API), clavier, souris, ramenées à des actions. Répétition quand une direction est tenue. */ + +export type Action = 'up' | 'down' | 'left' | 'right' | 'accept' | 'back' | 'x' | 'y' | 'lb' | 'rb' | 'lt' | 'rt' | 'menu' | 'view' +export type InputKind = 'xbox' | 'ps' | 'keyboard' | 'mouse' + +const REPEAT_DELAY = 380, REPEAT_RATE = 80 // ms +const DIRS: Action[] = ['up', 'down', 'left', 'right'] + +/* Boutons de la disposition standard (W3C) */ +const BUTTONS: [number, Action][] = [ + [0, 'accept'], [1, 'back'], [2, 'x'], [3, 'y'], [4, 'lb'], [5, 'rb'], [6, 'lt'], [7, 'rt'], [8, 'view'], [9, 'menu'], + [12, 'up'], [13, 'down'], [14, 'left'], [15, 'right'] +] + +const KEYS: Record = { + ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'left', ArrowRight: 'right', + Enter: 'accept', ' ': 'accept', Escape: 'back', Backspace: 'back', + KeyX: 'x', KeyY: 'y', KeyQ: 'lb', KeyE: 'rb', PageUp: 'lt', PageDown: 'rt', F1: 'menu', Tab: 'view' +} + +export function padKind(id: string): InputKind { + return /054c|playstation|dualsense|dualshock|wireless controller/i.test(id) ? 'ps' : 'xbox' +} + +/* Gestion de la répétition pour un bouton tenu ; renvoie true si l'action doit partir à cet instant */ +export class Repeater { + private since = new Map() + private last = new Map() + step(a: Action, down: boolean, now: number): boolean { + if (!down) { this.since.delete(a); return false } + const s = this.since.get(a) + if (s === undefined) { this.since.set(a, now); this.last.set(a, now); return true } + if (!DIRS.includes(a)) return false // seules les directions se répètent + if (now - s >= REPEAT_DELAY && now - (this.last.get(a) ?? 0) >= REPEAT_RATE) { this.last.set(a, now); return true } + return false + } +} + +/* Lecture des états d'une manette en actions enfoncées */ +export function padActions(gp: Pick, dead = 0.5): Set { + const on = new Set() + for (const [i, a] of BUTTONS) if (gp.buttons[i]?.pressed) on.add(a) + const [x = 0, y = 0] = gp.axes + if (x < -dead) on.add('left') + if (x > dead) on.add('right') + if (y < -dead) on.add('up') + if (y > dead) on.add('down') + return on +} + +export interface InputHandlers { + action: (a: Action) => void + kind: (k: InputKind) => void + guideHeld?: () => void +} + +/* Démarre l'écoute ; renvoie une fonction d'arrêt */ +export function startInput(h: InputHandlers): () => void { + const rep = new Repeater() + let raf = 0, kind: InputKind | null = null, guideSince = 0 + const setKind = (k: InputKind) => { if (k !== kind) { kind = k; h.kind(k) } } + + const loop = () => { + raf = requestAnimationFrame(loop) + if (!document.hasFocus()) return + const now = performance.now() + const pads = navigator.getGamepads?.() ?? [] + const on = new Set() + let guide = false + for (const gp of pads) { + if (!gp || !gp.connected) continue + const acts = padActions(gp) + if (acts.size) setKind(padKind(gp.id)) + acts.forEach((a) => on.add(a)) + if (gp.buttons[16]?.pressed) guide = true + } + for (const [, a] of BUTTONS) if (rep.step(a, on.has(a), now)) h.action(a) + // bouton Guide / PS tenu 0,8 s (quand Chromium le remonte ; sinon le processus principal s'en charge via XInput) + if (guide) { if (!guideSince) guideSince = now; else if (now - guideSince > 800) { guideSince = Infinity; h.guideHeld?.() } } else guideSince = 0 + } + raf = requestAnimationFrame(loop) + + const onKey = (e: KeyboardEvent) => { + const a = KEYS[e.key] ?? KEYS[e.code] + const t = e.target as HTMLElement + if (t?.tagName === 'INPUT' && !['ArrowUp', 'ArrowDown', 'Enter', 'Escape', 'Tab'].includes(e.key)) return // saisie au clavier physique + if (!a) return + e.preventDefault() + setKind('keyboard') + h.action(a) // le clavier répète déjà tout seul + } + const onMouse = () => setKind('mouse') + addEventListener('keydown', onKey) + addEventListener('mousemove', onMouse) + return () => { cancelAnimationFrame(raf); removeEventListener('keydown', onKey); removeEventListener('mousemove', onMouse) } +} + +export function rumble(): void { + for (const gp of navigator.getGamepads?.() ?? []) { + const act = (gp as Gamepad & { vibrationActuator?: { playEffect: (t: string, p: object) => Promise } })?.vibrationActuator + act?.playEffect('dual-rumble', { duration: 35, weakMagnitude: 0.25, strongMagnitude: 0 }).catch(() => {}) + } +} diff --git a/src/renderer/src/nav/nav.tsx b/src/renderer/src/nav/nav.tsx new file mode 100644 index 0000000..423ae06 --- /dev/null +++ b/src/renderer/src/nav/nav.tsx @@ -0,0 +1,94 @@ +/* Gestionnaire de navigation : focus spatial dans la portée active (écran ou fenêtre modale), actions manette/clavier, sons. */ +import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react' +import type { SoundName } from '@shared/theme' +import { useSettings } from '../state/settings' +import { startInput, rumble, type Action, type InputKind } from './input' +import { play } from './sounds' +import { pickNext, type Dir } from './spatial' + +type Handler = (a: Action) => boolean | void // true = action consommée + +interface Ctx { + kind: InputKind + focus: (el: Element | null) => void + push: (h: { current: Handler }) => () => void + sound: (s: SoundName) => void + current: () => HTMLElement | null +} + +const NavCtx = createContext(null!) +const SEL = '[data-nav]:not([disabled])' + +/* Portée active : la dernière fenêtre modale ouverte, sinon tout le document */ +const scope = (): ParentNode => { + const s = document.querySelectorAll('[data-nav-scope]') + return s.length ? s[s.length - 1] : document +} +const visible = (el: Element) => { const r = el.getBoundingClientRect(); return r.width > 0 && r.height > 0 } + +export function NavProvider({ children, onGuide }: { children: ReactNode; onGuide?: () => void }) { + const [kind, setKind] = useState('mouse') + const cur = useRef(null) + const stack = useRef<{ current: Handler }[]>([]) + const { settings } = useSettings() + const vib = useRef(settings.vibration) + vib.current = settings.vibration + + const focus = useCallback((el: Element | null) => { + if (!(el instanceof HTMLElement) || el === cur.current) return + cur.current?.classList.remove('is-focused') + cur.current = el + el.classList.add('is-focused') + el.focus({ preventScroll: true }) + el.scrollIntoView({ block: el.dataset.navScroll === 'center' ? 'center' : 'nearest', inline: 'nearest', behavior: 'smooth' }) + }, []) + + /* Remet le focus sur un élément valide (écran changé, élément supprimé, fenêtre fermée) */ + const refocus = useCallback(() => { + const sc = scope(), c = cur.current + if (c && c.isConnected && (sc === document || (sc as Element).contains(c)) && visible(c)) return + const auto = sc.querySelector('[data-nav-autofocus]' ) ?? [...sc.querySelectorAll(SEL)].find(visible) ?? null + if (c && !c.isConnected) cur.current = null + if (auto) focus(auto) + }, [focus]) + + const move = useCallback((dir: Dir) => { + const sc = scope(), from = cur.current + const els = [...sc.querySelectorAll(SEL)].filter(visible) + if (!from || !from.isConnected) { if (els[0]) focus(els[0]); return } + // un groupe (data-nav-group) garde le focus dans sa ligne pour gauche/droite + const r = from.getBoundingClientRect(), box = { x: r.left, y: r.top, w: r.width, h: r.height } + const next = pickNext(box, els.filter((e) => e !== from).map((el) => { const b = el.getBoundingClientRect(); return { el, box: { x: b.left, y: b.top, w: b.width, h: b.height } } }), dir) + if (next) { focus(next.el); play('move'); if (vib.current) rumble() } + }, [focus]) + + useEffect(() => { + const stop = startInput({ + kind: (k) => { setKind(k); document.documentElement.dataset.input = k === 'mouse' ? 'mouse' : k === 'keyboard' ? 'keyboard' : 'pad' }, + action: (a) => { + for (let i = stack.current.length - 1; i >= 0; i--) if (stack.current[i].current(a)) return + if (a === 'up' || a === 'down' || a === 'left' || a === 'right') move(a) + else if (a === 'accept' && cur.current) { play('select'); cur.current.click() } + }, + guideHeld: onGuide + }) + const over = (e: PointerEvent) => { const t = (e.target as Element).closest?.(SEL); if (t) focus(t) } + const mo = new MutationObserver(() => requestAnimationFrame(refocus)) + mo.observe(document.body, { childList: true, subtree: true }) + addEventListener('pointerover', over) + return () => { stop(); mo.disconnect(); removeEventListener('pointerover', over) } + }, [move, focus, refocus, onGuide]) + + const push = useCallback((h: { current: Handler }) => { stack.current.push(h); return () => { stack.current = stack.current.filter((x) => x !== h) } }, []) + return cur.current }}>{children} +} + +export const useNavCtx = () => useContext(NavCtx) + +/* Intercepte les actions tant que le composant est affiché (le plus récent passe en premier) */ +export function useNav(handler: Handler, active = true): void { + const { push } = useNavCtx() + const ref = useRef(handler) + ref.current = handler + useEffect(() => (active ? push(ref) : undefined), [push, active]) +} diff --git a/src/renderer/src/nav/sounds.ts b/src/renderer/src/nav/sounds.ts new file mode 100644 index 0000000..432fe9f --- /dev/null +++ b/src/renderer/src/nav/sounds.ts @@ -0,0 +1,38 @@ +/* Sons de navigation du thème (Web Audio : latence faible, plusieurs sons superposables). */ +import type { SoundName, ThemeManifest } from '@shared/theme' + +let ctx: AudioContext | null = null +const buffers = new Map() +let volume = 0.6, token = 0 + +export async function loadSounds(base: string, sounds: ThemeManifest['sounds']): Promise { + const my = ++token + buffers.clear() + ctx ??= new AudioContext() + await Promise.all( + Object.entries(sounds).map(async ([name, rel]) => { + try { + const data = await (await fetch(base + rel)).arrayBuffer() + const buf = await ctx!.decodeAudioData(data) + if (my === token) buffers.set(name as SoundName, buf) // un autre thème a pu être choisi entre-temps + } catch { + /* son manquant ou illisible : silence */ + } + }) + ) +} + +export function setVolume(v: number): void { + volume = v +} + +export function play(name: SoundName): void { + const buf = buffers.get(name) + if (!ctx || !buf || volume <= 0) return + if (ctx.state === 'suspended') ctx.resume() + const src = ctx.createBufferSource(), gain = ctx.createGain() + gain.gain.value = volume + src.buffer = buf + src.connect(gain).connect(ctx.destination) + src.start() +} diff --git a/src/renderer/src/nav/spatial.ts b/src/renderer/src/nav/spatial.ts new file mode 100644 index 0000000..b7f0f65 --- /dev/null +++ b/src/renderer/src/nav/spatial.ts @@ -0,0 +1,27 @@ +/* Focus spatial : choisit l'élément le plus naturel dans une direction. Pur (rectangles en entrée) pour être testé. */ + +export type Dir = 'up' | 'down' | 'left' | 'right' +export interface Box { x: number; y: number; w: number; h: number } + +/* Distance « ressentie » : on avance dans la direction, en pénalisant fort le décalage latéral. + Un candidat qui chevauche l'axe (même ligne / même colonne) passe devant un candidat en diagonale. */ +export function pickNext(from: Box, items: T[], dir: Dir): T | null { + const horiz = dir === 'left' || dir === 'right', sign = dir === 'right' || dir === 'down' ? 1 : -1 + let best: T | null = null, bestScore = Infinity + for (const it of items) { + const b = it.box + if (b === from) continue + // avance : bord de départ -> bord d'arrivée + const gap = horiz ? (sign > 0 ? b.x - (from.x + from.w) : from.x - (b.x + b.w)) : sign > 0 ? b.y - (from.y + from.h) : from.y - (b.y + b.h) + const centerAdvance = horiz ? (b.x + b.w / 2 - (from.x + from.w / 2)) * sign : (b.y + b.h / 2 - (from.y + from.h / 2)) * sign + if (centerAdvance <= 1 || gap < -Math.min(horiz ? from.w : from.h, horiz ? b.w : b.h) / 2) continue + // décalage latéral : 0 si les projections se chevauchent + const [a0, a1, b0, b1] = horiz ? [from.y, from.y + from.h, b.y, b.y + b.h] : [from.x, from.x + from.w, b.x, b.x + b.w] + const overlap = Math.min(a1, b1) - Math.max(a0, b0) + const lateral = overlap > 0 ? 0 : Math.max(b0 - a1, a0 - b1) + const lateralCenter = Math.abs(horiz ? b.y + b.h / 2 - (from.y + from.h / 2) : b.x + b.w / 2 - (from.x + from.w / 2)) + const score = Math.max(gap, 0) + lateral * 4 + lateralCenter * 0.1 + (overlap > 0 ? 0 : 1e4) + if (score < bestScore) { bestScore = score; best = it } + } + return best +} diff --git a/tests/i18n.test.ts b/tests/i18n.test.ts new file mode 100644 index 0000000..2a05504 --- /dev/null +++ b/tests/i18n.test.ts @@ -0,0 +1,13 @@ +import { describe, expect, it } from 'vitest' +import { en } from '../src/renderer/src/i18n/en' +import { fr } from '../src/renderer/src/i18n/fr' + +describe('traductions', () => { + it('même clés et mêmes variables en FR et EN', () => { + expect(Object.keys(en).sort()).toEqual(Object.keys(fr).sort()) + for (const [k, v] of Object.entries(fr)) { + const vars = (s: string) => (s.match(/\{\w+\}/g) ?? []).sort() + expect(vars(en[k as keyof typeof en]), k).toEqual(vars(v)) + } + }) +}) diff --git a/tests/input.test.ts b/tests/input.test.ts new file mode 100644 index 0000000..345ae1c --- /dev/null +++ b/tests/input.test.ts @@ -0,0 +1,38 @@ +import { describe, expect, it } from 'vitest' +import { padActions, padKind, Repeater } from '../src/renderer/src/nav/input' +import { glyph } from '../src/renderer/src/nav/glyph-map' + +const pad = (pressed: number[], axes = [0, 0]) => ({ buttons: Array.from({ length: 17 }, (_, i) => ({ pressed: pressed.includes(i), touched: false, value: 0 })), axes }) + +describe('entrées manette', () => { + it('traduit boutons et stick', () => { + expect([...padActions(pad([0, 13]))].sort()).toEqual(['accept', 'down']) + expect([...padActions(pad([], [-0.9, 0.1]))]).toEqual(['left']) + expect(padActions(pad([], [0.3, -0.3])).size).toBe(0) // zone morte + }) + it('reconnaît les manettes PlayStation', () => { + expect(padKind('054c-0ce6-Wireless Controller')).toBe('ps') + expect(padKind('DualSense Wireless Controller (STANDARD GAMEPAD Vendor: 054c Product: 0ce6)')).toBe('ps') + expect(padKind('Xbox 360 Controller (XInput STANDARD GAMEPAD)')).toBe('xbox') + }) + it('affiche le bon bouton', () => { + expect(glyph('accept', 'xbox')).toBe('A') + expect(glyph('accept', 'ps')).toBe('✕') + expect(glyph('back', 'ps')).toBe('○') + }) +}) + +describe('Repeater', () => { + it('répète une direction tenue, pas un bouton', () => { + const r = new Repeater() + expect(r.step('down', true, 0)).toBe(true) + expect(r.step('down', true, 200)).toBe(false) + expect(r.step('down', true, 400)).toBe(true) + expect(r.step('down', true, 430)).toBe(false) + expect(r.step('down', true, 490)).toBe(true) + expect(r.step('accept', true, 0)).toBe(true) + expect(r.step('accept', true, 1000)).toBe(false) + r.step('down', false, 500) + expect(r.step('down', true, 510)).toBe(true) + }) +}) diff --git a/tests/spatial.test.ts b/tests/spatial.test.ts new file mode 100644 index 0000000..5143ae5 --- /dev/null +++ b/tests/spatial.test.ts @@ -0,0 +1,32 @@ +import { describe, expect, it } from 'vitest' +import { pickNext, type Box } from '../src/renderer/src/nav/spatial' + +/* grille 3x3 de cartes 100x150, espacées de 20 */ +const grid = Array.from({ length: 9 }, (_, i) => ({ id: i, box: { x: (i % 3) * 120, y: Math.floor(i / 3) * 170, w: 100, h: 150 } as Box })) +const at = (i: number) => grid[i].box +const next = (i: number, d: 'up' | 'down' | 'left' | 'right', items = grid) => pickNext(at(i), items.filter((g) => g.id !== i), d)?.id ?? null + +describe('pickNext', () => { + it('se déplace dans une grille', () => { + expect(next(4, 'right')).toBe(5) + expect(next(4, 'left')).toBe(3) + expect(next(4, 'up')).toBe(1) + expect(next(4, 'down')).toBe(7) + }) + it('ne sort pas de la grille', () => { + expect(next(2, 'right')).toBeNull() + expect(next(0, 'up')).toBeNull() + }) + it('préfère le même axe à la diagonale plus proche', () => { + const items = [{ id: 'loin', box: { x: 600, y: 0, w: 100, h: 50 } }, { id: 'diag', box: { x: 150, y: 80, w: 100, h: 50 } }] + expect(pickNext({ x: 0, y: 0, w: 100, h: 50 }, items, 'right')?.id).toBe('loin') + }) + it('descend vers un bouton large sous la grille', () => { + const items = [...grid, { id: 99, box: { x: 0, y: 600, w: 400, h: 60 } }] + expect(next(8, 'down', items)).toBe(99) + }) + it('remonte de la barre vers la carte la plus alignée', () => { + const items = [...grid, { id: 99, box: { x: 240, y: 600, w: 100, h: 60 } }] + expect(pickNext(items[9].box, grid, 'up')?.id).toBe(8) + }) +})