All files / web/src/app/arcade/complement-race/components GameIntro.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client'

import { useComplementRace } from '@/arcade-games/complement-race/Provider'

export function GameIntro() {
  const { dispatch } = useComplementRace()

  const handleStartClick = () => {
    dispatch({ type: 'SHOW_CONTROLS' })
  }

  return (
    <div
      style={{
        textAlign: 'center',
        padding: '40px 20px',
        maxWidth: '800px',
        margin: '20px auto 0',
      }}
    >
      <h1
        style={{
          fontSize: '48px',
          fontWeight: 'bold',
          marginBottom: '16px',
          background: 'linear-gradient(135deg, #3b82f6, #8b5cf6)',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
          backgroundClip: 'text',
        }}
      >
        Speed Complement Race
      </h1>

      <p
        style={{
          fontSize: '18px',
          color: '#6b7280',
          marginBottom: '32px',
          lineHeight: '1.6',
        }}
      >
        Race against AI opponents while solving complement problems! Find the missing number to
        complete the equation.
      </p>

      <div
        style={{
          background: 'white',
          borderRadius: '16px',
          padding: '32px',
          marginBottom: '32px',
          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
          textAlign: 'left',
        }}
      >
        <h2
          style={{
            fontSize: '24px',
            fontWeight: 'bold',
            marginBottom: '16px',
            color: '#1f2937',
          }}
        >
          How to Play
        </h2>

        <ul
          style={{
            listStyle: 'none',
            padding: 0,
            margin: 0,
            display: 'flex',
            flexDirection: 'column',
            gap: '12px',
          }}
        >
          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
            <span style={{ fontSize: '24px' }}>🎯</span>
            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
              Find the complement number to reach the target sum
            </span>
          </li>
          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
            <span style={{ fontSize: '24px' }}>⚡</span>
            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
              Type your answer quickly to move forward in the race
            </span>
          </li>
          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
            <span style={{ fontSize: '24px' }}>🤖</span>
            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
              Compete against Swift AI and Math Bot with unique personalities
            </span>
          </li>
          <li style={{ display: 'flex', gap: '12px', alignItems: 'start' }}>
            <span style={{ fontSize: '24px' }}>🏆</span>
            <span style={{ color: '#4b5563', lineHeight: '1.6' }}>
              Earn points for correct answers and build up your streak
            </span>
          </li>
        </ul>
      </div>

      <button
        onClick={handleStartClick}
        style={{
          background: 'linear-gradient(135deg, #10b981, #059669)',
          color: 'white',
          border: 'none',
          borderRadius: '12px',
          padding: '16px 48px',
          fontSize: '20px',
          fontWeight: 'bold',
          cursor: 'pointer',
          boxShadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
          transition: 'all 0.2s ease',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'translateY(-2px)'
          e.currentTarget.style.boxShadow = '0 6px 16px rgba(16, 185, 129, 0.4)'
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)'
          e.currentTarget.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.3)'
        }}
      >
        Start Racing!
      </button>
    </div>
  )
}