log

January

January 11th

Started a work log. It occured to me last night that sitting down to work on my own projects has begun to feel more and more difficult. I work on code related things irregularly and have started a lot of different threads. It seems like it would be easier to pick up where I left off if I have a single place to look and see what I was last doing.

Work Goals:

• Further develop an (ethical) client base for remote coding work
• Complete a FOSS game using Clojurescript & Ethereum
• Complete a FOSS tool for teaching/learning
• Participate in the Clojurescript community
• Participate in the Ethereum community

What are my priorities? I’d like to be able to shift away from relief teaching and towards remote coding as my key income source. The ideal scenario would be making an income from a FOSS project, perhaps via Ethereum development? It seems far away. In the short term I think I need to develop my portfolio with the kind of work I want in the future. Another priority is converting the planning work I’ve done on my various projects into useful, working code.

It feels like the best course of action from here is identifying a single high value project and working on it until it is usable and testable by others.

Currently Active Projects:

ta

progress: 10%

The code is not actually that outdated, it just needs a little freshening up to fit the new re-frame fx stuff. What do I want from this project? At one point I felt that it could be of huge use to classroom teachers / resource producers, or at least myself. Talking to some other teachers about whether they would use the platform left me a little disheartened. Teachers have such different and chaotic work patterns that using such a structured system might actually be counterproductive. I’m not sure I have the time at the moment to work on this.

tzolkin

progress: 50% if art left as is, 30% if art rewrite continues

Another project delayed by an attempted rewrite! I really want to finish this as it would be fun to play, even just with friends. If I do go back to this I need to do the minimum possible to the art to make it sharable and go back to firebase or something like it. Could be useful to work on but no Ethereum relevance.

gateworld

progress: 5%

This one’s all over the place. I get stressed out just looking at all the notes and plans. Best case would be converting the Wave Function Collapse code into a simple library and releasing that.

glassfrog

progress: 5%

Best part of this project is that it could hypothetically be worked on alongside another ETH-based project. OR is that how I got in this position in the first place?? Best course of action is probably build something simple using ETH&cljs first, then use that knowledge to build glassfrog, then use glassfrog to build the next project?

emojitiles

progress: 10%

Probably my best option. A simple game using ETH and clojurescript. Gahh it’s depressing looking at these progress numbers. I’m getting tired of writing and not coding, let’s go!

Possible steps to building an emojitiles mvp:

• read teachers-nightmare code as gamedev refresher
• setup repo (pull in any stuff from other repos)
• design board data structure (EVM & cljs)
• code board state transformations (board, tile, loc) -> board (EVM & cljs)
• ui for board, selecting a tile, selecting a target location
• test until game seems fun
• code move passing
• play with others until game is actually fun

take breaks in the middle of tasks, it’s easier to go back to them?

emojitiles stuff is out of gateworld code and into new repo and started reading through district0x code https://github.com/district0x/memefactory/blob/master/project.clj https://github.com/district0x/district-ui-web3 https://github.com/district0x/d0xperiments

What is the emojitiles game?

• 2p game
• each player brings a stack of tiles (emojis)
• both stacks are combined to form a bag
• players each take 5 tiles at random from the bag to form their hand
• players take it in turns playing as many tiles as they wish from their hand to the board then refilling their hand to 5
• tiles are always placed adjacent to an existing tile
• some tiles have requirements about where they can be placed
• some tiles remove themselves or other tiles from the board
• some tiles are worth points
• once a player has reached 10 points they win

What makes the game unique?

• each week a new tile is added to the game and the rules for that tile are chosen by the winner of that weeks public tournament (!)
• playable with real-life tiles or in the browser

What is the architecture of the emojitiles network?

Ideally, no servers would be required, players either send moves to each other or the ETH network via their clients. Is a server required for some kind of peer discovery? Could running such a server be compensated via ETH from the game’s contracts?

Brushing up on state channels with: https://medium.com/blockchannel/state-channel-for-dummies-part-2-2ffef52220eb

January 12th

Still haven’t woken up properly, might just read some things and try and get a handle on peer-to-peer comms in the browser.

https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel

https://github.com/jiangts/webrtcljs/blob/master/src/cljs/rtc/data/handlers.cljs#L149

https://webrtchacks.com/datachannel-multiplayer-game/

WebRTC Tutorial - How does WebRTC work? (https://www.youtube.com/watch?v=2Z2PDsqgJP8)

https://www.html5rocks.com/en/tutorials/webrtc/basics/

https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

I think I’ll leave the WebRTC stuff for later when I want to begin testing the game with multiple clients.

How shall a write the EVM code alongside the client code?

• solidity + cljs
• LLL + cljs
• somekind of EVM code compiled to cljs
• edn compiled to EVM and cljs

Trying to hold too many things in my head.. I think I need a functioning game in cljs first, using simple data and functions, then work on the EVM + WebRTC parts afterwards. I could make some demos with naughts and crosses or something but it would be a lot less fun!

Not too shabby! Don’t want to fiddle with them for too long.

The board data structure is going to be important for the future EVM code that verifies moves. That said, the game is simple enough that perhaps having a separate codebase (with testing) for EVM and cljs code could be fine? I’d love to have them share code somehow through.. For now I’ll just use whatever maps, vectors, sets etc. make the UI code easiest to code quickly. Who knows how the rules will change once testing starts?

Started laying things out with relative divs.

January 14th

Grid is laying out correctly :)

It seems important going forward to have good naming conventions for grid sizes vs pixels sizes etc in the code.

