diff --git a/src/App.vue b/src/App.vue index 3c14508..cef4097 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,7 +3,8 @@ - + + @@ -13,6 +14,7 @@ import Timer from "./components/Timer.vue"; import Buffer from "./components/Buffer.vue"; import Matrix from "./components/Matrix.vue"; + import Start from "./components/Start.vue"; import { Game } from "./game/Game"; export default defineComponent({ @@ -20,7 +22,8 @@ Level, Timer, Buffer, - Matrix + Matrix, + Start }, setup() { const game = ref(new Game({ @@ -36,10 +39,28 @@ timeoutMilliseconds: 60_000, })); provide("game", game); - const level = ref(1); + const level = ref(0); + const lost = ref(false); + + function nextLevel() { + game.value = new Game({ + matrix: [ + "AA", "BB", "CC", + "DD", "AA", "BB", + "CC", "DD", "DD", + ], + sequences: [ + ["DD", "CC", "AA"], + ], + maxBufferLength: 3, + timeoutMilliseconds: 60_000, + }); + } return { - level + level, + lost, + nextLevel } } }); diff --git a/src/components/Matrix.vue b/src/components/Matrix.vue index f201c89..46c7fb6 100644 --- a/src/components/Matrix.vue +++ b/src/components/Matrix.vue @@ -16,7 +16,7 @@ import {defineComponent, inject, computed, Ref, ref} from "vue"; export default defineComponent({ - setup() { + setup(props, {emit}) { const game = inject("game") as Ref; const size = computed(() => game.value.size); const matrix = computed(() => game.value.matrix); @@ -31,10 +31,12 @@ matchState({ Won: () => { - console.log("Won!"); + reset(); + emit("won"); }, Lost: () => { - console.log("Lost!"); + reset(); + emit("lost"); }, InProgress: state => { matchSelectionState({ @@ -73,6 +75,15 @@ } } + function reset() { + active.value ={row: -1, column: -1}; + error.value = {row: -1, column: -1}; + + if(errorTimeout) { + clearTimeout(errorTimeout); + } + } + return { game, size, diff --git a/src/components/Start.vue b/src/components/Start.vue new file mode 100644 index 0000000..33384a4 --- /dev/null +++ b/src/components/Start.vue @@ -0,0 +1,46 @@ + + + diff --git a/src/sass/main.scss b/src/sass/main.scss index df85d40..7f40c1d 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -136,6 +136,22 @@ main { } } +.overlay { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: $background; + display: flex; + justify-content: center; + align-items: center; + + .countdown { + font-size: 32px; + } +} + h1, h2 { display: flex; align-items: center; @@ -146,3 +162,12 @@ h1, h2 { padding: 5px 0; height: 32px; } + +button { + border-width: 0; + background: $yellow; + color: $background; + padding: 10px 20px; + outline: none; + cursor: pointer; +}