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

Merge pull request #17 from Neko-Life/refactor/back-button

Browse source 
make back button reusable component and add default transition durati…
This commit is contained in:
Daniel Bulant 2023-08-04 14:22:13 +02:00 committed by GitHub
commit d38aa05b57
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/.prettierrc
View file

@ -1,6 +1,7 @@
{ {
"useTabs": true, "useTabs": false,
"singleQuote": true, "tabWidth": 2,
"trailingComma": "none", "singleQuote": true,
"printWidth": 100 "trailingComma": "none",
"printWidth": 100
} }

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 -->