<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>How to Use</title>
    <meta name="description" content="How to use this app.">
    <meta property="og:title" content="How to use">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://play-werewolf.app/how-to-use">
    <meta property="og:description" content="How to use this app.">
    <meta property="og:image" content="image.png">
    <link rel="icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    <link rel="stylesheet" href="/styles/GLOBAL.css">
    <link rel="stylesheet" href="/styles/create.css">
    <link rel="stylesheet" href="/styles/modal.css">
    <link rel="stylesheet" href="/styles/hamburgers.css">
</head>
<body>
<div id="mobile-menu-background-overlay"></div>
<div id="navbar"></div>
<div id="how-to-use-container">
    <div id="tutorial-links">
        <ul>
            <li>
                <a href="#purpose-of-the-app">Purpose of the App</a>
            </li>
            <li>
                <a href="#creating-a-game">Creating a Game</a>
            </li>
            <li>
                <a href="#being-the-moderator">Being the Moderator</a>
            </li>
            <li>
                <a href="#being-a-player">Being a Player</a>
            </li>
        </ul>
    </div>
    <h1 class="how-to-use-header" id="purpose-of-the-app">Purpose of the Application</h1>
    <div class="how-to-use-section">This app serves as a means of running games in a social setting where a traditional
        running of the game is hindered. This might be when people are meeting virtually, and thus roles can't be handed
        out in-person, or when people are in-person but don't have Werewolf cards with them. You can use a deck of regular
        playing cards, but it can be difficult for players to remember which card signifies which role, especially if
        you want to build a crazy game with many different roles. Even when people are together and have cards, there's
        information that would be great to centralize for everyone - a timer, role descriptions, and the in/out status of
        players. This app attempts to provide the utilities necessary to run Werewolf with all the different roles you want,
        wherever you can access the internet.
    </div>
    <h1 class="how-to-use-header" id="creating-a-game">Creating a Game</h1>
    <div class="how-to-use-section">
        Creating a game through the app has 3 main components:
        <br>
        <h3>Step One: Choosing method of moderation</h3>
        <br>
        You have two options for moderation during the game. If the moderator isn't playing, you can choose the <span class="emphasized">dedicated
        moderator</span> option. Dedicated Moderators are not dealt into the game. Once they start the game, they will know
        everyone's role. At that point, they can kill players, reveal players' roles to everyone else, transfer their
        moderator powers, play/pause the timer (if there is one), and end the game when team good or evil wins.
        <br><br>
        Similarly, you can also choose the <span class="emphasized">temporary moderator</span> option. You are dealt a role,
        and you have the same powers as the dedicated moderator, with the exception of game knowledge - you know the same
        information that a regular player does. When you remove the first player from the game (which can be yourself),
        they will automatically become the dedicated moderator, and the temporary moderator--if they are a different person--will become
        a killed player.
        <br><br>
        <span class="emphasized">Dedicated moderators</span> can <span class="emphasized">transfer their moderator powers</span>
        to a player that is out, or to a spectator. That way, if the current dedicated moderator has to leave, or simply
        does not want to moderate anymore, they can easily delegate.
        <br><br>
        <h3>Step Two: Build your deck</h3>
        <br>
        There is a role box on this page that includes a list of <span class="emphasized">default roles</span> and a list of <span class="emphasized">custom roles</span>, which can be
        displayed by selecting the appropriate button within the box. If you want to add a certain role to the game,
        <span class="emphasized">click the green plus</span>, and one copy of it will be added to the "deck," which is the other box displaying a player
        count. Likewise, if you want to remove one copy of a given role, <span class="emphasized">click the red minus button</span> on the role in the deck box.
        <br><br>
        Here I add 3 villagers to the game, and then remove them:
        <br><br>
        <img class='tutorial-image-small' src="../images/tutorial/add-role-to-deck.gif"/>
        <br><br>
        <span class="emphasized">You can add, edit, and remove custom roles.</span> You can also import and export them via a formatted text file. Click
        the hamburger menu on the role box to see the import/export options. Here I create a new custom role and observe
        it in the list:
        <br><br>
        <img alt="create-custom-role" class='tutorial-image-small' src="../images/tutorial/create-custom-role.gif"/>
        <br><br>
        <h3>Step Three: Set an optional timer</h3>
        <br>
        If you don't fill in these fields, the game will be untimed. If you do, <span class="emphasized">you can use a time between 1 minute
        and 5 hours.</span> The timer can be played and paused by the current moderator. Importantly, when the timer expires,
        <span class="emphasized">nothing automatically happens.</span> Users will be notified that it has expired, and
        the timer will display 0s, but the game will not end. Moderators always choose to end or restart the game manually.<br><br>
    </div>
    <h1 class="how-to-use-header" id="being-the-moderator">Being the Moderator</h1>
    <div class="how-to-use-section">
        This is an example of what a <span class="emphasized">dedicated moderator</span> sees during the game:
        <br><br>
        <img class='tutorial-image-small-portrait' src="../images/screenshots/dedicated_mod_inprogress_mobile.webp"/>
        <br><br>
        They can see who is on which team and who has each role. The moderator kills and reveals players. They are
        separate actions - note the two buttons for each player. So if you want to play a game where people's roles are
        not revealed during the day or night, you can use the "kill" option but not the reveal option. Or, if you happen to
        have a role that reveals but is not immediately removed from the game, you can use the "reveal" option but not the
        "kill" option. You of course don't have to utilize either of these options. If you just want to use the app to deal
        cards, you are free to do that.
        <br><br>
        The moderator also has permissions to play and pause the timer, and can end the game (revealing everyone's role)
        or restart the game, which will reset the timer, give everyone new roles, and reset the status of anyone that was
        killed or revealed.
        <br><br>
        The <span class="emphasized">temporary moderator view</span> looks like the below image. They have
        much the same abilities as a dedicated moderator, except they don't know role or alignment information and cannot
        transfer their powers. Their powers will be transferred automatically to the first person they remove from the game
        (which can be themselves).
        <br><br>
        <img class='tutorial-image-small-portrait' src="../images/screenshots/temp_mod_inprogress_mobile.webp"/>
        <br><br>
        <h3>Transferring your moderator powers</h3>
        <br>
        <span class="emphasized">You can transfer your moderator abilities to anyone that has been removed from the game, or to anyone that happens
            to be spectating.</span> Here we select a spectator and transfer our powers to them, and then we inherit the view
            of what we were before, which is a player that was removed from the game:
        <br><br>
        <img class='tutorial-image-small-portrait' src="../images/tutorial/mod-transfer.gif"/>
    </div>
    <h1 class="how-to-use-header" id="being-a-player">Being a Player</h1>
    <div class="how-to-use-section">
        This is an example of what a <span class="emphasized">player</span> is seeing. The timer is running, and they view their
        role by double-clicking it:
        <br><br>
        <img class='tutorial-image-small-portrait' src="../images/tutorial/player-view.gif"/>
        <br><br>
        There are three main things - the <span class="emphasized">timer</span>, your <span class="emphasized">role card</span>
        and the <span class="emphasized">player list</span>. Players can view the timer, but only the current moderator can play and pause it.
        <span class="emphasized">Your role card starts flipped over</span> - this is useful if you are in-person and don't want someone else accidentally seeing your role as
        it is dealt. <span class="emphasized">You can view your role at any time by double-clicking/double-tapping it</span>. Requiring a double-click guards against the possibility
        of accidentally flipping your role when tapping other things. Within the <span class="emphasized">player list</span>, you can see
        <span class="emphasized">who is alive or dead</span> and <span class="emphasized">who has had their role revealed</span>. There is
        also a <span class="emphasized">role info button</span> that, when pressed, displays all the different roles in the current game,
        including their descriptions and alignment (good/evil).
        <br><br>
    </div>
</div>
<script src="/dist/howToUse-bundle.js"></script>
</body>
</html>
