Hacky Holidays 2022: “Port Authority,” a WebSocket Game

Introduction

This challenge was part of the Deloitte Hackazon Hacky Holidays “Unlock the City” 2022 CTF (yeah, what a name!). Labeled under the #ppc category, which apparently stands for “professional programming challenge”, it was the final challenge under the “District 1” segment of the CTF and categorized under the Hard difficulty.

This was the first CTF problem which didn’t just challenge my ability to critically think and problem solve - it also challenged my motor control and hand-eye coordination. Why? Because I solved it by hand! I believe this challenge was meant to be solved using 100% programming, but I wanted to challenge myself. This was the process.

Initial Inspection & Interaction

We’re initially provided with a link that takes us to a nice-looking webgame called the “Port Traffic Control Interface”:

Although we can’t directly interact with the game using keyboard controls, there’s a manual on the top-right which details the task:

According to this, we can start playing the game and controlling the ships that appear through a WebSocket connection, which is an API that enables two-way communication between a user’s browser and a server. This documentation describes the protocol alongside how to open/close and send/receive using JavaScript.

Heavily referencing the aforementioned documentation, I started off by installing the WebSocket package with npm i ws, and then creating a solve.js with the following code:

1
// Make sure you install WebSocket with "npm i ws"!
2
const WebSocket = require('ws')
3
// Regex so that I can freely paste the URL when the instance is changed
4
const url = 'https://[REDACTED].challenge.hackazon.org/'
5
// Opens WebSocket connection
6
const socket = new WebSocket(`wss://${url.replace(/^https?:\/\//, '')}ws`)
7

8
// Runs on socket open, equivalent to .addEventListener()
9
socket.onopen = function () {
10
  console.log('[+] Connected!')
11
  // Converts object to string
12
  socket.send(
13
    JSON.stringify({
14
      type: 'START_GAME',
15
      level: 1,
16
    }),
17
  )
18
}
19

20
// Runs when output from server is received
21
socket.onmessage = function (event) {
22
  // Output is received in event
23
  console.log(`[-] ${event.data}`)
24
}

Look what happens when we establish a connection - the game starts running, and we start receiving per-tick input from the server in our console:

$ node test.js
[+] Connected!
[-] {"type":"GAME_START","level":{"id":1,"board":{"width":1886,"height":1188,"obstructions":[{"type":"HARBOUR_BORDER","area":[{"x":577,"y":0},{"x":627,"y":215.7142857142857}]},{"type":"HARBOUR_BORDER","area":[{"x":875,"y":0},{"x":925,"y":215.7142857142857}]},{"type":"BORDER_ROCK","area":[{"x":0,"y":0},{"x":577,"y":51}]},{"type":"BORDER_ROCK","area":[{"x":925,"y":0},{"x":1886,"y":51}]}],"harbour":[{"x":700,"y":0},{"x":850,"y":107.85714285714285}]},"mechanics":{"borderCollision":false,"sequentialDocking":true},"ships":[null]}}
[-] {"type":"TICK","ships":[{"type":"SHIP_6","area":[{"x":472,"y":795},{"x":532,"y":1063.75}],"direction":"UP","speed":3,"id":0,"isDocked":false}]}
[-] {"type":"TICK","ships":[{"type":"SHIP_6","area":[{"x":472,"y":795},{"x":532,"y":1063.75}],"direction":"UP","speed":3,"id":0,"isDocked":false}]}
[-] {"type":"TICK","ships":[{"type":"SHIP_6","area":[{"x":472,"y":792},{"x":532,"y":1060.75}],"direction":"UP","speed":3,"id":0,"isDocked":false}]}
[-] {"type":"TICK","ships":[{"type":"SHIP_6","area":[{"x":472,"y":789},{"x":532,"y":1057.75}],"direction":"UP","speed":3,"id":0,"isDocked":false}]}
...

Let’s see what happens when we send the SHIP_STEER command to the server after five seconds. We can do that with the setTimeout() method in our socket.onopen listener:

