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 @@
+
+
+
+
{{countdown}}
+
+
+
+
+
+
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;
+}