-
- {#each levels as _, i}
-
- {/each}
-
+
+
diff --git a/src/Components/Tailwind.svelte b/src/Components/Tailwind.svelte
index 1c53575..397ff7e 100644
--- a/src/Components/Tailwind.svelte
+++ b/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%);
+ }
diff --git a/src/Triangle.svelte b/src/Triangle.svelte
index 86f92d3..81cd202 100644
--- a/src/Triangle.svelte
+++ b/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 @@
}
-
-
-
-GAME OVER
-VICTORY
-
-
- {#each circles as _, i}
- {#if circles[i] == C_HOLE}
-
change(i)}>
- {i}
-
- {/if}
- {#if circles[i] == C_POLE}
-
change(i)}>
- {i}
-
- {/if}
- {#if circles[i] == C_PICK}
-
change(i)}>
- {i}
-
- {/if}
- {#if circles[i] == C_DEST}
-
change(i)}>
- {i}
-
- {/if}
- {/each}
+
+
+
+
+ GAME OVER
+ VICTORY
+
+
+
+ {#each circles as _, i}
+ {#key circles[i]}
+
change(i)}
+ in:receive={{ key: i }}
+ out:send={{ key: i }}>
+
+
+ {/key}
+ {/each}
+
diff --git a/tailwind.config.js b/tailwind.config.js
index 193ec15..0dab20b 100644
--- a/tailwind.config.js
+++ b/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: {},