9
socket.onopen = function() {
10
    console.log("[+] Connected!");
11
    // Converts object to string
12
    socket.send(JSON.stringify({
13
        "type": "START_GAME",
14
        "level": 1
15
    }));
16
    // Sends steer command after one second
17
    setTimeout(() => {
18
        socket.send(JSON.stringify({
19
            "type": "SHIP_STEER",
20
            "shipId": 0
21
        }));
22
    }, 5000);
23
};

From the provided GIF, we can see that the ship will turn clockwise on its central point when told to steer!

With this, we have a goal: get the ship into the port by sending JSON instructions to the WebSocket server. However, it’s definitely a good idea to create some quality-of-life features first, such as:

• A way to convert our JSON data into an object we can reference
• A class which can construct objects for each ship
• An HTML/JS “controller”, which can be used to steer the ships with UI and to start new levels

Firstly, cleaning up the output involves parsing what we receive from the server, which we can do with the JSON.parse() method. We’ll assign it into a variable named obj (and also delete our steer-testing code):

16
// Sends steer command after one second
17
    setTimeout(() => {
18
        socket.send(JSON.stringify({
19
            "type": "SHIP_STEER",
20
            "shipId": 0
21
        }));
22
    }, 5000);
23
};
24

25
// Runs when output from server is received
26
socket.onmessage = function(event) {
27
    // Output is received in event
28
    console.log(`[-] ${event.data}`);
29
    // Converts server output into object
30
    let obj = JSON.parse(event.data);
31
};

Each tick, obj will change to an object structured this way:

1
{
2
  "type": "TICK",
3
  "ships": [
4
    {
5
      "type": "SHIP_6",
6
      "area": [
7
        {
8
          "x": 472,
9
          "y": 795
10
        },
11
        {
12
          "x": 532,
13
          "y": 1063.75
14
        }
15
      ],
16
      "direction": "UP",
17
      "speed": 3,
18
      "id": 0,
19
      "isDocked": false
20
    }
21
  ]
22
}

Check out the obj.type key - there’ll be multiple types of these (including but not limited to "LOSS", "GAME_START"). We’ll make it so that if obj.type is "TICK", it will create a new Class instance for each object in the obj.ships array:

18
class Ship {
19
    // Initializes class object instance
20
    constructor(id, topLeft, bottomRight, direction) {
21
        this.id = id;
22
        this.topLeft = topLeft;
23
        this.bottomRight = bottomRight;
24
        this.direction = direction;
25
    }
26
    // Getter + abusing template literals
27
    get printState() {
28
        return `ID: ${this.id} | (${Math.floor(this.topLeft.x)},
29
${Math.floor(this.topLeft.y)}) (${Math.floor(this.bottomRight.x)},
30
${Math.floor(this.bottomRight.y)}) | DIR: ${this.direction}`;
31
    }
32
}
33

34
// Runs when output from server is received
35
socket.onmessage = function(event) {
36
    // Converts server output into object
37
    let obj = JSON.parse(event.data);
38
    if(obj.type == "TICK") {
39
        let ships = [];
40
        // For each ship in obj.ships, push class object into ships array
41
        for(const i of obj.ships) {
42
            ships.push(new Ship(i.id, i.area[0], i.area[1], i.direction));
43
        }
44
        // Call the string literal getter
45
        for(const i of ships) {
46
            console.log(i.printState);
47
        }
48
    }
49
};

With this new Class, we can get both our own ships array and really clean logging from the server:

$ node test.js
[+] Connected!
ID: 0 | (211, 256) (271, 524) | DIR: UP
ID: 0 | (211, 256) (271, 524) | DIR: UP
ID: 0 | (211, 252) (271, 520) | DIR: UP
ID: 0 | (211, 248) (271, 516) | DIR: UP
...

Let’s finally get to solving the challenge. I’ll use subposts to break down each level.