everything

.env.example

@@ -0,0 +1,2 @@
+# Add your env variables here
+APP_DEPLOYMENT_ENV="staging"

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,42 @@
+Fixes #
+
+# Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context.
+List any dependencies that are required for this change.
+
+## Type of change
+
+Please mark relevant options with an `x` in the brackets.
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+- [ ] Algorithm update - updates algorithm documentation/questions/answers etc.
+- [ ] Other (please describe):
+
+# How Has This Been Tested?
+
+Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also
+list any relevant details for your test configuration
+
+- [ ] Integration tests
+- [ ] Unit tests
+- [ ] Manual tests
+- [ ] No tests required
+
+# Reviewer checklist
+
+Mark everything that needs to be checked before merging the PR.
+
+- [ ] Check if the UI is working as expected and is satisfactory
+- [ ] Check if the code is well documented
+- [ ] Check if the behavior is what is expected
+- [ ] Check if the code is well tested
+- [ ] Check if the code is readable and well formatted
+- [ ] Additional checks (document below if any)
+
+# Screenshots (if appropriate):
+
+# Questions (if appropriate):

.github/workflows/validate.yml

@@ -0,0 +1,54 @@
+name: 🚀 Validation Pipeline
+concurrency:
+  group: ${{ github.repository }}-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+permissions:
+  actions: write
+  contents: read
+  # Required to put a comment into the pull-request
+  pull-requests: write
+jobs:
+  lint:
+    name: ⬣ Biome lint
+    runs-on: ubuntu-latest
+    steps:
+     - uses: actions/checkout@v4
+     - uses: biomejs/setup-biome@v2
+     - run: biome ci . --reporter=github
+
+  typecheck:
+    needs: lint
+    name: 🔎 Type check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "package.json"
+          cache: "pnpm"
+      - run: pnpm install --prefer-offline --frozen-lockfile
+      - run: pnpm run typecheck
+
+  vitest:
+    needs: typecheck
+    name: ⚡ Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: "package.json"
+          cache: "pnpm"
+      - run: pnpm install --prefer-offline --frozen-lockfile
+      - run: pnpm run test:cov
+      - name: "Report Coverage"
+        # Only works if you set `reportOnFailure: true` in your vite config as specified above
+        if: always()
+        uses: davelosert/vitest-coverage-report-action@v2

.gitignore

@@ -0,0 +1,94 @@
+node_modules
+public/build
+build
+dist
+out
+coverage
+.history
+.react-router
+
+# Other Coverage tools
+*.lcov
+
+# macOS
+.DS_*
+
+# Cache Directories and files
+.cache
+.yarn*
+.env*
+!.env.example
+.swp*
+.turbo
+.npm
+.stylelintcache
+*.tsbuildinfo
+.node_repl_history
+
+# Lock files from other package managers
+package-lock.json
+yarn.lock
+
+# General tempory files and directories
+t?mp
+.t?mp
+*.t?mp
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Output of 'npm pack'
+*.tgz
+*.tar
+*.tar.gz
+*.tar.bz2
+*.tbz
+*.zip
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+vite.config.ts.*
+
+# Playwright various test reports
+test-results
+playwright-report
+blob-report
+
+
+# Editors
+.idea/workspace.xml
+.idea/usage.statistics.xml
+.idea/shelf
+
+
+# Make it harder to accidentally commit files in the root
+/*.json
+/*.yaml
+/*.yml
+/*.toml
+/*.ts
+/*.tsx
+/*.js
+/*.jsx
+/*.sh
+
+# Dont commit sqlite database files
+*.db
+*.sqlite
+*.sqlite3
+*.db-journal

.npmrc

@@ -0,0 +1,6 @@
+enable-pre-post-scripts=true
+side-effects-cache=false
+save-exact=true
+audit=false
+fund=false
+progress=false

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["codeforge.remix-forge", "biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,43 @@
+{
+	"editor.formatOnSave": true,
+	"editor.formatOnType": false,
+	"editor.renderWhitespace": "all",
+	"editor.rulers": [120, 160],
+	"editor.codeActionsOnSave": {
+		"source.fixAll": "always",
+		"source.organizeImports": "never",
+		"source.organizeImports.biome": "always",
+		"quickfix.biome": "always"
+	},
+	"eslint.enable": false,
+	"prettier.enable": false,
+	"editor.insertSpaces": false,
+	"editor.detectIndentation": false,
+	"editor.tabSize": 2,
+	"editor.trimAutoWhitespace": true,
+	"workbench.colorCustomizations": {
+		"editorWhitespace.foreground": "#333"
+	},
+	"files.trimTrailingWhitespace": true,
+	"files.trimTrailingWhitespaceInRegexAndStrings": true,
+	"files.trimFinalNewlines": true,
+	"[yaml]": {
+		"editor.defaultFormatter": "redhat.vscode-yaml"
+	},
+	"biome.enabled": true,
+	"editor.defaultFormatter": "biomejs.biome",
+	"[javascript][typescript][typescriptreact][javascriptreact][json][jsonc][vue][astro][svelte][css][graphql]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"explorer.fileNesting.patterns": {
+		"*.ts": "${basename}.*.${extname}",
+		".env": ".env.*",
+		"*.tsx": "${basename}.*.${extname},${basename}.*.ts",
+		"package.json": "*.json, *.yml, *.config.js, *.config.ts, *.yaml",
+		"readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
+		"Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
+		"README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
+		"Dockerfile": "*.dockerfile, .devcontainer.*, .dockerignore, captain-definition, compose.*, docker-compose.*, dockerfile*"
+	}
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Forge 42
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/components/game/Card.tsx

@@ -0,0 +1,45 @@
+import { cn } from "~/utils/css"
+
+interface CardProps {
+	value: string
+	isFlipped: boolean
+	isMatched: boolean
+	onClick: () => void
+	disabled?: boolean
+}
+export function Card({ value, isFlipped, isMatched, onClick, disabled }: CardProps) {
+	return (
+		// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+		<div
+			onClick={() => !disabled && onClick()}
+			className={cn(
+				"relative  size-20 lg:size-36 cursor-pointer transition duration-500",
+				disabled ? "cursor-not-allowed opacity-50" : ""
+			)}
+			style={{ perspective: "1000px" }}
+		>
+			{/* Front face (hidden when flipped) */}
+			<div
+				className={cn(
+					"absolute inset-0 rounded-lg border-2 bg-indigo-600 flex items-center justify-center",
+					!disabled && !isMatched ? "hover:bg-indigo-700" : "",
+					isMatched ? "bg-green-500" : ""
+				)}
+				style={{ transform: "rotateY(0deg)", backfaceVisibility: "hidden" }}
+			>
+				<span className="text-4xl opacity-0">{value}</span>
+			</div>
+
+			{/* Back face (shown when flipped) */}
+			<div
+				className={cn(
+					"absolute inset-0 flex items-center justify-center rounded-lg border-2 bg-white text-4xl",
+					isMatched ? "bg-green-100" : ""
+				)}
+				style={{ transform: "rotateY(180deg)", backfaceVisibility: isFlipped || isMatched ? "visible" : "hidden" }}
+			>
+				<span>{value}</span>
+			</div>
+		</div>
+	)
+}

