Init
This commit is contained in:
Johnny322
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
node_modules/
|
||||||
18
index.html
Normal file
18
index.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Music Jeopardy</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1535
package-lock.json
generated
Normal file
1535
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
package.json
Normal file
19
package.json
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "music-jeopardy",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue": "^3.2.47"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^2.3.4",
|
||||||
|
"vite": "^2.9.16",
|
||||||
|
"typescript": "^4.9.5",
|
||||||
|
"vue-tsc": "^1.0.24"
|
||||||
|
}
|
||||||
|
}
|
||||||
435
src/App.vue
Normal file
435
src/App.vue
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app">
|
||||||
|
<header class="app-header">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Music Jeopardy</p>
|
||||||
|
<h1>Track the Beat, Claim the Points</h1>
|
||||||
|
</div>
|
||||||
|
<div v-if="step === 'game'" class="selector-pill">
|
||||||
|
<span class="label">Selecting</span>
|
||||||
|
<span class="value">{{ currentSelector?.name || '—' }}</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="app-main">
|
||||||
|
<section v-if="step === 'setup'" class="panel">
|
||||||
|
<h2>Team Setup</h2>
|
||||||
|
<p class="hint">Add teams, name them, and create their color gradients.</p>
|
||||||
|
|
||||||
|
<div class="teams-grid">
|
||||||
|
<div v-for="team in teams" :key="team.id" class="team-card">
|
||||||
|
<div class="team-card-header">
|
||||||
|
<input
|
||||||
|
v-model="team.name"
|
||||||
|
class="input"
|
||||||
|
placeholder="Team name"
|
||||||
|
/>
|
||||||
|
<button class="ghost" @click="removeTeam(team.id)">Remove</button>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-preview" :style="teamGradient(team)"></div>
|
||||||
|
<div class="color-row">
|
||||||
|
<label>
|
||||||
|
Color A
|
||||||
|
<input v-model="team.colorA" type="color" />
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Color B
|
||||||
|
<input v-model="team.colorB" type="color" />
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="add-card" @click="addTeam">
|
||||||
|
<span>+ Add Team</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button class="primary" :disabled="!canProceed" @click="goToSelect">
|
||||||
|
Next: Choose Game
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section v-if="step === 'select'" class="panel">
|
||||||
|
<h2>Select a Game</h2>
|
||||||
|
<p class="hint">
|
||||||
|
Games are loaded from <code>src/Data</code>. Each subfolder becomes a
|
||||||
|
playable game.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div v-if="games.length === 0" class="empty-state">
|
||||||
|
<p>No games found yet.</p>
|
||||||
|
<p>
|
||||||
|
Add folders in <code>src/Data/<GameName>/<Category></code>
|
||||||
|
with <code>Songs</code> and <code>Answers</code> subfolders.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="games-grid" v-else>
|
||||||
|
<button
|
||||||
|
v-for="game in games"
|
||||||
|
:key="game.name"
|
||||||
|
class="game-card"
|
||||||
|
@click="startGame(game)"
|
||||||
|
>
|
||||||
|
<h3>{{ game.name }}</h3>
|
||||||
|
<p>{{ game.categories.length }} categories</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button class="ghost" @click="step = 'setup'">Back</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section v-if="step === 'game'" class="game-layout">
|
||||||
|
<aside class="scoreboard">
|
||||||
|
<h2>Teams</h2>
|
||||||
|
<div class="team-list">
|
||||||
|
<button
|
||||||
|
v-for="team in teams"
|
||||||
|
:key="team.id"
|
||||||
|
class="team-score-card"
|
||||||
|
:class="{ active: team.id === currentSelectorId }"
|
||||||
|
:style="teamGradient(team)"
|
||||||
|
@click="awardPoints(team.id)"
|
||||||
|
:disabled="!canAward"
|
||||||
|
>
|
||||||
|
<div class="team-name">{{ team.name }}</div>
|
||||||
|
<div class="team-score">{{ team.score }}</div>
|
||||||
|
<div v-if="team.id === lastAwardedTeamId" class="award-tag">
|
||||||
|
Last Award
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="controls">
|
||||||
|
<button class="ghost" @click="resetGame">Reset Game</button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="board">
|
||||||
|
<div class="board-grid">
|
||||||
|
<div
|
||||||
|
v-for="(category, cIndex) in selectedGame?.categories || []"
|
||||||
|
:key="category.name"
|
||||||
|
class="category-column"
|
||||||
|
>
|
||||||
|
<div class="category-title">{{ category.name }}</div>
|
||||||
|
<button
|
||||||
|
v-for="(clue, qIndex) in category.clues"
|
||||||
|
:key="clue.points"
|
||||||
|
class="tile"
|
||||||
|
:class="tileClass(cIndex, qIndex)"
|
||||||
|
:style="tileStyle(cIndex, qIndex)"
|
||||||
|
:disabled="tileDisabled(cIndex, qIndex)"
|
||||||
|
@click="handleTileClick(cIndex, qIndex)"
|
||||||
|
@contextmenu.prevent="handleTileRightClick(cIndex, qIndex)"
|
||||||
|
>
|
||||||
|
<span v-if="tileStatus(cIndex, qIndex) === 'available'">
|
||||||
|
{{ clue.points }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="tileStatus(cIndex, qIndex) === 'playing'">
|
||||||
|
Playing
|
||||||
|
</span>
|
||||||
|
<span v-else-if="tileStatus(cIndex, qIndex) === 'paused'">
|
||||||
|
Paused
|
||||||
|
</span>
|
||||||
|
<span v-else-if="tileStatus(cIndex, qIndex) === 'guessed'">
|
||||||
|
Guessed
|
||||||
|
</span>
|
||||||
|
<span v-else-if="tileStatus(cIndex, qIndex) === 'won'">
|
||||||
|
Won
|
||||||
|
</span>
|
||||||
|
<span v-else>Skipped</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="player-panel">
|
||||||
|
<div class="player-header">
|
||||||
|
<h3>Now Playing</h3>
|
||||||
|
<p>
|
||||||
|
Left click the active tile to pause/guess. Right click to resume
|
||||||
|
or skip.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="player-body">
|
||||||
|
<audio
|
||||||
|
ref="player"
|
||||||
|
v-if="currentClipUrl"
|
||||||
|
:src="currentClipUrl"
|
||||||
|
controls
|
||||||
|
></audio>
|
||||||
|
<div v-else class="player-empty">
|
||||||
|
Pick a tile to start the round.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section v-if="step === 'end'" class="panel end-panel">
|
||||||
|
<h2>Final Scores</h2>
|
||||||
|
<div class="winner-banner">
|
||||||
|
<span>Winner</span>
|
||||||
|
<strong>{{ winnerNames }}</strong>
|
||||||
|
</div>
|
||||||
|
<div class="teams-grid">
|
||||||
|
<div
|
||||||
|
v-for="team in teams"
|
||||||
|
:key="team.id"
|
||||||
|
class="team-card"
|
||||||
|
:class="{ winner: winnerIds.includes(team.id) }"
|
||||||
|
>
|
||||||
|
<div class="gradient-preview" :style="teamGradient(team)"></div>
|
||||||
|
<h3>{{ team.name }}</h3>
|
||||||
|
<p class="score">{{ team.score }} pts</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button class="primary" @click="step = 'setup'">
|
||||||
|
Start New Game
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { nextTick } from 'vue'
|
||||||
|
import { gameData, type Game } from './dataLoader'
|
||||||
|
|
||||||
|
type Team = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
colorA: string
|
||||||
|
colorB: string
|
||||||
|
score: number
|
||||||
|
}
|
||||||
|
|
||||||
|
type TileEntry = {
|
||||||
|
status: 'available' | 'playing' | 'paused' | 'guessed' | 'won' | 'void'
|
||||||
|
lastTeamId: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
type TileMap = Record<string, TileEntry>
|
||||||
|
|
||||||
|
const makeTeam = (index: number): Team => ({
|
||||||
|
id: `team-${Date.now()}-${index}`,
|
||||||
|
name: `Team ${index + 1}`,
|
||||||
|
colorA: '#3dd6ff',
|
||||||
|
colorB: '#fbd72b',
|
||||||
|
score: 0
|
||||||
|
})
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
step: 'setup',
|
||||||
|
teams: [makeTeam(0), makeTeam(1)] as Team[],
|
||||||
|
games: gameData as Game[],
|
||||||
|
selectedGame: null as Game | null,
|
||||||
|
tiles: {} as TileMap,
|
||||||
|
currentTileKey: null,
|
||||||
|
currentClipUrl: '',
|
||||||
|
currentSelectorId: null,
|
||||||
|
lastAwardedTeamId: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
canProceed() {
|
||||||
|
return this.teams.length > 0 && this.teams.every((team) => team.name.trim())
|
||||||
|
},
|
||||||
|
currentSelector() {
|
||||||
|
return this.teams.find((team) => team.id === this.currentSelectorId) || null
|
||||||
|
},
|
||||||
|
canAward() {
|
||||||
|
return !!this.currentTileKey && this.tiles[this.currentTileKey]?.status === 'guessed'
|
||||||
|
},
|
||||||
|
winnerIds() {
|
||||||
|
const maxScore = Math.max(...this.teams.map((team) => team.score))
|
||||||
|
return this.teams.filter((team) => team.score === maxScore).map((team) => team.id)
|
||||||
|
},
|
||||||
|
winnerNames() {
|
||||||
|
return this.teams
|
||||||
|
.filter((team) => this.winnerIds.includes(team.id))
|
||||||
|
.map((team) => team.name)
|
||||||
|
.join(', ')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getPlayer() {
|
||||||
|
return this.$refs.player as HTMLAudioElement | undefined
|
||||||
|
},
|
||||||
|
teamGradient(team: Team) {
|
||||||
|
return {
|
||||||
|
background: `linear-gradient(135deg, ${team.colorA}, ${team.colorB})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addTeam() {
|
||||||
|
this.teams.push(makeTeam(this.teams.length))
|
||||||
|
},
|
||||||
|
removeTeam(id: string) {
|
||||||
|
if (this.teams.length === 1) return
|
||||||
|
this.teams = this.teams.filter((team) => team.id !== id)
|
||||||
|
},
|
||||||
|
goToSelect() {
|
||||||
|
this.step = 'select'
|
||||||
|
},
|
||||||
|
startGame(game: Game) {
|
||||||
|
this.selectedGame = game
|
||||||
|
this.tiles = {}
|
||||||
|
this.currentTileKey = null
|
||||||
|
this.currentClipUrl = ''
|
||||||
|
this.lastAwardedTeamId = null
|
||||||
|
this.teams = this.teams.map((team) => ({ ...team, score: 0 }))
|
||||||
|
const randomTeam = this.teams[Math.floor(Math.random() * this.teams.length)]
|
||||||
|
this.currentSelectorId = randomTeam?.id || null
|
||||||
|
this.step = 'game'
|
||||||
|
},
|
||||||
|
resetGame() {
|
||||||
|
this.step = 'select'
|
||||||
|
this.selectedGame = null
|
||||||
|
this.tiles = {}
|
||||||
|
this.currentTileKey = null
|
||||||
|
this.currentClipUrl = ''
|
||||||
|
this.lastAwardedTeamId = null
|
||||||
|
},
|
||||||
|
tileKey(cIndex: number, qIndex: number) {
|
||||||
|
return `${cIndex}-${qIndex}`
|
||||||
|
},
|
||||||
|
tileStatus(cIndex: number, qIndex: number) {
|
||||||
|
const key = this.tileKey(cIndex, qIndex)
|
||||||
|
return this.tiles[key]?.status || 'available'
|
||||||
|
},
|
||||||
|
tileDisabled(cIndex: number, qIndex: number) {
|
||||||
|
const status = this.tileStatus(cIndex, qIndex)
|
||||||
|
if (status === 'won' || status === 'void') return true
|
||||||
|
if (!this.currentTileKey) return false
|
||||||
|
return this.currentTileKey !== this.tileKey(cIndex, qIndex)
|
||||||
|
},
|
||||||
|
tileClass(cIndex: number, qIndex: number) {
|
||||||
|
const status = this.tileStatus(cIndex, qIndex)
|
||||||
|
return {
|
||||||
|
playing: status === 'playing',
|
||||||
|
paused: status === 'paused',
|
||||||
|
guessed: status === 'guessed',
|
||||||
|
won: status === 'won',
|
||||||
|
void: status === 'void'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tileStyle(cIndex: number, qIndex: number) {
|
||||||
|
const key = this.tileKey(cIndex, qIndex)
|
||||||
|
const entry = this.tiles[key]
|
||||||
|
if (entry?.status !== 'won' || !entry.lastTeamId) return {}
|
||||||
|
const team = this.teams.find((t) => t.id === entry.lastTeamId)
|
||||||
|
if (!team) return {}
|
||||||
|
return this.teamGradient(team)
|
||||||
|
},
|
||||||
|
async handleTileClick(cIndex: number, qIndex: number) {
|
||||||
|
const key = this.tileKey(cIndex, qIndex)
|
||||||
|
const status = this.tileStatus(cIndex, qIndex)
|
||||||
|
const clue = this.selectedGame?.categories[cIndex].clues[qIndex]
|
||||||
|
|
||||||
|
if (!clue || !clue.song) return
|
||||||
|
|
||||||
|
if (status === 'available') {
|
||||||
|
this.tiles[key] = { status: 'playing', lastTeamId: null }
|
||||||
|
this.currentTileKey = key
|
||||||
|
this.currentClipUrl = encodeURI(clue.song)
|
||||||
|
await nextTick()
|
||||||
|
const player = this.getPlayer()
|
||||||
|
if (player) {
|
||||||
|
player.currentTime = 0
|
||||||
|
player.load()
|
||||||
|
player.play().catch(() => {})
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 'playing') {
|
||||||
|
this.tiles[key].status = 'paused'
|
||||||
|
const player = this.getPlayer()
|
||||||
|
player?.pause()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 'paused') {
|
||||||
|
this.tiles[key].status = 'guessed'
|
||||||
|
this.lastAwardedTeamId = null
|
||||||
|
if (clue.answer) {
|
||||||
|
this.currentClipUrl = encodeURI(clue.answer)
|
||||||
|
await nextTick()
|
||||||
|
const player = this.getPlayer()
|
||||||
|
if (player) {
|
||||||
|
player.currentTime = 0
|
||||||
|
player.load()
|
||||||
|
player.play().catch(() => {})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 'guessed') {
|
||||||
|
if (!this.lastAwardedTeamId) return
|
||||||
|
this.tiles[key].status = 'won'
|
||||||
|
this.tiles[key].lastTeamId = this.lastAwardedTeamId
|
||||||
|
this.currentSelectorId = this.lastAwardedTeamId
|
||||||
|
this.currentTileKey = null
|
||||||
|
this.currentClipUrl = ''
|
||||||
|
this.lastAwardedTeamId = null
|
||||||
|
this.checkEnd()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleTileRightClick(cIndex: number, qIndex: number) {
|
||||||
|
const key = this.tileKey(cIndex, qIndex)
|
||||||
|
const status = this.tileStatus(cIndex, qIndex)
|
||||||
|
if (key !== this.currentTileKey) return
|
||||||
|
|
||||||
|
if (status === 'paused') {
|
||||||
|
this.tiles[key].status = 'playing'
|
||||||
|
const player = this.getPlayer()
|
||||||
|
player?.play().catch(() => {})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === 'playing') {
|
||||||
|
this.tiles[key].status = 'void'
|
||||||
|
this.currentTileKey = null
|
||||||
|
this.currentClipUrl = ''
|
||||||
|
const player = this.getPlayer()
|
||||||
|
player?.pause()
|
||||||
|
this.checkEnd()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
awardPoints(teamId: string) {
|
||||||
|
if (!this.canAward) return
|
||||||
|
const key = this.currentTileKey
|
||||||
|
if (!key || !this.selectedGame) return
|
||||||
|
const [cIndex, qIndex] = key.split('-').map(Number)
|
||||||
|
const clue = this.selectedGame.categories[cIndex].clues[qIndex]
|
||||||
|
this.teams = this.teams.map((team) =>
|
||||||
|
team.id === teamId ? { ...team, score: team.score + clue.points } : team
|
||||||
|
)
|
||||||
|
this.lastAwardedTeamId = teamId
|
||||||
|
if (this.tiles[key]) {
|
||||||
|
this.tiles[key].lastTeamId = teamId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkEnd() {
|
||||||
|
if (!this.selectedGame) return
|
||||||
|
const allTiles: TileEntry['status'][] = []
|
||||||
|
this.selectedGame.categories.forEach((category, cIndex) => {
|
||||||
|
category.clues.forEach((_, qIndex) => {
|
||||||
|
allTiles.push(this.tileStatus(cIndex, qIndex))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const finished = allTiles.every((status) => status === 'won' || status === 'void')
|
||||||
|
if (finished) {
|
||||||
|
this.step = 'end'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
1
src/Data/.gitkeep
Normal file
1
src/Data/.gitkeep
Normal file
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
BIN
src/Data/Jeff/Billboard Number 1's/Answers/1.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Answers/1.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Answers/2.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Answers/2.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Answers/3.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Answers/3.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Answers/4.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Answers/4.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Answers/5.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Answers/5.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Songs/1.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Songs/1.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Songs/2.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Songs/2.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Songs/3.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Songs/3.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Songs/4.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Songs/4.mp3
Normal file
Binary file not shown.
BIN
src/Data/Jeff/Billboard Number 1's/Songs/5.mp3
Normal file
BIN
src/Data/Jeff/Billboard Number 1's/Songs/5.mp3
Normal file
Binary file not shown.
101
src/dataLoader.ts
Normal file
101
src/dataLoader.ts
Normal file
@@ -0,0 +1,101 @@
|
|||||||
|
type Clue = {
|
||||||
|
number: number
|
||||||
|
points: number
|
||||||
|
song: string | null
|
||||||
|
answer: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
type Category = {
|
||||||
|
name: string
|
||||||
|
songs: Record<number, string>
|
||||||
|
answers: Record<number, string>
|
||||||
|
clues: Clue[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type Game = {
|
||||||
|
name: string
|
||||||
|
categories: Category[]
|
||||||
|
}
|
||||||
|
|
||||||
|
type GameMap = Record<
|
||||||
|
string,
|
||||||
|
{
|
||||||
|
name: string
|
||||||
|
categories: Record<string, Category>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
|
||||||
|
const songFiles = import.meta.globEager('./Data/*/*/Songs/*.mp3') as Record<
|
||||||
|
string,
|
||||||
|
{ default: string }
|
||||||
|
>
|
||||||
|
|
||||||
|
const answerFiles = import.meta.globEager('./Data/*/*/Answers/*.mp3') as Record<
|
||||||
|
string,
|
||||||
|
{ default: string }
|
||||||
|
>
|
||||||
|
|
||||||
|
const getParts = (path: string) => {
|
||||||
|
const normalized = path.replace(/\\/g, '/')
|
||||||
|
const parts = normalized.split('/')
|
||||||
|
const dataIndex = parts.indexOf('Data')
|
||||||
|
if (dataIndex === -1) return null
|
||||||
|
const game = parts[dataIndex + 1]
|
||||||
|
const category = parts[dataIndex + 2]
|
||||||
|
const type = parts[dataIndex + 3]
|
||||||
|
const file = parts[dataIndex + 4]
|
||||||
|
return { game, category, type, file }
|
||||||
|
}
|
||||||
|
|
||||||
|
const addEntry = (target: GameMap, info: ReturnType<typeof getParts>, url: string) => {
|
||||||
|
if (!info) return
|
||||||
|
const { game, category, type, file } = info
|
||||||
|
const number = Number(file.replace('.mp3', ''))
|
||||||
|
if (!Number.isFinite(number)) return
|
||||||
|
|
||||||
|
if (!target[game]) {
|
||||||
|
target[game] = {
|
||||||
|
name: game,
|
||||||
|
categories: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!target[game].categories[category]) {
|
||||||
|
target[game].categories[category] = {
|
||||||
|
name: category,
|
||||||
|
songs: {},
|
||||||
|
answers: {},
|
||||||
|
clues: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const bucket = type === 'Songs' ? 'songs' : 'answers'
|
||||||
|
target[game].categories[category][bucket][number] = url
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildGameData = (): Game[] => {
|
||||||
|
const games: GameMap = {}
|
||||||
|
Object.entries(songFiles).forEach(([path, module]) => {
|
||||||
|
addEntry(games, getParts(path), module.default)
|
||||||
|
})
|
||||||
|
Object.entries(answerFiles).forEach(([path, module]) => {
|
||||||
|
addEntry(games, getParts(path), module.default)
|
||||||
|
})
|
||||||
|
|
||||||
|
return Object.values(games).map((game) => {
|
||||||
|
const categories = Object.values(game.categories).map((category) => {
|
||||||
|
const clues = Array.from({ length: 5 }, (_, index) => {
|
||||||
|
const number = index + 1
|
||||||
|
return {
|
||||||
|
number,
|
||||||
|
points: number * 100,
|
||||||
|
song: category.songs[number] || null,
|
||||||
|
answer: category.answers[number] || null
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return { ...category, clues }
|
||||||
|
})
|
||||||
|
return { ...game, categories }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export const gameData = buildGameData()
|
||||||
|
export type { Game, Category, Clue }
|
||||||
1
src/env.d.ts
vendored
Normal file
1
src/env.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
5
src/main.ts
Normal file
5
src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './styles.css'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
422
src/styles.css
Normal file
422
src/styles.css
Normal file
@@ -0,0 +1,422 @@
|
|||||||
|
:root {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
color: #f6f4ef;
|
||||||
|
background: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100vh;
|
||||||
|
background: radial-gradient(circle at top, #1f2a44, #0b0f1f 60%);
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: 'Space Grotesk', sans-serif;
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: clamp(2.2rem, 2.5vw, 3rem);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
margin: 0 0 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #9fc4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-pill {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 999px;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-pill .label {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: #9fc4ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selector-pill .value {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-main {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: rgba(8, 12, 26, 0.75);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||||
|
border-radius: 24px;
|
||||||
|
padding: 32px;
|
||||||
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
font-size: 2rem;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hint {
|
||||||
|
margin-top: 0;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.teams-grid,
|
||||||
|
.games-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-card,
|
||||||
|
.game-card,
|
||||||
|
.add-card {
|
||||||
|
border-radius: 18px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 18px;
|
||||||
|
background: rgba(255, 255, 255, 0.04);
|
||||||
|
color: inherit;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-card.winner {
|
||||||
|
outline: 2px solid #fbd72b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-card-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-preview {
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 14px;
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-row label {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='color'] {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 36px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-card {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
min-height: 140px;
|
||||||
|
background: linear-gradient(135deg, rgba(61, 214, 255, 0.12), rgba(251, 215, 43, 0.12));
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
background: linear-gradient(135deg, #3dd6ff, #fbd72b);
|
||||||
|
color: #0d0f1c;
|
||||||
|
border: none;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
color: inherit;
|
||||||
|
padding: 10px 18px;
|
||||||
|
border-radius: 999px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost:disabled,
|
||||||
|
.primary:disabled,
|
||||||
|
.team-score-card:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: minmax(240px, 300px) 1fr;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scoreboard {
|
||||||
|
background: rgba(8, 12, 26, 0.8);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scoreboard h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: 'Bebas Neue', sans-serif;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score-card {
|
||||||
|
width: 100%;
|
||||||
|
border: none;
|
||||||
|
padding: 14px;
|
||||||
|
border-radius: 16px;
|
||||||
|
color: #0d0f1c;
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score-card.active {
|
||||||
|
outline: 2px solid #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-name {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-score {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.award-tag {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||||
|
gap: 12px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-column {
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-title {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile {
|
||||||
|
background: #1d3b8b;
|
||||||
|
color: #fbd72b;
|
||||||
|
border: none;
|
||||||
|
padding: 18px;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
min-height: 72px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.playing {
|
||||||
|
background: #fbd72b;
|
||||||
|
color: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.paused {
|
||||||
|
background: #f58b2b;
|
||||||
|
color: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.guessed {
|
||||||
|
background: #2bdc7b;
|
||||||
|
color: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.won {
|
||||||
|
background: #2a2f3f;
|
||||||
|
color: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tile.void {
|
||||||
|
background: #6b6f7b;
|
||||||
|
color: #0d0f1c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-panel {
|
||||||
|
background: rgba(8, 12, 26, 0.75);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 18px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
position: relative;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-header h3 {
|
||||||
|
margin: 0 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-header p {
|
||||||
|
margin: 0;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-body {
|
||||||
|
margin-top: 12px;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
min-height: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
audio {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 320px;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background: #000;
|
||||||
|
position: relative;
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-empty {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.end-panel {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.winner-banner {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-radius: 999px;
|
||||||
|
margin: 20px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.score {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
margin-top: 20px;
|
||||||
|
padding: 18px;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px dashed rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.game-layout {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-header {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["ES2020", "DOM"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"types": ["vite/client"]
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
|
||||||
|
}
|
||||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
assetsInclude: ['**/*.mp3'],
|
||||||
|
server: {
|
||||||
|
port: 5173
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user