Computer Science & Software Engineering

Course Progress 0/0
Week 9 Game API

Game API

2 min read
  • Building Leaderboards with CRUD
    • Two Types of Leaderboards
    • Setup Steps
    • HTTP Methods (CRUD Operations)
    • Interactive: API Restaurant Simulator
      • Quick Reference: CRUD Operations

Building Leaderboards with CRUD

Learn to implement dynamic and elementary leaderboard systems

Two Types of Leaderboards

Dynamic Leaderboard
  • Real-time updates as players improve
  • Tracks progress over time
  • Uses UPDATE to modify scores
  • Best for: Games with multiple attempts
Example: High score tracking, speed runs, skill progression
Elementary Leaderboard
  • One-time submission per user
  • Fixed rankings after completion
  • Uses POST only to submit
  • Best for: Quizzes, competitions, challenges
Example: Quiz scores, contest entries, test results

Setup Steps

  1. Log in to your account at pages.opencodingsociety.com/login
  2. Play the game! Then press esc to save your score
  3. Toggle the leaderboard. Choose Dynamic Leaderboard to see your saved score ranked!
⚠️ Important: You must be logged in! Without authentication, the database won't know who owns the stats.

HTTP Methods (CRUD Operations)

GET → Retrieve / Read
BOTH LEADERBOARDS

Purpose: Retrieve data from the server. Think of this as asking the database for your stats.
Use case: Displaying current leaderboard rankings, checking user scores, loading game state.

View Code Example 
const base =
    window.javaBackendUrl ||
    (location.hostname === 'localhost' ? 'http://localhost:8585' : javaURI);

const res = await fetch(
    `${base.replace(/\/$/, '')}/api/events/SCORE_COUNTER`,
    { 
        ...fetchOptions, 
        method: 'GET'
    }
);
POST → Create
BOTH LEADERBOARDS

Purpose: Send data to create a new resource. This adds you to the database initially.
Use case: First-time user registration, initial score submission, creating new game entry.

Elementary Leaderboard: This is the ONLY method you need! One POST per user.
View Code Example 
const endpoint = '/api/events/ELEMENTARY_LEADERBOARD';
console.log('POST endpoint:', endpoint);

const base =
    window.javaBackendUrl ||
    (location.hostname === 'localhost' ? 'http://localhost:8585' : javaURI);

const url = `${base.replace(/\/$/, '')}${endpoint}`;
console.log('Full URL:', url);

// Create payload matching Java backend AlgorithmicEvent structure
const requestBody = {
    payload: {
        user: name,
        score: score,
        gameName: this.gameName
    }
};
console.log('Payload:', JSON.stringify(requestBody));

// POST to backend - using fetchOptions for proper authentication
const res = await fetch(
    url,
    {
        ...fetchOptions,
        method: 'POST',
        headers: {
            ...fetchOptions?.headers,
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(requestBody)
    }
);
DELETE → Remove
BOTH LEADERBOARDS

Purpose: Remove data from the server. Permanently delete a user's entry or stats.
Use case: User requests account deletion, removing invalid entries, clearing old data, resetting progress.

⚠️ Warning: DELETE is permanent! Always confirm before deleting user data.
View Code Example 
const base =
    window.javaBackendUrl ||
    (location.hostname === 'localhost' ? 'http://localhost:8585' : javaURI);

const url = `${base.replace(/\/$/, '')}/api/events/ELEMENTARY_LEADERBOARD/${id}`;
console.log('DELETE URL:', url);

// DELETE from backend - using fetchOptions for proper authentication
const res = await fetch(
    url,
    {
        ...fetchOptions,
        method: 'DELETE'
    }
);

Interactive: API Restaurant Simulator

You're a waiter at API Restaurant! Match each customer request to the correct HTTP method

Tips Earned: $0 / $5

Quick Reference: CRUD Operations

Operation HTTP Method Purpose Example
Read GET Retrieve data View leaderboard
Create POST Add new data Submit first score
Update PUT Modify existing Beat high score
Delete DELETE Remove data Clear account

Course Timeline