app/components/game/Grid.tsx

@@ -0,0 +1,37 @@
+import { Card } from "./Card"
+
+interface GridProps {
+	size: 4 | 6 | 8 | 16 | 32
+	cards: string[]
+	flippedIndices: number[]
+	matchedPairs: string[]
+	onCardClick: (index: number) => void
+	isCurrentTurn: boolean
+}
+
+enum ColCount {
+	col4 = "",
+	col6 = "lg:grid-cols-6",
+	col8 = "lg:grid-cols-7",
+	col16 = "lg:grid-cols-7",
+	col32 = "lg:grid-cols-7",
+}
+
+export function Grid({ cards, flippedIndices, matchedPairs, onCardClick, isCurrentTurn, size }: GridProps) {
+	const className = ColCount[`col${size}`]
+	return (
+		<div className={`grid grid-cols-4  gap-2 p-4 ${className}`}>
+			{cards.map((value, index) => (
+				<Card
+					// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+					key={value + index}
+					value={value}
+					isFlipped={flippedIndices.includes(index)}
+					isMatched={matchedPairs.includes(value)}
+					onClick={() => onCardClick(index)}
+					disabled={!isCurrentTurn || flippedIndices.includes(index) || matchedPairs.includes(value)}
+				/>
+			))}
+		</div>
+	)
+}

app/components/game/Leaderboard.tsx

@@ -0,0 +1,32 @@
+import type { Player } from "~/routes/rooms.$roomId"
+import { cn } from "~/utils/css"
+
+export function Leaderboard({ players, currentTurn }: { players: Player[]; currentTurn: string | null }) {
+	const sortedPlayers = [...players].sort((a, b) => b.score - a.score)
+
+	return (
+		<div className="bg-white p-4 rounded-lg shadow-md min-w-80">
+			<h2 className="text-xl font-semibold mb-4">Leaderboard</h2>
+			<div className="space-y-2">
+				{sortedPlayers.map((player) => (
+					<div
+						key={player.id}
+						className={cn(
+							"flex items-center justify-between p-2 rounded",
+							player.player?.name === currentTurn ? "bg-indigo-50" : "bg-gray-50"
+						)}
+					>
+						<div className="flex items-center gap-2">
+							<span>{player.player?.name}</span>
+							{player.player?.name === currentTurn && (
+								<span className="text-xs bg-indigo-100 text-indigo-800 px-2 py-0.5 rounded">Current Turn</span>
+							)}
+							{!player.isActive && <span className="text-xs text-gray-500">(inactive)</span>}
+						</div>
+						<span className="font-semibold">{player.score}</span>
+					</div>
+				))}
+			</div>
+		</div>
+	)
+}