guide.html

<!DOCTYPE html>
<html>
<head>
<title>Ecosystem Simulator</title>
</head>
<body>
    <link rel="stylesheet" href="webStyle.css">
    <div class="topnav">
        <a href="index.html">Home</a>
        <a class="active" href="guide.html">Guide</a>
        <a href="about.html">About</a>
        <a href="contact.html">Contact</a>
      </div>

<div id="setup"><a id="setup">
    <h1>Ecosystem Simulator Guide</h1>
<p>This is a simple guide to show you how the game works</p>
<h2>Setup the Ecosystem</h2>
<p>Before entering the game, you need to go through several steps to build the ecosystem.</p>
<h2>Setup Step 1</h2>
<p>The first step is to choose whether you want to start with a fixed combination or your own choice. </p>
<p>
    The first two options choose the species and the amount of resources in the environment for you
    while the third one allows you to choose whatever species you like and decide the amount of resources in the ecosystem. 
</p>
<p style="font-size: 18px;">(Click <a href="wolf_sheep_story.html" target="_blank" style="font-size: 20px; color: rgb(239, 248, 58);">HERE</a> to learn about the story behind the wolf-sheep combination.)</p>
<p style="font-size: 18px;">(Click <a href="cat_bird_story.html" target="_blank" style="font-size: 20px; color: rgb(239, 248, 58);">HERE</a> to learn about the story behind the cat-bird combination.)</p>
<img src="assets/setup.png" alt="DEMO"  class="center" width="900" height="400" >

<h2>Setup Step 2</h2>
<p>If you chose the third option in the previous step, you need to complete this additional step: choosing the species to place in the ecosystem.
</p>
<img src="assets/chooseSpecies.png" alt="DEMO" class="center" width="900" height="400" >

<h2>Setup Step 3</h2>
<p>In this step, you need to enter the number of available resources and creatures.</p>
<img src="assets/populations.png" alt="DEMO" class="center" width="900" height="400" >

<h2>Tips for determining population size</h2>
<p>Deciding the population's size could be hard. Thus, at the bottom of the page, some tips are provided. Clicking on the text for tips to be popped up. 
    The tips are concluded by the author after running a certain number of tests. However, they are just for references, since the ecosystem is not always predictable.
    Different combinations, greater population size and etc could impact the ratios to keep the balance.
    Author decides to not reveal too many about this and leave it for the players to discover. (Have questions or advice? Take the <a href="https://forms.gle/fzCovynqmaLWU3dv9" target="_blank" style="font-size: 24px; color: rgb(239, 248, 58);">survey</a> to tell the author!)</p>
<img src="assets/tips.png" alt="DEMO" class="center" width="900" height="400" >

</a></div>
<div id="simulator"><a id="simulator">
    <h2>Simulator</h2>
<p>Ater all the setups, the following image is an example of what you will see in the actual game. And the rest of the guide will walk through some elements in the game and show you how to make use of them.</p>
<img src="assets/general.png" alt="DEMO" class="center" width="900" height="600" >
</a></div>
<div id="map"><a id="map">
<h2>"The Map"</h2>
<p>First, inside the red frame, you can see some images of animals in the picture. 
    This is the "map" of the ecosystem, showing the locations of creatures. 
    Each tile represents a pack of creatures. 
    During the game, predators, such as wolves and cats, will move close to the preys and tend to hang around near them. 
    Preys, in the contrary, tends to stay in a fixed location.</p>
<img src="assets/main_info.png" alt="DEMO" class="center" width="900" height="600" >
</a></div>

<div id="information"><a id="information">
<h2>Information Panel</h2>
<p>On the right, you can see some values.</p>
<img src="assets/info1.png" alt="DEMO" class="center" width="900" height="600" >
<p>The first one is "Day". The game updates information about the ecosystem by days. It's used to determine whether creatures need to eat or able to reproduce. 
    It's also used to evaluate how good the ecosystem is. The longer it lasts, the better it is.</p> 
<p>The second one is available resources. Its initial value is determined during the setup stage.
    It will be consumed by primary consumer, such as sheep and bird. Its amount will be recovered over time. However, the amount of recovery is based on its current value. Thus, the fewer the resources, the fewer it recovers. 
    This also means if all resources have been consumed, it will no longer be recovered.
</p>
<p>
    Below the available resources are some values of the pack. Moving your cursor on an image, the corresponding information of it will be displayed in this area.
    The first is the species of the pack you select. The health value indicates how healthy is the population which is impacted by their activities.
    Next, you can see a death rate value. This also reflects the health of the population. It tells you how likely an individual may die in the near future. 
    </p>
<p>
    Around the left-bottom of the image, you can see the instructions of adding more creatures. Pressing corresponding keys, you can change the species you wish to add. 
    And when you click on an empty tile, a new pack will be added to the ecosystem. Similarly, clicking on a non-empty tile removes that pack.
</p>
</a></div>

<div id="add"><a id="add">
<h2>Adding creatures</h2>
<p>In the image below, key 1 is pressed, so the species to add is set to wolf. And an empty tile is selected.</p>
<img src="assets/add-before.png" alt="DEMO" class="center" width="900" height="600" >
<p>Clicked the empty tile and now a new wolf appears.</p>
<img src="assets/add-after.png" alt="DEMO" class="center" width="900" height="600" >
</a></div>

<div id="remove"><a id="remove">
<h2>Removing creatures</h2>
<p>In the game, you can also manipulate populations by removing some existing creatures.</p>
<p>Now, in the image below, the cursor selects a sheep tile to be removed.</p>
<img src="assets/remove-before.png" alt="DEMO" class="center" width="900" height="600" >
<p>Clicked that tile and that sheep disappears.</p>
<img src="assets/remove-after.png" alt="DEMO" class="center" width="900" height="600" >
<p>
    Around the right-bottom, you can see three buttons. The skip allows you to jump to the end of the game if you want to skip the wait. 
    Clicking the pause button pauses the game and clicking it again to recover.
    End button allows you to terminate the game and to go back to the main page.</p>
</a></div>

<div id="populationGraph"><a id="populationGraph"></a>
<h2>Population Graph</h2>
<img src="assets/population_info.png" alt="DEMO" class="center" width="900" height="600" >
<p>Clicking on the population graph icon, it will pop up a new window where the populations and resources are displayed in a graph. 
    You can click on it anytime during the game and 
    the graph will contain all the information from the start of the game till the time you click the button.
    The following image is an example of population graph.</p>
<img src="assets/population_graph.png" alt="DEMO" class="center" width="900" height="600" >
</a></div>

<br>
<div id="continue"><a id="continue"></a>
<button class="continue-button" onclick="toSetup()">Continue</button></body>
</a></div>
<div class="sidenav">
    <a href="guide.html#setup">Setup Guide</a>
    <button class="dropdown-btn">Game Guide 
        <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-container">
        <a href="guide.html#simulator">Simulator</a>
        <a href="guide.html#map">The map</a>
        <a href="guide.html#information">Information Panel</a>
        <a href="guide.html#add">Add Creature</a>
        <a href="guide.html#remove">Remove Creature</a>
        <a href="guide.html#populationGraph">Population Graph</a>
        <a href="guide.html#continue">Continue to Game</a>
      </div>
  </div>
<script src="redirect.js"></script>
<script>
    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>
</html>