identité 4 : plus de paire ni de colonne en marge, chaque oiseau sur une ligne visible ; la console arrête un curseur qui descendait
Relecture de fb8c71f..16d6607 (03/11 13h10, relayée par la session orch) : - /economique : la balance sort de derrière le bloc du livre à mi-hauteur, loin du sol de la maraîchère ; - authentification-wot : la toile de confiance, petite, en marge sur la dernière ligne des étapes (le bloc n'a pas de fond) ; - chapitres : le filet au-dessus de précédent / suivant est tracé (border-t seul n'a pas de style ici) ; le cartonnier s'y pose ; - /evenement : l'acrobate passe au bout de la ligne du leitmotiv, le régisseur reste seul près de « Format & lieu » ; - sommaire du livre : empileur plus loin, illustratrice moins sortie : plus de bande commune. Trouvés par le contrôle étendu : le débogueur (logiciel-libre) sur la dernière ligne des étapes, la vigneronne (monnaie-libre) derrière le bloc de texte, qui a un fond. Console, décision d'orch du 03/11 à 13h10 : au premier geste, un curseur non touché que la rotation faisait descendre s'arrête là où il est ; un curseur qui montait finit sa montée. docs/consignes-yvv.md (« Ce que fait le code ») et docs/da-oiseaux.md suivent. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -30,7 +30,7 @@
|
||||
type="button"
|
||||
role="tab"
|
||||
class="fader"
|
||||
:class="{ 'fader--active': axis.key === active, 'fader--held': held.has(axis.key), 'fader--rising': rising.has(axis.key) }"
|
||||
:class="{ 'fader--active': axis.key === active, 'fader--held': held.has(axis.key), 'fader--rising': rising.has(axis.key), 'fader--stopped': stopped.has(axis.key) }"
|
||||
:style="{ '--hue': `var(${axis.hue})`, '--level': levels[axis.key] ?? 0, '--i': i }"
|
||||
:data-axis="axis.key"
|
||||
:aria-selected="axis.key === active"
|
||||
@@ -142,10 +142,11 @@ const current = computed(() => props.axes.find(a => a.key === active.value) ?? p
|
||||
// The visitor's hand takes over for good (03/11): from the first hover,
|
||||
// keyboard focus or tap on a cursor, the rotation stops. The touched cursor
|
||||
// replays its rise, from the bottom to its own graduation, and its panel
|
||||
// shows. The others are never lowered by the hand: a cursor already touched
|
||||
// stays at its graduation; a cursor never touched finishes, gently, the move
|
||||
// the rotation had begun (up to its graduation, or down to its low level),
|
||||
// then stays there. None stays frozen mid-course.
|
||||
// shows. The others are never lowered by the hand (orch decision, 03/11
|
||||
// 13h10): a cursor already touched stays at its graduation; a cursor never
|
||||
// touched that the rotation was taking down stops where it is at the first
|
||||
// gesture; one it was taking up finishes, gently, its rise to the level the
|
||||
// rotation gave it, then stays there.
|
||||
const BEAT_MS = 2600
|
||||
const BEATS_PER_AXIS = 3
|
||||
/** Graduation of each axis, from asservissement (0) to émancipation (1) */
|
||||
@@ -158,6 +159,8 @@ const levels = reactive<Partial<Record<AxisKey, number>>>({})
|
||||
const held = reactive(new Set<AxisKey>())
|
||||
/** Cursors replaying their rise (fast transition) */
|
||||
const rising = reactive(new Set<AxisKey>())
|
||||
/** Untouched cursors the first gesture stopped on their way down */
|
||||
const stopped = reactive(new Set<AxisKey>())
|
||||
const reduced = ref(false)
|
||||
const visible = ref(true)
|
||||
const engaged = ref(false)
|
||||
@@ -188,17 +191,30 @@ function faderEl(key: AxisKey) {
|
||||
return root.value?.querySelector<HTMLElement>(`[data-axis="${key}"]`) ?? null
|
||||
}
|
||||
|
||||
/** First gesture: the rotation stops for good. The untouched cursors keep the target the
|
||||
* rotation gave them and finish their glide to it (no freeze mid-course) */
|
||||
function engage() {
|
||||
/** First gesture: the rotation stops for good. An untouched cursor on its way down stops
|
||||
* where it is drawn; one on its way up finishes its glide to the target the rotation gave it.
|
||||
* `touched` is the cursor of this gesture: it replays its rise anyway */
|
||||
function engage(touched?: AxisKey) {
|
||||
if (engaged.value) return
|
||||
engaged.value = true
|
||||
clearInterval(timer)
|
||||
for (const axis of props.axes) {
|
||||
const key = axis.key
|
||||
if (key === touched || held.has(key)) continue
|
||||
const el = faderEl(key)
|
||||
const drawn = el ? Number.parseFloat(getComputedStyle(el).getPropertyValue('--level')) : Number.NaN
|
||||
const target = levels[key] ?? 0
|
||||
if (Number.isFinite(drawn) && drawn > target) {
|
||||
stopped.add(key)
|
||||
levels[key] = drawn
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** The touched cursor replays its rise: back to the bottom, then up to its graduation */
|
||||
async function rise(key: AxisKey) {
|
||||
held.add(key)
|
||||
stopped.delete(key)
|
||||
const target = GRADUATION[key] ?? 0.75
|
||||
if (reduced.value) {
|
||||
levels[key] = target
|
||||
@@ -220,14 +236,14 @@ async function rise(key: AxisKey) {
|
||||
/** A cursor under the visitor's hand: it rises and its panel shows. Every rollover replays
|
||||
* the rise, however soon after the previous one (Yvv, 03/11) */
|
||||
function touch(key: AxisKey) {
|
||||
engage()
|
||||
engage(key)
|
||||
active.value = key
|
||||
rise(key)
|
||||
}
|
||||
|
||||
/** The panel of a cursor already raised by this same gesture: no second rise */
|
||||
function select(key: AxisKey) {
|
||||
engage()
|
||||
engage(key)
|
||||
active.value = key
|
||||
}
|
||||
|
||||
@@ -404,8 +420,10 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
/* A cursor the hand has touched no longer glides: it drops to the bottom at once, then
|
||||
replays its rise. The untouched ones finish their glide, then the rotation is over */
|
||||
.fader--held {
|
||||
replays its rise. At the first gesture, an untouched cursor on its way down stops where it
|
||||
is; one on its way up finishes its glide, then the rotation is over */
|
||||
.fader--held,
|
||||
.fader--stopped {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user