datalore/buzzword-bingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Switched to DaisyUI

Browse Source
This commit is contained in:
datalore 2023-11-03 03:41:08 +01:00
parent 7988979a78
commit 0dae49f0b2
10 changed files with 59 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -17,6 +17,7 @@
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.16",
"clsx": "^2.0.0",
"daisyui": "^3.9.4",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",
@ -521,6 +522,15 @@
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
},
"node_modules/clsx": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
"integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.16",
"clsx": "^2.0.0",
"daisyui": "^3.9.4",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",

0
postcss.config.ts → postcss.config.js
View File

5
src/app/components/bingo.tsx
View File

@ -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>

3
src/app/components/bingocontroller.tsx
View File

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

7
src/app/components/bingoitem.tsx
View File

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

99
src/app/globals.css
View File

@ -3,109 +3,18 @@
@tailwind utilities;
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--primary-glow: conic-gradient(
from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg
);
--secondary-glow: radial-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0)
);
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(
#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080
);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
--background-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(
to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3)
);
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(
#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80
);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
--background-rgb: 0, 0, 0;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
//color: rgb(var(--foreground-rgb));
//background-color: rgb(var(--background-rgb));
}

4
src/app/layout.tsx
View File

@ -15,8 +15,8 @@ export default function RootLayout({
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<html lang="en" data-theme="winter">
<body className="bg-base-100 base-content flex flex-col h-screen">{children}</body>
</html>
)
}

28
src/app/page.tsx
View File

@ -3,9 +3,31 @@ import BingoController from './components/bingocontroller.tsx'
export default function Home(){
return(
<main className={styles.main}>
<h1 align="center">Buzzword Bingo</h1>
<BingoController/>
<>
<div className="navbar bg-neutral text-neutral-content">
<div className="flex-1">
<b className="normal-case text-xl">Buzzword Bingo</b>
</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>
<ul>
<li><a>Theme 1</a></li>
<li><a>Theme 2</a></li>
</ul>
</details>
</li>
</ul>
</div>
</div>
<main className="flex flex-col flex-1">
<BingoController/>
</main>
</>
);
}

12
tailwind.config.ts
View File

@ -1,9 +1,15 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
import type { Config } from 'tailwindcss';
const config: Config = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
extend: {},
},
plugins: [require("daisyui")],
}
daisyui: {
themes: ["synthwave"]
}
};
export default config;