From 198ad177b7d9ac295aabd1ce9b32f6528248e51f Mon Sep 17 00:00:00 2001
From: Neko-Life <nekolife123579@gmail.com>
Date: Sat, 15 Jul 2023 09:56:31 +0700
Subject: [PATCH 1/2] make back button reusable component and add default
 transition duration config

---
 client/src/lib/backButton.svelte | 22 ++++++++++++++++++++++
 client/src/lib/config.ts         |  1 +
 client/src/lib/game.svelte       | 12 ++++--------
 3 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 client/src/lib/backButton.svelte
 create mode 100644 client/src/lib/config.ts

diff --git a/client/src/lib/backButton.svelte b/client/src/lib/backButton.svelte
new file mode 100644
index 0000000..710ba64
--- /dev/null
+++ b/client/src/lib/backButton.svelte
@@ -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>
\ No newline at end of file
diff --git a/client/src/lib/config.ts b/client/src/lib/config.ts
new file mode 100644
index 0000000..e76ff66
--- /dev/null
+++ b/client/src/lib/config.ts
@@ -0,0 +1 @@
+export const DEFAULT_TRANSITION_DURATION = 400;
\ No newline at end of file
diff --git a/client/src/lib/game.svelte b/client/src/lib/game.svelte
index b84ac88..2590e67 100644
--- a/client/src/lib/game.svelte
+++ b/client/src/lib/game.svelte
@@ -3,6 +3,8 @@
 	import { quadOut } from "svelte/easing";
 	import { draw, fade, fly } from "svelte/transition";
 	import Move from "./move.svelte";
+	import { DEFAULT_TRANSITION_DURATION } from "./config";
+	import BackButton from "./backButton.svelte";
 
     export var self: 1 | 2 = 1;
     export var twoPlayer: boolean = false;
@@ -172,7 +174,7 @@
 
     var movesShown = false;
 
-    const duration = 400;
+    const duration = DEFAULT_TRANSITION_DURATION;
     var moveDelayMultiplier = 1;
 
     onMount(() => {
@@ -189,13 +191,7 @@
 
 <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">
-    <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>
+<BackButton href="/" onclick={check}/>
 
 {#if !twoPlayer}
     <!-- I have no idea why x is inverted here -->

From 9e7092a0f64e84ef4b1181e7e2308ec65fe527f3 Mon Sep 17 00:00:00 2001
From: Neko-Life <nekolife123579@gmail.com>
Date: Sat, 15 Jul 2023 16:05:46 +0700
Subject: [PATCH 2/2] formatting

---
 client/.prettierrc               | 11 ++++++-----
 client/src/lib/backButton.svelte | 28 ++++++++++++++--------------
 client/src/lib/game.svelte       |  4 ++--
 3 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/client/.prettierrc b/client/.prettierrc
index ff2677e..ab96ecc 100644
--- a/client/.prettierrc
+++ b/client/.prettierrc
@@ -1,6 +1,7 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100
-}
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 100
+}
\ No newline at end of file
diff --git a/client/src/lib/backButton.svelte b/client/src/lib/backButton.svelte
index 710ba64..0c77f27 100644
--- a/client/src/lib/backButton.svelte
+++ b/client/src/lib/backButton.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-	import { fly } from 'svelte/transition';
-	import { DEFAULT_TRANSITION_DURATION } from './config';
+  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;
+  export let href: string | undefined = undefined;
+  export let onclick: svelte.JSX.MouseEventHandler<HTMLAnchorElement> | undefined = undefined;
 
-	const duration = DEFAULT_TRANSITION_DURATION;
+  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"
+  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>
+  <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>
\ No newline at end of file
diff --git a/client/src/lib/game.svelte b/client/src/lib/game.svelte
index 2590e67..bbe1e5f 100644
--- a/client/src/lib/game.svelte
+++ b/client/src/lib/game.svelte
@@ -3,8 +3,8 @@
 	import { quadOut } from "svelte/easing";
 	import { draw, fade, fly } from "svelte/transition";
 	import Move from "./move.svelte";
-	import { DEFAULT_TRANSITION_DURATION } from "./config";
-	import BackButton from "./backButton.svelte";
+    import { DEFAULT_TRANSITION_DURATION } from "./config";
+    import BackButton from "./backButton.svelte";
 
     export var self: 1 | 2 = 1;
     export var twoPlayer: boolean = false;