From 8f028caaad2597a06904d51ae067972be0ead0a5 Mon Sep 17 00:00:00 2001
From: Daniel Bulant <danbulant@gmail.com>
Date: Fri, 20 Jan 2023 23:04:10 +0100
Subject: [PATCH] more animations

---
 client/src/lib/nameChoose.svelte |  4 +++-
 client/src/routes/+page.svelte   | 22 +++++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/client/src/lib/nameChoose.svelte b/client/src/lib/nameChoose.svelte
index 298e54f..1d69d0d 100644
--- a/client/src/lib/nameChoose.svelte
+++ b/client/src/lib/nameChoose.svelte
@@ -30,13 +30,15 @@
 <main>
     <div class="top">
         <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>
     
     <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 }}>
         <button on:click={submit} on:keydown={submit} in:fly={{ delay: duration*1.5, duration, opacity: 0, y: 100, easing: quadOut }}>Continue</button>
     </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>
 {/if}
 
diff --git a/client/src/routes/+page.svelte b/client/src/routes/+page.svelte
index eafafea..c919935 100644
--- a/client/src/routes/+page.svelte
+++ b/client/src/routes/+page.svelte
@@ -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>
     <title>Ultimate tictactoe</title>
 </svelte:head>
 
+{#if shown}
 <main class="flex items-center justify-center flex-col">
     <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>
 
             <img src="/computer.svg" alt="">
 
             <p>A game for two on a single device</p>
         </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>
 
             <img src="/network.svg" alt="">
@@ -19,7 +34,7 @@
             <p>Play with 2 devices, even across the ocean.</p>
         </a>
     </div>
-    <div class="rules">
+    <div class="rules" in:fly={{ delay: 0, duration, opacity: 0, y: 100, easing: quadOut }}>
         <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" 
                 width="800px" height="800px" viewBox="0 0 973.1 973.1" xml:space="preserve"
@@ -42,6 +57,7 @@
         </div>
     </div>
 </main>
+{/if}
 
 <style>
     main {