Merge branch 'develop' for 0.3.1

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.

README.md

@@ -1,4 +1,5 @@
 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
 

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "buzzword-bingo",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "buzzword-bingo",
-      "version": "0.3.0",
+      "version": "0.3.1",
       "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.1",
   "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];

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>
 	);
 }

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"]
 	}
 };