mirror of
https://github.com/AlecM33/Werewolf.git
synced 2025-12-28 16:57:51 +01:00
149 lines
9.9 KiB
HTML
149 lines
9.9 KiB
HTML
<!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>
|