Escape-the-Island/index.html

<!doctype html>
<html>
  <head>
    <title>Escape the Island</title>
    <link rel="icon" type="image/x-icon" href="assets/shipwreck.png" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <style></style>
  </head>
  <body>
    <header>
      <div class="header-container">
        <h1>Escape the Island</h1>
        <div class="boat-container">
          <img src="assets/boat.png" alt="" class="boat" />
        </div>
      </div>
    </header>
    <div class="Content">
      <div class="Instruction">
        <p>Backstory</p>
        <details>
          <summary>Click to expand</summary>
          <p>
            You and your class planned to go on a one week cruise trip over
            spring break to learn about how inflation affects nautical
            exploration and catching some sun. The cruise ship is built a pirate
            ship which you all find amusing at first. However, issues arise from
            an underlying problem. They didn't have the money to get schedule a
            final inspection before departing, but they still let you go anyways
            (because they are broke). As the boat leaves and cruises away from
            land, you see rocky terrain that has formed in the middle of the
            ocean (shocking). Your boat hits it and as people don't learn from
            the titanic, you don't have enough life boats to fit everyone and
            make it home safely. Everybody else gets on boats while you and your
            classmates are still on the boat (coincidentally). One of your
            friends believes he has a boat license (he doesn't) and tries to
            steer the boat before you sink. Magically you find an island. You
            all get onto the island safely but with no way home, scattered and
            disoriented.
          </p>
        </details>
      </div>
      <div class="Instruction">
        <p>Objective</p>
        <details>
          <summary>Click to expand</summary>
          <p>
            You will have 16 hours each day to gain as many resources as
            possible to survive. You must choose what to spend your hours doing
            each day carefully. The survival requirement for the end of each day
            is to have 8 fish and 4 pieces of lumber. Otherwise, you die (lose).
            You will be able to trade with other classmates you have found
            stranded at no expense of your daily hours.
          </p>
        </details>
      </div>
      <div class="Instruction">
        <p>Requirements</p>
        <details>
          <summary>Click to expand</summary>
          <ol>
            <li>
              In order to escape, you must have 24 stockpiled fish and a boat at
              the START of a new day.
            </li>
            <li>Fish will go bad without a preserver.</li>
            <li>
              Improving skills requires 8 hours and adds 1 per hour the next
              day.
            </li>
            <li>Building a preserver requires 8 hours and 25 wood</li>
            <li>Building a boat requires 16 hours and 100 wood</li>
            <li>You can only trade with "found" players</li>
            <li>
              It is recommended to donate resources to other players at end of
              day if you have a boat (Need to have 24 fish to leave)
            </li>
          </ol>
        </details>
      </div>
      <div class="game">
        <div class="table-container">
          <table>
            <tr>
              <th></th>
              <th>Fishing Stats</th>
              <th>Foraging Stats</th>
            </tr>
            <tr>
              <th style="width: 25%">Days: <span id="days">0</span></th>
              <td id="fish_p_hour">0</td>
              <td id="wood_p_hour">0</td>
            </tr>
            <tr>
              <th style="width: 25%">
                Players Found: <span id="found">0</span>
              </th>
              <td>Preserver: <span id="preserver">No</span></td>
              <td>Boat: <span id="boat">No</span></td>
            </tr>
            <tr>
              <th style="width: 25%">Hours Left: <span id="hours">16</span></th>
              <td>Stored Fish: <span id="fish_stored"></span></td>
              <td>Stored Wood: <span id="wood_stored"></span></td>
            </tr>
          </table>
        </div>
        <div class="button-container">
          <div class="button-container-part">
            <button type="button" id="go-fishing">Go Fishing</button>
            <button type="button" id="go-foraging">Go Foraging</button>
            <!-- <button type="button" id="trading">Trade</button> -->
          </div>
          <div class="button-container-part">
            <button type="button" id="improve-fishing">
              Improve Fish Per Hour
            </button>
            <button type="button" id="build-preserver">Build Preserver</button>

            <button type="button" id="improve-forgaing">
              Improve Wood Per Hour
            </button>
            <button type="button" id="build-boat">Build Boat</button>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <h3 style="padding: 10px 0px 0px 10px">
        Gamemaker: Mr. J. Walla ~=~ Developer: Andrew H. ~=~ Designer: Logan C.
      </h3>
    </footer>
    <script src="index.js"></script>
  </body>
</html>