updeps

Author: Valexr

esbuild.js

@@ -7,8 +7,7 @@ import log from './env/log.js';
 const DEV = process.argv.includes('--dev');
 
 const serveOptions = {
-    servedir: 'public',
-    port: 8001
+    servedir: 'public'
 };
 
 const svelteOptions = {

package.json

@@ -11,7 +11,7 @@
     },
     "devDependencies": {
         "@tsconfig/svelte": "^3.0.0",
-        "esbuild": "^0.17.7",
+        "esbuild": "^0.17.8",
         "esbuild-svelte": "^0.7.3",
         "svelte": "^3.55.1",
         "svelte-preprocess": "^5.0.1",

src/App.svelte

@@ -1,16 +1,16 @@
 <script lang="ts" context="module">
     import Score from "$components/Score.svelte";
     import Board from "$components/Board.svelte";
+    import Nav from "$components/Nav.svelte";
 </script>
 
 <Score />
-<main>
-    <Board />
-</main>
-<footer>
-    <p>Sort tiles: 1, 2, 3 ... 9 ... 12, 13 ... 15</p>
-</footer>
+<Board />
+<Nav />
 
+<!-- <footer>
+    <p>Sort tiles: 1, 2, 3 ... 9 ... 12, 13 ... 15</p>
+</footer> -->
 <style>
     @import "app.css";
 </style>

src/app.css

@@ -1,4 +1,5 @@
 @import 'css/theme.css';
 @import 'css/base.css';
 @import 'css/board.css';
-@import 'css/tile.css';
+@import 'css/tile.css';
+@import 'css/nav.css';

src/components/Board.svelte

@@ -6,8 +6,10 @@
     const numbers = Array.from({ length: 15 }, (_, i) => i + 1);
 </script>
 
-<section id="board">
-    {#each numbers as number}
-        <Tile {number} />
-    {/each}
-</section>
+<main>
+    <section id="board">
+        {#each numbers as number}
+            <Tile {number} />
+        {/each}
+    </section>
+</main>

src/components/Nav.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">
+    import { shuffle } from "$lib/actions";
+    import { score, sorted } from "$lib/stores";
+</script>
+
+<script lang="ts">
+    shuffle($sorted);
+</script>
+
+<footer>
+    <nav class:playing={!$sorted}>
+        {#if !$sorted}
+            <button on:click={() => shuffle($sorted)}>Sort</button>
+        {:else}
+            <button class="lg" on:click={() => shuffle()}>Shuffle</button>
+        {/if}
+    </nav>
+</footer>

src/components/Score.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" context="module">
-    import { score, sorted } from "$lib/stores";
+    import { score, steps, sorted } from "$lib/stores";
     import { shuffle } from "$lib/actions.js";
     import gh from "../svg/gh.svg";
 </script>
 
 <header>
-    <h3 class="counter">Steps: {$score}</h3>
+    <p>Score: {$score}</p>
     <h1>
         <a
             href="https://github.com/Valexr/Tagy"
@@ -17,12 +17,5 @@
         </a>
         Tagy
     </h1>
-    <nav>
-        <button
-            on:click={() => shuffle($sorted)}
-            title="{$sorted ? 'Shuffle' : 'Sort'} the tiles"
-        >
-            {$sorted ? "Shuffle" : "Sort"}
-        </button>
-    </nav>
+    <p>Steps: {$steps}</p>
 </header>

src/components/Tile.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" context="module">
     import { move } from "$lib/actions";
-    import { positions, score, sorted } from "$lib/stores.js";
+    import { positions, score, steps, sorted } from "$lib/stores.js";
 </script>
 
 <script lang="ts">
@@ -12,7 +12,7 @@
             $positions[number].m === $positions[0].m;
         if (movable && !$sorted) {
             move(number);
-            $score += 1;
+            $steps += 1;
         }
     }
 </script>

src/css/base.css

@@ -13,7 +13,8 @@ body {
     background-color: var(--light);
 }
 
-header {
+header,
+footer {
     display: flex;
     align-items: center;
     justify-content: space-between;

src/css/nav.css

@@ -0,0 +1,67 @@
+footer nav {
+    color-scheme: dark;
+    position: absolute;
+    left: calc(50% - 150px);
+    top: calc(50% - 25px);
+    display: flex;
+    flex-flow: column nowrap;
+    width: 300px;
+}
+
+footer nav.playing {
+    top: auto;
+    left: auto;
+    position: relative;
+    flex-flow: row nowrap;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+footer nav fieldset {
+    display: flex;
+    justify-content: space-between;
+    border: 0;
+    margin: 0;
+    padding: 1rem 0;
+}
+
+footer nav label {
+    flex: 0 1 min-content;
+}
+
+input,
+select {
+    border: 0;
+    border-radius: 0;
+    padding: 0.25rem;
+    color: var(--dark);
+    background-color: var(--light);
+    font-size: inherit;
+    border-radius: 0.15rem;
+}
+
+select {
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='currentColor'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");
+    background-position: right 0.5em center;
+    background-repeat: no-repeat;
+    background-size: .5em .75em;
+    padding-right: 2em;
+}
+
+footer nav button {
+    position: relative;
+    box-shadow: var(--shadow);
+}
+
+footer nav button.lg {
+    font-size: 2rem;
+    box-shadow: var(--shadow-lg);
+}
+
+footer nav button:active {
+    top: 2px;
+    left: 2px;
+    box-shadow: none;
+}