1- import React , { useState , useEffect } from 'react' ;
2- import { Terminal , Brain , Shield , Zap , VolumeX , Volume2 } from 'lucide-react' ;
1+ import React , { useEffect , useState } from 'react' ;
2+ import { Brain , Shield , Terminal , Volume2 , VolumeX , Zap } from 'lucide-react' ;
33import { Alert , AlertDescription , AlertTitle } from '@/components/ui/alert' ;
44import { Button } from '@/components/ui/button' ;
55import {
66 Card ,
7- CardHeader ,
87 CardContent ,
98 CardFooter ,
9+ CardHeader ,
1010} from '@/components/ui/card' ;
1111import { Progress } from '@/components/ui/progress' ;
1212import { Badge } from '@/components/ui/badge' ;
@@ -43,16 +43,16 @@ const OpenEHRQuest: React.FC = () => {
4343 isCorrect : false ,
4444 } ) ;
4545 const [ soundEnabled , setSoundEnabled ] = useState ( true ) ;
46- const { playCorrectSound, playWrongSound, playCompletionSound } =
47- useSoundEffects ( ) ;
46+ const { playCorrectSound, playWrongSound, playCompletionSound }
47+ = useSoundEffects ( ) ;
4848
4949 const levels = levelsData ;
5050
5151 useEffect ( ( ) => {
5252 if (
53- gameState . currentLevel >= levels . length &&
54- levels . length > 0 &&
55- soundEnabled
53+ gameState . currentLevel >= levels . length
54+ && levels . length > 0
55+ && soundEnabled
5656 ) {
5757 playCompletionSound ( ) ;
5858 }
@@ -68,16 +68,19 @@ const OpenEHRQuest: React.FC = () => {
6868 const isCorrect = selectedIndex === currentLevel . correctAnswer ;
6969
7070 if ( isCorrect ) {
71- if ( soundEnabled ) playCorrectSound ( ) ;
72- setGameState ( ( prevState ) => ( {
71+ if ( soundEnabled )
72+ playCorrectSound ( ) ;
73+ setGameState ( prevState => ( {
7374 ...prevState ,
7475 score : prevState . score + ( prevState . hintUsed ? 50 : 100 ) ,
7576 answerSelected : true ,
7677 isCorrect : true ,
7778 } ) ) ;
78- } else {
79- if ( soundEnabled ) playWrongSound ( ) ;
80- setGameState ( ( prevState ) => ( {
79+ }
80+ else {
81+ if ( soundEnabled )
82+ playWrongSound ( ) ;
83+ setGameState ( prevState => ( {
8184 ...prevState ,
8285 playerHealth : Math . max ( 0 , prevState . playerHealth - 20 ) ,
8386 answerSelected : true ,
@@ -87,7 +90,7 @@ const OpenEHRQuest: React.FC = () => {
8790 } ;
8891
8992 const nextLevel = ( ) => {
90- setGameState ( ( prevState ) => ( {
93+ setGameState ( prevState => ( {
9194 ...prevState ,
9295 currentLevel : prevState . currentLevel + 1 ,
9396 hintUsed : false ,
@@ -101,7 +104,7 @@ const OpenEHRQuest: React.FC = () => {
101104 } ;
102105
103106 const useHint = ( ) => {
104- setGameState ( ( prevState ) => ( { ...prevState , hintUsed : true } ) ) ;
107+ setGameState ( prevState => ( { ...prevState , hintUsed : true } ) ) ;
105108 } ;
106109
107110 const resetGame = ( ) => {
@@ -131,7 +134,10 @@ const OpenEHRQuest: React.FC = () => {
131134 < p className = "text-center mb-4" >
132135 Your OpenEHR journey has come to an end.
133136 </ p >
134- < p className = "text-center mb-4" > Final Score: { gameState . score } </ p >
137+ < p className = "text-center mb-4" >
138+ Final Score:
139+ { gameState . score }
140+ </ p >
135141 </ CardContent >
136142 < CardFooter >
137143 < Button onClick = { resetGame } className = "w-full" >
@@ -157,10 +163,13 @@ const OpenEHRQuest: React.FC = () => {
157163 < p className = "text-center mb-4" >
158164 You've become an OpenEHR Integration Master!
159165 </ p >
160- < p className = "text-center mb-4" > Final Score: { gameState . score } </ p >
166+ < p className = "text-center mb-4" >
167+ Final Score:
168+ { gameState . score }
169+ </ p >
161170 < div className = "flex flex-wrap justify-center gap-2 mt-4" >
162- { gameState . badges . map ( ( badge , index ) => (
163- < Badge key = { index } variant = "secondary" >
171+ { gameState . badges . map ( badge => (
172+ < Badge key = { badge } variant = "secondary" >
164173 { badge }
165174 </ Badge >
166175 ) ) }
@@ -184,7 +193,7 @@ const OpenEHRQuest: React.FC = () => {
184193
185194 return parts . map ( ( part , index ) => {
186195 if ( part === '\n\n' ) {
187- return < br key = { `br-${ index } } /> ;
196+ return < br key = { `br-${ part } - ${ index } } /> ;
188197 }
189198
190199 if ( part . trim ( ) . startsWith ( '<' ) || part . trim ( ) . startsWith ( '{' ) ) {
@@ -194,15 +203,15 @@ const OpenEHRQuest: React.FC = () => {
194203 if ( inCodeBlock ) {
195204 return (
196205 < CodeHighlight
197- key = { `code-${ index } }
206+ key = { `code-${ part } - ${ index } }
198207 code = { part . trim ( ) }
199208 language = { language }
200209 />
201210 ) ;
202211 }
203212
204213 return (
205- < p key = { `text-${ index } } className = "mb-2" >
214+ < p key = { `text-${ part } - ${ index } } className = "mb-2" >
206215 { part }
207216 </ p >
208217 ) ;
@@ -215,16 +224,24 @@ const OpenEHRQuest: React.FC = () => {
215224 < CardHeader className = "flex flex-row justify-between items-center" >
216225 < h1 className = "text-2xl font-bold" > { currentLevel . title } </ h1 >
217226 < Button onClick = { toggleSound } variant = "ghost" size = "icon" >
218- { soundEnabled ? (
219- < Volume2 className = "h-4 w-4" />
220- ) : (
221- < VolumeX className = "h-4 w-4" />
222- ) }
227+ { soundEnabled
228+ ? (
229+ < Volume2 className = "h-4 w-4" />
230+ )
231+ : (
232+ < VolumeX className = "h-4 w-4" />
233+ ) }
223234 </ Button >
224235 </ CardHeader >
225236 < CardContent >
226237 < p className = "text-center text-gray-600 mb-4" >
227- Level { gameState . currentLevel + 1 } of { levels . length }
238+ Level
239+ { ' ' }
240+ { gameState . currentLevel + 1 }
241+ { ' ' }
242+ of
243+ { ' ' }
244+ { levels . length }
228245 </ p >
229246 < Progress
230247 value = { ( ( gameState . currentLevel + 1 ) / levels . length ) * 100 }
@@ -239,12 +256,13 @@ const OpenEHRQuest: React.FC = () => {
239256 < h2 className = "text-xl font-semibold mb-2" > Challenge:</ h2 >
240257 < div className = "bg-gray-800 text-white p-4 rounded-md overflow-x-auto whitespace-pre-wrap break-words" >
241258 { renderChallenge ( currentLevel . challenge , currentLevel . language ) }
242- </ div > { ' ' }
259+ </ div >
260+ { ' ' }
243261 </ div >
244262 < div className = "space-y-2" >
245263 { currentLevel . options . map ( ( option , index ) => (
246264 < Button
247- key = { index }
265+ key = { ` ${ gameState . currentLevel } - ${ index } ` }
248266 onClick = { ( ) => handleAnswer ( index ) }
249267 className = "w-full justify-start text-left whitespace-normal h-auto"
250268 variant = "outline"
@@ -280,7 +298,9 @@ const OpenEHRQuest: React.FC = () => {
280298 onClick = { useHint }
281299 disabled = { gameState . hintUsed || gameState . answerSelected }
282300 >
283- < Zap className = "mr-2 h-4 w-4" /> Use Hint
301+ < Zap className = "mr-2 h-4 w-4" />
302+ { ' ' }
303+ Use Hint
284304 </ Button >
285305 </ TooltipTrigger >
286306 < TooltipContent >
@@ -293,8 +313,8 @@ const OpenEHRQuest: React.FC = () => {
293313 </ Tooltip >
294314 </ TooltipProvider >
295315 < div className = "flex gap-2" >
296- { gameState . badges . slice ( - 3 ) . map ( ( badge , index ) => (
297- < Badge key = { index } variant = "secondary" >
316+ { gameState . badges . slice ( - 3 ) . map ( badge => (
317+ < Badge key = { badge } variant = "secondary" >
298318 { badge }
299319 </ Badge >
300320 ) ) }
@@ -312,11 +332,18 @@ const OpenEHRQuest: React.FC = () => {
312332 < div className = "flex justify-between w-full mb-2" >
313333 < div className = "flex items-center" >
314334 < Brain className = "mr-2" />
315- < span > Score: { gameState . score } </ span >
335+ < span >
336+ Score:
337+ { gameState . score }
338+ </ span >
316339 </ div >
317340 < div className = "flex items-center" >
318341 < Shield className = "mr-2" />
319- < span > Health: { gameState . playerHealth } %</ span >
342+ < span >
343+ Health:
344+ { gameState . playerHealth }
345+ %
346+ </ span >
320347 </ div >
321348 </ div >
322349 < HealthBar health = { gameState . playerHealth } />
0 commit comments