const directions = [{value:0,text:'N'}, {value:90,text:'E'}, {value:180,text:'S'}, {value:270,text:'W'}];
function main() {
  const heading = $data.current.heading;
  return <CardContent title="罗盘刻度" trailing={heading === null ? '—' : Math.round(heading)+'°'}>
    <Group width="fill" height={72}>
      <RepeatedLayout width="fill" height={60} axis="horizontal" period={360}
        value={heading ?? 0} anchor={0.5}
        opacity={heading === null ? 0.3 : 1}
        animations={[{property:'value',duration:0.25,wrap:360}]}>
        <Group width={360} height={60}>
          {Array.from({length:24},(_,i) => <Line key={'t'+i} x={i*15} y={0}
            width={1} height={20} x1={0} y1={0} x2={0} y2={i%6===0?20:10}
            stroke={$env.foreground} opacity={0.3} lineWidth={1}/>)}
          {directions.map(d => <Text key={d.text} x={d.value-14} y={26}
            width={28} height={20} fontSize={16} color={$env.foreground}>{d.text}</Text>)}
        </Group>
      </RepeatedLayout>
      <Line x={$env.width/2-18} y={0} width={1} height={58}
        x1={0} y1={0} x2={0} y2={58} stroke={$env.accent} lineWidth={2}/>
    </Group>
  </CardContent>;
}