File tree Expand file tree Collapse file tree 4 files changed +34
-20
lines changed Expand file tree Collapse file tree 4 files changed +34
-20
lines changed Original file line number Diff line number Diff line change 1
- import { component$ } from '@builder.io/qwik' ;
1
+ import { component$ , useContext } from '@builder.io/qwik' ;
2
2
import { gamePlay } from '~/helpers/game' ;
3
- import { GameProps } from '~/models/game ' ;
3
+ import { CONTEXT_GAME } from '~/routes ' ;
4
4
5
- export const Choices = component$ < GameProps > ( ( props ) => {
6
- const { game } = props ;
5
+ export const Choices = component$ ( ( ) => {
6
+ const game = useContext ( CONTEXT_GAME ) ;
7
7
const gameChoices = Object . keys ( game . choices ) ;
8
8
return (
9
9
< div class = 'choices' >
@@ -14,7 +14,11 @@ export const Choices = component$<GameProps>((props) => {
14
14
option : string ;
15
15
} ;
16
16
return (
17
- < span key = { 'choice_game_' + index } class = 'choice' onClick$ = { ( ) => gamePlay ( option , game ) } >
17
+ < span
18
+ key = { 'choice_game_' + index }
19
+ class = 'choice'
20
+ onClick$ = { ( ) => gamePlay ( option , game ) }
21
+ >
18
22
< img src = { img } width = { 200 } height = { 200 } alt = { alt } />
19
23
</ span >
20
24
) ;
Original file line number Diff line number Diff line change 1
- import { component$ } from '@builder.io/qwik' ;
1
+ import { component$ , useContext } from '@builder.io/qwik' ;
2
2
import { GameProps } from '~/models/game' ;
3
+ import { CONTEXT_GAME } from '~/routes' ;
3
4
4
- export const GameStatus = component$ ( ( store : GameProps ) => {
5
- const {
6
- game : {
7
- data : { result } ,
8
- } ,
9
- } = store ;
5
+ export const GameStatus = component$ ( ( ) => {
6
+ const { data : { result} } = useContext ( CONTEXT_GAME ) ;
10
7
return < p class = 'info-game' > { result } </ p > ;
11
8
} ) ;
Original file line number Diff line number Diff line change 1
- import { component$ } from '@builder.io/qwik' ;
2
- import { GameProps } from '~/models/game' ;
1
+ import { component$ , useContext } from '@builder.io/qwik' ;
3
2
import { Badge } from '~/components/game/badge' ;
3
+ import { CONTEXT_GAME } from '~/routes' ;
4
4
5
- export const ScoreBoard = component$ < GameProps > ( ( props ) => {
6
- const { game } = props ;
5
+ export const ScoreBoard = component$ ( ( ) => {
6
+ const game = useContext ( CONTEXT_GAME ) ;
7
7
return (
8
8
< div class = 'score-board' >
9
9
< Badge />
Original file line number Diff line number Diff line change 1
- import { component$ , useStore , useStyles$ } from '@builder.io/qwik' ;
1
+ import {
2
+ Signal ,
3
+ component$ ,
4
+ createContextId ,
5
+ useContextProvider ,
6
+ useSignal ,
7
+ useStore ,
8
+ useStyles$ ,
9
+ } from '@builder.io/qwik' ;
2
10
import type { DocumentHead } from '@builder.io/qwik-city' ;
3
11
4
12
import indexCss from './index.css?inline' ;
@@ -7,17 +15,22 @@ import indexCss from './index.css?inline';
7
15
import { Title , GameStatus , Choices , ScoreBoard } from '~/components' ;
8
16
9
17
import { gameInitialData } from '~/constants/game-data' ;
18
+ import { GameStore } from '~/models/game' ;
19
+
20
+ export const CONTEXT_GAME = createContextId < GameStore > ( 'game' ) ;
10
21
11
22
export default component$ ( ( ) => {
12
23
useStyles$ ( indexCss ) ;
13
24
const game = useStore ( gameInitialData ) ;
14
25
26
+ useContextProvider ( CONTEXT_GAME , game ) ;
27
+
15
28
return (
16
29
< >
17
30
< Title />
18
- < ScoreBoard game = { game } />
19
- < GameStatus game = { game } />
20
- < Choices game = { game } />
31
+ < ScoreBoard />
32
+ < GameStatus />
33
+ < Choices />
21
34
</ >
22
35
) ;
23
36
} ) ;
You can’t perform that action at this time.
0 commit comments