Update to parcel 2

.gitignore

@@ -2,3 +2,4 @@
 .vscode
 dist
 node_modules
+.parcel-cache

Dockerfile

@@ -3,9 +3,16 @@ WORKDIR /app
 COPY . .
 WORKDIR /app/packages/werewolf-frontend
 RUN yarn
-RUN yarn global add parcel-bundler
-RUN rm -fr dist .env .env.production
+RUN rm -fr dist .env .env.production .parcel-cache
 ENV NODE_ENV=production
+
+ARG backendBaseUrl=''
+ARG frontendBaseUrl=''
+ARG backendBaseSocketUrl='ws://localhost:5000'
+
+ENV BACKEND_BASE_URL=${backendBaseUrl}
+ENV FRONTEND_BASE_URL=${frontendBaseUrl}
+ENV BACKEND_BASE_SOCKET_URL=${backendBaseSocketUrl}
 RUN yarn build
 WORKDIR /app/packages/werewolf-backend
 RUN rm -fr dist

packages/werewolf-backend/src/game.ts

@@ -266,10 +266,12 @@ export interface ActionGroup {
 
 export function makeActionGroups(assignedCards: CardAssignments, center: Center): ActionGroup[] {
     const cardsSelected = Object.values(assignedCards).concat(center),
+        players = Object.keys(assignedCards),
         groups: ActionGroup[] = [];
 
     if (cardsSelected.includes('doppelganger')) {
-
+        const doppelganger = players.find(p => assignedCards[p] == 'doppelganger')!;
+        groups.push({ allowed: [doppelganger], required: [doppelganger] });
     }
 
     return groups;

packages/werewolf-frontend/babel.config.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/plugin-proposal-class-properties"]
+  ]
+}

packages/werewolf-frontend/package.json

@@ -8,8 +8,13 @@
     },
     "devDependencies": {
         "@babel/core": "^7.8.7",
+        "@babel/plugin-proposal-class-properties": "^7.18.6",
+        "@babel/plugin-proposal-decorators": "^7.21.0",
         "@babel/plugin-transform-runtime": "^7.8.3",
         "cssnano": "^5.0.0-rc.2",
+        "parcel": "2",
+        "postcss": "8",
+        "process": "^0.11.10",
         "sass": "^1.26.3",
         "typescript": "^3.8.3"
     },

packages/werewolf-frontend/src/SettingsOverlay.tsx

@@ -3,11 +3,12 @@ import styled from 'styled-components';
 import { MdVolumeOff, MdVolumeUp, MdOpenInNew, MdBrightness3, MdBrightness7 } from 'react-icons/md';
 
 import { ExternalLink, IconButton } from './ui';
-import opusFile from './music/fantasy-ukulele.opus';
-import cafFile from './music/fantasy-ukulele.caf';
-import m4aFile from './music/fantasy-ukulele.m4a';
 import { useColorMode, ColorMode, ColorModePreference } from './color-mode';
 
+const opusFile = new URL('music/fantasy-ukulele.opus', import.meta.url);
+const cafFile = new URL('music/fantasy-ukulele.caf', import.meta.url);
+const m4aFile = new URL('music/fantasy-ukulele.m4a', import.meta.url);
+
 const FloatingContainerLeft = styled.div`
     position: fixed;
     left: 0.5rem;

packages/werewolf-frontend/src/index.html

@@ -30,6 +30,6 @@
             }
         </script>
         <main id="app"></main>
-        <script src="index.tsx"></script>
+        <script src="index.tsx" type="module"></script>
     </body>
 </html>