game-of-life

Conway's Game of Life

https://wluu.github.io/game-of-life/

My Notes

States v2

Layout v2

High Level Rules

TODOs

Going to break this down into smaller chunks:

• Make the board
  • Forgot to add the borders to the board
• Add event listeners to each cell in the board
  • Change color of any given cell when clicking on them
• Work on game of life rules
  • Add the life rules
  • Mock the control to make sure the rules are correct
• Emit data to the board component Get data from life service so we can actually update the board with new data
• Will need to create some form of game loop so the cells appear to be moving
• Create a class for the debugging logs and the debugging text on the board
• Re-evaluate the state flows and layout design
• Add the controls (minimalistic level)
  • Added the basic layout
  • Hook up the buttons to the board component
  • Add the ability to click and hold to select the cells
    • REFACTOR A BIT
  • Properly disable and enable the control buttons
    • Including when all cells die
  • Add the next button
  • Found bug: if the board is empty by deselecting, the control states are not properly reflected; listen on mouseup and check board if there are any live cells
  • Found bug: hold down on left click does not de-select cells; should do shift + mousedown
  • Add the drop-down list to have initial seeds: blinker, pulsar, pentadecathlon, glider, and lightweight spaceship (from wiki)
    • Read up on https://angular.io/guide/forms
    • Make sure it's properly disabled/enabled during the different states
• Look into the cursor change bug
• Add the help icon Add how-to guide at the bottom
• Check performance/memory
  • There might be some memory leaks according to https://developers.google.com/web/tools/chrome-devtools/memory-problems/
  • But, it looks like the memory leaks for DOM nodes and JS heaps are growing at a slow rate; was monitoring Chrome's task manager.
    • Used Chrome's Performance tool to isolate the memory leaks.
    • But, was not able to isolate/discern the memory leak with Memory Heap snapshot and Memory Allocation instrumentation on timeline.
    • The general steps I used to find the memory leak:
      1. Loaded web app (locally)
      2. Used Pulsar as initial seed
      3. Clicked Play to allow the game to run
      4. Every 10 - 15 seconds, cleared the board with Clear button
      5. Repeated steps 2 to 4 three or four times
    • Based on the Performance tool, my guess was that the memory leak was occurring when I clear the board. Specifically in ControlsComponent.onClickClear(), which will call BoardComponent.reset().
    • However, I remembered from the Angular documentation that it was good practice to only do simple initialization in the component's constructor. BoardComponent.cellsStyle and TrackingService.board, to a degree, were not simple initializations. They were large matrices that dynamically changed.
    • Putting those two properties in ngOnInit() seemed to have solved the memory leak didn't seem to do much.
      • In constructor:
      • In ngOnInit():
    • Hmm, as long as it doesn't stutter, I think it's okay for now.
• Need to make the web app dynamically proportional
  • https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
  • Can use the transform: scale() CSS property. It looks like it only works when display: block, which the body element is automatically set.
  • Hmm, transform: scale() doesn't seem to be the way. Can't figure out the correct scaling value.
  • But: https://alistapart.com/article/responsive-web-design
    • Yep, making a web app responsive is complicated. I've done as much as I can endure.
• Material design???
  • https://material.angular.io/guides
  • Another time ...