Tic Tac Toe Parte 0: Comparar Svelte y React
Tic Tac Toe Parte 1: Svelte y Canvas 2D
Tic Tac Toe Parte 2: Deshacer / Rehacer sin estado
Tic Tac Toe, parte 3: Deshacer / Rehacer con almacenamiento de comandos
Tic Tac Toe Parte 4: Interactuar con el backend de Flask usando HTTP
Hay un tutorial en el sitio web React que describe el desarrollo del juego Tic Tac Toe. Decidí repetir el desarrollo de este juego en Svelte. El artículo cubre solo la primera mitad del tutorial, antes de la implementación del historial de movimientos. Para fines de familiarización con el marco, esto es suficiente. Cada sección del artículo corresponde a la sección del tutorial, contiene enlaces al código fuente de ambos marcos.
Reaccionar - 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>
Cada componente se ejecuta en un archivo separado. Un componente puede contener código, marcado html y estilos CSS. Se muestra el uso de componentes anidados : el componente Cuadrado se importa al componente Tablero, el componente Tablero se importa al componente Aplicación. Se muestra el uso de cada bloque en el componente Tablero. Los estilos rara vez cambian, así que los coloqué después del marcado html, para no voltearlos nuevamente.
Reaccionar - Svelte
Square declara una propiedad de valor.
<script> export let value = ''; </script> <button>{value}</button>
El tablero muestra el uso de índices de matriz para poblar celdas.
<div class="board"> {#each Array(9) as square, i} <Square value={i}/> {/each} </div>
Reaccionar - Svelte
Al hacer clic en la celda, aparece una cruz. Square agregó el controlador de eventos DOM handleClick para los clics del mouse. Se agregó una variable de estado para mostrar una cruz en una celda.
<script> export let value = ''; let state = ''; function handleClick() { state = 'X'; } </script> <button on:click={handleClick}> {state} </button>
Reaccionar - Svelte
Hasta ese momento, el estado de las células estaba almacenado en ellas. Ahora que el almacenamiento del estado del juego se ha transferido al componente Tablero, el estado de todas las celdas se almacena en una matriz. El controlador de clics clickClick también se ha movido al componente Tablero. Square ahora muestra nuevamente el estado de la celda utilizando la propiedad 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>
Reaccionar - Svelte
Se agregó la apariencia de un dedo del pie después de la cruz.
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>
Reaccionar - Svelte
Se agregó la función para determinar el ganador CalculateWinner en un archivo separado helper.js. Está prohibido hacer clic en las celdas ya establecidas después de la victoria.
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>
Ya no planeo seguir el tutorial, me familiaricé con el marco.
Repositorio de GitHub
https://github.com/nomhoi/tic-tac-toe
Instalar el juego en la computadora local:
git clone git@github.com:nomhoi/tic-tac-toe.git cd tic-tac-toe npm install npm run dev
Lanzamos el juego en un navegador en la dirección: http: // localhost: 5000 / .
ACTUALIZACIÓN: Artículo fijo y código fuente de acuerdo con los comentarios en los comentarios.
ACTUALIZACIÓN2: repositorio de tutoriales agregado en GitHub.