Tic Tac Toe Partie 0: Comparaison de Svelte et React
Tic Tac Toe Partie 1: Svelte et Canvas 2D
Tic Tac Toe Partie 2: Annuler / Rétablir sans état
Tic Tac Toe, partie 3: Annuler / Rétablir avec stockage des commandes
Tic Tac Toe Partie 4: Interaction avec le backend Flask en utilisant HTTP
Il y a un tutoriel sur le site Web React qui décrit le développement du jeu Tic Tac Toe. J'ai décidé de répéter le développement de ce jeu sur Svelte. L'article ne couvre que la première moitié du tutoriel, avant la mise en place de l'historique des mouvements. Aux fins de familiarisation avec le cadre, cela suffit. Chaque section de l'article correspond à la section du tutoriel, contient des liens vers le code source des deux frameworks.
React - Svelte
App.svelte<script> import Board from './Board.svelte'; </script> <div class="game"> <div class="game-board"> <Board /> </div> <div class="game-info"> <div></div> <ol></ol> </div> </div> <style> .game { font: 14px "Century Gothic", Futura, sans-serif; margin: 20px; display: flex; flex-direction: row; } .game-info { margin-left: 20px; } ol { padding-left: 30px; } </style>
Board.svelte <script> import Square from './Square.svelte'; </script> <div class="status">Next player: X</div> <div class="board"> {#each Array(9) as square} <Square /> {/each} </div> <style> .board { width: 102px; } .status { margin-bottom: 10px; } </style>
Square.svelte <button></button> <style> button { background: #fff; border: 1px solid #999; float: left; font-size: 24px; font-weight: bold; line-height: 34px; height: 34px; margin-right: -1px; margin-top: -1px; margin-bottom: -1px; padding: 0; text-align: center; width: 34px; } button:focus { outline: none; } </style>
Chaque composant est exécuté dans un fichier séparé. Un composant peut contenir du code, du balisage html et des styles css. L'utilisation de composants imbriqués est illustrée: le composant Square est importé dans le composant Board, le composant Board est importé dans le composant App. Montré utilisé chaque bloc dans le composant Board. Les styles changent rarement, donc je les ai placés après le balisage html, afin de ne pas les retourner.
React - Svelte
Square déclare une propriété value.
<script> export let value = ''; </script> <button>{value}</button>
Le tableau montre l'utilisation d'indices de tableau pour remplir les cellules.
<div class="board"> {#each Array(9) as square, i} <Square value={i}/> {/each} </div>
React - Svelte
En cliquant dans la cellule, une croix apparaît. Square a ajouté un gestionnaire d' événements DOM handleClick pour les clics de souris. Ajout d'une variable d'état pour afficher une croix dans une cellule.
<script> export let value = ''; let state = ''; function handleClick() { state = 'X'; } </script> <button on:click={handleClick}> {state} </button>
React - Svelte
Jusqu'à ce moment, l'état des cellules y était stocké. Maintenant que le stockage de l'état du jeu a été transféré au composant Board, l'état de toutes les cellules est stocké dans un seul tableau. Le gestionnaire de poignées clickClick a également été déplacé vers le composant Board. Square affiche à nouveau l'état de la cellule à l'aide de la propriété value.
Board.svelte <script> import Square from './Square.svelte'; let state = { squares: Array(9).fill(''), }; function handleClick(i) { const squares = state.squares.slice(); squares[i] = 'X'; state.squares = squares; } </script> <div class="status">Next player: X</div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)}/> {/each} </div>
Square.svelte <script> export let value = ''; </script> <button on:click> {value} </button>
React - Svelte
Ajout de l'apparence d'un orteil après la croix.
Board.svelte <script> import Square from './Square.svelte'; let state = { squares: Array(9).fill(''), xIsNext: true, }; function handleClick(i) { const squares = state.squares.slice(); squares[i] = state.xIsNext ? 'X' : 'O'; state.squares = squares; state.xIsNext = !state.xIsNext; } </script> <div class="status">Next player: {state.xIsNext ? 'X' : 'O'}</div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)}/> {/each} </div>
React - Svelte
Ajout d'une fonction pour déterminer le gagnant CalculateWinner dans un fichier séparé helper.js. Il est interdit de cliquer sur les cellules déjà établies après la victoire.
heplers.js export function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6], ]; for (let i = 0; i < lines.length; i++) { const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }
Board.svelte <script> import Square from './Square.svelte'; import { calculateWinner } from './helpers.js'; let state = { squares: Array(9).fill(''), xIsNext: true, }; $: winner = calculateWinner(state.squares); function handleClick(i) { if (winner || state.squares[i]) return; const squares = state.squares.slice(); squares[i] = state.xIsNext ? 'X' : 'O'; state.squares = squares; state.xIsNext = !state.xIsNext; } </script> <div class="status"> {#if winner} <b>Winner: {winner}</b> {:else} Next player: {state.xIsNext ? 'X' : 'O'} {/if} </div> <div class="board"> {#each state.squares as value, i} <Square {value} on:click={e => handleClick(i)} /> {/each} </div>
Je ne prévois plus de suivre le didacticiel, je me suis familiarisé avec le cadre.
Dépôt GitHub
https://github.com/nomhoi/tic-tac-toe
Installation du jeu sur l'ordinateur local:
git clone git@github.com:nomhoi/tic-tac-toe.git cd tic-tac-toe npm install npm run dev
Nous lançons le jeu dans un navigateur à l'adresse: http: // localhost: 5000 / .
MISE À JOUR: Correction de l'article et du code source conformément aux commentaires dans les commentaires.
UPDATE2: Ajout d'un référentiel de tutoriels sur GitHub.