12 changed files with 60 additions and 111 deletions
--- a/8
+++ b/8
@ -1,8 +0,0 @@
-FROM node:21.6
-
-COPY . .
-
-RUN npm i
-RUN npm run build
-
-CMD ["npm", "run", "start"]
--- a/README.md
+++ b/README.md
@ -1,7 +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

 To build and run, execute:
@ -13,5 +11,3 @@ $ 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)
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "buzzword-bingo",
-  "version": "0.4.0",
+  "version": "0.2.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "buzzword-bingo",
-      "version": "0.4.0",
+      "version": "0.2.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": "^4.0.8",
+        "daisyui": "^3.9.4",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.3.5",
        "typescript": "^5"
@ -531,6 +531,12 @@
        "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",
@ -574,25 +580,17 @@
      "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": "4.0.8",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.0.8.tgz",
-      "integrity": "sha512-kz+UNSsQx5vEKtrzOKwVvUYVt87Qro94SjGBnQs/D5/UfVaAZwPy2SPJTKRdfNF+zlGUocGKkX1sHdAAGX4J5A==",
+      "version": "3.9.4",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.9.4.tgz",
+      "integrity": "sha512-fvi2RGH4YV617/6DntOVGcOugOPym9jTGWW2XySb5ZpvdWO4L7bEG77VHirrnbRUEWvIEVXkBpxUz2KFj0rVnA==",
      "dev": true,
      "dependencies": {
+        "colord": "^2.9",
        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
+        "postcss": "^8",
+        "postcss-js": "^4",
+        "tailwindcss": "^3.1"
      },
      "engines": {
        "node": ">=16.9.0"
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "buzzword-bingo",
-  "version": "0.4.0",
+  "version": "0.2.1",
  "private": true,
  "scripts": {
    "dev": "next dev",
@ -19,7 +19,7 @@
    "@types/react-dom": "^18",
    "autoprefixer": "^10.4.16",
    "clsx": "^2.0.0",
-    "daisyui": "^4.0.8",
+    "daisyui": "^3.9.4",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.5",
    "typescript": "^5"
--- a/src/app/components/bingo.tsx
+++ b/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='table table-xs bg-primary text-primary-content m-auto'>
+		<table className='w-1/2 table bg-primary text-primary-content m-auto'>
 		<tbody>
 		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>
--- a/src/app/components/bingocontroller.tsx
+++ b/src/app/components/bingocontroller.tsx
@ -4,7 +4,6 @@ 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];
@ -14,45 +13,23 @@ function FisherYatesShuffle(array:string[]):string[]{
 	return array;
 }

-export default function BingoController({buzzwords} : {buzzwords?: string[]}){
-	const [orientation, setOrientation] = React.useState("");
-	React.useEffect(()=>{
-		function updateOrientation()
-		{
-			setOrientation(window.screen.orientation.type);
-		}
-
-		// init
-		updateOrientation();
-
-		window.addEventListener("orientationchange", updateOrientation);
-
-		// destructor
-		return () => {
-			window.removeEventListener("orientationchange", updateOrientation);
-		}
-	});
-
+export default function BingoController(){
 	const [size, setSize] = React.useState(5);
-	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 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-full md:w-3/4 flex flex-col m-auto gap-4">
-		{orientation != "landscape-primary" && <div role="alert" className="alert alert-info">
-			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="stroke-current shrink-0 w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-			<span>Please rotate your device</span>
-		</div>}
+		<div className="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-xs sm:range-sm md:range-md range-secondary" step={1} onChange={({target:{value:s}}) => setSize(+s)}/>
+		<input type="range" min={3} max={5} value={size} className="range 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-xs sm:btn-sm md:btn-md btn-secondary" onClick={() => setItems(FisherYatesShuffle(buzzwords!))}>Regenerate</a>
+		<a className="btn 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>}
--- a/src/app/components/bingoitem.tsx
+++ b/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-xs w-full overflow-hidden", {"btn-ghost":(!clicked)}, {"btn-accent":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
+		<td><a className={clsx("btn btn-ghost w-full", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</a></td>
 	);
 }
--- a/src/app/components/darkicon.tsx
+++ b/src/app/components/darkicon.tsx
@ -1,5 +0,0 @@
-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>
-	);
-}
--- a/src/app/components/themeswitcher.tsx
+++ b/src/app/components/themeswitcher.tsx
@ -1,7 +1,6 @@
 "use client";

-import React from "react";
-import DarkIcon from "./darkicon";
+import React from 'react';

 export default function ThemeSwitcher(){
 	const [theme, setTheme] = React.useState("dark");
@ -9,16 +8,14 @@ export default function ThemeSwitcher(){
 	React.useEffect(() => {document.body.setAttribute("data-theme", theme)});

 	return(
-		<ul className="p-2 right-0 z-10">
+		<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>
 	);
 }
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -1,5 +1,4 @@
 import type { Metadata } from 'next'
-import ThemeSwitcher from './components/themeswitcher'
 import './globals.css'

 export const metadata: Metadata = {
@ -8,40 +7,13 @@ 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">
-		<div className="navbar bg-neutral text-neutral-content">
-			<div className="navbar-start">
-				<div className="dropdown">
-					<div tabIndex={0} role="button" className="btn btn-ghost lg:hidden">
-						<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
-					</div>
-					<ul tabIndex={0} className="menu menu-sm dropdown-content bg-neutral text-neutral-content mt-3 z-[1] p-2 shadow rounded-box w-52">
-						<li><a href="https://git.datalore.sh/datalore/buzzword-bingo.git" target="_blank">Source Code</a></li>
-						<li><a>Theme</a><ThemeSwitcher/></li>
-					</ul>
-				</div>
-				<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="navbar-end hidden lg:flex">
-				<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>
-	);
+  return (
+    <html lang="en" data-theme="dark">
+      <body className="bg-base-100 base-content flex flex-col h-screen">{children}</body>
+    </html>
+  )
 }
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -3,6 +3,28 @@ import ThemeSwitcher from './components/themeswitcher'

 export default function Home(){
 	return(
-		<BingoController/>
+		<>
+		<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>
+		</>
 	);
 }
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -7,7 +7,7 @@ const config: Config = {
 	},
 	plugins: [require("daisyui")],
 	daisyui: {
-		themes: ["light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua", "coffee", "dim"]
+		themes: ["light", "dark", "synthwave", "cyberpunk", "valentine", "pastel", "aqua"]
 	}
 };