Rotimi Best
b96d91cd7c
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
100 lines
2.1 KiB
Svelte
100 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { sineInOut } from 'svelte/easing';
|
|
import { fly } from 'svelte/transition';
|
|
import WinningLine from './WinningLine.svelte';
|
|
import { changeToComputer } from './store';
|
|
|
|
interface Game {
|
|
board: Array<Array<string>>;
|
|
click: (rowIndex: number, columnIndex: number) => Game;
|
|
}
|
|
|
|
export let game: Game;
|
|
export let winner = null;
|
|
|
|
let customDelay: number;
|
|
|
|
$: {
|
|
if ($changeToComputer.change) {
|
|
customDelay = 400;
|
|
} else {
|
|
customDelay = 0;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="relative">
|
|
<table>
|
|
<tbody>
|
|
{#each game.board as row, rowIndex}
|
|
<tr>
|
|
{#each row as column, columnIndex}
|
|
<td
|
|
class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
|
|
on:click={() => {
|
|
game = game.click(rowIndex, columnIndex);
|
|
}}
|
|
>
|
|
{#if column === 'X'}
|
|
<img
|
|
transition:fly={{ y: 100, delay: 0, easing: sineInOut }}
|
|
src="/free-tools/tic-tac/tic-tac-x.svg"
|
|
alt="X icon"
|
|
/>
|
|
{:else if column === 'O'}
|
|
<img
|
|
transition:fly={{ y: 100, delay: customDelay, easing: sineInOut }}
|
|
src="/free-tools/tic-tac/tic-tac-o.svg"
|
|
alt="O icon"
|
|
/>
|
|
{:else}
|
|
<!-- empty cell -->
|
|
{/if}
|
|
</td>
|
|
{/each}
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
|
|
<WinningLine {winner} />
|
|
</div>
|
|
|
|
<style>
|
|
table {
|
|
overflow: hidden;
|
|
border-collapse: collapse;
|
|
font-size: 4em;
|
|
color: white;
|
|
border: 0px;
|
|
z-index: 10;
|
|
position: relative;
|
|
}
|
|
|
|
td {
|
|
overflow: hidden;
|
|
text-align: center;
|
|
height: 100px;
|
|
width: 100px;
|
|
border-right: 10px solid white;
|
|
border-bottom: 10px solid white;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
td:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
td {
|
|
width: 16vw;
|
|
height: 16vw;
|
|
}
|
|
}
|
|
</style>
|