ci: bump version to v0.16.1

Added a PWA for knockoutwhist including a special offline screen.

Co-authored-by: LQ63 <lkhermann@web.de>
Reviewed-on: #25
Reviewed-by: Janis <janis-e@gmx.de>
Co-authored-by: lq64 <lq@blackhole.local>
Co-committed-by: lq64 <lq@blackhole.local>

.gitignore

@@ -34,3 +34,4 @@ coverage
 
 # Vitest
 __screenshots__/
+/dev-dist/

CHANGELOG.md

@@ -115,3 +115,17 @@
 
 * **ui:** FRO-34 Lobby ([#21](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/21)) ([bb6355d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/bb6355d9ed6745b4852a52040d880ee1dcc6d797))
 * **ui:** FRO-5 Animation Card Played ([#23](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/issues/23)) ([70a44fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/70a44fd1ea119d43f875e6cfac56fb25747d8913))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.14.0...0.0.0) (2026-01-06)
+
+### Features
+
+* Enhance win effects and animations in OfflineView component ([db5c70d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/db5c70d02a646b83ba6e4043e28fc0dc9f76fb04))
+* Enhance win effects and animations in OfflineView component ([8aa0738](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/8aa07388ac27fbb13270fde58b1594688ec44fe7))
+* Enhance win effects and animations in OfflineView component ([6b3eaf2](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/6b3eaf2c706b2ea479aa7ba508b05adb4bab2db4))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.15.0...0.0.0) (2026-01-06)
+
+### Features
+
+* Update Dockerfile for multi-platform support and add nginx configuration ([e972f1c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/e972f1c4321ec2633e2989dbdaa714774632c495))
+* Update Dockerfile for multi-platform support and add nginx configuration ([37b88a1](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/commit/37b88a108c71e20fc2caee950acd23cf2bb81190))
+## [0.0.0](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend/compare/0.16.0...0.0.0) (2026-01-06)

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:lts-alpine3.23 AS builder
+FROM --platform=$BUILDPLATFORM node:lts-alpine3.23 AS builder
 
 WORKDIR /app
 
@@ -9,13 +9,15 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-FROM nginx:stable-alpine AS production
+FROM --platform=$TARGETPLATFORM nginx:stable-alpine AS production
 
 RUN apk add --no-cache gettext
 
 RUN rm -rf /usr/share/nginx/html/*
 COPY --from=builder /app/dist /usr/share/nginx/html
 
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
 COPY public/env.template.js /usr/share/nginx/html/env.template.js
 COPY docker-entrypoint.sh /docker-entrypoint.sh
 RUN chmod +x /docker-entrypoint.sh

docker-entrypoint.sh

@@ -7,8 +7,9 @@ TARGET_PATH="/usr/share/nginx/html/env.js"
 
 if [ -f "$TEMPLATE_PATH" ]; then
   echo "Rendering runtime config from $TEMPLATE_PATH"
-  # export all variables for envsubst to access
-  # only substitute variables present in the template
+  echo "Using environment variables:"
+  printenv
+  echo "----"
   envsubst < "$TEMPLATE_PATH" > "$TARGET_PATH"
 else
   echo "No runtime template found at $TEMPLATE_PATH, skipping"

nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

public/env.js

@@ -1,5 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
   API_URL: "http://localhost:9000",
-  WEBSOCKET_API_URL: "ws://localhost:9000/websocket"
+  WEBSOCKET_URL: "ws://localhost:9000/websocket"
 };
 

public/env.template.js

@@ -1,5 +1,5 @@
 window.__RUNTIME_CONFIG__ = {
   API_URL: "${API_URL}",
-  WEBSOCKET_API_URL: "${WEBSOCKET_API_URL}"
+  WEBSOCKET_URL: "${WEBSOCKET_URL}"
 };
 

src/components/Ingame.vue

@@ -1,15 +1,30 @@
 <script setup lang="ts">
 
 import {useIngame} from "@/composables/useIngame.ts";
-import type {GameInfo} from "@/types/GameTypes.ts";
+import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
 import HandC from "@/components/ingame/HandC.vue";
 import GameInfoC from "@/components/ingame/GameInfoC.vue";
 import PlayedCardsC from "@/components/ingame/PlayedCardsC.vue";
 import ScoreboardC from "@/components/ingame/ScoreboardC.vue";
 import TurnC from "@/components/ingame/TurnC.vue";
+import TrumpC from "@/components/ingame/TrumpC.vue";
+import {storeToRefs} from "pinia";
+import {ref, toRefs, watch} from "vue";
 
 const ig = useIngame()
+const { state } = toRefs(ig)
 
+const cachedGameInfo = ref<GameInfo | null>(null)
+
+watch(
+  () => ig.data,
+  (newData) => {
+    if (state.value === 'InGame' && newData) {
+      cachedGameInfo.value = newData as GameInfo
+    }
+  },
+  { deep: true, immediate: true }
+)
 </script>
 
 <template>
@@ -17,34 +32,46 @@ const ig = useIngame()
     <q-page-container>
       <q-page class="game-field-background vh-100 ingame-side-shadow">
         <div class="py-5 container-xxl">
-
+          <transition
+            appear
+            enter-active-class="animate__animated animate__fadeInDown"
+            leave-active-class="animate__animated animate__fadeOutDown"
+          >
+            <div
+              v-if="state === 'SelectTrump'"
+              class="full-overlay-blur"
+              style="z-index: 2000;"
+            >
+              <TrumpC />
+            </div>
+          </transition>
           <div class="fit row wrap justify-center items-center content-start">
             <div class="mt-5 ml-4 self-start col-2">
-              <TurnC v-if="(ig.data as GameInfo)?.playerQueue" :queue="(ig.data as GameInfo).playerQueue!"/>
+              <TurnC v-if="(cachedGameInfo as GameInfo)?.playerQueue" :queue="(cachedGameInfo as GameInfo).playerQueue!"/>
             </div>
 
             <div class="text-center col-6">
-              <ScoreboardC v-if="(ig.data as GameInfo)?.currentRound" :current-round="(ig.data as GameInfo).currentRound!" />
+              <ScoreboardC v-if="(cachedGameInfo as GameInfo)?.currentRound" :current-round="(cachedGameInfo as GameInfo).currentRound!" />
             </div>
 
 
             <div class="mt-5 ml-4 self-end col-2" style="margin-left: 6em">
-              <GameInfoC v-if="(ig.data as GameInfo)?.currentRound"
-                         :first-card="(ig.data as GameInfo).currentTrick?.firstCard ?? null"
-                         :trumpsuit="(ig.data as GameInfo).currentRound!.trumpSuit"/>
+              <GameInfoC v-if="(cachedGameInfo as GameInfo)?.currentRound"
+                         :first-card="(cachedGameInfo as GameInfo).currentTrick?.firstCard ?? null"
+                         :trumpsuit="(cachedGameInfo as GameInfo).currentRound!.trumpSuit"/>
             </div>
           </div>
 
           <div class="fit row wrap justify-center items-center content-start">
             <div class="mt-4 ml-4 col-3 justify-content-center">
               <div class="d-flex justify-content-center g-3 mb-5">
-                <PlayedCardsC v-if="(ig.data as GameInfo)?.currentTrick" :trick="(ig.data as GameInfo).currentTrick!" />
+                <PlayedCardsC v-if="(cachedGameInfo as GameInfo)?.currentTrick" :trick="(cachedGameInfo as GameInfo).currentTrick!" />
               </div>
             </div>
           </div>
           <div class="q-gutter-sm mt-4 bottom-div justify-content-center row" style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
             <div class="flex justify-center col-12">
-              <HandC v-if="(ig.data as GameInfo)?.hand && (ig.data as GameInfo)?.self"/>
+              <HandC v-if="(cachedGameInfo as GameInfo)?.hand && (cachedGameInfo as GameInfo)?.self"/>
             </div>
           </div>
 
@@ -77,4 +104,17 @@ const ig = useIngame()
   text-align: center;
   padding: 10px;
 }
+.full-overlay-blur {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  backdrop-filter: blur(5px);
+  background-color: rgba(0, 0, 0, 0.2);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>

src/components/ingame/TrumpC.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts" >
+import {useWebSocket} from "@/composables/useWebsocket.ts";
+import {useIngame} from "@/composables/useIngame.ts";
+import type {GameInfo, TrumpInfo} from "@/types/GameTypes.ts";
+import {useQuasar} from "quasar";
+import { ref } from 'vue';
+
+const wb = useWebSocket()
+const wi = useIngame()
+const trumpInf = wi.data as TrumpInfo
+const trumpSuits = [
+  "/images/cards/AS.png",
+  "/images/cards/AH.png",
+  "/images/cards/AD.png",
+  "/images/cards/AC.png"
+]
+const $q = useQuasar();
+function getCardImagePath(cardPath: string) {
+  if (!cardPath) return ''
+  if (cardPath.includes('://') || cardPath.startsWith('/')) return cardPath
+  return `/${cardPath}`
+}
+function selectTrump(trumpSuitIndex: number) {
+  wb.sendAndWait("PickTrumpsuit", { suitIndex: trumpSuitIndex }).then(
+    $q.notify({
+      message: "You've successfully picked your trumpsuit",
+      color: "positive",
+      position: "top"
+    })
+
+  ).catch((error) => {
+      $q.notify({
+        message: error.message,
+        color: "negative",
+        position: "top"
+      })
+    })
+}
+</script>
+<template>
+    <q-card v-if="trumpInf.chooser?.name === trumpInf.self?.name" class="player-profile-card" flat bordered>
+      <q-card-section class="bg-white text-dark text-center q-py-lg">
+        <div class="text-h3 text-weight-bolder">
+          {{ trumpInf.self?.name || "Loading Player..."}}
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-light-green-7 text-dark text-center q-py-lg">
+        <div class="text-h4 text-weight-bolder">
+          <q-icon name="emoji_events" class="q-mr-sm" />
+          You won the last round!
+          <q-icon name="emoji_events" class="q-mr-sm" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-py-md text-center bg-dark">
+        <div class="text-h6 q-mb-sm">Select a trumpsuit</div>
+        <div class="row justify-center q-gutter-sm">
+          <q-card v-for="(path, index) in trumpSuits" :key="index" class="q-pa-xs cursor-pointer trump-card-choice">
+            <q-img
+              :src="getCardImagePath(path)"
+              @click="selectTrump(index)"
+              :alt="path"
+              class="card"
+            />
+          </q-card>
+        </div>
+      </q-card-section>
+
+      <q-separator color="grey-7" style="opacity: 0.9;" />
+
+      <q-card-section class="q-pa-md text-center bg-dark">
+        <div class="text-h6 q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
+        <div class="row wrap justify-center q-gutter-sm">
+
+          <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
+            <q-img
+              :src="getCardImagePath(card.path)"
+              :alt="card.identifier"
+              class="card"
+            />
+          </div>
+
+        </div>
+      </q-card-section>
+    </q-card>
+  <q-card
+    v-else
+    class="player-profile-card text-center"
+    flat
+    bordered
+    style="min-height: 200px; display: flex; flex-direction: column; justify-content: center;"
+  >
+    <q-card-section class="q-pa-lg">
+      <q-spinner-hourglass color="black" size="3em" class="q-mb-md" />
+      <div class="text-h5 text-grey-8">
+        Waiting for {{ trumpInf.chooser?.name || 'the other player' }} to select the trump suit...
+      </div>
+    </q-card-section>
+
+    <q-separator />
+    <q-card-section class="q-pa-md text-center bg-dark">
+      <div class="text-h6 text-white q-mb-sm">Your Hand ({{ trumpInf.selfHand?.cards.length || 0 }} Cards)</div>
+      <div class="row wrap justify-center q-gutter-sm">
+
+        <div v-for="card in trumpInf.selfHand?.cards || []" :key="card.idx!" >
+          <q-img
+            :src="getCardImagePath(card.path)"
+            :alt="card.identifier"
+            class="card"
+          />
+        </div>
+
+      </div>
+    </q-card-section>
+
+  </q-card>
+</template>
+
+<style scoped>
+.card {
+  width:120px;
+  border-radius:6px
+}
+.player-profile-card {
+  max-width: 1000px;
+}
+.trump-card-choice {
+  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
+}
+.trump-card-choice:hover {
+  transform: translateY(-8px);
+}
+</style>

src/components/ingame/TurnC.vue

@@ -5,8 +5,8 @@ import {useIngame} from "@/composables/useIngame.ts";
 import type {GameInfo} from "@/types/GameTypes.ts";
 
 const ig = useIngame()
-const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue.currentPlayer)
-const queue = computed(() => { return (<GameInfo>ig.data).playerQueue.queue ?? []})
+const currentPlayer = computed(() => (<GameInfo>ig.data).playerQueue?.currentPlayer)
+const queue = computed(() => { return (<GameInfo>ig.data).playerQueue?.queue ?? []})
 </script>
 
 <template>

src/services/ws.ts

@@ -172,6 +172,9 @@ function setupSocketHandlers(socket: WebSocket) {
 }
 
 export function connectWebSocket(url?: string): Promise<void> {
+  if (!url) {
+    url = window.__RUNTIME_CONFIG__?.WEBSOCKET_URL
+  }
   if (!url) {
     const loc = window.location;
     const protocol = loc.protocol === "https:" ? "wss:" : "ws:";

src/views/Game.vue

@@ -33,7 +33,7 @@ ui.requestState().then(() => {
 
 <template>
   <div class="lobby-background">
-    <Ingame v-if="state === 'InGame'"/>
+    <Ingame v-if="state === 'InGame' || state === 'SelectTrump'"/>
     <lobby-component v-if="state === 'Lobby'"/>
   </div>
 </template>

src/views/OfflineView.vue

@@ -1,9 +1,212 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 
+type Symbol = '🍎' | '💎' | '🔔' | '🍒' | '🍋' | '⭐' | '❓';
+const symbols: Symbol[] = ['🍎', '💎', '🔔', '🍒', '🍋', '⭐']
+
+const reelStates = ref([
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false },
+  { value: '❓' as Symbol, isSpinning: false }
+])
+
+const globalSpinning = ref(false)
+const hasSpun = ref(false)
+const glowThird = ref(false)
+const winBlink = ref(false)
+const winFire = ref(false)
+let winEffectsTimer: number | undefined
+
+const isWinner = computed(() => {
+  const [r1, r2, r3] = reelStates.value;
+  return hasSpun.value && !globalSpinning.value &&
+    r1?.value !== '❓' && r1?.value === r2?.value && r2?.value === r3?.value
+})
+
+const getRandomSymbol = (): Symbol => symbols[Math.floor(Math.random() * symbols.length)]!
+
+const spin = (): void => {
+  if (globalSpinning.value) return;
+
+  globalSpinning.value = true;
+  hasSpun.value = false;
+  // Reset possible win effects
+  winBlink.value = false;
+  winFire.value = false;
+  if (winEffectsTimer) {
+    clearTimeout(winEffectsTimer);
+    winEffectsTimer = undefined;
+  }
+  reelStates.value.forEach((reel) => {
+    reel.isSpinning = true;
+    reel.value = getRandomSymbol();
+  });
+
+  const base0 = 1500;
+  const gap = 800;
+  const base1 = base0 + gap;
+  const base2 = base1 + gap;
+  setTimeout(() => {
+    reelStates.value[0]!!.isSpinning = false;
+  }, base0);
+  setTimeout(() => {
+    reelStates.value[1]!!.isSpinning = false;
+  }, base1);
+  setTimeout(() => {
+    const firstTwoMatch = reelStates.value[0]!!.value === reelStates!!.value[1]!!.value &&
+      reelStates.value[0]!!.value !== '❓';
+    const extraDelay = firstTwoMatch ? 1000 : 0;
+
+    glowThird.value = firstTwoMatch;
+
+    setTimeout(() => {
+      reelStates.value[2]!!.isSpinning = false;
+      glowThird.value = false;
+      globalSpinning.value = false;
+      hasSpun.value = true;
+
+      const allThreeMatch =
+        reelStates.value[0]!!.value !== '❓' &&
+        reelStates.value[0]!!.value === reelStates.value[1]!!.value &&
+        reelStates.value[1]!!.value === reelStates.value[2]!!.value;
+      if (allThreeMatch) {
+        winFire.value = true;
+        winBlink.value = true;
+        winEffectsTimer = window.setTimeout(() => {
+          winFire.value = false;
+          winBlink.value = false;
+          winEffectsTimer = undefined;
+        }, 3000);
+      }
+    }, base2 - base1 + extraDelay);
+  }, base1);
+};
 </script>
-<template>
-<h1> DU BIST OFFLINE!!!</h1>
-</template>
-<style scoped>
 
+<template>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex flex-center">
+        <transition
+          appear
+          tag="div"
+          enter-active-class="animate__animated animate__fadeInDown"
+          leave-active-class="animate__animated animate__fadeOutUp"
+        >
+          <q-card class="slot-machine-card q-pa-lg text-center shadow-10">
+            <div class="text-h4 q-mb-md text-black text-weight-bolder " style="font-family: serif;">Offline Drehmaschine</div>
+
+            <div class="row justify-center q-gutter-md q-mb-xl">
+              <div
+                v-for="(reel, index) in reelStates"
+                :key="index"
+                :class="['reel-container', 'shadow-2', (winFire || (glowThird && index === 2)) ? 'glow-fire' : '']"
+              >
+
+                <div v-if="reel.isSpinning" class="reel-strip">
+                  <div v-for="n in 10" :key="n" class="text-h2">{{ symbols[n % symbols.length] }}</div>
+                </div>
+
+                <div v-else :class="['text-h2', 'static-symbol', winBlink ? 'blink-win' : '']">{{ reel.value }}</div>
+
+              </div>
+            </div>
+
+            <div class="result-box q-mb-md" style="height: 40px;">
+              <div v-if="isWinner" class="text-h5 text-positive text-weight-bold animate-bounce">YOU WIN! (Nothing)</div>
+              <div v-else-if="hasSpun && !globalSpinning" class="text-h6 text-grey-7">Try again!</div>
+              <div v-else class="text-h6 text-grey-7">Try your luck until you are connected!</div>
+            </div>
+
+            <q-btn
+              size="lg" color="light-green"
+              :label="globalSpinning ? 'SPINNING...' : 'SPIN'"
+              :loading="globalSpinning"
+              @click="spin" class="full-width" rounded
+            />
+          </q-card>
+        </transition>
+      </q-page>
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style scoped>
+.slot-machine-card { width: 100%; max-width: 400px; border: 4px solid #2c3e50; border-radius: 20px; }
+
+.reel-container {
+  background: white;
+  width: 80px;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  border-radius: 8px;
+  border: 2px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reel-strip {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  animation: move-strip 0.3s linear infinite;
+  filter: blur(2px);
+}
+
+@keyframes move-strip {
+  0% { transform: translateY(-50%); }
+  100% { transform: translateY(0); }
+}
+
+.static-symbol {
+  animation: land 0.2s ease-out;
+}
+
+@keyframes land {
+  0% { transform: translateY(-40px); opacity: 0; }
+  70% { transform: translateY(10px); }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+.animate-bounce { animation: bounce 0.5s infinite alternate; }
+@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.1); } }
+
+.glow-fire {
+  border-color: #ff9800;
+  box-shadow:
+    0 0 10px 2px rgba(255, 152, 0, 0.8),
+    0 0 18px 6px rgba(255, 87, 34, 0.5),
+    inset 0 0 8px 2px rgba(255, 193, 7, 0.4);
+  animation: fireGlow 900ms ease-in-out infinite alternate;
+}
+
+@keyframes fireGlow {
+  0% {
+    box-shadow:
+      0 0 6px 1px rgba(255, 152, 0, 0.6),
+      0 0 12px 3px rgba(255, 87, 34, 0.35),
+      inset 0 0 5px 1px rgba(255, 193, 7, 0.3);
+    transform: translateY(0) scale(1);
+  }
+  100% {
+    box-shadow:
+      0 0 14px 3px rgba(255, 152, 0, 1),
+      0 0 24px 8px rgba(255, 87, 34, 0.6),
+      inset 0 0 10px 3px rgba(255, 193, 7, 0.5);
+    transform: translateY(-1px) scale(1.02);
+  }
+}
+
+.blink-win {
+  animation: blinkWin 300ms steps(1, end) infinite;
+}
+
+@keyframes blinkWin {
+  0% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
+  50% { opacity: 0.2; filter: drop-shadow(0 0 6px rgba(255,255,255,0.6)); }
+  100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
+}
 </style>

versions.env

@@ -1,3 +1,3 @@
 MAJOR=0
-MINOR=14
-PATCH=0
+MINOR=16
+PATCH=1

vite.config.ts

@@ -4,7 +4,6 @@ import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import vueDevTools from 'vite-plugin-vue-devtools'
 import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
-
 import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vite.dev/config/
@@ -18,18 +17,11 @@ export default defineConfig({
     quasar(),
     VitePWA({
       registerType: 'autoUpdate',
-      injectRegister: 'auto',
-
       workbox: {
         globDirectory: 'dist/',
         globPatterns: [
           '**/*.{js,css,html,ico,png,svg,webmanifest}',
         ],
-        globIgnores: [
-          '**/node_modules/**/*',
-          'sw.js',
-        ],
-        swDest: 'dist/sw.js',
       },
 
       manifest: {