mascotte-du-jour

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    const columns = e.props.bodyColumns
    const textColumns = Math.min(TEXT_MAX_COLUMNS, Math.max(TEXT_MIN_COLUMNS, Math.round(columns * TEXT_SHARE)))
    const size = SIZES.find(
      s =>
        s.rows <= e.props.maxRows &&
        minColumnsAt(s) <= columns &&
        // La taille géante dès qu'elle tient (le moteur borne déjà la bande à la moitié
        // du terminal), pourvu que le texte tienne encore à côté.
        (s.scale <= 1.5 || minColumnsAt(s) + textColumns + 2 <= columns),
    )
    const view = e.viewport ? `${e.viewport.columns}×${e.viewport.rows}, plein écran : ${e.viewport.isFullscreen ?? '?'}` : 'inconnu'
    lastBand =
      `surface ${e.surface}, maxRows ${e.props.maxRows}, bodyColumns ${columns}, sondage ${e.props.hasSurvey}, ` +
      `terminal ${view} → ${size === undefined ? 'masquée (pas la place)' : `affichée en taille ${size.name}`}`
    const isSvg = e.surface !== 'terminal'
    if (e.props.hasSurvey || (!isSvg && size === undefined)) {
      if (playing?.requestId === e.requestId) playing = null
      return below
    }

    // À la reprise d'une discussion, la bande peut se dessiner avant la première
    // synchronisation : on lit alors le thème enregistré plutôt que de retomber sur
    // le premier de la liste, et sans thème connu, la bande reste vide.
    const today = (await read($, daily)) ?? (await storedDaily($))
    if (today === null) {
      if (playing?.requestId === e.requestId) playing = null
      return below
    }
    const animId = await read($, anim)
    const choosing = await read($, isChoosing)
    const theme = themeById(today?.theme)
    const doing = await read($, activity)
    await read($, minute)
    const all = turnAnims(theme, today?.date)
    const idle = specialFor(theme, today?.date) ?? theme.idle
    const current =
      doing !== null && (isReaction(doing) || e.props.isWorking)
        ? activityAnim(doing, theme, lang)
        : e.props.isWorking
          ? (all.find(a => a.id === animId) ?? all[0]!)
          : idle
    const draw = withSky(current.draw, theme, hour)
    const phrase = choosing ? t(lang, 'choosing') : (today?.phrase ?? '')
    const themeName = themeText(lang, theme.name)
    const animName = themeText(lang, current.name)
    // La ligne de suivi : ce qu'il fait, depuis combien de temps, combien d'actions.
    const start = await read($, turnStart)
    const minutes = start === null ? 0 : Math.floor(((await $.clock.now()) - start) / 60_000)
    const progress = [
      `${e.props.isWorking ? '▶' : '⏸'} ${animName}`,
      ...(e.props.isWorking && minutes > 0 ? [t(lang, 'minutes', { n: minutes })] : []),
      ...(e.props.isWorking && tracking.actions > 0 ? [t(lang, tracking.actions > 1 ? 'actionsPlural' : 'actions', { n: tracking.actions })] : []),
    ].join(' · ')

    if (e.surface !== 'terminal') {
      await read($, clip)
      if (playing?.id !== `${theme.id}/${current.id}`) startTick = tick
      playing = { requestId: e.requestId, id: `${theme.id}/${current.id}`, draw, width: SVG_WIDTH, size: SIZES[1]!, isWorking: e.props.isWorking, isSvg: true }
      // En haute définition si le clip garde au moins 5 s sous le plafond de taille ; sinon
      // (scène très chargée), à la finesse d'origine, pour ne pas recalculer trop souvent.
      const hd = svgClip(draw, elapsed(), SVG_WIDTH, SVG_FPS, SVG_FRAMES, 2)
      const { source, seconds } = hd.seconds >= SVG_MIN_HD_SECONDS ? hd : svgClip(draw, elapsed(), SVG_WIDTH, SVG_FPS, SVG_FRAMES)
      clipStartTick = tick
      clipSeconds = seconds
      const { Box, Svg, Text } = $.ui.resolve(e)
      const scale = Math.max(SVG_MIN_SCALE, Math.min(SVG_MAX_SCALE, Math.floor((columns * SVG_PX_PER_COLUMN * SVG_STAGE_SHARE - 16) / SVG_WIDTH)))
      return (
        <Box flexDirection="column">
          <Box flexDirection="row" alignItems="center">
            <Box width="80%">
              <Svg source={source} alt={`${themeName} : ${animName}`} width={SVG_WIDTH * scale} height={STAGE_H * scale} isInteractive />
            </Box>
            <Box flexDirection="column" marginLeft={2} width="20%">
              <Text bold>
                {theme.emoji} {themeName}
              </Text>
              {phrase !== '' && (
                <Text italic dimColor wrap="wrap">
                  {t(lang, 'phrase', { phrase })}
                </Text>
              )}
              <Text dimColor wrap="wrap">{progress}</Text>
            </Box>
          </Box>
          {below}
        </Box>
      )
    }

    if (size === undefined) return below
    const minColumns = minColumnsAt(size)

    const hasText = columns - textColumns - 2 >= minColumns
    const fullWidth = Math.min(Math.round(MAX_STAGE_PX * size.scale), hasText ? columns - textColumns - 2 : columns)
    // Une largeur paire en taille géante : deux colonnes par pixel de la scène.
    const width = size.scale === 2 ? fullWidth - (fullWidth % 2) : fullWidth

    if (playing?.id !== `${theme.id}/${current.id}`) startTick = tick
    playing = { requestId: e.requestId, id: `${theme.id}/${current.id}`, draw, width, size, isWorking: e.props.isWorking, isSvg: false }

    const { Box, Raster, Text } = $.ui.resolve(e)

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" alignItems="center" justifyContent="center">
          <Raster key="stage" columns={width} rows={size.rows} cells={paint(draw, elapsed(), width, size)} />
          {hasText && (
            <Box flexDirection="column" marginLeft={2} width={textColumns}>
              <Text bold>
                {theme.emoji} {themeName}
              </Text>
              {phrase !== '' && (
                <Text italic dimColor wrap="wrap">
                  {t(lang, 'phrase', { phrase })}
                </Text>
              )}
              <Text dimColor wrap="wrap">{progress}</Text>
            </Box>
          )}
        </Box>
        {below}
      </Box>
    )
  })