emgrasmeder / agentgopher Goto Github PK

When I look at the webpage I want to see a grid:

• big containing div with black border
• contains smaller squares each with a border
• when squares are filled in, there is no whitespace

The backend should have a slice of slices representing the liveliness of each cell, and this should be updated each time a user clicks on a cell.

Perhaps as another story, this will also be updated according to how the game plays itself out.

In a file called conway/conway.go,
implement conway's game of life.
Most agent functions should go in agent.go or manager.go files

Because I want the cells to change colors in a separate backed service, agents should be able to be spawned from stdin or from a websocket or something else. We can close this issue when a JSON object will be able to change the status of an agent. The implementation of exactly how still needs to be decided.

Options:

• 1. Use golang + javascript websockets to talk to each other.
  • blog post on using Gorilla (golang) and js websockets to talk to each other
  • Javascript documentation on websockets
• 2. SSE? https://en.wikipedia.org/wiki/Server-sent_events
• 3. Firebase? https://firebase.google.com/products/

Make a "next" button that increments a "steps" counter located at the bottom of the page

Right now we're implementing Gorilla/Websocket's example of allowing connections from any origin, like:

var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool { return true },
}

and maybe someday we want this to be a little less relaxed.

test that:

• there exists 9 squares
• initially no squares are hidden
• squares hide on click
• is on travis

Cell.js needs to test the onClick functionality

maybe airbnb's es6 linter

options?

• Heroku
• Digital Ocean
• AWS

We can either keep all functionality that needs a socket connection in the same file, or look into the highest voted answer here
https://stackoverflow.com/questions/31218008/sharing-a-globally-defined-db-conn-with-multiple-packages-in-golang

For whatever reason I'm completely set on using just Golang, HTML, and CSS to do this visualization.

The baby step that I want is to kick off a timer with a button, and hide a box when the timer (10 seconds) is done.

• Start button
• Start button kicks off timer
• Timer value changes on display
• Box disappears at the end of time

To prove that the backend actually connects to the front end, I want to implement some basic "agent", to move beyond the concept of just a cell.

This might also introduce the concept of "periods" or "time activations", but it probably won't need to be too robust.

The idea is that at time t=0, cell 0 is "activated", meaning it turns a certain color (anything but white).
At time t=1, cell 0 goes white, and cell 1 "activates" to a non-white color, and this continues until we all the cells have been activated and deactivated in sequence. The color and timing will be sent in messages by the backend, and the whole sequence will be kicked off by a single button click.

Nodemon? Webpack?

In order to change cells from server messages, each cell needs a name or something.

The backend needs to receive, parse, and respond to messages. It also needs to package events and deliver them to the front end.

I think there should be a Message Manager in the backend which:

1. Takes a map type and returns a byte array, which could be used here
2. Parses the message received from the frontend (potentially as a map) and incorporates the update as appropriate

• Let's start with a "Clear All" button (#23, #20)
  • The front end needs to send updates to the backend
  • The back end needs to keep track of what has happened on the front end
  • The clear all button will update both the front end and the back end and set each cell to its default state

The app should be able to turn cells visible and invisible via the redux store. As another story, it should also send messages back to the server via the redux store.

• Red Cell is a misnomer here
• Rendering cells is inelegant

...provided they deliver a payload of a valid cell id and a valid color

I'd like there to be an "edit" mode and a "select" mode. In "select" mode, clicking on the square only highlights the square.

If the square is highlighted and a living cell, you should be able to move it with the arrow buttons.

When a user clicks on the border of the field, they should be able to drag it to change the size.

• if the number of cells is fixed, the size of each cell should change
• if the number of cells has not explicitly been defined, cells should increase in number and stay the same size

In order to scale the application, all the cells should be created dynamically; whereas they are currently created explicitly in 9 consecutive div tags.

• Even if the number is fixed per page-render, change the number of cells in the code by an order of magnitude should be trivial.

Goal: Visualize a 2d plane for agents to move around it.

Specs for the visualization:

• n by m grid. Say 100x100 squares
• squares can be filled in or hidden
• clicking on squares makes them disappear
• square populate and hide also according to input from external source

Could be helpful to look at https://www.calhoun.io/an-intro-to-templates-in-go-part-1-of-3/