{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
    />
    <title>Gamerules</title>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .carousel {
        height: 90%;
        width: 100%;
      }
      .carousel-inner {
        height: 100%;
        width: 100%;
      }

      .carousel-item {
        height: 100%;
        width: 100%;
      }

      .header {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
      }

      .header button {
        margin: 10px;
      }

      .content {
        background-color: lightgray;
        text-align: center;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .carousel-control-prev-icon,
      .carousel-control-next-icon {
        background-color: black;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <!-- Kopfzeile mit Buttons -->
    <div class="header">
      <div class="row g-0">
        <div class="col-md-6">
          <button class="btn btn-secondary m-2 col-md-12" id="viewlobby">
            view lobby
          </button>
        </div>
        <div class="col-md-6">
          <button class="btn btn-primary m-2 col-md-12" id="company">
            view company
          </button>
        </div>
      </div>
    </div>

    <!-- Slideshow -->
    <div id="myCarousel" class="carousel slide">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Welcome to SERIOUS GAME!
              </h1>
              <p class="mt-4 mb-4 fs-4">
                This Slideshow briefly explains the game and shows the key
                gameelements the player needs to know.
              </p>
            </div>
          </div>
        </div>
        <div class="carousel-item">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameflow
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  This game is a turn-based multiplayer game where you take
                  control of your own software company. Your main goal is to
                  earn more money than your competitors before the last round
                  ends by cleverly securing contracts and efficiently managing
                  your team of software developers. The picture shows the
                  players company and its attributes and ressources highlighted
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/companyhighlighted.png' %}"
                    class="img-thumbnail"
                    alt="company"
                  />
                </div>
                <p class="mt-4 mb-4 fs-4">
                  The game is played in rounds with a timer ticking down (top
                  right corner). In each round, you can hire workers on the
                  workermarket and submit bids for Orders on the ordermarket.
                  This is where the competition comes into play: only the player
                  with the best offer gets the Order when the round ends.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/orderworkermarket.png' %}"
                    class="img-thumbnail"
                    alt="order- and workermarket"
                  />
                </div>

                <p class="mt-4 mb-4 fs-4">
                  During the game, you'll receive E-mails (blue button top left)
                  that inform you about events that happened during the rounds
                  end. This is where you'll also have to react to potential
                  Special Orders or set Engineeringmodels for Orders that you
                  received on rounds turn. You can only react to those E-Mails
                  for ONE ROUND until the default Model will be set or the
                  Special Order will get ignored.
                </p>
                <p class="mt-4 mb-4 fs-4">
                  The choice of software engineering models is crucial. You have
                  to choose the Engineeringmodel for each order. Pay attention
                  to the hint-description provided with the order, when choosing
                  a model. Some customers want a flexible project! Note that
                  your workers have preferred models and work more efficiently
                  when working on Orders that align with their preferences.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/setEngineeringmodel.PNG' %}"
                    class="img-thumbnail"
                    alt="Engineeringmodel"
                  />
                </div>
                <p class="mt-4 mb-4 fs-4">
                  While working on Orders, Special Orders can appear by chance
                  (The chance is linked to the customer description!). Those can
                  earn you bonuses if you are using a flexible Model. If your
                  company uses an inflexible Model, you can handle Special
                  Orders by using resources, but ignoring them will result in
                  penalties.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/specialorder.PNG' %}"
                    class="img-thumbnail"
                    alt="specialorder"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Company
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  Each player or player group plays as a
                  <strong>Company</strong>. This <strong>Company</strong> has
                  specific attributes that influence the game's progression and
                  determine the winner. Additionally, player resources and
                  game-related values such as the number of rounds and a timer
                  are displayed in the Company tab. By responding to
                  <strong>E-mails</strong>, cross-round events are communicated
                  and reacted to (see <strong>E-mails</strong>).
                </p>
                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th scope="col">Attributes</th>
                        <th scope="col">Description</th>
                        <th scope="col">Range</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">Name</th>
                        <td>
                          This is the name of your Company (for the Standings at
                          the end)
                        </td>
                        <td>-</td>
                      </tr>
                      <tr>
                        <th scope="row">Money</th>
                        <td>
                          With Money you can hire Workers and train them. It is
                          the wincondition for this game.
                        </td>
                        <td>-</td>
                      </tr>
                      <tr>
                        <th scope="row">Worker Satisfaction</th>
                        <td>
                          The Worker Satisfaction directly impacts how good the
                          players Workers work. Reducing this stat below 100
                          will result in direct penaltys to ALL of the players
                          Workers effective stats. A Worker Satisfaction of 50
                          will result in Workers working with HALF their
                          Skillstrength and so on.
                        </td>
                        <td>0-100</td>
                      </tr>
                      <tr>
                        <th scope="row">Customer Satisfaction</th>
                        <td>
                          The Customer Satisfaction influences the players
                          offers on Orders. Reducing this stat below 100 will
                          result in direct penaltys to the players offers to
                          Orders. [Calculation: CustomerSatisfaction /
                          offeramount]
                        </td>
                        <td>0-100</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/companyhighlighted.png' %}"
                    class="img-thumbnail"
                    alt="company"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Worker
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  <strong>Workers</strong> are the primary resource of a
                  <strong>Company</strong> for completing
                  <strong>Orders</strong> (see <strong>Order</strong>). Players
                  should pay special attention to the Skilled Model attribute
                  when selecting their <strong>Workers</strong>, as it can
                  result in many bonuses or penalties.
                </p>
                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th scope="col">Attributes</th>
                        <th scope="col">Description</th>
                        <th scope="col">Range</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">Name</th>
                        <td>The Workers Name</td>
                        <td>-</td>
                      </tr>
                      <tr>
                        <th scope="row">Skilled Model</th>
                        <td>
                          The model, which the Worker prefers. Working on an
                          Order with this Engineeringmodel will result in
                          Workers Skill getting multiplied with his Amplifyer.
                          Working with the wrong model might apply penaltys (see
                          <strong>Enngineeringmodel</strong>).
                        </td>
                        <td>
                          ModelChaotic ModelV ModelSpiral ModelScrum
                          ModelWaterfall ModelHeyJoe
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Amplifyer</th>
                        <td>
                          The Multiplyer for the Workers Skillstrength if he
                          works on an Order with The matching Skilled Model.
                        </td>
                        <td>1.0-1.6</td>
                      </tr>
                      <tr>
                        <th scope="row">Salary</th>
                        <td>
                          The Workers Salary will be subtracted from the players
                          Companys Money after EVERY round.
                        </td>
                        <td>1750-5200</td>
                      </tr>
                      <tr>
                        <th scope="row">Happyness</th>
                        <td>
                          The Workers Happyness is similar to a "lifebar".
                          Dropping below 55 will result in increasing chance for
                          the Worker to quit working for the players company.
                          Every point dropped below 55 will result in a 2%
                          increasing chance.
                        </td>
                        <td>0-100</td>
                      </tr>
                      <tr>
                        <th scope="row">Sick</th>
                        <td>
                          Workers will get sick at chance. Sick workers can not
                          be interacted with, but will still get paid their
                          Salary
                        </td>
                        <td>True False</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <p>
                    While on the Workermarket, Workers will appear like this
                    when clicked.
                  </p>
                  <img
                    src="{% static 'mygame/images/worker.PNG' %}"
                    class="img-thumbnail"
                    alt="worker"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Workermarket
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  At the <strong>Workermarket</strong> players can hire their
                  <strong>Workers</strong>. Each <strong>Company</strong> has
                  their own <strong>Workermarket</strong>, which resembles
                  <strong>Workers</strong> applying for Jobs at the players
                  <strong>Company</strong>. There are 5 <strong>Workers</strong>
                  to choose from, differing every round.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/workermarket.png' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Order
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  <strong>Orders</strong> are job listings from companies that
                  ALL PLAYERS can apply to with an offering amount. ALL PLAYERS
                  in the lobby compete for the <strong>Orders</strong>. The best
                  offer is accepted, with only offers that are within 20% above
                  or below the given Estimated Profit considered. Customer
                  Satisfaction also factors into the calculation of the best
                  offer, which forces players with lower Customer Satisfaction
                  to offer lower prices if others are bidding.
                </p>
                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th scope="col">Attributes</th>
                        <th scope="col">Description</th>
                        <th scope="col">Range</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">(Estimated) Profit</th>
                        <td>
                          The amount of money the company receives on Order
                          completion. While in Workermarket, this is an estimate
                          to control the amounts players can offer (max. 20%
                          higher or lower).
                        </td>
                        <td>Estimated Range: 40000 - 100000</td>
                      </tr>
                      <tr>
                        <th scope="row">(Max) Rounds</th>
                        <td>
                          Amount of Rounds this Order remains in the Companys
                          Order tab. Will get reduced by 1 every round it is in
                          the Sompanys order Tab.
                        </td>
                        <td>3-13</td>
                      </tr>
                      <tr>
                        <th scope="row">Workload</th>
                        <td>
                          The Workload the players Workers have to work before
                          the Order is finished and the Profit gets collected.
                          The WORKING Workers Skillstrength will get subtracted
                          from this amount every Round, including potential
                          Amplifyers from Workers Amplifyer or bonuses and
                          penaltys from the Engineeringmodels.
                        </td>
                        <td>38 - 488</td>
                      </tr>
                      <tr>
                        <th scope="row">Engineeringmodel</th>
                        <td>
                          The Orders Engineeringmodel will have to be set the
                          round after an Order was added to a Company (offer got
                          accepted). Setting the Engineeringmodel for an Order
                          will happen via an E-Mail event (see
                          <strong>E-Mails</strong>). Keep your workers Skilled
                          Model attribute in mind while setting this Order
                          attribute.
                        </td>
                        <td>
                          ModelChaotic ModelV ModelSpiral ModelScrumh
                          ModelWaterfall ModelHeyJoe
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Hint</th>
                        <td>
                          The Orders Hint gives the player a clue if the
                          customer is likely to wish for a Special Order (see
                          <strong>Special Orders</strong>) or not. The player
                          should keep this in mind when choosing the
                          Engineeringmodel for their Order.
                        </td>
                        <td>-</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <p>
                    Orders in the Ordermarket will appear like this when clicked
                  </p>
                  <img
                    src="{% static 'mygame/images/orderonmarket.PNG' %}"
                    class="img-thumbnail"
                    alt="order"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Ordermarket
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  In the <strong>Ordermarket</strong>, players can offer on
                  Orders. The <strong>Ordermarket</strong> is GLOBAL, and ALL
                  PLAYERS compete for available <strong>Orders</strong>. Key
                  factors to consider when bidding include Customer Satisfaction
                  (see <strong>Company</strong>) and the offered Profit (see
                  <strong>Order</strong>). The lower your proposed Profit for
                  completing the <strong>Order</strong>, the more likely you are
                  to win it. However, there are limits, with bids only being
                  valid if they are within 20% above or below the Estimated
                  Profit displayed in the <strong>Workermarket</strong>.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <img
                    src="{% static 'mygame/images/ordermarket.png' %}"
                    class="img-thumbnail"
                    alt="order"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Action
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  <strong>Actions</strong> are a controlmechanism for the
                  player. Some interactions create <strong>Actions</strong> in
                  the Action-tab (bottom row). Players can cancel
                  <strong>Actions</strong> or view queued
                  <strong>Actions</strong> before the round ends. At round end
                  the <strong>Actions</strong> will occure.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  Action-Tab with queued Actions.
                  <img
                    src="{% static 'mygame/images/actiontab.PNG' %}"
                    class="img-thumbnail"
                    alt="order"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  The following choices will create Actions:
                  <ul>
                    <li>Hiring a Worker</li>
                    <li>Firing a Worker</li>
                    <li>Training a Worker</li>
                    <li>Offer on Order</li>
                    <li>Cancel Order</li>
                  </ul>
                  All other playerchoices will be executed immediately (careful
                  with setting the Egnieeringmodel and reacting to Special
                  Orders).
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: E-Mail
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  The <strong>E-Mails</strong> update the player about important
                  events that have occurred during the round transition. The
                  player should make sure to review all
                  <strong>E-Mails</strong> in a round, as some of them require a
                  response. The MOST IMPORTANT
                  <strong>E-mails</strong> requiring a response are outlined
                  below.
                </p>
                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th scope="col">E-Mail</th>
                        <th scope="col">Description</th>
                        <th scope="col">Options</th>
                        <th scope="col">Ignored</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">Offer for Order accepted</th>
                        <td>
                          The players Offer for an Order got accepted by the
                          customer.
                          <strong
                            >The player has to choose the Engineeringmodel the
                            Workers will work with completing this Order THIS
                            ROUND.</strong
                          >
                        </td>
                        <td>
                          ModelChaotic ModelV ModelSpiral ModelScrum
                          ModelWaterfall [Ignore]
                        </td>
                        <td>
                          Ignoring the option to choose an Engineeringmodel will
                          default choose The ModelChaotic, resulting in penaltys
                          for Workers and the Company (see
                          <strong>Engineeringmodel</strong>).
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">Special Order wished</th>
                        <td>
                          The customer wants a Special Order to be completed.
                          Working with a flexible
                          <strong>Engineeringmodel</strong> will result in
                          higher benefits from this occurence, if the player
                          chooses to deliver (see
                          <strong>Special Order</strong>).
                        </td>
                        <td>-</td>
                        <td>
                          Ignoring the Special Order will result in applyed
                          penaltys. (see
                          <strong>Special Order</strong>)
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <p>The Special Order E-Mail</p>
                  <img
                    src="{% static 'mygame/images/specialorder.PNG' %}"
                    class="img-thumbnail"
                    alt="specialorder"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <p>Set the Engineeringmodel with this E-Mail</p>
                  <img
                    src="{% static 'mygame/images/setEngineeringmodel.PNG' %}"
                    class="img-thumbnail"
                    alt="engineeringmodel"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Engineeringmodel
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  The <strong>Engineeringmodel</strong> is the key Attribute in
                  this game. Choosing the right model for orders the players
                  <strong>Company</strong> is working on and choosing
                  <strong>Workers</strong>
                  accordingly is integral for the
                  <strong>Companys</strong> success.
                </p>
                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelChaotic
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          The chaotic model is equal to not choosing a model
                          (default). It is not a model used in
                          softwareengineering, but signals that your workers
                          will work uncoordinated. Working like this will make
                          your workers more insecure in their work and company.
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          this model doesnt bring positives
                        </td>
                        <td class="bg-danger-subtle">
                          workers dont like volatility in their workplace [-20
                          workerSatisfaction, -10 happyness all workers]
                        </td>
                      </tr>
                      <tr>
                        <td class="bg-success-subtle"></td>
                        <td class="bg-danger-subtle">
                          missing structure leads to inefficient work [+10%
                          workload]
                        </td>
                      </tr>
                      <tr>
                        <td class="bg-success-subtle"></td>
                        <td class="bg-danger-subtle">
                          workers are not prepared for flexibility [extra work
                          for SPECIAL ORDERS]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelWaterfall
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          The model waterfall is a software engineering model
                          that organizes the workload in five phases: analysis,
                          design, implementation, integration and production.
                          The phases will be worked through sequentially and
                          going back phases is not intended. Using this software
                          engineering method is most succesful for short and
                          well defined products, since it is very unflexible and
                          therefore it is hard to respond to customer requests.
                          Due to its straight forward nature with closed
                          production phases it is easy for workers to work with
                          and the production completion is relatively
                          predictable.
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          workers appreciate the easy usage and predictability
                          [+10 workerSatisfaction, +10 happyness all workers]
                        </td>
                        <td class="bg-danger-subtle">
                          low flexibility due to preplanned phases [extra work
                          for SPECIAL ORDERS]
                        </td>
                      </tr>

                      <tr>
                        <td class="bg-success-subtle">
                          straight forward planning and clear responsibilities
                          [-10% workload]
                        </td>
                        <td class="bg-danger-subtle">
                          low customer involvement and late feedback [-10
                          customerSatisfaction]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelV
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          The V-model uses a sequential approach with multiple
                          phases, such as specification, system modeling,
                          component modeling, implementation, component testing,
                          integration testing and validation. The first four
                          phases are constructive phases (creating code), while
                          the last three phases concentrate on project quality
                          and testing. The name originates from the fact that
                          the phases are often represented as a V, with the
                          development phases (descending left side of the V)
                          facing the quality assurance (ascending right side of
                          the V). Since each developmnet phase has a
                          corresponding testing phase, assuring good project
                          quality is a basis of the V-model. Planning the
                          project in closed phases also makes the project easier
                          to plan than than it would be with more flexible
                          apporaches. The downside of the model is, that
                          preplanning phases will make change of requirements
                          difficult and building the project from bottom up will
                          make prototyping hard to achieve.
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          the preplanned phases give workers a good roadmap for
                          their work [+10 workerSatisfaction, +10 happyness all
                          workers]
                        </td>
                        <td class="bg-danger-subtle">
                          low flexibility due to preplanned phases [extra work
                          for SPECIAL ORDERS]
                        </td>
                      </tr>
                      <tr>
                        <td class="bg-success-subtle">
                          multiple validation phases ensure a high quality
                          project [+10 customerSatisfaction]
                        </td>
                        <td class="bg-danger-subtle">
                          the emphasise on testing and validating each
                          development step can cause extra workload [+10%
                          workload]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelScrum
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          Scrum is an agile software engineering model for
                          incrementally and iteratively developing software. Key
                          elements within Scrum are short timewindows,
                          designated to specific functionalities (Sprints),
                          planning tasks beforehand in a so called product
                          backlog and daily meetings to keep every involved
                          workers updated on current problems and changes. This
                          makes Scrum a highly flexible model with the ability
                          to update customers frequently and reach good project
                          quality. The downside is, that workers have to get
                          familiar with the working principles and predicting
                          the conclusion of a project can be hard due to the
                          high flexibility.
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          high flexibility and iterative work in closed
                          production iterations (sprints) [bonus on SPECIAL
                          ORDERS]
                        </td>
                        <td class="bg-danger-subtle">
                          the high flexibility makes predicting project
                          conclusion hard [random workload shift between 1% and
                          +20%]
                        </td>
                      </tr>
                      <tr>
                        <td class="bg-success-subtle">
                          workers familiar with Scrum work efficiently with it
                          [+20% on skills if skilledModel is Scrum]
                        </td>
                        <td class="bg-danger-subtle">
                          workers not familiar with scrum are overthrown by the
                          new structure [-40% on skills if skilledModel is NOT
                          ModelScrum]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelSpiral
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          The model spiral is an agile software engineering
                          model that organizes the development of a software
                          product in multiple iterations. Each iteration
                          implements a portion of the project and creates a
                          product prototype with more functionality than the
                          previous iteration, growing the product bigger with
                          each step. Succesively improving the project with each
                          iteration makes finding errors early on in the project
                          easy and naturaly brings prototyped versions, which
                          will make updating and communicating with customers
                          easy. The downside is, that this can lead to work
                          redundancy, recoding functionalities and retesting,
                          which makes predicting the conclusion and costs of the
                          project hard.
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          high flexibility and regular prototyping within
                          production [bonus on SPECIAL ORDERS]
                        </td>
                        <td class="bg-danger-subtle">
                          multiple iterations can lead to work redundancy and
                          recoding functionalities [+10% workload]
                        </td>
                      </tr>

                      <tr>
                        <td class="bg-success-subtle">
                          easy customer involvement and feedback through the
                          production process [+10 customerSatisfaction]
                        </td>
                        <td class="bg-danger-subtle">
                          workers will be unhappy with the redundant work [-10
                          workerSatisfaction, -10 happynes all workers]
                        </td>
                      </tr>
                    </tbody>
                  </table>

                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th class="text-center fs-2" scope="col" colspan="3">
                          ModelHeyJoe
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center fs-5" scope="col" colspan="3">
                          Description
                        </th>
                      </tr>
                      <tr>
                        <th class="text-center" scope="col" colspan="3">
                          The HeyJoe Model is an organizational method in which
                          the manager organizes the team through daily
                          instructions. Users and customers communicate directly
                          with the manager to access team members. Team members
                          are deployed flexibly to where they are most urgently
                          needed, and their tasks, such as analysis and design,
                          vary depending on the daily instructions. The Model
                          brings a lot of flexibility while working with
                          customers, but workers involved are working in a
                          highly volatile work environment. Switching the tasks
                          daily makes it hard to get a good workflow, which
                          increases the work needed to finish the whole project
                        </th>
                      </tr>
                      <tr>
                        <th class="bg-success" scope="col">Positives</th>
                        <th class="bg-danger" scope="col">Negatives</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td class="bg-success-subtle">
                          due to tasks varying every day, flexibility in project
                          inkrementation is easy [bonus on SPECIAL ORDERS]
                        </td>
                        <td class="bg-danger-subtle">
                          workers dislike the high volatility in their daily
                          work [-15 Worker Satisfaction; -15 happyness all
                          workers]
                        </td>
                      </tr>

                      <tr>
                        <td class="bg-success-subtle">
                          customers like the easy way for them to influence the
                          project by contacting the manager [+30 Customer
                          Satisfaction]
                        </td>
                        <td class="bg-danger-subtle">
                          Switching tasks daily leads to more workload due to
                          workers having to adjust to new tasks [+20% workload]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Gameelement: Special Order
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  The <strong>Special Order</strong> is an occurance that
                  happens by chance while a <strong>Company</strong> works on an
                  <strong>Order</strong> and resembles a special customer wish.
                  The player can choose to fulfill that wish (handle) or ignore
                  it, resulting in different outcomes for the
                  <strong>Company</strong>. The outcome of handling the
                  <strong>Special Order</strong> will differ, depending on the
                  chosen <strong>Engineeringmodel</strong>.
                </p>

                <div class="m-2">
                  <table class="table table-secondary">
                    <thead>
                      <tr>
                        <th scope="col">Option</th>
                        <th scope="col">Valid Engineeringmodels</th>
                        <th scope="col">Outcome</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">
                          handle (with agile Engineeringmodel)
                        </th>
                        <td>
                          All flexible Engineeringmodels (ModelScrum,
                          ModelSpiral. ModelHeyJoe)
                        </td>
                        <td>
                          [+20 Customer Satisfaction; +10 Worker Satisfaction;
                          +20% Profit on Order]
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">
                          handle (without agile Engineeringmodel)
                        </th>
                        <td>
                          All not flexible Engineeringmodels (ModelWaterfall,
                          ModelV, ModelChaotic)
                        </td>
                        <td>
                          [+30 Workload on Order; -20% happyness all Workers;
                          -10 Workersatisfaction]
                        </td>
                      </tr>
                      <tr>
                        <th scope="row">ignore</th>
                        <td>All Engineeringmodels</td>
                        <td>
                          [-20 Customer Satisfaction; -20% Profit on Order]
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="carousel-item container-fluid g-0">
          <div class="content">
            <div class="row g-0 justify-content-center overflow-y-auto">
              <h1
                class="col-md-9 text-center bg-secondary-subtle font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
              >
                Playeroptions
              </h1>
              <div class="col-md-9">
                <p class="mt-4 mb-4 fs-4">
                  The options for players to choose from while playing are
                  displayed here.
                </p>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Offering for an Order</h2>
                  <p>
                    Offering for an Order is a competition between all players
                    in the game. Only the best Offer will get accepted.
                    Calculation: x = Customer Satisfaction / offered amount. The
                    highest Faktor x wins the Order.
                  </p>
                  <img
                    src="{% static 'mygame/images/orderonmarket.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Setting an Engineeringmodel</h2>
                  <p>
                    When an Offer gets accepted IMMEDIATELY choose a fitting
                    Engineeringmodel for the Order THIS ROUND (keep an eye on
                    the customer description).
                  </p>
                  <img
                    src="{% static 'mygame/images/setEngineeringmodel.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Canceling an Order</h2>
                  <p>
                    When the player chooses to cancel an Order or the order runs
                    out of rounds, no money will be gained and the Company
                    looses 30 Customer Satisfaction.
                  </p>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Hiring a Worker</h2>
                  <p>
                    Hiring Workers has no competition involved. A press on the
                    hire button in the Worker-view will queue an Action to hire
                    the chosen Worker. Salary will be paid every round.
                  </p>
                  <img
                    src="{% static 'mygame/images/worker.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Training a Worker</h2>
                  <p>
                    Workers inside the Company can be trained in a skill of
                    choice by ten points, blocking that worker for the current
                    and the next round.
                  </p>
                  <img
                    src="{% static 'mygame/images/workertrain.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Firing a Worker</h2>
                  <p>
                    Workers can be fired by queueing a fire-Action, but the
                    salary will still get paid for the current round.
                  </p>
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Working on an Order</h2>
                  <p>
                    Players can assign Workers to an Order by klicking an Order
                    in their Company and choosing assign ressources. Keep in
                    mind that Workers with the same skilled model attribute as
                    the Orders model will work better (amplifyer). Workers with
                    not matching attribute will lose 5 happyness each round. The
                    skills will reduce the workload each round, collecting the
                    money when hitting zero.
                  </p>
                  <img
                    src="{% static 'mygame/images/assignworkers.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Handling Special Orders</h2>
                  <p>
                    Special Orders occure by chance. Chossing the reaction an
                    occuring Special Orders is important, as it can result in
                    huge penaltys for the Company (see Special Order).
                  </p>
                  <img
                    src="{% static 'mygame/images/specialorder.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
                <div class="mt-4 mb-4 fs-4">
                  <h2>Canceling an Action</h2>
                  <p>
                    Actions queued in the Action-Tab can be canceled, if the
                    player chooses to remove it from his rounds choices.
                  </p>
                  <img
                    src="{% static 'mygame/images/action.PNG' %}"
                    class="img-thumbnail"
                    alt="orderworkermarket"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button
        class="carousel-control-prev"
        type="button"
        data-bs-target="#myCarousel"
        data-bs-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button
        class="carousel-control-next"
        type="button"
        data-bs-target="#myCarousel"
        data-bs-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
    <script>
      // JavaScript zur navigation
      document.getElementById("company").addEventListener("click", function () {
        window.location.href =
          "{% url 'company' gameid=game.id username=user.username%}";
      });

      document
        .getElementById("viewlobby")
        .addEventListener("click", function () {
          window.location.href =
            "{% url 'lobby' gameid=game.id username=user.username%}";
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
  </body>
</html>
