migrate: exercise 04 to kcd-workshop format

Author: chantastic

exercises/04.real-world-review-tic-tac-toe/01.problem/README.mdx

@@ -0,0 +1,37 @@
+# Real World Review: Tic Tac Toe
+
+We're going to build tic-tac-toe (with localStorage support)! If you've gone
+through React's official tutorial, this was lifted from that.
+
+You're going to need some managed state and some derived state. Remember from
+exercise 1:
+
+- **Managed State:** State that you need to explicitly manage
+- **Derived State:** State that you can calculate based on other state
+
+`squares` is the managed state and it's the state of the board in a
+single-dimensional array:
+
+```
+[
+  'X', 'O', 'X',
+  'X', 'O', 'O',
+  'X', 'X', 'O'
+]
+```
+
+This will start out as an empty array because it's the start of the game.
+
+`nextValue` will be either the string `X` or `O` and is derived state which you
+can determine based on the value of `squares`. We can determine whose turn it is
+based on how many "X" and "O" squares there are. We've written this out for you
+in a `calculateNextValue` function in the `tic-tac-toe-utils.tsx` file.
+
+`winner` will be either the string `X` or `O` and is derived state which can
+also be determined based on the value of `squares` and we've provided a
+`calculateWinner` function you can use to get that value.
+
+If you want to try this exercise on beast mode then you can ignore
+`calculateNextValue` and `calculateWinner` and write your own version of those
+utilities.
+

exercises/04.real-world-review-tic-tac-toe/01.problem/index.css

@@ -0,0 +1 @@
+@import '/tic-tac-toe.styles.css';

src/exercise/04.tsx renamed to exercises/04.real-world-review-tic-tac-toe/01.problem/index.tsx

@@ -1,13 +1,11 @@
-// Real World Review: Tic Tac Toe
-// http://localhost:3000/isolated/exercise/04.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import {
   calculateStatus,
   calculateNextValue,
   calculateWinner,
-} from '../tic-tac-toe-utils'
-import type {Squares} from '../tic-tac-toe-utils'
+} from '~/shared/tic-tac-toe-utils'
+import type {Squares} from '~/shared/tic-tac-toe-utils'
 
 function Board() {
   // 🐨 squares is the state for this component. Add useState for squares
@@ -89,7 +87,9 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)
 
 /*
 eslint

exercises/04.real-world-review-tic-tac-toe/01.solution/README.mdx

@@ -0,0 +1 @@
+# Real World Review: Tic Tac Toe

exercises/04.real-world-review-tic-tac-toe/01.solution/index.css

@@ -0,0 +1 @@
+@import '/tic-tac-toe.styles.css';

src/final/04.tsx renamed to exercises/04.real-world-review-tic-tac-toe/01.solution/index.tsx

@@ -1,13 +1,11 @@
-// Real World Review: Tic Tac Toe
-// http://localhost:3000/isolated/final/04.tsx
-
 import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
 import {
   calculateStatus,
   calculateNextValue,
   calculateWinner,
-} from '../tic-tac-toe-utils'
-import type {Squares} from '../tic-tac-toe-utils'
+} from '~/shared/tic-tac-toe-utils'
+import type {Squares} from '~/shared/tic-tac-toe-utils'
 
 function Board() {
   const [squares, setSquares] = React.useState<Squares>(Array(9).fill(null))
@@ -74,4 +72,6 @@ function App() {
   )
 }
 
-export {App}
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/04.real-world-review-tic-tac-toe/02.problem/README.mdx

@@ -0,0 +1,5 @@
+# Preserve State in localStorage
+
+👨‍💼 Our customers want to be able to close the tab in the middle of a game and
+then resume the game later. Can you store the game's state in `localStorage`?
+

exercises/04.real-world-review-tic-tac-toe/02.problem/index.css

@@ -0,0 +1 @@
+@import '/tic-tac-toe.styles.css';

exercises/04.real-world-review-tic-tac-toe/02.problem/index.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+import {
+  calculateStatus,
+  calculateNextValue,
+  calculateWinner,
+} from '~/shared/tic-tac-toe-utils'
+import type {Squares} from '~/shared/tic-tac-toe-utils'
+
+function Board() {
+  const [squares, setSquares] = React.useState<Squares>(Array(9).fill(null))
+
+  const nextValue = calculateNextValue(squares)
+  const winner = calculateWinner(squares)
+  const status = calculateStatus(winner, squares, nextValue)
+
+  function selectSquare(index: number) {
+    if (winner || squares[index]) {
+      return
+    }
+    setSquares(previousSquares => {
+      const squaresCopy = [...previousSquares]
+      squaresCopy[index] = nextValue
+      return squaresCopy
+    })
+  }
+
+  function restart() {
+    setSquares(Array(9).fill(null))
+  }
+
+  function renderSquare(i: number) {
+    return (
+      <button className="square" onClick={() => selectSquare(i)}>
+        {squares[i]}
+      </button>
+    )
+  }
+
+  return (
+    <div>
+      <div className="status">{status}</div>
+      <div className="board-row">
+        {renderSquare(0)}
+        {renderSquare(1)}
+        {renderSquare(2)}
+      </div>
+      <div className="board-row">
+        {renderSquare(3)}
+        {renderSquare(4)}
+        {renderSquare(5)}
+      </div>
+      <div className="board-row">
+        {renderSquare(6)}
+        {renderSquare(7)}
+        {renderSquare(8)}
+      </div>
+      <button className="restart" onClick={restart}>
+        restart
+      </button>
+    </div>
+  )
+}
+
+function App() {
+  return (
+    <div className="game">
+      <div className="game-board">
+        <Board />
+      </div>
+    </div>
+  )
+}
+
+const rootEl = document.createElement('div')
+document.body.append(rootEl)
+ReactDOM.createRoot(rootEl).render(<App />)

exercises/04.real-world-review-tic-tac-toe/02.solution/README.mdx

@@ -0,0 +1 @@
+# Preserve State in localStorage