Switched to DaisyUI

src/app/components/bingo.tsx

@@ -1,4 +1,3 @@
-import styles from './bingo.module.css'
 import BingoRow from './bingorow.tsx'
 
 interface Props{
@@ -8,12 +7,12 @@ interface Props{
 
 export default function Bingo({size, items}: Props){
 	let rows: string[][] = [];
-	for(let i = 0; i < items.length; i++)
+	for(let i = 0; i < (items.length / size); i++)
 	{
 		rows[i] = items.slice(i * size, (i + 1) * size);
 	}
 	return(
-		<table className={styles.table}>
+		<table className='w-1/2 table bg-primary text-primary-content m-auto'>
 		<tbody>
 		{rows.map((item, index) => <BingoRow key={index} items={item}/>)}
 		</tbody>

src/app/components/bingocontroller.tsx

@@ -2,7 +2,6 @@
 
 import React from 'react'
 import Bingo from './bingo.tsx'
-import styles from './bingo.module.css'
 
 export default function BingoController(){
 	const [size, setSize] = React.useState(5);
@@ -10,8 +9,8 @@ export default function BingoController(){
 	const sizeError = ((items.length % size) != 0);
 	return(
 		<>
-		{sizeError && <p className={styles.warning}>Warning: Mismatch between item count and size</p>}
 		<Bingo size={size} items={items}/>
+		{sizeError && <div className="alert alert-warning"><svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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

@@ -1,11 +1,14 @@
-import styles from './bingo.module.css'
+import clsx from 'clsx'
+import React from 'react'
 
 interface Props{
 	text: string;
 }
 
 export default function BingoItem({text}: Props){
+	const [clicked, setClicked] = React.useState(false);
+
 	return(
-		<td className={styles.td}>{text}</td>
+		<td className={clsx("cursor-pointer", {"bg-primary-focus":clicked})} onClick={() => setClicked(!clicked)}>{text}</td>
 	);
 }