show band names in bing card (#2)

* show band names in bingo card * add favicon * ci: deploy to cloudflare pages
juliocabrera820 · Jan 31, 2025 · 2c88e40 · 2c88e40
1 parent 16283e0
commit 2c88e40
Show file tree

Hide file tree

Showing 12 changed files with 206 additions and 50 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,35 @@
+name: Deploy to Cloudflare Pages
+
+on:
+  push:
+    branches:
+      [main]
+  pull_request:
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies and build
+        run: |
+          yarn install
+          yarn build
+
+      - name: Publish to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages deploy dist --project-name ${{ secrets.CLOUDFLARE_PROJECT_NAME}}
diff --git a/index.html b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/metalhead.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Bingo - Metal Bands</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/metalhead.png b/public/metalhead.png
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,51 +1,10 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
+import { BingoCard } from "./components/templates/BingoCard"
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <div className="min-h-screen bg-slate-100 p-8">
-      <div className="flex justify-center gap-4 mb-8">
-        <a href="https://vite.dev" target="_blank" rel="noreferrer">
-          <img
-            src={viteLogo}
-            className="w-32 h-32 transition-transform duration-300 hover:scale-110"
-            alt="Vite logo"
-          />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img
-            src={reactLogo}
-            className="w-32 h-32 transition-transform duration-300 hover:scale-110 animate-spin"
-            alt="React logo"
-            style={{ animationDuration: '10s' }}
-          />
-        </a>
-      </div>
-
-      <h1 className="text-4xl font-bold text-center mb-8 text-slate-800">
-        Vite + React + Tailwind
-      </h1>
-
-      <div className="bg-white p-6 rounded-xl shadow-lg max-w-md mx-auto mb-8">
-        <button
-          onClick={() => setCount((count) => count + 1)}
-          className="w-full bg-slate-900 text-white px-6 py-3 rounded-lg 
-                   hover:bg-slate-700 transition-colors duration-200 font-medium"
-        >
-          Count is {count}
-        </button>
-        <p className="mt-4 text-gray-600 text-center">
-          Edit <code className="font-mono bg-gray-100 px-2 py-1 rounded">src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-
-      <p className="text-center text-gray-500">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
+    <main className="min-h-screen bg-blue-900">
+      <BingoCard />
+    </main>
   )
 }
 

