diff --git a/src/App.vue b/src/App.vue
index cef4097..5dfd63d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,8 @@
-
+
+
@@ -15,6 +16,7 @@
import Buffer from "./components/Buffer.vue";
import Matrix from "./components/Matrix.vue";
import Start from "./components/Start.vue";
+ import End from "./components/End.vue";
import { Game } from "./game/Game";
export default defineComponent({
@@ -23,7 +25,8 @@
Timer,
Buffer,
Matrix,
- Start
+ Start,
+ End
},
setup() {
const game = ref(new Game({
@@ -39,7 +42,7 @@
timeoutMilliseconds: 60_000,
}));
provide("game", game);
- const level = ref(0);
+ const level = ref(1);
const lost = ref(false);
function nextLevel() {
@@ -57,10 +60,17 @@
});
}
+ function restart() {
+ level.value = 1;
+ lost.value = false;
+ nextLevel();
+ }
+
return {
level,
lost,
- nextLevel
+ nextLevel,
+ restart
}
}
});
diff --git a/src/components/End.vue b/src/components/End.vue
new file mode 100644
index 0000000..0979d0e
--- /dev/null
+++ b/src/components/End.vue
@@ -0,0 +1,19 @@
+
+
+
+
You lost!
+
Level: {{level}}
+
+
+
+
+
+
diff --git a/src/components/Start.vue b/src/components/Start.vue
index 33384a4..f03f1c5 100644
--- a/src/components/Start.vue
+++ b/src/components/Start.vue
@@ -1,7 +1,8 @@
-
{{countdown}}
+
Level: {{level}}
+
{{countdown}}
@@ -12,13 +13,14 @@
export default defineComponent({
props: {
- level: {type: Number, required: true}
+ level: {type: Number, required: true},
+ lost: {type: Boolean, required: true}
},
setup(props, {emit}) {
const countdown = ref(3);
const interval = ref(0);
- watch(() => props.level, () => {
+ watch([() => props.level, () => props.lost], () => {
countdown.value = 3;
interval.value = 0;
});
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 7f40c1d..11ed1ea 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -146,6 +146,7 @@ main {
display: flex;
justify-content: center;
align-items: center;
+ text-align: center;
.countdown {
font-size: 32px;