Bootcamp
Search…
5.POCE.3: AJAX Cards

Introduction

Create a 2-player High Card Game.

Database Schema

Users Table

column name
data type
description
example
id
SERIAL PRIMARY KEY
ID
1
email
TEXT
User's email
password
TEXT
Hashed password
jdh3732gd

Games Table

column name
data type
description
example
id
SERIAL PRIMARY KEY
ID
1
gameState
JSON
JSON data containing complete game state. This game state may include keys such as drawPile and discardPile, where each might store an array of card objects. We chose to store all game state in a single JSON column instead of separate JSON columns for each component of game state to simplify this module so that students can focus on AJAX and not DB schema.
{ drawPile: [{...}, {...}, ...], discardPile: [{...}, {...}, ...] }

GamesUsers Table

A join table. Game has many users. User has many games.
column name
data type
description
example
id
SERIAL PRIMARY KEY
ID
1
gameId
Foreign Key
Game ID
1
userId
Foreign Key
User ID
1

Base

Setup

  1. 1.
    Initialise a new DB as per the DB schema above.
  2. 2.
    Seed the DB with 2 users.

Game Requirements

Sample Game UI

(Create Game button not shown)

Requirements

  1. 1.
    When a user first lands on the page, ask them to log in or register. Copy user login functionality from 5.POCE.2: Bug Reports AJAX Users.
  2. 2.
    When a user clicks the Start Game button, the app creates a Game record in the DB and adds a random 2nd player to the game. If there are no users in the DB other than the 2 seeded users, then the app will choose the non-logged-in user as the random 2nd player.
  3. 3.
    When either player clicks the Deal button, the app deals cards to the players and evaluates who has won that hand. The app records the result in the DB and sends the result in a response to the user.
  4. 4.
    At any time, either user can click the Refresh button to see the current game status. Note that the Refresh button does not refresh the page- it sends an AJAX request to retrieve updated data from the DB and re-render part of the page using JavaScript.

Comfortable

Score

Keep a running score of each user's wins and display that score on the game page.

First to 3

A game ends when a player wins 3 times total. Once a game ends, prompt the players to start a new game. Add a column to our Game table (in both migrations and models) such that the Game table can record the winner of each game. The winner's identity will be stored as a foreign key ID to the Users table.

More Comfortable

Discards

When either user clicks Deal, allow them to specify how many cards get discarded before the app deals their cards. Show both users the discarded cards.

Game History

Create an EJS page in Express that displays a list of the login user's winning and losing games and any relevant information about those games.

Find Friends

When a user creates a game, let them choose from a dropdown list of users to play the game with.

Reference solution

Click here to see the reference solution for this post class.