Skip to content

Commit f2aca0f

Browse files
author
chungheon_yi
committed
refactor: refactor tictactoe example
1 parent 1fc608e commit f2aca0f

File tree

7 files changed

+45
-29
lines changed

7 files changed

+45
-29
lines changed

apps/docs/stories/scope/tictactoe/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { ComposeProviders } from '@lodado/react-namespace'
22
import { useCallback } from 'react'
33

4+
import PlayerRepository from './components/models/PlayerRepository'
5+
import TicTacToe from './components/models/TicTacToe'
46
import {
57
BoardProvider,
68
createUser1Scope,
@@ -9,8 +11,6 @@ import {
911
ScopeContainerProvider,
1012
} from './components/Provider'
1113
import TicTacToeGame from './components/TicTacToeGame'
12-
import PlayerRepository from './models/PlayerRepository'
13-
import TicTacToe from './models/TicTacToe'
1414

1515
export const TicTacToeExample = () => {
1616
const game = useCallback(() => new TicTacToe(), [])

apps/docs/stories/scope/tictactoe/components/Provider.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { createNamespaceContext, createNamespaceScope, createScopeContainer, Scope } from '@lodado/react-namespace'
22

3-
import PlayerRepository from '../models/PlayerRepository'
4-
import TicTacToe from '../models/TicTacToe'
3+
import PlayerRepository from './models/PlayerRepository'
4+
import TicTacToe from './models/TicTacToe'
55

66
export const [createRepositoryProvider, createRepositoryScope] = createNamespaceScope('TicTacToeRepository')
77

apps/docs/stories/scope/tictactoe/components/TicTacToeGame.tsx

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,14 @@
1-
import { TicTacToeUseCase } from '../models/TicTacToeUsecase'
2-
import { useBoardNamespaceContext, useBoardNamespaceStores, useRepositoryContext, useScopeContainer } from './Provider'
1+
import useTicTacToeAdapter from './useTicTacToeAdapter'
32

43
const TicTacToeGame = () => {
5-
const { user1: player1Scope, user2: player2Scope } = useScopeContainer()
6-
7-
const { turn, board } = useBoardNamespaceStores((state) => {
8-
return { turn: state.turn, board: state.board }
9-
})
10-
11-
// you can swap scope whatever you want
12-
const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
13-
14-
const game = useBoardNamespaceContext()!
15-
const repository = useRepositoryContext(currentUserScope.__scopeTicTacToeRepository)!
16-
const useCase = new TicTacToeUseCase(game, repository)
17-
18-
const handleMove = async (row: number, col: number) => {
19-
await useCase.play({ row, col })
20-
}
21-
22-
const resetGame = async () => {
23-
await useCase.resetGame()
24-
}
4+
const { board, icon, winner, handleMove, resetGame } = useTicTacToeAdapter()
255

266
return (
277
<div>
288
<h2>Tic Tac Toe</h2>
29-
<span>current Player : {repository?.getIcon()}</span>
9+
<span>current Player : {icon}</span>
3010

31-
{game.getWinner() && <p>Winner: {game.getWinner()}</p>}
11+
{winner && <p>Winner: {winner}</p>}
3212
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 100px)' }}>
3313
{board.map((row, rowIndex) =>
3414
row.map((cell, colIndex) => (
@@ -39,7 +19,7 @@ const TicTacToeGame = () => {
3919
key={`${rowIndex}-${colIndex}`}
4020
style={{ width: '100px', height: '100px', fontSize: '24px' }}
4121
onClick={() => handleMove(rowIndex, colIndex)}
42-
disabled={!!cell || !!game.getWinner()}
22+
disabled={!!cell || !!winner}
4323
>
4424
{cell}
4525
</button>
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { TicTacToeUseCase } from './models/TicTacToeUsecase'
2+
import { useBoardNamespaceContext, useBoardNamespaceStores, useRepositoryContext, useScopeContainer } from './Provider'
3+
4+
const useTicTacToeAdapter = () => {
5+
const { user1: player1Scope, user2: player2Scope } = useScopeContainer()
6+
7+
const { turn, board, winner } = useBoardNamespaceStores((state) => {
8+
return { turn: state.turn, board: state.board, winner: state.winner }
9+
})
10+
11+
// you can swap scope whatever you want
12+
const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
13+
14+
const game = useBoardNamespaceContext()!
15+
const repository = useRepositoryContext(currentUserScope.__scopeTicTacToeRepository)!
16+
const useCase = new TicTacToeUseCase(game, repository)
17+
18+
const handleMove = async (row: number, col: number) => {
19+
await useCase.play({ row, col })
20+
}
21+
22+
const resetGame = async () => {
23+
await useCase.resetGame()
24+
}
25+
26+
return {
27+
board,
28+
turn,
29+
winner,
30+
icon: repository.getIcon(),
31+
handleMove,
32+
resetGame,
33+
}
34+
}
35+
36+
export default useTicTacToeAdapter

0 commit comments

Comments
 (0)