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.1.0",
+  "version": "0.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "buzzword-bingo",
-      "version": "0.1.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",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.4.tgz",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.0.8.tgz",
-      "integrity": "sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==",
+      "integrity": "sha512-kz+UNSsQx5vEKtrzOKwVvUYVt87Qro94SjGBnQs/D5/UfVaAZwPy2SPJTKRdfNF+zlGUocGKkX1sHdAAGX4J5A==",
       "dev": true,
       "dependencies": {
-        "colord": "^2.9",
         "css-selector-tokenizer": "^0.8",
-        "postcss": "^8",
+        "culori": "^3",
-        "postcss-js": "^4",
+        "picocolors": "^1",
-        "tailwindcss": "^3.1"
+        "postcss-js": "^4"
       },
       "engines": {
         "node": ">=16.9.0"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "buzzword-bingo",
-  "version": "0.1.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/bingo.tsx

@@ -13,7 +13,7 @@ export default function Bingo({size, items}: Props){
 		rows[i] = activeItems.slice(i * size, (i + 1) * size);
 	}
 	return(
-		<table className='w-1/2 table bg-primary text-primary-content m-auto'>
+		<table className='w-1/2 table table-xs sm:table-sm md:table-md bg-primary text-primary-content m-auto'>
 		<tbody>
 		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>

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];
@@ -20,16 +21,16 @@ export default function BingoController(){
 	const sizeError = (items.length < size);
 	return(
 		<>
-		<div className="w-3/4 flex flex-row m-auto">
+		<div className="w-3/4 flex flex-col m-auto gap-4">
 		<Bingo size={size} items={items}/>
-		<form className="w-1/3">
+		<form className="w-1/3 m-auto">
-		<input type="range" min={3} max={5} value={size} className="range range-primary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
+		<input type="range" min={3} max={5} value={size} className="range range-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
-		<div className="w-full flex justify-between text-xs px-2">
+		<div className="w-full flex justify-between text-sm px-2 mb-2">
 			<span>3x3</span>
 			<span>4x4</span>
 			<span>5x5</span>
 		</div>
-		<a className="btn btn-primary" 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/bingoitem.tsx

@@ -9,6 +9,6 @@ export default function BingoItem({text}: Props){
 	const [clicked, setClicked] = React.useState(false);
 
 	return(
-		<td className={clsx("cursor-pointer", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</td>
+		<td><a className={clsx("btn btn-xs sm:btn-sm md:btn-md w-full", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
 	);
 }

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");
@@ -8,12 +9,16 @@ export default function ThemeSwitcher(){
 	React.useEffect(() => {document.body.setAttribute("data-theme", theme)});
 
 	return(
-		<ul className="p-2 right-0 text-base-content">
+		<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/page.tsx

@@ -6,7 +6,7 @@ export default function Home(){
 		<>
 		<div className="navbar bg-neutral text-neutral-content">
 		<div className="flex-1">
-			<b className="normal-case text-xl">Buzzword Bingo</b>
+			<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">

tailwind.config.ts

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