feat: Added lpt buzzwords

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.2.1",
+  "version": "0.3.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "buzzword-bingo",
-      "version": "0.2.1",
+      "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.2.1",
+  "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/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='table table-xs 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];
@@ -13,23 +14,24 @@ function FisherYatesShuffle(array:string[]):string[]{
 	return array;
 }
 
-export default function BingoController(){
-	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"];
+export default function BingoController({buzzwords, maxSize} : {buzzwords?: string[], maxSize?: number}){
+	if(maxSize == undefined) maxSize = 5;
+	const [size, setSize] = React.useState(maxSize!);
+	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(
 		<>
-		<div className="w-3/4 flex flex-col m-auto gap-4">
+		<div className="w-full md:w-3/4 flex flex-col m-auto gap-4">
 		<Bingo size={size} items={items}/>
 		<form className="w-1/3 m-auto">
-		<input type="range" min={3} max={5} value={size} className="range range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
+		<input type="range" min={3} max={maxSize!} 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-sm px-2 mb-2">
 			<span>3x3</span>
 			<span>4x4</span>
 			<span>5x5</span>
 		</div>
-		<a className="btn 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/bingoitem.tsx

@@ -9,6 +9,6 @@ export default function BingoItem({text}: Props){
 	const [clicked, setClicked] = React.useState(false);
 
 	return(
-		<td><a className={clsx("btn btn-ghost w-full", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
+		<td><a className={clsx("btn btn-xs w-full overflow-hidden", {"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");
@@ -10,12 +11,15 @@ 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>
+			<li><a onClick={() => setTheme("dielinke")}>Die Linke</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 = {
@@ -13,7 +14,29 @@ export default function RootLayout({
 }) {
 	return (
 	<html lang="en" data-theme="dark">
-      <body className="bg-base-100 base-content flex flex-col h-screen">{children}</body>
+		<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/lpt/page.tsx

@@ -0,0 +1,8 @@
+import BingoController from '../components/bingocontroller'
+
+export default function Home(){
+	const buzzwords = ["\"Ohne Frieden ist alles nichts\"", "Wahlordnung muss mehrfach erklärt werden", "Pizza ist da", "Stefan pöbelt", "Mareike pöbelt zurück", "Jemand überzieht die Redezeit", "Machentanz knallt die Tür zu", "GO-Antrag zur Pause", "GO-Antrag zum GO-Antrag", "Doppelte Für-/Gegenreden", "Rita Krüger redet zu Wagenknecht", "Ins Mikrofon schreien", "Karl-Marx-Zitate", "Rosa-Luxemburg-Zitate", "\"Es braucht die Linke\"", "\"In der Tradition von Rosa Luxemburg und Karl Liebknecht\"", "KW sagt \"Ruhe im Saal\""];
+	return(
+		<BingoController buzzwords={buzzwords} maxSize={4} />
+	);
+}

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

tailwind.config.ts

@@ -7,9 +7,21 @@ const config: Config = {
 	},
 	plugins: [require("daisyui")],
 	daisyui: {
-		themes: ["light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua"]
+		themes: [
+			{
+				dielinke: {
+					"primary": "#ff0000",
+					"accent": "#6f003c",
+					"secondary": "#004b5b",
+					"neutral": "#6f003c",
+					"base-100": "#f8f8f8",
+
+					"--rounded-box": "0",
+					"--rounded-btn": "0.75rem"
+				}
+			},"light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua", "coffee", "dim"
+		]
 	}
 };
 
 export default config;
-