fix bugs with mod transfer

This commit is contained in:
AlecM33
2021-12-29 01:43:43 -05:00
parent a7c85a8d0f
commit 9de38cec5b
11 changed files with 68 additions and 50 deletions

View File

@@ -320,6 +320,7 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
backButton.addEventListener('click', backHandler);
backButton.setAttribute("id", "step-back-button");
backButton.classList.add('cancel');
backButton.classList.add('app-button');
document.getElementById("tracker-container").prepend(backButton);
}
@@ -328,11 +329,13 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
fwdButton.innerHTML = "Next \u25b6";
fwdButton.addEventListener('click', forwardHandler);
fwdButton.setAttribute("id", "step-forward-button");
fwdButton.classList.add('app-button');
document.getElementById("tracker-container").appendChild(fwdButton);
} else if (forward && builtGame !== null) {
let createButton = document.createElement("button");
createButton.innerText = "Create";
createButton.setAttribute("id", "create-game");
createButton.classList.add('app-button');
createButton.addEventListener("click", () => {
forwardHandler(
builtGame.deck.filter((card) => card.quantity > 0),
@@ -369,6 +372,7 @@ function loadCustomRoles(deckManager) {
let createRoleButton = document.createElement("button");
createRoleButton.setAttribute("id", "custom-role-btn");
createRoleButton.classList.add('app-button');
createRoleButton.innerText = '+ Create Custom Role';
let form = document.createElement("form");

View File

@@ -245,6 +245,10 @@ export class GameStateRenderer {
this.transferModHandlers,
this.socket
);
if (document.querySelectorAll('.potential-moderator').length === 0) {
document.getElementById("transfer-mod-modal-content").innerText = "There is nobody available to transfer to."
}
}
renderEndOfGame() {

View File

@@ -16,7 +16,7 @@ export const templates = {
"</div>" +
"</div>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"</div>" +
"<div>" +
@@ -43,7 +43,7 @@ export const templates = {
"<div id='game-timer'></div>" +
"</div>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"</div>" +
"<div id='game-role' style='display:none'>" +
@@ -66,7 +66,7 @@ export const templates = {
"<div id='game-timer'></div>" +
"</div>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"</div>" +
"<div id='game-people-container'>" +
@@ -79,7 +79,7 @@ export const templates = {
"<h3>Transfer Mod Powers &#128081;</h3>" +
"<div id='transfer-mod-modal-content'></div>" +
"<div id='modal-button-container'>" +
"<button id='close-mod-transfer-modal-button'>Cancel</button>" +
"<button id='close-mod-transfer-modal-button' class='app-button cancel'>Cancel</button>" +
"</div>" +
"</div>" +
"<div id='game-header'>" +
@@ -92,7 +92,7 @@ export const templates = {
"</div>" +
"<button id='mod-transfer-button' class='moderator-player-button make-mod-button'>Transfer Mod Powers \uD83D\uDD00</button>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"</div>" +
"<div>" +
@@ -116,7 +116,7 @@ export const templates = {
"<h3>Transfer Mod Powers &#128081;</h3>" +
"</div>" +
"<div id='modal-button-container'>" +
"<button id='close-modal-button' class='cancel'>Cancel</button>" +
"<button id='close-modal-button' class='cancel app-button'>Cancel</button>" +
"</div>" +
"</form>" +
"</div>" +
@@ -129,7 +129,7 @@ export const templates = {
"<div id='play-pause'>" + "</div>" +
"</div>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"</div>" +
"<div id='game-role' style='display:none'>" +
@@ -205,18 +205,18 @@ export const templates = {
"<h2>Roles in this game:</h2>" +
"<div id='game-role-info-container'></div>" +
"<div id='modal-button-container'>" +
"<button id='close-role-info-modal-button'>Close</button>" +
"<button id='close-role-info-modal-button' class='app-button'>Close</button>" +
"</div>" +
"</div>",
END_OF_GAME_VIEW:
"<h2>The moderator has ended the game. Roles are revealed.</h2>" +
"<div id='end-of-game-header'>" +
"<div>" +
"<button id='role-info-button'>View Role Info <img src='/images/info.svg'</button>" +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
"</div>" +
"<div>" +
"<a href='/'>" +
"<button>Go Home \uD83C\uDFE0</button>" +
"<button class='app-button'>Go Home \uD83C\uDFE0</button>" +
"</a>" +
"</div>" +
"</div>" +

View File

@@ -87,6 +87,7 @@ function initializeGame(stateBucket, socket, timerWorker, userId, gameStateRende
}
function processGameState (currentGameState, userId, socket, gameStateRenderer, gameTimerManager, timerWorker) {
console.log(currentGameState);
displayClientInfo(currentGameState.client.name, currentGameState.client.userType);
switch (currentGameState.status) {
case globals.STATUS.LOBBY:

View File

@@ -34,7 +34,6 @@ body {
margin: 0 auto;
position: relative;
background-color: #0f0f10;
height: 100vh;
}
.bmc-btn {
@@ -140,7 +139,7 @@ button {
justify-content: center;
}
button:not(#navbar-hamburger), input[type="submit"] {
.app-button, input[type="submit"] {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
background-color: #13762b;
@@ -152,10 +151,14 @@ button:not(#navbar-hamburger), input[type="submit"] {
text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
}
button:not(#navbar-hamburger):active, input[type=submit]:active {
.app-button:active, input[type=submit]:active {
border: 2px solid #21ba45;
}
.cancel {
background-color: #762323 !important;
}
.cancel:hover {
background-color: #623232 !important;
border: 2px solid #8a1c1c !important;
@@ -172,7 +175,7 @@ button:not(#navbar-hamburger):active, input[type=submit]:active {
align-items: center;
}
button:not(#navbar-hamburger):hover, input[type="submit"]:hover, #game-link:hover {
.app-button:hover, input[type="submit"]:hover, #game-link:hover {
background-color: #326243;
border: 2px solid #1c8a36;
}

View File

@@ -14,10 +14,6 @@
margin: 0.5em 0;
}
body {
margin-bottom: 100px;
}
#lobby-players {
overflow-y: auto;
max-height: 30em;
@@ -49,7 +45,7 @@ body {
flex-wrap: wrap;
display: flex;
width: 95%;
margin: 1em auto 0 auto;
margin: 1em auto 85px auto;
}
#game-state-container h2 {
@@ -66,7 +62,7 @@ h1 {
margin: 0.5em auto;
}
#game-state-container > div:not(#transfer-mod-modal-background):not(#transfer-mod-modal){
#game-state-container > div:not(#transfer-mod-modal-background):not(#transfer-mod-modal):not(#game-people-container) {
margin: 1em;
}
@@ -76,7 +72,7 @@ h1 {
#footer.game-page-footer {
margin-top: 1em;
margin-bottom: 1em;
margin-bottom: 85px;
}
#footer.game-page-footer a {
@@ -581,6 +577,13 @@ label[for='moderator'] {
background-color: #3f5256;
font-size: 18px;
padding: 10px;
border: 2px transparent;
border-radius: 3px;
color: #d7d7d7;
}
.make-mod-button:hover {
cursor: pointer;
}
.good-players {
@@ -660,12 +663,14 @@ label[for='moderator'] {
padding: 10px 10px 0 10px;
border-radius: 3px;
min-height: 25em;
min-width: 18em;
max-width: 30em;
max-width: 25em;
min-width: 17em;
margin-top: 1em;
}
#transfer-mod-modal-content {
margin-bottom: 2em;
color: #d7d7d7;
}
#game-state-container.vertical-flex {
@@ -683,7 +688,7 @@ label[for='moderator'] {
}
#game-state-container {
margin: 0 auto 0 auto;
margin: 0 auto 85px auto;
}
button {

View File

@@ -1,6 +1,6 @@
html {
background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgb(17 18 18) 35%, rgba(27,31,31,1) 100%);
/*background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgb(17 18 18) 35%, rgba(27,31,31,1) 100%);*/
}
body {

View File

@@ -41,7 +41,7 @@
<textarea style="resize:none" id="role-description" rows="10" cols="30" placeholder="Describe your role..." required></textarea>
</div>
<div id="modal-button-container">
<button id="close-modal-button" class="cancel">Close</button>
<button id="close-modal-button" class="cancel app-button">Close</button>
<input type="submit" id="create-role-button" value="Create Role"/>
</div>
</form>

View File

@@ -58,15 +58,6 @@
</div>
<div class="animated-placeholder animated-placeholder-long"></div>
</div>
<footer id="footer" class="game-page-footer">
<div>
<a href="https://github.com/AlecM33/Werewolf"><img src='/images/GitHub-Mark-Light-120px-plus.png'/></a>
<a href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top"><img src='/images/email.svg'/></a>
</div>
<div>
<p>Werewolf created by Andrew Plotkin</p>
</div>
</footer>
<script src="/dist/game-bundle.js"></script>
</body>
</html>

View File

@@ -26,7 +26,7 @@
<img src="../images/logo_cropped.gif"/>
<h3>A tool to run werewolf when not in-person, or in any setting without a deck of cards.</h3>
<a href="/create">
<button id="home-create-button">Create A Game</button>
<button id="home-create-button" class="app-button">Create A Game</button>
</a>
<div id="join-container">
<label for="join-form">Join A Game</label>