fixes

Author: Rich Harris

content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/README.md

@@ -2,35 +2,27 @@
 title: <svelte:fragment>
 ---
 
-The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element. This keeps the flow layout of your document intact.
+The `<svelte:fragment>` element allows you to place content in a named slot without wrapping it in a container DOM element.
 
-In the example notice how we applied a flex layout with a gap of `1em` to the box.
+In this exercise, we're making a Tic-Tac-Toe game. To form a grid, the `<button>` elements in `App.svelte` should be direct descendants of the `<div class="board">` element in `Board.svelte`.
 
-```svelte
-/// file: Box.svelte
-<div class="box">
-	<slot name="header">No header was provided</slot>
-	<p>Some content between header and footer</p>
-	<slot name="footer"></slot>
-</div>
-
-<style>
-	.box {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-	}
-</style>
-```
-
-However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.
-
-We can solve this by changing `<div slot="footer">` in the `App` component. Replace the `<div>` with `<svelte:fragment>`:
+At the moment, it's horribly broken, because they're children of `<div slot="game">` instead. Let's fix it:
 
 ```svelte
 /// file: App.svelte
-<svelte:fragment slot="footer">
-	<p>All rights reserved.</p>
-	<p>Copyright (c) 2019 Svelte Industries</p>
-</svelte:fragment>
-```
+<+++svelte:fragment+++ slot="game">
+	{#each squares as square, i}
+		<button
+			class="square"
+			class:winning={winningLine?.includes(i)}
+			disabled={square}
+			on:click={() => {
+				squares[i] = next;
+				next = next === 'x' ? 'o' : 'x';
+			}}
+		>
+			{square}
+		</button>
+	{/each}
+</+++svelte:fragment+++>
+```

content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/app-a/src/lib/App.svelte

@@ -1,37 +1,16 @@
 <script>
 	import Board from './Board.svelte';
+	import { getWinningLine } from './utils.js';
 
 	let squares = Array(9).fill('');
 	let next = 'x';
 
-	function getLine(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 (const line of lines) {
-			const [a, b, c] = line;
-			if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
-				return line;
-			}
-		}
-
-		return null;
-	}
-
-	$: winningLine = getLine(squares);
+	$: winningLine = getWinningLine(squares);
 </script>
 
 <div class="container">
 	<Board size={3}>
-		<svelte:fragment slot="game">
+		<div slot="game">
 			{#each squares as square, i}
 				<button
 					class="square"
@@ -45,15 +24,17 @@
 					{square}
 				</button>
 			{/each}
-		</svelte:fragment>
-	</Board>
+		</div>
 
-	<button on:click={() => {
-		squares = Array(9).fill('');
-		next = 'x';
-	}}>
-		Reset
-	</button>
+		<div slot="controls">
+			<button on:click={() => {
+				squares = Array(9).fill('');
+				next = 'x';
+			}}>
+				Reset
+			</button>
+		</div>
+	</Board>
 </div>
 
 <style>
@@ -63,7 +44,6 @@
 		gap: 1em;
 		align-items: center;
 		justify-content: center;
-		width: min(calc(100vmin - 2em), 20em);
 		height: 100%;
 		margin: 0 auto;
 	}
@@ -74,6 +54,7 @@
 		color: #222;
 		opacity: 1;
 		font-size: 2em;
+		padding: 0;
 	}
 
 	.winning {

content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/app-a/src/lib/Board.svelte

@@ -13,7 +13,8 @@
 		display: grid;
 		grid-template-columns: repeat(var(--size), 1fr);
 		grid-template-rows: repeat(var(--size), 1fr);
-		width: 100%;
+		height: 100%;
+		max-height: 20em;
 		aspect-ratio: 1;
 		background: black;
 		gap: 1px;

content/tutorial/02-advanced-svelte/09-special-elements/10-svelte-fragment/app-a/src/lib/utils.js

@@ -0,0 +1,19 @@
+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]
+];
+
+export function getWinningLine(squares) {
+	for (const line of lines) {
+		const [a, b, c] = line;
+		if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+			return line;
+		}
+	}
+}