We’ll need ‘fake’ tiles along the edges of the board that will show up on hover, to show where a new tile will be placed.

• inject tiles with [:fake true] or somesuch into the main grid ds before passing to the board?
• use a second loop to show the outside edges? (seems better)

Either way, we need a way of generating the grid locations of all the edges. This will be needed for validating moves as well.

Is it worth writing this code in a functional way when the corresponding EVM code will be written in loops?

Before the code gets too silly we need to establish some consistent names for things like grid positions.

January 16th

So we’ve got a demo board but next up we’ll move toward separate element functions. Time to start hashing out names for things.

So emojitiles is basically dominos with emojis so lets use a bunch of names from that!

http://www.domino-play.com/Glossary.htm

This could be useful: https://github.com/EmojiTwo/emojitwo

January 17th

Should the game be called emojinos?

Currently knee deep in HTML5 drag and drop.. Why am I doing this to myself, could add dragging later.

Well it’s working now anyway. So we’ve got a simple board UI with reagent and some js interaction, time to have a good think about app structure. Definitely using at least re-frame but beyond that I’m not sure.

Some UI code naming conventions:

• XXX-el refers to a plain reagent HTML element to be called with parens e.g. (tile-el opts)
• XXX-component refers to a re-frame component e.g. [ui-component]

New folder structure. All the re-frame stuff isolated in frame, the raw reagent bits in elements and stuff that should be useful later via the EVM in core.

Frame is set up, time to handle placing a tile.

1. remove tile from hand
2. add tile to board
3. call resolve-board until the board doesn’t change

Game moves will need to be handled by both the game UI (browser) and the EVM. In the UI we want to be able to log and play back the individual calls to resolve-board to make complicated board state resolutions easier to understand.

For testing lets use the following rules: tiles can be placed in any empty space that’s adjacent to another tile and placing a tile adjacent to the same type removes both from the board and gives the player a point.

Well that’s something! It’s always so exciting to start seeing things moving. Next up is making this toy into a game!

First, spending some tile reading through all the code and making small naming adjustments etc, before things get too large.

January 18th

Where to next?

The game could be played in three ways:

• Practise
• 1 or 2 players
• players trust each other to randomly generate numbers
• game rules can be changed to test new tiles etc.
• Friendly
• 2 players
• players send moves to each other
• players generate their opponents random numbers
• moves are validated by player clients using keypairs
• Ranked/tournament
• 2 players
• similar to friendly game
• game results recorded to ETH network

All game types involve sending moves back and forth via webRTC, only ranked games will involve the EVM.

In friendly games, with no server as a single source of truth, move validity will need to be checked by the players themselves. Games might go something like:

• a player lists a game request w/ secret stack
• a player responds to the request, also w/ secret stack
• random seed for the game is created
• stacks are combined and shuffled into bag
• seed is used to select one of the players to be P1
• P1 uses seed to deal themselves a hand of tiles
• P1 chooses a tile to lead with, creating a state object S1
• P1: (key, seed, lead) -> S1
• P1 sends S1 to P2
• P2 uses S1 to make S2, which tells P1 the tile they draw
• P2: (key, S1) -> priv. tile
• P1 uses S2 to make S3, which P2 uses to deal themselves a hand

Gahh this is too tricky to work out at this time of night. I need a better lanuage for describing all this state generating/passing/signing stuff. Might return to friendly/ranked games later after some more thought/reading. Feels good to bash my head against this stuff though, feels brain stretching in a good way.

For testing purposes players can just trust each other. New state objects are created by your client then simply sent to each other and loaded as-is by the other player. Lets get this going first.

January 26th

The frame is wrong. We’ve designed it around the game but it should be designed around the app!

Ilya Grigorik’s High Performance Browser Networking chapter in webRTC: https://hpbn.co/webrtc/

RTCPeerConnection won’t start gathering candidates until setLocalDescription() is called.

Take advantage of Trickle ICE: call addIceCandidate() as soon as candidates arrive.

Google public STUN server stun.l.google.com:19302

https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

https://blog.printf.net/articles/2013/05/17/webrtc-without-a-signaling-server/

https://tools.ietf.org/html/draft-ietf-rtcweb-jsep-03#section-3.4.1

Alice challenges Bob:

• Alice creates RTCPeerConnection object
• Alice creates an offer (SDP session desc) with RTCPeerConnection createOffer() method
• Alice calls setLocalDescription() with the offer
• Alice stringifies the offer and sends it to Bob
• Bob calls setRemoteDescription() with the offer
• Bob calls createAnswer(), gets an answer
• Bob calls setLocalDescription() with the answer
• Bob stringifies answer and sends it to Alice
• Alice calls setRemoteDescription() with the answer

What’s this? InvalidStateError: Cannot create offer when there are no valid transceivers.

January 27th

Fiddling with a WebRTC demo using re-frame. Starting to get the hand of it using the prev links. No hello yet..

January 28th

Let’s get webRTC connecting!

Why didn’t I google “serverless webrtc” earlier? I would have found this great answer: https://stackoverflow.com/questions/29032884/why-signaling-server-needed-for-webrtc/29056385#29056385

IPv6 doesn’t require STUN access for NAT traversal?

IT WORKS!

The demo now waits for ICE gathering to complete before giving you the SDP to copy/paste. That way it fills with ICE candidates! A single out-of-band message from P1->P2 then another from P2->P1 is enough to start sending messages.

Last thing to do for the demo is add checks for pc.signalingState != "have-local-offer" and pc.signalingState != "stable" like in the stackoverflow answer above.