Merge pull request #140 from joshzcold/feat/next-upgrade-v12

Upgrade Next from 11 to 12
joshzcold · Jan 5, 2025 · 1cfab0e · 1cfab0e
2 parents 6c83cea + 8df4d29
commit 1cfab0e
Show file tree

Hide file tree

Showing 26 changed files with 512 additions and 1,674 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,7 @@
 FROM node:18-alpine AS base
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+
 FROM base AS builder
 
 COPY package-lock.json package.json /src/

diff --git a/Dockerfile.allinone b/Dockerfile.allinone
@@ -1,4 +1,6 @@
 FROM node:18-alpine AS base
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
 
 FROM base AS front-end-builder
 WORKDIR /src

diff --git a/components/Admin/settings.js b/components/Admin/settings.js
@@ -72,17 +72,17 @@ export default function AdminSettings(props) {
 
     const BuzzerSoundSettings = (props) => {
         return (
-            <div class="flex flex-col space-y-4">
-                <div class="flex flex-col">
-                    <div class="flex flex-row space-x-5 items-center">
-                        <div class="flex flex-row items-center space-x-2">
+            <div className="flex flex-col space-y-4">
+                <div className="flex flex-col">
+                    <div className="flex flex-row space-x-5 items-center">
+                        <div className="flex flex-row items-center space-x-2">
                             <InfoTooltip message={t("Allow players to hear sound on their devices when they press their buzzer")} />
-                            <p class="text-xl normal-case text-foreground">
+                            <p className="text-xl normal-case text-foreground">
                                 {t("Player Buzzer Sounds")}
                             </p>
                         </div>
                         <input
-                            class="w-4 h-4 rounded placeholder-secondary-900"
+                            className="w-4 h-4 rounded placeholder-secondary-900"
                             checked={game.settings.enable_player_buzzer_sound}
                             onChange={(e) => {
                                 game.settings.enable_player_buzzer_sound = e.target.checked;
@@ -97,16 +97,16 @@ export default function AdminSettings(props) {
                     </div>
                 </div>
 
-                <div class={`flex flex-col ${!game.settings.enable_player_buzzer_sound ? 'opacity-50' : ''}`}>
-                    <div class="flex flex-row space-x-5 items-center">
-                        <div class="flex flex-row items-center space-x-2">
+                <div className={`flex flex-col ${!game.settings.enable_player_buzzer_sound ? 'opacity-50' : ''}`}>
+                    <div className="flex flex-row space-x-5 items-center">
+                        <div className="flex flex-row items-center space-x-2">
                             <InfoTooltip message={t("Only play sound for the first player to buzz in")} />
-                            <p class="text-xl normal-case text-foreground">
+                            <p className="text-xl normal-case text-foreground">
                                 {t("First Press Only")}
                             </p>
                         </div>
                         <input
-                            class="w-4 h-4 rounded placeholder-secondary-900"
+                            className="w-4 h-4 rounded placeholder-secondary-900"
                             checked={game.settings.first_buzzer_sound_only}
                             disabled={!game.settings.enable_player_buzzer_sound}
                             onChange={(e) => {

diff --git a/components/Title/TitlePage.jsx b/components/Title/TitlePage.jsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import Team from './Team';
 import RoomCode from './RoomCode';
+import Image from 'next/image';
 
 export default function TitlePage(props) {
   const { i18n, t } = useTranslation();
@@ -62,11 +63,14 @@ export default function TitlePage(props) {
       >
         <div className="flex justify-center w-full ">
           {props.game.settings.logo_url ? (
-            <img
-              className="w-full h-[300px] min-h-[200px] object-contain"
-              src={`${props.game.settings.logo_url}`}
-              size={titleSize}
+            <Image
+              width={300}
+              height={300}
+              objectFit={'contain'}
+              src={`${props.game.settings.logo_url}?v=${Date.now()}`}
               alt="Game logo"
+              priority // Load image immediately
+              unoptimized // Skip caching
             />
           ) : (
             <TitleLogo insert={props.game.title_text} size={titleSize} />

diff --git a/components/admin.js b/components/admin.js
@@ -10,6 +10,7 @@ import { Buffer } from "buffer";
 import { handleCsvFile, handleJsonFile } from "utils/files";
 import { ERROR_CODES } from "i18n/errorCodes";
 import BuzzerTable from "./BuzzerTable";
+import Image from "next/image";
 
 function debounce(callback, wait = 400) {
   let timeout;
@@ -177,7 +178,7 @@ function TitleLogoUpload(props) {
     return (
       <div className="flex flex-row space-x-2 items-center">
         <p className="capitalize text-foreground">logo:</p>
-        <img width={"150px"} src={URL.createObjectURL(props.imageUploaded)} />
+        <Image width={150} height={150} objectFit="contain" src={URL.createObjectURL(props.imageUploaded)} />
         <button
           className="border-2 bg-secondary-500 hover:bg-secondary-700 p-1 rounded-lg"
           id="deleteLogoButton"
@@ -283,7 +284,7 @@ function TitleLogoUpload(props) {
                     mimetype: mimetype,
                   });
                   props.setImageUploaded(file);
-                  props.game.settings.logo_url = `/api/rooms/${props.room}/logo?${new Date().getTime()}`;
+                  props.game.settings.logo_url = `/api/rooms/${props.room}/logo`;
                   props.setGame((prv) => ({ ...prv }));
                   props.send({ action: "data", data: props.game });
                 };
@@ -871,7 +872,7 @@ export default function Admin(props) {
                       send({ action: "show_mistake" });
                     }}
                   >
-                    <img className={`w-3/12`} src="x.svg" />
+                    <Image width={150} height={150} objectFit={'contain'} src="/x.svg" />
                   </button>
                   <button
                     id="resetMistakesButton"

diff --git a/components/buzzer.js b/components/buzzer.js
@@ -10,6 +10,7 @@ import TeamName from './team-name.js';
 import Final from './final';
 import { ERROR_CODES } from 'i18n/errorCodes';
 import { EyeOff } from 'lucide-react';
+import Image from 'next/image';
 
 let timerInterval = null;
 
@@ -132,13 +133,19 @@ export default function Buzzer(props) {
   if (game.teams != null) {
     return (
       <>
-        <img
-          id="xImg"
-          className={`lg:w-1/2 sm:w-10/12 md:w-3/4 w-11/12 top-2/4 pointer-events-none ${
-            showMistake ? 'opacity-90' : 'opacity-0'
-          } transition-opacity ease-in-out duration-300 absolute`}
-          src="x.svg"
-        />
+        <div className="absolute pointer-events-none">
+          <Image
+            id="xImg"
+            width={1000}
+            height={1000}
+            className={`fixed inset-0 p-24 z-50 pointer-events-none ${
+              showMistake ? 'opacity-90' : 'opacity-0'
+            } transition-opacity ease-in-out duration-300`}
+            src="/x.svg"
+            alt="Mistake indicator"
+            aria-hidden={!showMistake}
+          />
+        </div>
         <button
           id="quitButton"
           className="z-50 shadow-md rounded-lg p-2 bg-secondary-900 hover:bg-secondary-300 text-1xl font-bold uppercase w-24 self-end"
@@ -155,14 +162,20 @@ export default function Buzzer(props) {
                 <Round game={game} />
 
                 {/* Buzzer Section TODO replace with function*/}
-                <div className="" style={{ width: '100%', textAlign: 'center' }}>
+                <div className="w-full text-center">
                   {buzzed ? (
-                    <img id="buzzerButtonPressed" style={{ width: '50%', display: 'inline-block' }} src="buzzed.svg" />
+                    <Image 
+                    id="buzzerButtonPressed" 
+                    width={500}
+                    height={200}
+                    alt="Buzzer Button"
+                    src="/buzzed.svg" />
                   ) : (
-                    <img
+                    <Image 
                       id="buzzerButton"
-                      className="cursor-pointer"
-                      style={{ width: '50%', display: 'inline-block' }}
+                      width={500}
+                      height={200}
+                      className="cursor-pointer w-1/2 inline-block"
                       onClick={() => {
                         send({ action: 'buzz', id: props.id });
                           // Play sound based on settings
@@ -172,7 +185,8 @@ export default function Buzzer(props) {
                             }
                           }
                       }}
-                      src="buzz.svg"
+                      src="/buzz.svg"
+                      alt="Buzzer Button Pressed"
                     />
                   )}
                   <p className="text-secondary-900 p-2 italic">{t('buzzer is reset between rounds')}</p>
@@ -225,11 +239,15 @@ export default function Buzzer(props) {
                 ) : (
                   <div>
                     {props.game.settings.logo_url ? (
-                      <div className="mx-auto max-w-md w-full">
-                        <img
-                          className="w-full h-[300px] min-h-[200px] object-contain"
-                          src={`${props.game.settings.logo_url}`}
+                      <div className="flex justify-center">
+                        <Image
+                          width={300}
+                          height={300}
+                          objectFit={'contain'}
+                          src={`${props.game.settings.logo_url}?v=${Date.now()}`}
                           alt="Game logo"
+                          priority // Load image immediately
+                          unoptimized // Skip caching
                         />
                       </div>
                     ) : (
@@ -247,11 +265,15 @@ export default function Buzzer(props) {
           <>
             {props.game.settings.logo_url ? (
               <div className="mx-auto max-w-md w-full">
-                <img
+                <Image
                   id="titleLogoUserUploaded"
-                  className="w-full h-[300px] min-h-[200px] object-contain"
-                  src={`${props.game.settings.logo_url}`}
+                  width={300}
+                  height={300}
+                  objectFit={'contain'}
+                  src={`${props.game.settings.logo_url}?v=${Date.now()}`}
                   alt="Game logo"
+                  priority // Load image immediately
+                  unoptimized // Skip caching
                 />
               </div>
             ) : (

diff --git a/components/team-name.js b/components/team-name.js
@@ -1,3 +1,5 @@
+import Image from "next/image";
+
 export default function TeamName(props) {
   return (
     <div
@@ -25,7 +27,7 @@ export default function TeamName(props) {
       <div id={`team${props.team}MistakesList`} className="flex justify-center flex-row text-center space-x-2">
         {Array(props.game.teams[props.team].mistakes).fill(
           <div className="flex-shrink">
-            <img src="x.png" />
+            <Image width={139} height={160} src="/x.png" />
           </div>
         )}
       </div>

diff --git a/docker/allinone/nginx.conf b/docker/allinone/nginx.conf
@@ -73,5 +73,11 @@ http {
             proxy_set_header   X-Real-IP        $remote_addr;
             proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
         }
+        location /_next/webpack-hmr {
+            proxy_pass  http://127.0.0.1:3000/_next/webpack-hmr;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
     }
 }
diff --git a/docker/docker-compose-dev-wsl.yaml b/docker/docker-compose-dev-wsl.yaml
@@ -4,6 +4,9 @@ services:
     network_mode: 'host'
     volumes:
       - ../:/src
+      # for SWC compatibility
+      - /src/node_modules
+      - /src/.next
     environment:
       - HOST=0.0.0.0
     healthcheck:

diff --git a/docker/docker-compose-dev.yaml b/docker/docker-compose-dev.yaml
@@ -3,6 +3,9 @@ services:
     image: ${docker_registry}/famf-web:dev
     volumes:
       - ../:/src
+      # for SWC compatibility
+      - /src/node_modules
+      - /src/.next
     ports:
       - 3000:3000
     healthcheck:

diff --git a/docker/nginx/nginx.conf b/docker/nginx/nginx.conf
@@ -73,6 +73,11 @@ http {
             proxy_set_header   X-Real-IP        $remote_addr;
             proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
         }
-
+        location /_next/webpack-hmr {
+            proxy_pass  http://frontend:3000/_next/webpack-hmr;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
     }
 }
diff --git a/docker/nginx/nginx.wsl.conf b/docker/nginx/nginx.wsl.conf
@@ -72,5 +72,11 @@ http {
             proxy_set_header   X-Real-IP        $remote_addr;
             proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
         }
+        location /_next/webpack-hmr {
+            proxy_pass http://127.0.0.1:3000/_next/webpack-hmr;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+        }
     }
 } 
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,5 @@
 /** @type {import("next").NextConfig} */
 module.exports = {
-  experimental: { appDir: true },
   webpack(config) {
     config.experiments = { ...config.experiments, topLevelAwait: true };
     return config;