Game Edit Page Functionality

Overview

• Utilizes React-Konva to create mutable shapes to allow the user to construct simulations.
• Uses classes and states to store arrays of shapes with their properties.

React-Konva

• React library that uses canvas and shape components to easily implement draggable, customizable shapes.
• Stores the shape properties in an array then renders and maps each array to display shapes.
• Custom transformer for each shape that saves changes made.
• Context menu component to customize shapes.
• Media implementation with file or src.

Stages

• Two stages, one being info and main.
• Having two stages means we need to check on each stage whether or not to render depending on where the shape was added. This is achieved by changing the properties depending on which stage it is added to.
• Can zoom in/out and move stages around with ctr click.