Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-27 00:07:50 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
45f1d997302ab12262bc2cc234924e2c3edcd54e
Werewolf/client/src/modules/Templates.js
AlecM33 a0d68e636d refactor join to intermediary page
2022-01-24 23:34:12 -05:00

273 lines
11 KiB
JavaScript
Raw Blame History

export const templates = {
LOBBY:
"<div id='lobby-header'>" +
'<div>' +
"<label for='game-link'>Copy Share Link</label>" +
"<div tabindex='0' id='game-link'></div>" +
'</div>' +
"<div id='game-parameters'>" +
'<div>' +
"<img alt='clock' src='/images/clock.svg'/>" +
"<div id='game-time'></div>" +
'</div>' +
'<div>' +
"<img alt='person' src='/images/person.svg'/>" +
"<div id='game-player-count'></div>" +
'</div>' +
'</div>' +
'<div>' +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
'</div>' +
'</div>' +
'<div>' +
"<div id='lobby-people-container'>" +
"<label for='lobby-players'>Other People</label>" +
"<div id='lobby-players'></div>" +
'</div>' +
"<div id='lobby-footer'>" +
"<div id='game-deck'></div>" +
'</div>' +
'</div>',
ENTER_NAME_STEP:
`<div id='step-4'>
<div>
<input type="text" id="moderator-name" autocomplete='given-name' placeholder="enter your name...">
</div>
</div>`,
START_GAME_PROMPT:
"<div id='start-game-prompt'>" +
"<button id='start-game-button'>Start Game</button>" +
'</div>',
END_GAME_PROMPT:
"<div id='end-game-prompt'>" +
"<button id='end-game-button'>End Game</button>" +
'</div>',
PLAYER_GAME_VIEW:
"<div id='game-header'>" +
'<div>' +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
'</div>' +
'<div>' +
"<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'>" +
"<h4 id='role-name'></h4>" +
"<img alt='role' id='role-image'/>" +
"<p id='role-description'></p>" +
'</div>' +
"<div id='game-role-back'>" +
'<h4>Click to show your role</h4>' +
'<p>(click again to hide)</p>' +
'</div>' +
"<div id='game-people-container'>" +
"<label id='players-alive-label'></label>" +
"<div id='game-player-list'></div>" +
'</div>',
SPECTATOR_GAME_VIEW:
"<div id='game-header'>" +
'<div>' +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
'</div>' +
'<div>' +
"<button id='role-info-button' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
'</div>' +
'</div>' +
"<div id='game-people-container'>" +
"<label id='players-alive-label'></label>" +
"<div id='game-player-list'></div>" +
'</div>',
MODERATOR_GAME_VIEW:
"<div id='transfer-mod-modal-background' class='modal-background' style='display: none'></div>" +
"<div tabindex='-1' id='transfer-mod-modal' class='modal' style='display: none'>" +
'<h3>Transfer Mod Powers &#128081;</h3>' +
"<div id='transfer-mod-modal-content'></div>" +
"<div class='modal-button-container'>" +
"<button id='close-mod-transfer-modal-button' class='app-button cancel'>Cancel</button>" +
'</div>' +
'</div>' +
"<div id='game-header'>" +
"<div class='timer-container-moderator'>" +
'<div>' +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
'</div>' +
"<div id='play-pause'>" + '</div>' +
'</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' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
'</div>' +
'</div>' +
'<div>' +
"<label id='players-alive-label'></label>" +
"<div id='game-player-list'>" +
"<div class='evil-players'>" +
"<label class='evil'>Team Evil</label>" +
"<div id='player-list-moderator-team-evil'></div>" +
'</div>' +
"<div class='good-players'>" +
"<label class='good'>Team Good</label>" +
"<div id='player-list-moderator-team-good'></div>" +
'</div>' +
'</div>' +
'</div>',
TEMP_MOD_GAME_VIEW:
"<div id='transfer-mod-modal-background' class='modal-background' style='display: none'></div>" +
"<div id='transfer-mod-modal' class='modal' style='display: none'>" +
"<form id='transfer-mod-form'>" +
"<div id='transfer-mod-form-content'>" +
'<h3>Transfer Mod Powers &#128081;</h3>' +
'</div>' +
"<div class='modal-button-container'>" +
"<button id='close-modal-button' class='cancel app-button'>Cancel</button>" +
'</div>' +
'</form>' +
'</div>' +
"<div id='game-header'>" +
"<div class='timer-container-moderator'>" +
'<div>' +
"<label for='game-timer'>Time Remaining</label>" +
"<div id='game-timer'></div>" +
'</div>' +
"<div id='play-pause'>" + '</div>' +
'</div>' +
'<div>' +
"<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'>" +
"<h4 id='role-name'></h4>" +
"<img alt='role' id='role-image'/>" +
"<p id='role-description'></p>" +
'</div>' +
"<div id='game-role-back'>" +
'<h4>Click to show your role</h4>' +
'<p>(click again to hide)</p>' +
'</div>' +
"<div id='game-people-container'>" +
"<label id='players-alive-label'></label>" +
"<div id='game-player-list'></div>" +
'</div>' +
'</div>',
MODERATOR_PLAYER:
'<div>' +
"<div class='game-player-name'></div>" +
"<div class='game-player-role'></div>" +
'</div>' +
"<div class='player-action-buttons'>" +
"<button class='moderator-player-button kill-player-button'>Kill \uD83D\uDC80</button>" +
"<button class='moderator-player-button reveal-role-button'>Reveal <img src='../images/eye.svg'/></button>" +
'</div>',
GAME_PLAYER:
'<div>' +
"<div class='game-player-name'></div>" +
"<div class='game-player-role'></div>" +
'</div>',
INITIAL_GAME_DOM:
"<div id='game-title'></div>" +
"<div id='client-container'>" +
"<label for='client'>You</label>" +
"<div id='client'>" +
"<div id='client-name'></div>" +
"<div id='client-user-type'></div>" +
'</div>' +
'</div>' +
"<div id='game-state-container'></div>",
// via https://loading.io/css/
SPINNER:
'<div class="lds-spinner">' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'<div></div>' +
'</div>',
NAME_CHANGE_MODAL:
"<div id='change-name-modal-background' class='modal-background'></div>" +
"<div tabindex='-1' id='change-name-modal' class='modal'>" +
"<form id='change-name-form'>" +
"<div id='transfer-mod-form-content'>" +
"<label for='player-new-name'>Your name:</label>" +
"<input id='player-new-name' autocomplete='given-name' type='text'/>" +
'</div>' +
"<div class='modal-button-container'>" +
"<input type='submit' id='submit-new-name' value='Set Name'/>" +
'</div>' +
'</form>' +
'</div>',
ROLE_INFO_MODAL:
"<div id='role-info-modal-background' class='modal-background'></div>" +
"<div tabindex='-1' id='role-info-modal' class='modal'>" +
'<h2>Roles in this game:</h2>' +
"<div id='game-role-info-container'></div>" +
"<div class='modal-button-container'>" +
"<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' class='app-button'>View Role Info <img src='/images/info.svg'</button>" +
'</div>' +
'<div>' +
"<a href='/'>" +
"<button class='app-button'>Go Home \uD83C\uDFE0</button>" +
'</a>' +
'</div>' +
'</div>' +
"<div id='game-people-container'>" +
"<label id='players-alive-label'></label>" +
"<div id='game-player-list'></div>" +
'</div>',
CREATE_GAME_DECK:
"<div id='deck-container'>" +
'<div>' +
"<label for='deck-good'>Available Good Roles</label>" +
"<div id='deck-good'></div>" +
'</div>' +
'<div>' +
"<label for='deck-evil'>Available Evil Roles</label>" +
"<div id='deck-evil'></div>" +
'</div>' +
'</div>',
CREATE_GAME_CUSTOM_ROLES:
'<div id="custom-roles-container">' +
'<button id="custom-role-hamburger" class="hamburger hamburger--collapse" type="button">' +
'<span class="hamburger-box">' +
'<span class="hamburger-inner"></span>' +
'</span>' +
'</button>' +
'<div id="custom-role-actions" style="display:none">' +
'<div tabindex="0" class="custom-role-action" id="custom-roles-export">Export</div>' +
'<div tabindex="0" class="custom-role-action" id="custom-roles-import">Import</div>' +
'</div>' +
'<label for="add-card-to-deck-form">Custom Role Box</label>' +
'<div id="deck-select"></div>' +
'<button id="custom-role-btn" class="app-button">+ Create Custom Role</button>' +
'</div>',
CREATE_GAME_DECK_STATUS:
'<div id="deck-status-container">' +
'<div id="deck-count">0 Players</div>' +
'<div id="deck-list"></div>' +
'</div>',
DECK_SELECT_ROLE:
'<div class="deck-select-role-name"></div>' +
'<div class="deck-select-role-options">' +
'<img tabindex="0" class="deck-select-include" src="images/add.svg" title="make available" alt="include"/>' +
'<img tabindex="0" class="deck-select-info" src="images/info.svg" title="info" alt="info"/>' +
'<img tabindex="0" class="deck-select-edit" src="images/pencil.svg" title="edit" alt="edit"/>' +
'<img tabindex="0" class="deck-select-remove" src="images/delete.svg" title="remove" alt="remove"/>' +
'</div>'
};
Reference in New Issue View Git Blame Copy Permalink