Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

tutorial updates

Browse Source
This commit is contained in:
AlecM33
2022-01-18 21:23:03 -05:00
parent a6051402f6
commit d04a1d2b5e
3 changed files with 29 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
client/src/images/tutorial/add-custom-role.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

26
client/src/styles/GLOBAL.css
View File

@@ -197,6 +197,7 @@ button {
} }
#how-to-use-container h1 { #how-to-use-container h1 {
color: #4b6bfa;
font-family: signika-negative, sans-serif; font-family: signika-negative, sans-serif;
} }
@@ -251,11 +252,8 @@ input {
} }
#how-to-use-container h3 { #how-to-use-container h3 {
font-size: 25px; color: #b1afcd;
} font-weight: bold;
#how-to-use-container h1 {
font-size: 40px !important;
} }
.tutorial-image-small { .tutorial-image-small {
@@ -664,6 +662,24 @@ input {
opacity: 0.85 !important;color:#ffffff !important; opacity: 0.85 !important;color:#ffffff !important;
} }
@media(max-width: 550px) {
.how-to-use-header {
font-size: 25px;
}
#how-to-use-container h3 {
font-size: 20px;
}
}
@media(min-width: 551px) {
.how-to-use-header {
font-size: 40px;
}
#how-to-use-container h3 {
font-size: 25px;
}
}
@keyframes lds-spinner { @keyframes lds-spinner {
0% { 0% {

11
client/src/views/how-to-use.html
View File

@@ -32,7 +32,7 @@
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 Werewolf with all the different roles you want,
wherever you can access the internet. wherever you can access the internet.
</div> </div>
<h1 class="">Creating a Game</h1> <h1 class="how-to-use-header">Creating a Game</h1>
<div class="how-to-use-section"> <div class="how-to-use-section">
Creating a game through the app has 3 main components: Creating a game through the app has 3 main components:
<br> <br>
@@ -57,19 +57,24 @@
<br><br> <br><br>
<h3>Step Two: Build your deck</h3> <h3>Step Two: Build your deck</h3>
<br> <br>
A default set of common roles are available to you on this page. <span class="emphasized">Available roles</span> A default set of common roles are available to you on this page. <span class="emphasized">Available Roles</span>
are ones that have a widget where you can adjust their quantity and add them to the current game. They have been are ones that have a 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: "taken out of the box," so to speak:
<br><br> <br><br>
<img class='tutorial-image-small' src="../images/tutorial/default-roles.PNG"/> <img class='tutorial-image-small' src="../images/tutorial/default-roles.PNG"/>
<br><br> <br><br>
You also have a <span class="emphasized">custom role box</span>. These are not yet "available," in that they 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 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. 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: Custom roles can be created, removed, edited, and imported/exported via a formatted text file:
<br><br> <br><br>
<img class='tutorial-image-small' src="../images/tutorial/custom-roles.PNG"/> <img class='tutorial-image-small' src="../images/tutorial/custom-roles.PNG"/>
<br><br> <br><br>
Here is this in action. We add the "Clawed Minion" from the Custom Role Box to the Available Roles, and then
we increment the quantity to 1 and see it has been added to the game:
<br><br>
<img class='tutorial-image-small' src="../images/tutorial/add-custom-role.gif"/>
<br><br>
<h3>Step Three: Set an optional timer</h3> <h3>Step Three: Set an optional timer</h3>
<br> <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 If you don't fill in these fields, the game will be untimed. If you do, you can use a time between 1 minute