Figure out how to do the actual shit

[AppleBetas]

No description provided.

[AppleBetas]

The board appears to be 1024x1024 1000x1000

[AppleBetas]

You can see the file JS loads here: https://www.reddit.com/api/place/board-bitmap

Sadly, it seems to be in a proprietary format.

[AppleBetas]

        T.getCanvasBitmapState().then(function(e, t) {
            if (!t)
                return;
            Dt(), c.clearRectFromDisplay(Ct, Ot, kt, 1), h.setInitialState(t), wt && Nt(), h.isZoomedIn && h.toggleZoom()

This gets downloads the canvas (and parses it?), shown here:

        getCanvasBitmapState: function() {
            function o(e) {
                r || (r = (new Uint32Array(e.buffer, 0, 1))[0], e = new Uint8Array(e.buffer, 4));
                for (var t = 0; t < e.byteLength; t++)
                    i[s + 2 * t] = e[t] >> 4, i[s + 2 * t + 1] = e[t] & 15;
                s += e.byteLength * 2
            }
            var e = $.Deferred(),
                r,
                i = new Uint8Array(t.config.place_canvas_width * t.config.place_canvas_height),
                s = 0;
            if (window.fetch)
                fetch(n("/api/place/board-bitmap"), {
                    credentials: "include"
                }).then(function(t) {
                    function n(t) {
                        t.read().then(function(s) {
                            s.done ? e.resolve(r, i) : (o(s.value), n(t))
                        })
                    }
                    if (!t.body || !t.body.getReader) {
                        t.arrayBuffer().then(function(t) {
                            o(new Uint8Array(t)), e.resolve(r, i)
                        });
                        return
                    }
                    n(t.body.getReader())
                });
            else {
                var u = new XMLHttpRequest;
                u.responseType = "arraybuffer";
                var a = u.open("GET", n("/api/place/board-bitmap"), !0);
                u.onload = function(t) {
                    var n = u.response;
                    n || e.resolve();
                    var s = new Uint8Array(n);
                    o(s), e.resolve(r, i)
                }, u.send(null)
            }
            return e.promise()
        },

After that, it draws it, clearing the rect before calling setInitialState:

        setInitialState: function(e) {
            var t = [],
                n,
                r;
            for (var i = 0; i < e.length; i++)
                n = e[i], r = this.getPaletteColorABGR(n), u.setBufferState(i, r), n > 0 && (this.state[i] = n);
            u.drawBufferToDisplay()
        },

[AppleBetas]

After fucking around with this for far too long, I think we should do it this way.

Pixels will be loaded from a static PNG file, drawn on as needed.

When a pixel is placed:

• Placed or the pixel at location is recorded in DB (so users can click on a pixel and see who placed it), overwriting previous data for this location if necessary
• Static PNG file is updated with new data

[AppleBetas]

An even better way might just be to

• Have no static files

• At launch:

  • Load all pixels from database into a PNG file placed in memory (its pretty small so no worries, I'd say 5 MB at max)

This pixel file will be served to all clients from the API on page load

• On block place:
  • Update database to reflect it
  • Update PNG file in memory
  • Send websocket message to all clients telling them to draw it on their canvases

Corruption-proof, memory-safe, fast. Much better.

@nullpixel1 implement the server side of this when you awaken. Good night.

[AppleBetas]

Client-side loading is done

[nullpixel]

tried to start in 2ec87a6