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

confirmation module, tutorial updates

Browse Source
This commit is contained in:
AlecM33
2022-12-07 13:04:32 -05:00
parent 07e5202134
commit 07d452b2d2
16 changed files with 240 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
client/src/modules/front_end_components/Confirmation.js Normal file
View File

@@ -0,0 +1,63 @@
import { toast } from './Toast.js';
export const Confirmation = (message, onYes) => {
document.querySelector('#confirmation')?.remove();
document.querySelector('#confirmation-background')?.remove();
let confirmation = document.createElement('div');
confirmation.setAttribute('id', 'confirmation');
confirmation.innerHTML =
`<div id="confirmation-message"></div>
<div class="confirmation-buttons">
<button id="confirmation-cancel-button" class="app-button cancel">Cancel</button>
<button id="confirmation-yes-button" class="app-button">Yes</button>
</div>`;
confirmation.querySelector('#confirmation-message').innerText = message;
let background = document.createElement('div');
background.setAttribute('id', 'confirmation-background');
const cancelHandler = () => {
confirmation.remove();
background.remove();
confirmation = null;
background = null;
};
const confirmHandler = () => {
const button = confirmation.querySelector('#confirmation-yes-button');
button.classList.add('disabled');
button.innerText = '...';
button.removeEventListener('click', confirmHandler);
new Promise((resolve, reject) => {
try {
resolve(onYes());
} catch (e) {
reject(e);
}
}).then((res) => {
if (res && typeof res === 'string') {
toast(res, 'success', true, true, 'medium', false);
}
confirmation.remove();
background.remove();
confirmation = null;
background = null;
}).catch((e) => {
if (typeof e === 'string') {
toast(e, 'error', true, true, 'medium', false);
}
button.addEventListener('click', confirmHandler);
button.classList.remove('disabled');
button.innerText = 'Yes';
});
};
confirmation.querySelector('#confirmation-cancel-button').addEventListener('click', cancelHandler);
confirmation.querySelector('#confirmation-yes-button').addEventListener('click', confirmHandler);
background.addEventListener('click', cancelHandler);
document.body.appendChild(background);
document.body.appendChild(confirmation);
};

8
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -63,8 +63,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
<h4>Double-click here to show your role</h4>
<p>(Double-click here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
@@ -141,8 +141,8 @@ export const HTMLFragments = {
<p id='role-description'></p>
</div>
<div id='game-role-back'>
<h4>Double-tap here to show your role</h4>
<p>(Double-tap here again to hide)</p>
<h4>Double-click here to show your role</h4>
<p>(Double-click here again to hide)</p>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>

2
client/src/modules/front_end_components/Navbar.js
View File

@@ -43,7 +43,7 @@ function getNavbarLinks (page = null, device) {
'<a class="' + linkClass + '" href="/">Home</a>' +
'<a class="' + linkClass + '" href="/create">Create</a>' +
'<a class="' + linkClass + '" href="/how-to-use">How to Use</a>' +
'<a class="' + linkClass + ' "href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top">Contact</a>' +
'<a class="' + linkClass + ' "href="mailto:play.werewolf.contact@gmail.com?Subject=Werewolf App" target="_top">Feedback</a>' +
'<a class="' + linkClass + ' "href="https://github.com/alecm33/Werewolf" target="_top">Github</a>' +
'<a class="' + linkClass + '" href="https://www.buymeacoffee.com/alecm33">Support the App</a>';
}