89 lines
2.1 KiB
Svelte
89 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { run } from 'svelte/legacy';
|
|
|
|
import { fade } from 'svelte/transition';
|
|
interface Props {
|
|
winner?: Winner | null;
|
|
}
|
|
|
|
let { winner = null }: Props = $props();
|
|
|
|
interface Winner {
|
|
direction: 'horizontal' | 'vertical' | 'diagonal';
|
|
row?: number;
|
|
column?: number;
|
|
diagonal?: 'top-left-to-bottom-right' | 'top-right-to-bottom-left';
|
|
}
|
|
|
|
run(() => {
|
|
if (winner) {
|
|
if (winner.direction === 'vertical' && winner.column !== undefined) {
|
|
document.documentElement.style.setProperty('--col-index', winner.column.toString());
|
|
} else if (winner.direction === 'horizontal' && winner.row !== undefined) {
|
|
document.documentElement.style.setProperty('--row-index', winner.row.toString());
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{#if winner}
|
|
<div
|
|
transition:fade={{ delay: 500, duration: 2 }}
|
|
class="winning-line absolute bg-[#ffc300] z-[100]"
|
|
class:horizontal-line={winner.direction === 'horizontal'}
|
|
class:vertical-line={winner.direction === 'vertical'}
|
|
class:diagonal-line-1={winner.direction === 'diagonal' &&
|
|
winner.diagonal === 'top-left-to-bottom-right'}
|
|
class:diagonal-line-2={winner.direction === 'diagonal' &&
|
|
winner.diagonal === 'top-right-to-bottom-left'}
|
|
></div>
|
|
{/if}
|
|
|
|
<style>
|
|
.horizontal-line {
|
|
top: calc(var(--row-index) * 100px + 50px - 5px);
|
|
left: 0;
|
|
width: 100%;
|
|
height: 10px;
|
|
}
|
|
|
|
.vertical-line {
|
|
top: 0;
|
|
left: calc(var(--col-index) * 100px + 50px - 5px);
|
|
width: 10px;
|
|
height: 100%;
|
|
}
|
|
|
|
.diagonal-line-1 {
|
|
top: 0;
|
|
left: 0;
|
|
width: 140%;
|
|
height: 100%;
|
|
background: none;
|
|
border-top: 10px solid #ffc300;
|
|
transform: rotate(45deg);
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.diagonal-line-2 {
|
|
top: 0;
|
|
right: 0;
|
|
width: 140%;
|
|
height: 100%;
|
|
background: none;
|
|
border-top: 10px solid #ffc300;
|
|
transform: rotate(-45deg);
|
|
transform-origin: top right;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.horizontal-line {
|
|
top: calc(var(--row-index) * 16vw + 8vw - 5px);
|
|
}
|
|
|
|
.vertical-line {
|
|
left: calc(var(--col-index) * 16vw + 8vw - 5px);
|
|
}
|
|
}
|
|
</style>
|