LetterGories

by mrjordy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LetterGories</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <!-- Persistent Scoreboard on Left -->
  <div id="scoreBoard"></div>
  
  <!-- Setup Screen -->
  <div id="setupScreen" class="container">
    <h1>Enter Player Names</h1>
    <input type="text" id="playerNameInput" placeholder="Enter player name">
    <button id="addPlayerButton">Add Player</button>
    <ul id="playerList"></ul>
    <button id="startGameButton" disabled>Start Game</button>
  </div>

  <!-- Game Screen -->
  <div id="gameScreen" class="container" style="display: none;">
    <div id="gameHeader">
      <h2 id="turnDisplay"></h2>
    </div>
    
    <!-- Matchup Screen: Shows active player vs opponent for 5 seconds at start of round -->
    <div id="matchupScreen" style="display: none;">
      <h2 id="matchupText"></h2>
    </div>

    <!-- Category Selection Panel -->
    <div id="categorySelection" style="display: none;">
      <h1>Select a Category</h1>
      <button class="categoryBtn" data-cat="things">Things</button>
      <button class="categoryBtn" data-cat="places">Places</button>
      <button class="categoryBtn" data-cat="people">People</button>
      <button class="categoryBtn" data-cat="ideas">Ideas</button>
    </div>

    <!-- Category Display Panel -->
    <div id="categoryDisplay" style="display: none;">
      <h1 id="categoryTitle"></h1>
    </div>

    <!-- Question Prompt Display -->
    <div id="questionDisplay" style="display: none;">
      <h2 id="gameQuestion"></h2>
    </div>

    <!-- Alphabet Board -->
    <div id="alphabetBoard" style="display: none;"></div>

    <!-- Timer Display (hidden) -->
    <div id="timerDisplay">
      <h2 id="roundTimer"></h2>
    </div>
  </div>

  <script...

CSS

/* Base page styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #282c34;
    color: white;
    font-family: Arial, sans-serif;
    flex-direction: column;
    position: relative;
}

.container {
    text-align: center;
    width: 90%;
    max-width: 800px;
}

h1, h2 {
    margin-bottom: 10px;
}

input, button {
    font-size: 1em;
    padding: 10px;
    margin: 5px;
}

#playerList {
    list-style: none;
    padding: 0;
}

/* Persistent Scoreboard on the left */
#scoreBoard {
  position: fixed;
  top: 20px;
  left: 20px;
  background: rgba(0,0,0,0.6);
  padding: 10px;
  border-radius: 5px;
  font-size: 1.2em;
  z-index: 1000;
}

/* Styling for the alphabet board */
#alphabetBoard {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 70vh;
}

.letterButton {
    font-size: 3em;
    margin: 15px;
    padding: 30px;
    flex: 1 1 100px;
    max-width: 150px;
    background-color: #ccc;
    color: black;
    border: 2px solid white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.letterButton:hover:not(:disabled) {
    background-color: #ddd;
    transform: scale(1.1);
}

.letterButton:disabled {
    background-color: grey;
    cursor: not-allowed;
}

/* Turn display */
#turnDisplay {
    font-size: 1.8em;
    margin-bottom: 10px;
}

/* Hide the timer display */
#roundTimer {
    display: none;
}

/* Class to disable click/increment on elements */
.timeUp {
    pointer-events: none;
    opacity: 0.5;
}

/* Flash animation: flash red and white 5 times */
@keyframes flashAnim {
  0% { background-color: red; }
  50% { background-color: white; }
  100% { background-color: red; }
}

.flash {
  animation: flashAnim 0.5s ease-in-out 5;
  animation-fill-mode: forwards;
}

JavaScript

$(document).ready(function () {
  /***** SETUP PHASE *****/
  var players = [];  // Each player: { name: string, points: number }
  var currentPlayerIndex = 0;  // Active player for the round
  var currentOpponentIndex = -1;
  var currentCategory = "";
  var currentQuestion = "";
  var roundTimer = 0;
  var roundTimerInterval;
  var currentTurn;  // "active" or "opponent"
  var letterClickedCount = 0;
  var totalLetters = 26;
  var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
  var gameInProgress = false;

  // Category prompts for each category.
  var categoryPrompts = {
things: [
    "things you get in the mail",
    "things you do every day",
    "things you store items in",
    "things to do on a date",
    "things that can kill you",
    "things you buy for kids",
    "things that are found in a kitchen",
    "things you might forget at home",
    "things you need for a road trip",
    "things that make you laugh",
    "things you find in a toolbox",
    "things you wear on a cold day",
    "things that remind you of summer",
    "things you see on a billboard",
    "things you collect as a hobby",
    "things that have sentimental value",
    "things you could repurpose creatively",
    "things you might find in an office",
    "things you buy on impulse",
    "things that require regular maintenance",
    "things that accidentally break",
    "things that are surprisingly expensive",
    "things you might find at a garage sale",
    "things you use to decorate your home",
    "things you find at a flea market",
    "things you check off a bucket list",
    "things you use during a workout",
    "things that bring you comfort",
    "things you use to express creativity",
    "things you make with recycled materials"
  ],
  places: [
    "places to travel",
    "places to relax",
    "places to visit",
    "places with great food",
    "places that are spooky",
    "places you go on vacation",
    "places to find adventure",
    "places with beautiful...