From f0f10e4bed0d0a015d2f7d14460d7905dc2349eb Mon Sep 17 00:00:00 2001
From: Evert Prants <evert@lunasqu.ee>
Date: Wed, 19 Oct 2022 20:53:16 +0300
Subject: [PATCH] small fixes, score counter

---
 src/components/GameField.vue    | 11 +++++++----
 src/components/ScoreDisplay.vue |  7 +++++++
 src/style.scss                  | 10 +++++++++-
 vite.config.ts                  |  9 +++++----
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 src/components/ScoreDisplay.vue

diff --git a/src/components/GameField.vue b/src/components/GameField.vue
index 318669a..0b997be 100644
--- a/src/components/GameField.vue
+++ b/src/components/GameField.vue
@@ -12,6 +12,7 @@
     <Bubble v-if="traversing" :bubble="traversing" :radius="radius" />
 
     <Shooter v-if="next" :center="next" :radius="radius" :angle="angle" />
+    <ScoreDisplay :score="score" />
     <GameOver v-if="gameOver" :score="score">{{
       victory ? 'You won!' : 'Game over.'
     }}</GameOver>
@@ -19,13 +20,14 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { BubbleType } from '../lib/types';
 import GameObjects from './GameObjects.vue';
 import Bubble from './Bubble.vue';
 import { computed } from '@vue/reactivity';
 import Shooter from './Shooter.vue';
 import GameOver from './GameOver.vue';
+import ScoreDisplay from './ScoreDisplay.vue';
 
 const width = 612;
 const height = 864;
@@ -95,6 +97,7 @@ function reset() {
   field.value = [];
   offset.value = 0;
   generate();
+  score.value = 0;
   gameOver.value = false;
   victory.value = false;
 }
@@ -312,8 +315,6 @@ function stopDead() {
   field.value.push(item);
   traversing.value = null;
 
-  determineNext();
-
   const chain = checkForPops(item);
   if (chain.length >= 3) {
     score.value += chain.length;
@@ -328,7 +329,9 @@ function stopDead() {
     shotsLeft.value = 4;
   }
 
-  if (!field.value.length) {
+  determineNext();
+
+  if (!field.value.filter((x) => !x.exiting).length) {
     victory.value = true;
     gameOver.value = true;
   }
diff --git a/src/components/ScoreDisplay.vue b/src/components/ScoreDisplay.vue
new file mode 100644
index 0000000..c565e8d
--- /dev/null
+++ b/src/components/ScoreDisplay.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="game-score">Score: {{ score }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ score: number }>();
+</script>
diff --git a/src/style.scss b/src/style.scss
index 900273e..c551a9f 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -39,9 +39,17 @@ body {
 .game {
   background-color: #ddd;
   position: relative;
-  overflow: hidden;
   margin: auto;
 
+  &-field {
+    overflow: hidden;
+  }
+
+  &-score {
+    position: absolute;
+    bottom: -1.5rem;
+  }
+
   &-pointer {
     position: absolute;
     width: 100px;
diff --git a/vite.config.ts b/vite.config.ts
index 315212d..11d1e94 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
-})
+  plugins: [vue()],
+  base: '',
+});