Implement environment variables

.env

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_TITLE_URL='famf.app'
+NEXT_PUBLIC_MAX_IMAGE_UPLOAD_SIZE_MB=2
+NEXT_PUBLIC_MAX_CSV_UPLOAD_SIZE_MB=2

.prettierrc

@@ -0,0 +1,13 @@
+{
+    "printWidth": 120, 
+    "useTabs": false,
+    "tabWidth": 2, 
+    "trailingComma": "es5", 
+    "semi": true, 
+    "singleQuote": true,
+    "bracketSpacing": true,
+    "arrowParens": "always", 
+    "jsxSingleQuote": false, 
+    "bracketSameLine": false, 
+    "endOfLine": "lf"
+}

components/admin.js

@@ -8,6 +8,7 @@ import LanguageSwitcher from "./language";
 import CSVLoader from "./Admin/csv-loader";
 import { Buffer } from "buffer";
 import { BSON } from "bson";
+import { handleCsvFile, handleJsonFile } from "utils/files";
 
 function debounce(callback, wait = 400) {
   let timeout;
@@ -225,9 +226,7 @@ function TitleLogoUpload(props) {
               var file = document.getElementById("logoUpload").files[0];
 
               if (file) {
-                const fileSize = Math.round(file.size / 1024);
-                // 2MB
-                if (fileSize > 2098) {
+                if (file.size > process.env.NEXT_PUBLIC_MAX_IMAGE_UPLOAD_SIZE_MB * 1024 * 1024) {
                   console.error("Logo image is too large");
                   props.setError(
                     t("Logo image is too large. 2MB is the limit"),
@@ -349,6 +348,18 @@ function FinalRoundPointTotals(props) {
   );
 }
 
+function isValidFileType(file, allowedTypes) {
+  const fileName = file.name.toLowerCase();
+  const fileExtension = fileName.split('.').pop();
+
+  if(!allowedTypes[fileExtension]) {
+    return false;
+  }
+
+  const mimePattern = allowedTypes[fileExtension].pattern;
+  return mimePattern.test(file.type);
+}
+
 export default function Admin(props) {
   const { i18n, t } = useTranslation();
 
@@ -522,6 +533,7 @@ export default function Admin(props) {
                     ))}
                   </select>
                 ) : null}
+                {/* Image Upload */}
                 <div className="image-upload w-6">
                   <label htmlFor="gamePicker">
                     <svg
@@ -531,48 +543,56 @@ export default function Admin(props) {
                       <path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm65.18 216.01H224v80c0 8.84-7.16 16-16 16h-32c-8.84 0-16-7.16-16-16v-80H94.82c-14.28 0-21.41-17.29-11.27-27.36l96.42-95.7c6.65-6.61 17.39-6.61 24.04 0l96.42 95.7c10.15 10.07 3.03 27.36-11.25 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z" />
                     </svg>
                   </label>
+                  {/* CSV Upload */}
                   <input
                     className="hidden"
                     type="file"
                     accept=".json, .csv"
                     id="gamePicker"
                     onChange={(e) => {
                       var file = document.getElementById("gamePicker").files[0];
-                      console.debug(file);
-                      if (file?.type === "application/json") {
-                        if (file) {
-                          var reader = new FileReader();
-                          reader.readAsText(file, "utf-8");
-                          reader.onload = function(evt) {
-                            let data = JSON.parse(evt.target.result);
-                            console.debug(data);
-                            // TODO some error checking for invalid game data
-                            send({ action: "load_game", data: data });
-                          };
-                          reader.onerror = function(evt) {
-                            console.error("error reading file");
-                            setError(t("error reading file"));
-                          };
+
+                      if (file) {
+                        if (file.size > process.env.NEXT_PUBLIC_MAX_CSV_UPLOAD_SIZE_MB * 1024 * 1024) {
+                          console.error("This csv file is too large");
+                          props.setError(
+                            t("This csv file is too large"),
+                          );
+                          return;
                         }
-                      } else if (file?.type === "text/csv") {
-                        var reader = new FileReader();
-                        reader.readAsText(file, "utf-8");
-                        reader.onload = function(evt) {
-                          let lineCount = evt.target.result.split("\n");
-                          if (lineCount.length > 30) {
-                            setError(t("This csv file is too large"));
-                          } else {
-                            setCsvFileUpload(file);
-                            setCsvFileUploadText(evt.target.result);
-                          }
-                        };
-                        reader.onerror = function(evt) {
-                          console.error("error reading file");
-                          setError(t("error reading file"));
-                        };
-                      } else {
-                        setError(t("Unknown file type in game load"));
                       }
+
+                      const allowedTypes = {
+                        'json': {
+                          pattern: /^application\/(json|.*\+json)$/,
+                          handler: (file) => handleJsonFile(file, { 
+                            setError, 
+                            t, 
+                            send 
+                          })
+                        },
+                        'csv': {
+                          pattern: /^(text\/csv|application\/(vnd\.ms-excel|csv|x-csv|text-csv))$/,
+                          handler: (file) => handleCsvFile(file, { 
+                            setError, 
+                            t, 
+                            setCsvFileUpload, 
+                            setCsvFileUploadText 
+                          })
+                        }
+                      };
+
+                      const fileType = isValidFileType(file, allowedTypes);
+                      if (!fileType) {
+                        setError(t("Unknown file type"));
+                        return;
+                      }
+
+                      const fileExtension = file.name.toLowerCase().split('.').pop();
+                      allowedTypes[fileExtension].handler(file);
+
+                      console.debug(file);
+
                       // allow same file to be selected again
                       document.getElementById("gamePicker").value = null;
                     }}

components/title.js

@@ -1,15 +1,17 @@
 import "tailwindcss/tailwind.css";
 import TitleLogo from "./title-logo";
 import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 export default function Title(props) {
+  const {i18n, t} = useTranslation();
   const [titleSize, setTitleSize] = useState("10%");
 
   useEffect(() => {
     if (props.game.settings.logo_url) {
-      setTimeout(setTitleSize(window.innerWidth * 0.4), 2000);
+      setTimeout(() => setTitleSize(window.innerWidth * 0.4), 2000);
     } else {
-      setTimeout(setTitleSize(window.innerWidth * 0.7), 2000);
+      setTimeout(() => setTitleSize(window.innerWidth * 0.7), 2000);
     }
   }, []);
 
@@ -35,6 +37,7 @@ export default function Title(props) {
         }}
         className="align-middle inline-block"
       >
+        {/* Logo Section */}
         <div className="flex flex-col space-y-10">
           <div className="flex-grow mx-auto">
             {props.game.settings.logo_url ? (
@@ -43,11 +46,28 @@ export default function Title(props) {
                 <TitleLogo insert={props.game.title_text} size={titleSize} />
               )}
           </div>
+
+          {/* Room Code Section */}
           <div className="flex flex-row justify-center text-center">
-            <p className="text-4xl font-bold p-5 text-foreground rounded bg-secondary-500">
-              {props.game.room}
-            </p>
+            <div className="flex flex-col items-center">
+              <div className="text-xl font-semibold text-foreground p-0.5 px-2 pb-0 rounded-t-xl bg-secondary-500 shadow-lg">{t("Room Code")}</div>
+              <p className="text-6xl font-bold p-6 text-foreground rounded-xl bg-secondary-500 shadow-lg">
+                {props.game.room}
+              </p>
+            </div>
           </div>
+
+          {/* URL Section */}
+          {process.env.NEXT_PUBLIC_TITLE_URL && (
+            <div className="flex flex-row justify-center text-center mt-4">
+              <span 
+                className="text-4xl p-6 text-foreground rounded-xl bg-secondary-500 shadow-lg transition-colors duration-200"
+              >
+                {t("Join at")} <span className="font-bold">{process.env.NEXT_PUBLIC_TITLE_URL}</span>
+              </span>
+            </div>
+          )}
+          {/* Teams and players section */}
           <div className="flex flex-row text-center">
             {[0, 1].map(function(n) {
               return (

public/locales/en/translation.json

@@ -112,5 +112,7 @@
   "donate": "donate",
   "email": "email",
   "source code": "source code",
-  "Question": "Question"
+  "Question": "Question",
+  "Join at": "Join at",
+  "Room Code": "Room Code"
 }

public/locales/et/translation.json

@@ -112,5 +112,7 @@
     "donate": "annetama",
     "email": "e -kiri",
     "source code": "l\u00e4htekood",
-    "Question": "K\u00fcsitlus"
+    "Question": "K\u00fcsitlus",
+    "Join at": "Liitu: ",
+    "Room Code": "Ruumi Kood"
 }

utils/files.js

@@ -0,0 +1,37 @@
+export function handleJsonFile(file, { setError, t, send }) {
+    var reader = new FileReader();
+    reader.readAsText(file, "utf-8");
+    reader.onload = function(evt) {
+      try {
+        let data = JSON.parse(evt.target.result);
+        console.debug(data);
+        // TODO some error checking for invalid game data
+        send({ action: "load_game", data: data });
+      } catch (e) {
+        console.error("Invalid JSON file");
+        setError(t("Invalid JSON file"));
+      }
+    };
+    reader.onerror = function(evt) {
+      console.error("error reading file");
+      setError(t("error reading file"));
+    };
+}
+
+export function handleCsvFile(file, { setError, t, setCsvFileUpload, setCsvFileUploadText }) {
+    var reader = new FileReader();
+    reader.readAsText(file, "utf-8");
+    reader.onload = function(evt) {
+      let lineCount = evt.target.result.split("\n");
+      if (lineCount.length > 30) {
+        setError(t("This csv file is too large"));
+      } else {
+        setCsvFileUpload(file);
+        setCsvFileUploadText(evt.target.result);
+      }
+    };
+    reader.onerror = function(evt) {
+      console.error("error reading file");
+      setError(t("error reading file"));
+    };
+}