fix: Fixed buzzwords nullable issue

The inline implementation of shuffle caused React not to detect
changes, because the reference didn't change. Copying the array
with slice(), thus changing the reference, fixed the issue.

Dockerfile

@@ -0,0 +1,8 @@
+FROM node:21.6
+
+COPY . .
+
+RUN npm i
+RUN npm run build
+
+CMD ["npm", "run", "start"]

README.md

@@ -1,5 +1,7 @@
 This is a Buzzword Bingo generator for IT buzzwords, based on [Next.js](https://nextjs.org/), [TailwindCSS](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/).
 
+Icons: [Iconify](https://icon-sets.iconify.design/ic/)
+
 ## Getting Started
 
 To build and run, execute:
@@ -11,3 +13,5 @@ $ npm run start
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+The latest stable build can be found at [https://buzz.datalore.sh](https://buzz.datalore.sh)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "buzzword-bingo",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "buzzword-bingo",
-      "version": "0.3.0",
+      "version": "0.3.2",
       "dependencies": {
         "next": "14.0.1",
         "react": "^18",
@@ -18,7 +18,7 @@
         "@types/react-dom": "^18",
         "autoprefixer": "^10.4.16",
         "clsx": "^2.0.0",
-        "daisyui": "^3.9.4",
+        "daisyui": "^4.0.8",
         "postcss": "^8.4.31",
         "tailwindcss": "^3.3.5",
         "typescript": "^5"
@@ -531,12 +531,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/colord": {
-      "version": "2.9.3",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
-      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
-      "dev": true
-    },
     "node_modules/commander": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -580,17 +574,25 @@
       "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==",
       "dev": true
     },
+    "node_modules/culori": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.2.0.tgz",
+      "integrity": "sha512-HIEbTSP7vs1mPq/2P9In6QyFE0Tkpevh0k9a+FkjhD+cwsYm9WRSbn4uMdW9O0yXlNYC3ppxL3gWWPOcvEl57w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/daisyui": {
-      "version": "3.9.4",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.4.tgz",
-      "integrity": "sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.0.8.tgz",
+      "integrity": "sha512-kz+UNSsQx5vEKtrzOKwVvUYVt87Qro94SjGBnQs/D5/UfVaAZwPy2SPJTKRdfNF+zlGUocGKkX1sHdAAGX4J5A==",
       "dev": true,
       "dependencies": {
-        "colord": "^2.9",
         "css-selector-tokenizer": "^0.8",
-        "postcss": "^8",
-        "postcss-js": "^4",
-        "tailwindcss": "^3.1"
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
       },
       "engines": {
         "node": ">=16.9.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buzzword-bingo",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,7 +19,7 @@
     "@types/react-dom": "^18",
     "autoprefixer": "^10.4.16",
     "clsx": "^2.0.0",
-    "daisyui": "^3.9.4",
+    "daisyui": "^4.0.8",
     "postcss": "^8.4.31",
     "tailwindcss": "^3.3.5",
     "typescript": "^5"

src/app/components/bingocontroller.tsx

@@ -4,6 +4,7 @@ import React from 'react'
 import Bingo from './bingo'
 
 function FisherYatesShuffle(array:string[]):string[]{
+	array = array.slice();
 	for(let i = array.length - 1; i > 0; i--){
 		const j = Math.floor(Math.random() * (i + 1));
 		const temp = array[i];
@@ -13,9 +14,9 @@ function FisherYatesShuffle(array:string[]):string[]{
 	return array;
 }
 
-export default function BingoController(){
+export default function BingoController({buzzwords} : {buzzwords?: string[]}){
 	const [size, setSize] = React.useState(5);
-	const buzzwords = ["Cloud", "Cyber-[Something]", "Distrupt[ive]", "AI", "Meta [Something]", "Gamification", "Web 2.0/3.0", "Industry 4.0", "Internet of Things", "Multiexperience", "Big Data", "Crypto", "[Something] as a service", "Emerging [Something]", "Streamline", "Ecosystem", "Leverage", "Outside the Box", "Pivot", "Strategic", "Agile", "Smart Tech", "Data Warehouse", "Actionable Insights", "Holistic Approach", "Digital Transformation", "Growth Hacking"];
+	if(buzzwords == undefined || buzzwords.length < 1) buzzwords = ["Cloud", "Cyber-[Something]", "Distrupt[ive]", "AI", "Meta [Something]", "Gamification", "Web 2.0/3.0", "Industry 4.0", "Internet of Things", "Multiexperience", "Big Data", "Crypto", "[Something] as a service", "Emerging [Something]", "Streamline", "Ecosystem", "Leverage", "Outside the Box", "Pivot", "Strategic", "Agile", "Smart Tech", "Data Warehouse", "Actionable Insights", "Holistic Approach", "Digital Transformation", "Growth Hacking"];
 	const [items, setItems] = React.useState(buzzwords);
 	const sizeError = (items.length < size);
 	return(
@@ -29,7 +30,7 @@ export default function BingoController(){
 			<span>4x4</span>
 			<span>5x5</span>
 		</div>
-		<a className="btn btn-xs sm:btn-sm md:btn-md btn-secondary" onClick={() => setItems(FisherYatesShuffle(buzzwords))}>Regenerate</a>
+		<a className="btn btn-xs sm:btn-sm md:btn-md btn-secondary" onClick={() => setItems(FisherYatesShuffle(buzzwords!))}>Regenerate</a>
 		</form>
 		</div>
 		{sizeError && <div className="alert alert-warning"><svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg><span>Warning: Mismatch between item count and size</span></div>}

src/app/components/darkicon.tsx

@@ -0,0 +1,5 @@
+export default function DarkIcon(){
+	return(
+		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M9.37 5.51A7.35 7.35 0 0 0 9.1 7.5c0 4.08 3.32 7.4 7.4 7.4c.68 0 1.35-.09 1.99-.27A7.014 7.014 0 0 1 12 19c-3.86 0-7-3.14-7-7c0-2.93 1.81-5.45 4.37-6.49zM12 3a9 9 0 1 0 9 9c0-.46-.04-.92-.1-1.36a5.389 5.389 0 0 1-4.4 2.26a5.403 5.403 0 0 1-3.14-9.8c-.44-.06-.9-.1-1.36-.1z"/></svg>
+	);
+}

src/app/components/themeswitcher.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React from 'react';
+import React from "react";
+import DarkIcon from "./darkicon";
 
 export default function ThemeSwitcher(){
 	const [theme, setTheme] = React.useState("dark");
@@ -10,12 +11,14 @@ export default function ThemeSwitcher(){
 	return(
 		<ul className="p-2 right-0 text-base-content z-10">
 			<li><a onClick={() => setTheme("light")}>Light</a></li>
-			<li><a onClick={() => setTheme("dark")}>Dark</a></li>
-			<li><a onClick={() => setTheme("synthwave")}>Synthwave</a></li>
 			<li><a onClick={() => setTheme("cyberpunk")}>Cyberpunk</a></li>
 			<li><a onClick={() => setTheme("valentine")}>Valentine</a></li>
 			<li><a onClick={() => setTheme("pastel")}>Pastel</a></li>
 			<li><a onClick={() => setTheme("aqua")}>Aqua</a></li>
+			<li><a onClick={() => setTheme("dark")}><DarkIcon/>Dark</a></li>
+			<li><a onClick={() => setTheme("synthwave")}><DarkIcon/>Synthwave</a></li>
+			<li><a onClick={() => setTheme("coffee")}><DarkIcon/>Coffee</a></li>
+			<li><a onClick={() => setTheme("dim")}><DarkIcon/>Dim</a></li>
 		</ul>
 	);
 }

src/app/layout.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import ThemeSwitcher from './components/themeswitcher'
 import './globals.css'
 
 export const metadata: Metadata = {
@@ -7,13 +8,35 @@ export const metadata: Metadata = {
 }
 
 export default function RootLayout({
-  children,
+	children,
 }: {
-  children: React.ReactNode
+	children: React.ReactNode
 }) {
-  return (
-    <html lang="en" data-theme="dark">
-      <body className="bg-base-100 base-content flex flex-col h-screen">{children}</body>
-    </html>
-  )
+	return (
+	<html lang="en" data-theme="dark">
+		<body className="bg-base-100 base-content flex flex-col h-screen">
+		<div className="navbar bg-neutral text-neutral-content">
+		<div className="flex-1">
+			<span><b className="normal-case text-xl">Buzzword Bingo</b><span className="text-xs ml-1">v{process.env.npm_package_version}</span></span>
+		</div>
+		<div className="flex-none">
+		<ul className="menu menu-horizontal px-1">
+		<li>
+			<a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a>
+		</li>
+		<li>
+		<details>
+			<summary>Theme</summary>
+			<ThemeSwitcher/>
+		</details>
+		</li>
+		</ul>
+		</div>
+		</div>
+		<main className="flex flex-col flex-1">
+			{children}
+		</main>
+		</body>
+	</html>
+	);
 }

src/app/page.tsx

@@ -3,28 +3,6 @@ import ThemeSwitcher from './components/themeswitcher'
 
 export default function Home(){
 	return(
-		<>
-		<div className="navbar bg-neutral text-neutral-content">
-		<div className="flex-1">
-			<span><b className="normal-case text-xl">Buzzword Bingo</b><span className="text-xs ml-1">v{process.env.npm_package_version}</span></span>
-		</div>
-		<div className="flex-none">
-		<ul className="menu menu-horizontal px-1">
-		<li>
-			<a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a>
-		</li>
-		<li>
-		<details>
-			<summary>Theme</summary>
-			<ThemeSwitcher/>
-		</details>
-		</li>
-		</ul>
-		</div>
-		</div>
-		<main className="flex flex-col flex-1">
-			<BingoController/>
-		</main>
-		</>
+		<BingoController/>
 	);
 }

tailwind.config.ts

@@ -7,7 +7,7 @@ const config: Config = {
 	},
 	plugins: [require("daisyui")],
 	daisyui: {
-		themes: ["light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua"]
+		themes: ["light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua", "coffee", "dim"]
 	}
 };