make scaling work

src/App.svelte

@@ -25,17 +25,20 @@
 
 <Tailwind />
 
-<main class="container mx-auto text-center">
+<main class="container text-center mx-auto flex h-screen">
-  <div class="level">
+  <div
-    {#each levels as _, i}
+    class="m-auto transform-gpu sm:scale-150 md:scale-175 lg:scale-200 xl:scale-225">
-      <button
+    <div class="level">
-        class="cursor-pointer mr-5"
+      {#each levels as _, i}
-        on:click={changeLevel}
+        <button
-        value={i}
+          class="cursor-pointer mx-2"
-        class:completed={$completed.includes(i)}
+          on:click={changeLevel}
-        class:active={level == i}>{i + 1}</button>
+          value={i}
-    {/each}
+          class:completed={$completed.includes(i)}
-  </div>
+          class:active={level == i}>{i + 1}</button>
+      {/each}
+    </div>
 
-  <Triangle {side} {variant} />
+    <Triangle {side} {variant} />
+  </div>
 </main>

src/Components/Tailwind.svelte

@@ -2,4 +2,149 @@
   @import "tailwindcss/base";
   @import "tailwindcss/components";
   @import "tailwindcss/utilities";
+
+  .div0 {
+    grid-area: 1 / 5;
+    margin-left: -80px;
+  }
+  .div1 {
+    grid-area: 2 / 4;
+    margin-left: -60px;
+  }
+  .div2 {
+    grid-area: 2 / 6;
+    margin-left: -100px;
+  }
+  .div3 {
+    grid-area: 3 / 3;
+    margin-left: -40px;
+  }
+  .div4 {
+    grid-area: 3 / 5;
+    margin-left: -80px;
+  }
+  .div5 {
+    grid-area: 3 / 7;
+    margin-left: -120px;
+  }
+  .div6 {
+    grid-area: 4 / 2;
+    margin-left: -20px;
+  }
+  .div7 {
+    grid-area: 4 / 4;
+    margin-left: -60px;
+  }
+  .div8 {
+    grid-area: 4 / 6;
+    margin-left: -100px;
+  }
+  .div9 {
+    grid-area: 4 / 8;
+    margin-left: -140px;
+  }
+  .div10 {
+    grid-area: 5 / 1;
+    margin-left: 0px;
+  }
+  .div11 {
+    grid-area: 5 / 3;
+    margin-left: -40px;
+  }
+  .div12 {
+    grid-area: 5 / 5;
+    margin-left: -80px;
+  }
+  .div13 {
+    grid-area: 5 / 7;
+    margin-left: -120px;
+  }
+  .div14 {
+    grid-area: 5 / 9;
+    margin-left: -160px;
+  }
+
+  .green {
+    background-color: hsl(92, 28%, 65%);
+  }
+
+  .green-lighter {
+    background-color: hsl(92, 28%, 85%);
+  }
+
+  .green-darker {
+    background-color: hsl(92, 28%, 30%);
+  }
+
+  .cyan {
+    background-color: hsl(179, 25%, 65%);
+  }
+
+  .cyan-lighter {
+    background-color: hsl(179, 25%, 85%);
+  }
+
+  .cyan-darker {
+    background-color: hsl(179, 25%, 30%);
+  }
+
+  .blue {
+    background-color: hsl(210, 34%, 63%);
+  }
+
+  .blue-lighter {
+    background-color: hsl(213, 32%, 82%);
+  }
+
+  .blue-darker {
+    background-color: hsl(213, 32%, 37%);
+  }
+
+  .yellow {
+    background-color: hsl(40, 71%, 73%);
+  }
+
+  .yellow-lighter {
+    background-color: hsl(40, 71%, 88%);
+  }
+
+  .yellow-darker {
+    background-color: hsl(40, 71%, 37%);
+  }
+
+  .orange {
+    background-color: hsl(14, 51%, 63%);
+  }
+
+  .orange-lighter {
+    background-color: hsl(14, 51%, 83%);
+  }
+
+  .orange-darker {
+    background-color: hsl(14, 51%, 28%);
+  }
+
+  .red {
+    background-color: hsl(354, 42%, 56%);
+  }
+
+  .red-lighter {
+    background-color: hsl(354, 42%, 76%);
+  }
+
+  .red-darker {
+    background-color: hsl(354, 42%, 28%);
+  }
+
+  .purple {
+    background-color: hsl(311, 20%, 63%);
+  }
+
+  .purple-lighter {
+    background-color: hsl(311, 20%, 83%);
+  }
+
+  .purple-darker {
+    background-color: hsl(311, 20%, 28%);
+  }
 </style>

src/Triangle.svelte

@@ -123,6 +123,12 @@
 
   const getColor = i => colors[i % colors.length]
   const getDestColor = _ => circleColors[circles.indexOf(C_PICK)]
+  $: getCircleColor = i => {
+    if (circles[i] == C_HOLE) return `hole`
+    if (circles[i] == C_POLE) return `${circleColors[i]}`
+    if (circles[i] == C_PICK) return `${circleColors[i]}-lighter`
+    if (circles[i] == C_DEST) return `${getDestColor()}-darker`
+  }
 
   const commonBetween = (source, destination) => {
     const common = adjcs.adjacencyList[source].filter(common =>
@@ -283,182 +289,25 @@
   }
 </script>
 
-<style>
+<style lang="postcss">
-  .div0 {
+  .outer {
-    grid-area: 1 / 5 / 2 / 6;
+    width: 290px;
-    margin-left: -80px;
-  }
-  .div1 {
-    grid-area: 2 / 4 / 3 / 5;
-    margin-left: -60px;
-  }
-  .div2 {
-    grid-area: 2 / 6 / 3 / 7;
-    margin-left: -100px;
-  }
-  .div3 {
-    grid-area: 3 / 3 / 4 / 4;
-    margin-left: -40px;
-  }
-  .div4 {
-    grid-area: 3 / 5 / 4 / 6;
-    margin-left: -80px;
-  }
-  .div5 {
-    grid-area: 3 / 7 / 4 / 8;
-    margin-left: -120px;
-  }
-  .div6 {
-    grid-area: 4 / 2 / 5 / 3;
-    margin-left: -20px;
-  }
-  .div7 {
-    grid-area: 4 / 4 / 5 / 5;
-    margin-left: -60px;
-  }
-  .div8 {
-    grid-area: 4 / 6 / 5 / 7;
-    margin-left: -100px;
-  }
-  .div9 {
-    grid-area: 4 / 8 / 5 / 9;
-    margin-left: -140px;
-  }
-  .div10 {
-    grid-area: 5 / 1 / 6 / 2;
-    margin-left: 0px;
-  }
-  .div11 {
-    grid-area: 5 / 3 / 6 / 4;
-    margin-left: -40px;
-  }
-  .div12 {
-    grid-area: 5 / 5 / 6 / 6;
-    margin-left: -80px;
-  }
-  .div13 {
-    grid-area: 5 / 7 / 6 / 8;
-    margin-left: -120px;
-  }
-  .div14 {
-    grid-area: 5 / 9 / 6 / 10;
-    margin-left: -160px;
   }
 
   .triangle {
     width: 450px;
-    height: 250px;
     display: grid;
-    grid-template-columns: repeat(9, 1fr);
-    grid-template-rows: repeat(5, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
-    @apply transform-gpu scale-75 sm:scale-100 md:scale-125 lg:scale-150;
   }
 
   .circle {
     width: 50px;
     height: 50px;
-    @apply rounded-full;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-
-  .pole,
-  .pick,
-  .dest {
-    @apply cursor-pointer;
-  }
-
-  button {
-    @apply cursor-pointer;
   }
 
   .hole {
     background-color: hsl(219, 28%, 88%);
-    @apply shadow-inner;
+    @apply shadow-inner cursor-default;
-  }
-
-  .green {
-    background-color: hsl(92, 28%, 65%);
-  }
-
-  .green-lighter {
-    background-color: hsl(92, 28%, 85%);
-  }
-
-  .green-darker {
-    background-color: hsl(92, 28%, 30%);
-  }
-
-  .cyan {
-    background-color: hsl(179, 25%, 65%);
-  }
-
-  .cyan-lighter {
-    background-color: hsl(179, 25%, 85%);
-  }
-
-  .cyan-darker {
-    background-color: hsl(179, 25%, 30%);
-  }
-
-  .blue {
-    background-color: hsl(210, 34%, 63%);
-  }
-
-  .blue-lighter {
-    background-color: hsl(213, 32%, 82%);
-  }
-
-  .blue-darker {
-    background-color: hsl(213, 32%, 37%);
-  }
-
-  .yellow {
-    background-color: hsl(40, 71%, 73%);
-  }
-
-  .yellow-lighter {
-    background-color: hsl(40, 71%, 88%);
-  }
-
-  .yellow-darker {
-    background-color: hsl(40, 71%, 37%);
-  }
-
-  .orange {
-    background-color: hsl(14, 51%, 63%);
-  }
-
-  .orange-lighter {
-    background-color: hsl(14, 51%, 83%);
-  }
-
-  .orange-darker {
-    background-color: hsl(14, 51%, 28%);
-  }
-
-  .red {
-    background-color: hsl(354, 42%, 56%);
-  }
-
-  .red-lighter {
-    background-color: hsl(354, 42%, 76%);
-  }
-
-  .red-darker {
-    background-color: hsl(354, 42%, 28%);
-  }
-
-  .purple {
-    background-color: hsl(311, 20%, 63%);
-  }
-
-  .purple-lighter {
-    background-color: hsl(311, 20%, 83%);
-  }
-
-  .purple-darker {
-    background-color: hsl(311, 20%, 28%);
   }
 
   span {
@@ -475,48 +324,25 @@
   }
 </style>
 
-<button class="restart" on:click={restart}>RESTART GAME</button>
+<div class="outer overflow-x-hidden">
-<button class="undo" on:click={undo}>UNDO</button>
+  <div>
-<span data-cy="gameover" class:gameover>GAME OVER</span>
+    <button class="restart" on:click={restart}>RESTART GAME</button>
-<span data-cy="victory" class:victory>VICTORY</span>
+    <button class="undo" on:click={undo}>UNDO</button>
-
+    <span data-cy="gameover" class:gameover>GAME OVER</span>
-<div class="triangle">
+    <span data-cy="victory" class:victory>VICTORY</span>
-  {#each circles as _, i}
+  </div>
-    {#if circles[i] == C_HOLE}
+
-      <div
+  <div class="triangle grid-cols-9 grid-rows-5">
-        in:receive={{ key: i }}
+    {#each circles as _, i}
-        out:send={{ key: i }}
+      {#key circles[i]}
-        class="circle div{i} hole"
+        <div
-        on:click={() => change(i)}>
+          class="circle rounded-full cursor-pointer div{i} {getCircleColor(i)}"
-        {i}
+          on:click={() => change(i)}
-      </div>
+          in:receive={{ key: i }}
-    {/if}
+          out:send={{ key: i }}>
-    {#if circles[i] == C_POLE}
+          <!-- {i} -->
-      <div
+        </div>
-        in:receive={{ key: i }}
+      {/key}
-        out:send={{ key: i }}
+    {/each}
-        class="circle div{i} pole {circleColors[i]}"
+  </div>
-        on:click={() => change(i)}>
-        {i}
-      </div>
-    {/if}
-    {#if circles[i] == C_PICK}
-      <div
-        in:receive={{ key: i }}
-        out:send={{ key: i }}
-        class="circle div{i} pick {circleColors[i]}-lighter"
-        on:click={() => change(i)}>
-        {i}
-      </div>
-    {/if}
-    {#if circles[i] == C_DEST}
-      <div
-        in:receive={{ key: i }}
-        out:send={{ key: i }}
-        class="circle div{i} dest {getDestColor()}-darker"
-        on:click={() => change(i)}>
-        {i}
-      </div>
-    {/if}
-  {/each}
 </div>

tailwind.config.js

@@ -6,7 +6,13 @@ module.exports = {
   },
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      scale: {
+        175: "1.75",
+        200: "2",
+        225: "2.25",
+      },
+    },
   },
   variants: {
     extend: {},