diff --git a/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp b/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp deleted file mode 100644 index 10dd35c..0000000 Binary files a/client/src/images/screenshots/dedicated_mod_inprogress_mobile.webp and /dev/null differ diff --git a/client/src/images/screenshots/temp_mod_inprogress_mobile.webp b/client/src/images/screenshots/temp_mod_inprogress_mobile.webp deleted file mode 100644 index 673ef28..0000000 Binary files a/client/src/images/screenshots/temp_mod_inprogress_mobile.webp and /dev/null differ diff --git a/client/src/images/tutorial/dedicated-mod-in-progress-mobile.webp b/client/src/images/tutorial/dedicated-mod-in-progress-mobile.webp new file mode 100644 index 0000000..566c62e Binary files /dev/null and b/client/src/images/tutorial/dedicated-mod-in-progress-mobile.webp differ diff --git a/client/src/images/tutorial/dedicated-mod-lobby-mobile.webp b/client/src/images/tutorial/dedicated-mod-lobby-mobile.webp new file mode 100644 index 0000000..fe184f2 Binary files /dev/null and b/client/src/images/tutorial/dedicated-mod-lobby-mobile.webp differ diff --git a/client/src/images/tutorial/dedicated-mod.webp b/client/src/images/tutorial/dedicated-mod.webp deleted file mode 100644 index 70249d2..0000000 Binary files a/client/src/images/tutorial/dedicated-mod.webp and /dev/null differ diff --git a/client/src/images/tutorial/mod-transfer.gif b/client/src/images/tutorial/mod-transfer.gif index e2fd2a5..fc3bd27 100644 Binary files a/client/src/images/tutorial/mod-transfer.gif and b/client/src/images/tutorial/mod-transfer.gif differ diff --git a/client/src/images/tutorial/temp-mod-in-progress-mobile.webp b/client/src/images/tutorial/temp-mod-in-progress-mobile.webp new file mode 100644 index 0000000..556531a Binary files /dev/null and b/client/src/images/tutorial/temp-mod-in-progress-mobile.webp differ diff --git a/client/src/images/tutorial/temporary-mod.webp b/client/src/images/tutorial/temporary-mod.webp deleted file mode 100644 index 2ae62f0..0000000 Binary files a/client/src/images/tutorial/temporary-mod.webp and /dev/null differ diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 61da69d..74bbd85 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -408,7 +408,7 @@ input { } .tutorial-image-small-portrait { - width: 16em !important; + width: 19em !important; } #desktop-links > a:nth-child(1), #mobile-links a:nth-child(1) { diff --git a/client/src/views/how-to-use.html b/client/src/views/how-to-use.html index d595dca..725eb5b 100644 --- a/client/src/views/how-to-use.html +++ b/client/src/views/how-to-use.html @@ -41,104 +41,115 @@

Purpose of the Application

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 + out in-person, or when people are in-person but don't have Werewolf/Mafia 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, + players. This app attempts to provide the utilities necessary to run games with all the different roles you want, wherever you can access the internet.

Creating a Game

Creating a game through the app has 3 main components:
-

Step One: Choosing method of moderation

+

Step One: Choosing a method of moderation


- You have two options for moderation during the game. If the moderator isn't playing, you can choose the dedicated - moderator 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. + You have two options for moderation during the game. If the moderator isn't playing, you can choose the Dedicated + Moderator option. Dedicated Moderators are not dealt into the game. Once they start the game, they will know + everyone's role. During the game, they can kill players, reveal players' roles, transfer their + moderator powers, play/pause the timer (if there is one), end the game (revealing everyone's role), or return the game to the lobby.

- Similarly, you can also choose the temporary moderator 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 + Similarly, you can also choose the Temporary Moderator option. You are dealt a role, + and you have the same powers as the Dedicated Moderator, except 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. If that person is not you, you will become a regular player. + they will automatically become the dedicated moderator.

- Dedicated moderators can transfer their moderator powers - 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. + Dedicated Moderators can transfer their moderator powers 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.

Step Two: Build your deck


- There is a role box on this page that includes a list of default roles and a list of custom roles, which can be - displayed by selecting the appropriate button within the box. If you want to add a certain role to the game, - click the green plus, 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, click the red minus button on the role in the deck box. + There is a role box on this page that includes a list of Default Roles and a list + of Custom Roles, which can be displayed by selecting the appropriate button within the box. + If you want to add a certain role to the game, click the green plus 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, click the red minus on the role + in the Deck Box.

Here I add 3 villagers to the game, and then remove them:



- You can add, edit, and remove custom roles. 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 + You can add, edit, and remove Custom Roles. 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:

create-custom-role

Step Three: Set an optional timer


- 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, - nothing automatically happens. 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.

+ 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, + nothing automatically happens. 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 the game manually.

Being the Moderator

- This is an example of what a dedicated moderator sees during the game: +

In the Lobby

+
+ In the Lobby, moderators can manage the people in the room and the cards in the game. By clicking + the three vertical dots (AKA the "kebab menu") next to a given player (point A + in the screenshot below), you have the option to kick that player. You can do the same with a spectator by first + viewing the spectator list (point C) and clicking their kebab menus. By clicking the + "Edit Roles" button (point B), you can change which roles are in the game and the + quantities of those roles. This button will bring up the same module you encountered when you first created the room. + Saving any changes to the roles may affect the player count. If you wish to start the game (point B), the number + of Players in the Lobby must equal the number of cards in the game.

- +

- 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. +

During the Game

+
+ Dedicated Moderators can see who is on which team and who is which role. The moderator + Kills and Reveals players (Point A below). They are separate actions. 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. The moderator also has permission to + play and pause the Timer (Point B), and can end the game (revealing everyone's role) + or return the game to the Lobby (Point C), where it can be started anew with different settings.

- 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. +

- The temporary moderator view looks like the below image. They have + Similarly, the Temporary Moderator view 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).

- +

Transferring your moderator powers


- You can transfer your moderator abilities to anyone that has been removed from the game, or to anyone that happens - to be spectating. 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: + You can transfer your moderator abilities to anyone that has been removed from the game, or to anyone that happens + to be spectating. Here we select a killed player and transfer our powers to them:

Being a Player

- This is an example of what a player is seeing. The timer is running, and they view their + This is an example of what a Player is seeing. The timer is running, and they view their role by double-clicking it:



- There are three main things - the timer, your role card - and the player list. Players can view the timer, but only the current moderator can play and pause it. - Your role card starts flipped over - this is useful if you are in-person and don't want someone else accidentally seeing your role as - it is dealt. You can view your role at any time by double-clicking/double-tapping it. Requiring a double-click guards against the possibility - of accidentally flipping your role when tapping other things. Within the player list, you can see - who is alive or dead and who has had their role revealed. There is - also a role info button that, when pressed, displays all the different roles in the current game, - including their descriptions and alignment (good/evil). + There are three main things - the Timer, your Role Card + and the Player List. Players can view the timer, but only the current moderator can play and pause it. + Your role card starts flipped over - this is useful if you are in-person and don't want someone else accidentally seeing your role as + it is dealt. You can view your role at any time by double-clicking/double-tapping it. Requiring a double-click guards against the possibility + of accidentally flipping your role when tapping other things. Within the Player List, you can see who is alive or + dead and who has had their role revealed. There is also a role info button that, + when pressed, displays all the different roles in the current game, including their descriptions and alignment (Good/Evil).