|
|
@ -54,6 +54,7 @@ |
|
|
|
import Button from "./Button.svelte" |
|
|
|
import Button from "./Button.svelte" |
|
|
|
import Tailwind from "./Components/Tailwind.svelte" |
|
|
|
import Tailwind from "./Components/Tailwind.svelte" |
|
|
|
import LevelButton from "./LevelButton.svelte" |
|
|
|
import LevelButton from "./LevelButton.svelte" |
|
|
|
|
|
|
|
import Modal from "./Modal.svelte" |
|
|
|
import Triangle, { |
|
|
|
import Triangle, { |
|
|
|
C_POLE, |
|
|
|
C_POLE, |
|
|
|
C_HOLE, |
|
|
|
C_HOLE, |
|
|
@ -72,8 +73,8 @@ |
|
|
|
let circles = [] |
|
|
|
let circles = [] |
|
|
|
let circleColors = [] |
|
|
|
let circleColors = [] |
|
|
|
let moveStack = [] |
|
|
|
let moveStack = [] |
|
|
|
let gameover |
|
|
|
let gameover = false |
|
|
|
let victory |
|
|
|
let victory = false |
|
|
|
let maxSteps |
|
|
|
let maxSteps |
|
|
|
|
|
|
|
|
|
|
|
$: if (variant || side) { |
|
|
|
$: if (variant || side) { |
|
|
@ -302,19 +303,10 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<style lang="postcss"> |
|
|
|
<style> |
|
|
|
.outer { |
|
|
|
.outer { |
|
|
|
width: 290px; |
|
|
|
width: 290px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
|
|
|
visibility: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.gameover, |
|
|
|
|
|
|
|
.victory { |
|
|
|
|
|
|
|
visibility: visible; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
|
|
|
|
|
|
|
<Tailwind /> |
|
|
|
<Tailwind /> |
|
|
@ -331,9 +323,9 @@ |
|
|
|
{/each} |
|
|
|
{/each} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute flex border border-blue"> |
|
|
|
<div class="relative text-blue-darker"> |
|
|
|
<span data-cy="gameover" class:gameover>GAME OVER</span> |
|
|
|
<Modal position="left" text="victory" invisible={!victory} /> |
|
|
|
<span data-cy="victory" class:victory>VICTORY</span> |
|
|
|
<Modal position="right" text="gameover" invisible={!gameover} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<Triangle |
|
|
|
<Triangle |
|
|
|