diff --git a/package-lock.json b/package-lock.json index a86244f..103df04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 47bef48..a3e1a41 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/postcss.config.ts b/postcss.config.js similarity index 100% rename from postcss.config.ts rename to postcss.config.js diff --git a/src/app/components/bingo.tsx b/src/app/components/bingo.tsx index 5ca86e4..1e55923 100644 --- a/src/app/components/bingo.tsx +++ b/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( - +
{rows.map((item, index) => )} diff --git a/src/app/components/bingocontroller.tsx b/src/app/components/bingocontroller.tsx index 56c0ac3..a01f36c 100644 --- a/src/app/components/bingocontroller.tsx +++ b/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 &&

Warning: Mismatch between item count and size

} + {sizeError &&
Warning: Mismatch between item count and size
} ); } diff --git a/src/app/components/bingoitem.tsx b/src/app/components/bingoitem.tsx index 6c9c196..d00b91a 100644 --- a/src/app/components/bingoitem.tsx +++ b/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( - + ); } diff --git a/src/app/globals.css b/src/app/globals.css index ac35d37..96bea0b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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)); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a31049a..cbbcaab 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -15,8 +15,8 @@ export default function RootLayout({ children: React.ReactNode }) { return ( - - {children} + + {children} ) } diff --git a/src/app/page.tsx b/src/app/page.tsx index ea960dc..cce1c15 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,9 +3,31 @@ import BingoController from './components/bingocontroller.tsx' export default function Home(){ return( -
-

Buzzword Bingo

- + <> +
+
+ Buzzword Bingo +
+
+ +
+
+
+
+ ); } diff --git a/tailwind.config.ts b/tailwind.config.ts index 8529165..d0878a7 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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;
{text} setClicked(!clicked)}>{text}