dan/slightlyComplicatedTicTacToe
1
0
Fork 0
mirror of https://github.com/danbulant/slightlyComplicatedTicTacToe synced 2026-07-06 03:30:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more animations

Browse source
This commit is contained in:
Daniel Bulant 2023-01-20 23:04:10 +01:00
parent 4dc693ddb6
commit 8f028caaad
2 changed files with 22 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/lib/nameChoose.svelte
View file

@ -30,13 +30,15 @@
<main> <main>
<div class="top"> <div class="top">
<h1 in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>What is your nickname</h1> <h1 in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>What is your nickname</h1>
<p in:fly={{ delay: duration*0.5, duration, opacity: 0, y: 100, easing: quadOut }}>This name is publicly visible and needs to be unique among the connected players.</p> <p in:fly={{ delay: duration*0.5, duration, opacity: 0, y: 100, easing: quadOut }}>This name is publicly visible and needs to be unique among the connected players. Minimum 2 characters.</p>
</div> </div>
<form on:submit> <form on:submit>
<input on:submit bind:value={name} type="text" min={2} max={64} in:fly={{ delay: duration*1, duration, opacity: 0, y: 100, easing: quadOut }}> <input on:submit bind:value={name} type="text" min={2} max={64} in:fly={{ delay: duration*1, duration, opacity: 0, y: 100, easing: quadOut }}>
<button on:click={submit} on:keydown={submit} in:fly={{ delay: duration*1.5, duration, opacity: 0, y: 100, easing: quadOut }}>Continue</button> <button on:click={submit} on:keydown={submit} in:fly={{ delay: duration*1.5, duration, opacity: 0, y: 100, easing: quadOut }}>Continue</button>
</form> </form>
<p>In case of invalid username you will not be able to connect. It's kind of hard to check the exact reason.</p>
</main> </main>
{/if} {/if}

22
client/src/routes/+page.svelte
View file

@ -1,17 +1,32 @@
<script>
import { onMount } from "svelte";
import { quadOut } from "svelte/easing";
import { fly } from "svelte/transition";
const duration = 400;
var shown = false;
onMount(() => {
shown = true;
});
</script>
<svelte:head> <svelte:head>
<title>Ultimate tictactoe</title> <title>Ultimate tictactoe</title>
</svelte:head> </svelte:head>
{#if shown}
<main class="flex items-center justify-center flex-col"> <main class="flex items-center justify-center flex-col">
<div class="chooser"> <div class="chooser">
<a href="/localplay" class="single"> <a href="/localplay" class="single" in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>
<h1>Local multiplayer</h1> <h1>Local multiplayer</h1>
<img src="/computer.svg" alt=""> <img src="/computer.svg" alt="">
<p>A game for two on a single device</p> <p>A game for two on a single device</p>
</a> </a>
<a href="/multiplayer" class="multi"> <a href="/multiplayer" class="multi" in:fly={{ delay: duration * 0.5, duration, opacity: 0, y: 100, easing: quadOut }}>
<h1>Online multiplayer</h1> <h1>Online multiplayer</h1>
<img src="/network.svg" alt=""> <img src="/network.svg" alt="">
@ -19,7 +34,7 @@
<p>Play with 2 devices, even across the ocean.</p> <p>Play with 2 devices, even across the ocean.</p>
</a> </a>
</div> </div>
<div class="rules"> <div class="rules" in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>
<div class="icon"> <div class="icon">
<svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <svg fill="currentColor" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 973.1 973.1" xml:space="preserve" width="800px" height="800px" viewBox="0 0 973.1 973.1" xml:space="preserve"
@ -42,6 +57,7 @@
</div> </div>
</div> </div>
</main> </main>
{/if}
<style> <style>
main { main {