This is a web adaptation of my previous Python project where I designed a simulation of a trading economy.
Creating the location
Using a class, I passed in the index of each location in the root array. The ledger contains all the instances of each resource at their respective locations and the global resources variable was used to initiate the location.
Initialising the position
The position of each location is random determined through the use of 'Math.random()'. This was saved to the class instance as 'position' where it can be accessed later. An SVG circle element was also created to represent the location inside the viewbox.
Generating resources at each location
Each location will have a random starting amount for all the resources using 'Math.random()'. Once created, a dictionary consisting of the id, resource (name), amount, position (location), and whether it has been ordered will be appended to the 'resourceLedger' on the Vue instance. At the end of this block, it will also add its allocated resource amount to a global variable. This will later be used to calculate the level of scarcity at each location to determine the local unit price.