Design concept. Pocket Pawns isn't a real app, and every player, game and rating here is a sample.

What is this?

This page is only the part you see, called the frontend. It looks like a live game room, but the opponent, the lobby and your rating are all made up inside this page. Nobody is on the other side.

Turn on Show requests to see what each button would ask a real server (the backend), and how it would answer, one step at a time. It's part of a series about the backend. This one covers how a page and a server talk, known as REST API design.

Pocket Pawns Chess that fits in your pocket.

Quick ten-minute games against people at your level. Find a table, make your move, say gg.

Watch the sample game

Game room

A sample game between two sample players. You play the light pieces. Press Next move to play your move, and your opponent replies.

Loaded with GET /games/you-vs-slowbishop

@slowbishop Sample Opponent's clock 10:00
@you Sample Your clock 10:00

Your move. You have the light pieces.

Moves

  1. No moves yet.

Resign this game? Your opponent wins.

Chat Sample

  • @slowbishop: hi! good luck

This chat is here as an example. Nothing you type is sent or saved.

Open tables

Players waiting for an opponent. Every table here is a sample, so joining one won't start a real game.

Loaded with GET /games?status=open&limit=3

3 tables open Sample

    Your corner

    Your rating, your last few games and how your pieces look.

    Loaded with GET /players/me

    How this section talks to the server

    An endpoint is an address on the server that the page can ask for something. This whole section uses just one: /players/me. "me" means whoever is signed in, so the same address works for every player.

    • GET When the page opens, it asks for your profile: name, rating, record and recent games.
    • PATCH When you press Save settings, it sends only what you changed.
    rating sample rating sample 1180

    @you

    Playing since March Sample

    12 wins9 losses3 draws
    • vs @pawnstorm77, 31 movesWon
    • vs @castle_early, on timeLost
    • vs @e4enjoyer, repetitionDraw

    Settings

    3 to 20 letters, numbers or underscores.

    Piece set

    Saved in this tab only. Nothing was sent.

    This form is here as an example. Nothing you type is sent or saved.

    Every button here is a request

    This game room is only the part you see, called the frontend. Here's how to peek at what it would ask a real server, the backend.

    1. Turn on Show requests at the top of the page.
    2. Press a button with a blue tag, like Next move. The tag shows what kind of request it is.
    3. Follow the trip, one step at a time. The card flips over and walks you from your browser to the server and back.

    On a wide screen, press Show on left to keep the walkthrough beside the board instead.