Virtual Life App with Statistics

 

• Languages: Javascript ES5
• Languages Additional: Javascript ES6 Modules
• Tools: VS Code, Live Server extension, Git (if available)
• API Features: DOM Elements
• Libraries: Font Awesome 5.5.0
• Patterns and Practices: Separation of concerns, Factory method pattern, Inheritance

 

Feature Specification

 

• Add a start and stop button to the user interface.

 

• Add a statistics table to the user interface with three or more of the following stats:

 

• interval - setInterval() speed of the animation in milliseconds.
• generation - the current incremental count of each call to turn.
• turn - the time in milliseconds that turn() takes.
• render - the time in milliseconds that it takes to render the life world.
• the number of world items and the percentage of world items for the following:
• wall, plant, animal, carnivore, and empty
• total - the total number of world items

 

• The statistics should update on every turn.

 

 

Code Design

 

• Separate the statistics view from the world items view.
• Create the statistics data in the world animator.
• Pass the statistics data to the statistics view for rendering.
• Optimize the living world items so that all items will live past 300 generations in a 100 by 100 world.
• Crank up the world size to 300 by 300 and set the animation interval to 1000 ms.
• You may need to optimize a few factors to help your program scale better:
• Use character codes for your item icons instead of Font Awesome class names.  E.g., symbol: "\uf6f0"
• Eliminate excess styling or processing.  Ensure that the View layer is only handling what it needs.
• Extra credit: when the mouse hovers over an item, report on that item’s data through a pop-up.