All files / web/src/arcade-games/music-matching/components MusicCardFront.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { css } from '../../../../styled-system/css'
import { MusicStaff } from '@/components/music/MusicStaff'
import type { PitchClass, Clef, Accidental } from '@/components/music/noteUtils'
import type { MusicCard } from '../types'

/**
 * Card front rendering for the music note matching game variant.
 */
export function MusicCardFront({ card }: { card: MusicCard }) {
  if (card.type === 'staff-note' && card.clef) {
    const accidental =
      card.accidental && card.accidental !== 'none' ? (card.accidental as Accidental) : undefined

    return (
      <div
        data-component="MusicCardFront"
        data-card-type="staff-note"
        className={css({
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          padding: '4px',
        })}
      >
        <MusicStaff
          pitchClass={card.pitchClass as PitchClass}
          octave={card.octave}
          clef={card.clef as Clef}
          accidental={accidental}
          width={100}
          height={70}
          showClef={true}
        />
      </div>
    )
  }

  if (card.type === 'note-name') {
    return (
      <div
        data-component="MusicCardFront"
        data-card-type="note-name"
        className={css({
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          width: '100%',
          height: '100%',
          gap: '4px',
        })}
      >
        <div
          data-element="note-display-name"
          className={css({
            fontSize: '28px',
            fontWeight: 'bold',
            color: 'gray.800',
          })}
        >
          {card.displayName}
        </div>
        {card.friendlyName && (
          <div
            data-element="note-friendly-name"
            className={css({
              fontSize: '12px',
              color: 'gray.500',
              fontStyle: 'italic',
            })}
          >
            {card.friendlyName}
          </div>
        )}
      </div>
    )
  }

  // Fallback
  return (
    <div
      className={css({
        fontSize: '24px',
        color: 'gray.500',
      })}
    >
      ?
    </div>
  )
}