timotheeg
commented
3 years ago This is sort of done, custom layouts can be made locally at least, even if they cannot be be submitted into the platform yet to be shared between players.
Below are instructions to make any custom layout you want and connect it to nestrischamps:
1) get the local copy of nestrischamps
git clone https://github.com/timotheeg/nestrischamps.git2) In the folder public/views copy the file simple_1p_layout.html into a new file my_layout.html 3) Open the html file in an editor and edit line 249 from
const connection = new Connection();to
const connection = new Connection('ws://nestrischamps.herokuapp.com/ws/view/classic/YOUR_SECRET');(Your secret can be found in the renderers page here: https://nestrischamps.herokuapp.com/renderers)
4) Run a simple static web server from the folder public, if you have python, you can run this:
cd public
python -m SimpleHTTPServer 88885) Load your custom layout in a browser tab or in an OBS Browser source with this URL http://localhost:8888/views/my_layout.html (obviously, the port 8888 depends on your web server)
6) Edit the html/css/javascript to move things around and make them look anyhow you want. You mentioned you wanted to change the font, the other day. Attached is a quick sample where I use Comic Sans (because why not!) and shifted the stuff to the left (took just 1mins to make!)
Notes and background info:
1) The websocket URL basically lets you get game frames, you could build things from scratch just from it.
2) The local JS files like Player.js, constants.js, BinaryFrame.js, etc. help having a baseline functionality to parse the frames, compute the game state, and write into dom nodes. By right you don't have to touch those.
3) The player class is what writes the values into the dom, so when you instantiate it, you pass the dom references of whatever dom node you want to target, which means you can make a completely arbitrary rendering, even plain text if you wanted.
lastly, if you make a really awesome layout that you think could be reused, make a PR in github. It will need some extra changes (to the layout.js file for example) to make it public, but we can discuss that when we get there.
An upload system could come later.
This is to allow people to ad their own branding onto layouts. It's clear that restreamers do like to brand their layouts, and nestrischamps should allow it.
Technically, this is already possible in a way, non-hosted by nestrischamps.
Make a local html file (maybe start by taking one from this repo), load all the js assets like constants.js, player.js, etc., establish a webconnection to nestrischamps like this:
You would receive the player frames from the room you host, and you can do whatever you like with the data.
TODO: document this better