small fixes, score counter

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;
   }

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>

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;

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: '',
+});