editing custom roles

This commit is contained in:
AlecM33
2022-01-11 19:57:13 -05:00
parent 3b14ae3978
commit c0c4ccdd74
14 changed files with 172 additions and 58 deletions

View File

@@ -23,8 +23,8 @@
<div id="navbar"></div>
<div id="game-creation-container" class="container">
<div id="modal-background" class="modal-background" style="display: none"></div>
<div id="add-role-modal" class="modal" style="display: none">
<form id="add-role-form">
<div id="role-modal" class="modal" style="display: none">
<form id="role-form">
<div>
<label for="role-name">Role Name</label>
<input id="role-name" type="text" placeholder="Name your role..." required/>
@@ -32,8 +32,8 @@
<div>
<label for="role-alignment">Role Alignment</label>
<select id="role-alignment" required>
<option value="good">Good</option>
<option value="evil">Evil</option>
<option value="good">good</option>
<option value="evil">evil</option>
</select>
</div>
<div>

View File

@@ -34,12 +34,50 @@
</div>
<h1 class="">Creating a Game</h1>
<div class="how-to-use-section">
Creating a game through the app is a 4-step process:
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 "dedicated
moderator" option.
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 <span class="emphasized">not dealt into the game</span>. 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. The key differences
here are that you are <span class="emphasized">dealt a role</span>. 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, your powers will be automatically transferred to them - they become
the dedicated moderator, and you become a regular player.
<br><br>
<span class="emphasized">Dedicated modertors</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 deligate.
<br><br>
<img src="../images/tutorial/moderation-option.png" alt="moderation-option"/>
<br><br>
<h3>Step Two: Build your deck</h3>
<br>
A default set of common roles are available to you on this page. <span class="emphasized">Available roles</span>
are ones that have widget where you can adjust their quantity and add them to the current game. They have been
"taken out of the box," so to speak:
<br><br>
<img class='tutorial-image-small' src="../images/tutorial/default-roles.PNG"/>
<br><br>
You also have a <span class="emphasized">custom role box</span>. These are not yet "available," in that they
are still "in the box." If you want them in the game, click the green plus button, and they will become part of the
available roles - a widget will be created, and you can increment or decrement the quantity of that card in the game.
Custom roles can be created, removed, edited, and imported/exported via a formatted text file:
<br><br>
<img class='tutorial-image-small' src="../images/tutorial/custom-roles.PNG"/>
<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, you can use a time between 1 minute
and 5 hours. The timer can be played and paused by the current moderator. Importantly, when the timer expires
<span class="emphasized">nothing automatically happens.</span> The timer will display 0s, but the game will not
end. Whether or not the game ends immediately after that or continues longer is up to the moderator.
<br><br>
<p style="text-align:center;color:gray;margin-bottom:3em;">More content coming soon.</p>
</div>
</div>
<script src="/dist/howToUse-bundle.js"></script>