dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-05-24 12:22:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make back button reusable component and add default transition duration config

Browse source
This commit is contained in:
Neko-Life 2023-07-15 09:56:31 +07:00
parent 201ba6f948
commit 198ad177b7
3 changed files with 27 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client/src/lib/backButton.svelte Normal file
View file

@ -0,0 +1,22 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { DEFAULT_TRANSITION_DURATION } from './config';
export let href: string | undefined = undefined;
export let onclick: svelte.JSX.MouseEventHandler<HTMLAnchorElement> | undefined = undefined;
const duration = DEFAULT_TRANSITION_DURATION;
</script>
<a
transition:fly={{ duration, delay: duration * 0.5, x: -60, opacity: 0 }}
{href}
on:click={onclick}
class="text-black dark:text-white arrow-back fixed top-0 left-0 w-4 h-4 m-4 p-2 transform transition-transform hover:-translate-x-1"
>
<svg width="16" height="16">
<line y1="50%" x1="0" y2="50%" x2="100%" stroke="currentColor" stroke-width="2" />
<line y1="50%" x1="0" y2="100%" x2="50%" stroke="currentColor" stroke-width="2" />
<line y1="50%" x1="0" y2="0" x2="50%" stroke="currentColor" stroke-width="2" />
</svg>
</a>

1
client/src/lib/config.ts Normal file
View file

@ -0,0 +1 @@
export const DEFAULT_TRANSITION_DURATION = 400;

12
client/src/lib/game.svelte
View file

@ -3,6 +3,8 @@
import { quadOut } from "svelte/easing"; import { quadOut } from "svelte/easing";
import { draw, fade, fly } from "svelte/transition"; import { draw, fade, fly } from "svelte/transition";
import Move from "./move.svelte"; import Move from "./move.svelte";
import { DEFAULT_TRANSITION_DURATION } from "./config";
import BackButton from "./backButton.svelte";
export var self: 1 | 2 = 1; export var self: 1 | 2 = 1;
export var twoPlayer: boolean = false; export var twoPlayer: boolean = false;
@ -172,7 +174,7 @@
var movesShown = false; var movesShown = false;
const duration = 400; const duration = DEFAULT_TRANSITION_DURATION;
var moveDelayMultiplier = 1; var moveDelayMultiplier = 1;
onMount(() => { onMount(() => {
@ -189,13 +191,7 @@
<svelte:window bind:innerWidth bind:innerHeight on:click={() => hoveredPiece = null} /> <svelte:window bind:innerWidth bind:innerHeight on:click={() => hoveredPiece = null} />
<a transition:fly={{ duration, delay: duration * 0.5, x: -60, opacity: 0 }} href="/" on:click={check} class="text-black dark:text-white arrow-back fixed top-0 left-0 w-4 h-4 m-4 p-2 transform transition-transform hover:-translate-x-1"> <BackButton href="/" onclick={check}/>
<svg width="16" height="16">
<line y1="50%" x1="0" y2="50%" x2="100%" stroke="currentColor" stroke-width="2" />
<line y1="50%" x1="0" y2="100%" x2="50%" stroke="currentColor" stroke-width="2" />
<line y1="50%" x1="0" y2="0" x2="50%" stroke="currentColor" stroke-width="2" />
</svg>
</a>
{#if !twoPlayer} {#if !twoPlayer}
<!-- I have no idea why x is inverted here --> <!-- I have no idea why x is inverted here -->