Comments (7)
The board appears to be 1024x1024 1000x1000
from place.
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.
from place.
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()
},
from place.
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
from place.
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.
from place.
Client-side loading is done
from place.
tried to start in 2ec87a6
from place.
Related Issues (20)
- Only ratelimit signups on success
- "My Profile" in navbar isn't selected when on logged in user's profile
- Board size config does not work properly HOT 4
- Comply with GDPR HOT 5
- Could not locate the bindings file. HOT 5
- Tab randomly crashes after a period of time HOT 6
- Zooming and panning at the same time results in being teleported to the middle of nowhere
- Allow users to keep their colour selected after placing HOT 1
- Zoom into the user's cursor position when using scroll wheel, not the middle of the screen
- Add ban reason to user notes HOT 1
- Make past actions easier to view HOT 1
- Rate-limit also counts legitimate sign in attempts HOT 2
- Logo broken?
- Updated to incompatible mongoose version HOT 2
- Title HOT 1
- > HOT 1
- test
- Some dependencies don't work HOT 2
- Need Some Help
- Dynasticrepo
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from place.