diff --git a/src/assets/react.svg b/src/assets/react.svg
diff --git a/src/components/atoms/BingoCell.jsx b/src/components/atoms/BingoCell.jsx
@@ -0,0 +1,30 @@
+import PropTypes from "prop-types";
+
+export function BingoCell({ content, isFree, isMarked, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        aspect-square p-1 border-2 border-yellow-400
+        flex items-center justify-center text-center
+        transition-colors duration-200
+        ${isMarked ? "bg-red-600/80" : "bg-gray-900"}
+        ${isFree ? "relative overflow-hidden" : ""}
+        hover:bg-red-600/60
+      `}
+    >
+      {isFree ? (
+        <div className="transform rotate-45 bg-red-600 text-white px-8 py-1 absolute text-sm font-bold uppercase">{content}</div>
+      ) : (
+        <span className="text-white font-bold text-xs sm:text-sm uppercase">{content}</span>
+      )}
+    </button>
+  )
+}
+
+BingoCell.propTypes = {
+  content: PropTypes.string.isRequired,
+  isFree: PropTypes.bool.isRequired,
+  isMarked: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+};
diff --git a/src/components/molecules/BingoRow.jsx b/src/components/molecules/BingoRow.jsx
@@ -0,0 +1,32 @@
+import PropTypes from "prop-types"
+import { BingoCell } from "../atoms/BingoCell"
+
+export function BingoRow({ cells, rowIndex, markedCells, onCellClick }) {
+  return (
+    <div className="grid grid-cols-5 gap-1">
+      {cells.map(({ name, isFree }, colIndex) => {
+        const cellIndex = rowIndex * 5 + colIndex
+
+        return (
+          <BingoCell
+            key={cellIndex}
+            content={name}
+            isFree={isFree}
+            isMarked={markedCells[cellIndex]}
+            onClick={() => onCellClick(cellIndex)}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+BingoRow.propTypes = {
+  cells: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    isFree: PropTypes.bool.isRequired,
+  })).isRequired,
+  rowIndex: PropTypes.number.isRequired,
+  markedCells: PropTypes.arrayOf(PropTypes.bool).isRequired,
+  onCellClick: PropTypes.func.isRequired,
+}
diff --git a/src/components/organisms/BingoGrid.jsx b/src/components/organisms/BingoGrid.jsx
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react"
+import { BingoRow } from "../molecules/BingoRow"
+import { BANDS } from "../../constants/bands"
+
+const bingoItems = BANDS;
+
+export function BingoGrid() {
+  const [markedCells, setMarkedCells] = useState([]);
+
+  useEffect(() => {
+    setMarkedCells(new Array(bingoItems.length).fill(false));
+  }, []);
+
+  const handleCellClick = (index) => {
+    setMarkedCells((prev) => {
+      const newMarked = [...prev]
+      newMarked[index] = !newMarked[index]
+      return newMarked
+    })
+  }
+
+  const rows = []
+  for (let i = 0; i < 5; i++) {
+    rows.push(bingoItems.slice(i * 5, (i + 1) * 5))
+  }
+
+  return (
+    <div className="grid gap-1">
+      {rows.map((cells, rowIndex) => (
+        <BingoRow
+          key={rowIndex}
+          cells={cells}
+          rowIndex={rowIndex}
+          markedCells={markedCells}
+          onCellClick={handleCellClick}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/templates/BingoCard.jsx b/src/components/templates/BingoCard.jsx
@@ -0,0 +1,14 @@
+import { BingoGrid } from "../organisms/BingoGrid"
+
+export function BingoCard() {
+  return (
+    <div className="relative max-w-2xl mx-auto p-4">
+      <div className="text-center mb-3">
+        <h1 className="text-8xl font-bold text-yellow-400 tracking-widest font-stencil">BINGO</h1>
+      </div>
+      <div className="bg-gray-900 p-4 rounded-lg">
+        <BingoGrid />
+      </div>
+    </div>
+  )
+}
diff --git a/src/constants/bands.js b/src/constants/bands.js
@@ -0,0 +1,41 @@
+const ROW_ONE = [
+  { name: "LANDMVRKS", isFree: false },
+  { name: "Jinjer", isFree: false },
+  { name: "Parkway Drive", isFree: false },
+  { name: "A Day to Remember", isFree: false },
+  { name: "Killswitch Engage", isFree: false },
+];
+
+const ROW_TWO = [
+  { name: "Jinjer", isFree: false },
+  { name: "Leprous", isFree: false },
+  { name: "Neo obliviscaris", isFree: false },
+  { name: "Ihsahn", isFree: false },
+  { name: "Gojira", isFree: false },
+];
+
+const ROW_THREE = [
+  { name: "Carach Angren", isFree: false },
+  { name: "Trivium", isFree: false },
+  { name: "Free", isFree: true },
+  { name: "Blessthefall", isFree: false },
+  { name: "Hypocrisy", isFree: false },
+];
+
+const ROW_FOUR = [
+  { name: "Lamb Of God", isFree: false },
+  { name: "Kreator", isFree: false },
+  { name: "Havok", isFree: false },
+  { name: "Slayer", isFree: false },
+  { name: "In Flames", isFree: false },
+];
+
+const ROW_FIVE = [
+  { name: "Abbath", isFree: false },
+  { name: "Behemoth", isFree: false },
+  { name: "Dimmu Borgir", isFree: false },
+  { name: "Deicide", isFree: false },
+  { name: "Children Of Bodom", isFree: false },
+];
+
+export const BANDS = [ROW_ONE, ROW_TWO, ROW_THREE, ROW_FOUR, ROW_FIVE].flat();
diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.font-stencil {
+  font-family: "Impact", "Arial Black", sans-serif;
+  -webkit-text-stroke: 2px black;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+}