// HudPlacar: faixa de HUD de fliperama no topo: PONTOS que sobem de moeda em moeda, vidas em coração e a fase.
import React from 'react';
import {COR, FONTE_TITULO, mola, seg, useF} from '../base';
import {Sprite} from '../formas/Sprite';

export type HudPlacarProps = {pontos?: number; vidas?: number; fase?: string; inicio?: number; y?: number; rotulo?: string};
export const HudPlacar: React.FC<HudPlacarProps> = ({pontos = 12400, vidas = 3, fase = '1-1', inicio = 0, y = 215, rotulo = 'PONTOS'}) => {
  const f = useF() - inicio;
  const p = mola(seg(f, 0, 9), 2);
  const n = Math.round(pontos * seg(f, 4, 34) / 100) * 100;
  const sombra = `4px 4px 0 ${COR.noite}`;
  return <><div style={{position: 'absolute', left: 80, right: 80, top: y - 70, height: 140, transform: `translateY(${(1 - p) * -300}px)`, background: COR.noite, border: `8px solid ${COR.creme}`, boxShadow: `10px 10px 0 ${COR.noite}`, fontFamily: FONTE_TITULO, color: COR.creme}}>
    <div style={{position: 'absolute', left: 24, top: 18, fontSize: 24, color: COR.amarelo}}>{rotulo}</div>
    <div style={{position: 'absolute', left: 24, top: 62, fontSize: 52, textShadow: sombra}}>{String(n).padStart(6, '0')}</div>
    <div style={{position: 'absolute', right: 24, top: 18, fontSize: 24, color: COR.amarelo}}>FASE {fase}</div>
  </div>
    {Array.from({length: vidas}).map((_, i) => <Sprite key={i} nome="coracao" x={930 - (vidas - 1 - i) * 70} y={y + 28} escala={5} inicio={inicio + 6 + i * 3} movimento="flutuar" sombra={false} />)}
  </>;
};