Skip to content

Commit

Permalink
fix #259: move buttons to bottom of screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffrey-wu
geoffrey-wu committed Sep 21, 2024
1 parent b4f36d7 commit e6b213d
Show file tree
Hide file tree
Showing 10 changed files with 192 additions and 111 deletions.
75 changes: 45 additions & 30 deletions client/multiplayer/room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
</div>
</nav>

<div class="container-fluid mt-1 mt-lg-3 mb-5 pb-5 px-xxl-5">
<div class="container-fluid mt-3 mb-5 pb-5 px-xxl-5">
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="star-toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
Expand All @@ -91,8 +91,8 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
</div>
</div>
</div>
<div class="row" id="info">
<div class="options d-lg-block col-12 col-lg-3 order-lg-1 mb-5" id="options">
<div class="row">
<div class="d-lg-block col-12 col-lg-3 order-lg-1 mb-5" id="settings">
<div class="timer d-block p-1 text-center" id="timer">
<span class="face">10</span><span class="fraction">.0</span>
</div>
Expand Down Expand Up @@ -174,33 +174,20 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
<p class="mb-1 text-muted"><i id="private-chat-warning">chat is disabled in public rooms</i></p>
</div>
</div>
<div class="col-12 col-lg-9">
<div class="buttons position-sticky top-0 pt-2">
<button class="mb-2 btn btn-primary" id="next" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: n or s key">Next</button>
<button class="mb-2 btn btn-primary d-none" id="skip" data-bs-placement="top" data-bs-toggle="tooltip"
type="button" title="Shortcut: n or s key" disabled>Skip</button>
<button class="mb-2 btn btn-primary" id="pause" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: p key" disabled>Pause</button>
<button class="mb-2 btn btn-info" id="chat" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: enter key">Chat</button>
<button class="mb-2 btn btn-danger d-lg-none" id="toggle-options" type="button">Options</button>
<button class="mb-2 btn btn-primary float-end" id="buzz" data-bs-placement="top" data-bs-toggle="tooltip"
type="button" title="Shortcut: spacebar" disabled>Buzz</button>
<form id="answer-form">
<!-- User enters answer here -->
<div class="input-group d-none my-2" id="answer-input-group">
<input class="form-control" id="answer-input" type="text" placeholder="Enter answer" maxlength="256">
<button class="btn btn-success" id="answer-submit" type="submit">Submit</button>
</div>
</form>
<form id="chat-form">
<div class="input-group d-none my-2" id="chat-input-group">
<input class="form-control" id="chat-input" type="text" placeholder="Chat" maxlength="256">
<button class="btn btn-success" id="chat-submit" type="submit">Submit</button>
</div>
</form>
</div>
<div class="col-12 col-lg-9" id="content">
<form id="answer-form">
<!-- User enters answer here -->
<div class="input-group d-none my-2" id="answer-input-group">
<input class="form-control" id="answer-input" type="text" placeholder="Enter answer" maxlength="256">
<button class="btn btn-success" id="answer-submit" type="submit">Submit</button>
</div>
</form>
<form id="chat-form">
<div class="input-group d-none my-2" id="chat-input-group">
<input class="form-control" id="chat-input" type="text" placeholder="Chat" maxlength="256">
<button class="btn btn-success" id="chat-submit" type="submit">Submit</button>
</div>
</form>
<div class="float-row">
<span class="float-end ps-5 me-lg-2" id="question-metadata">
<b id="question-info">
Expand All @@ -216,6 +203,34 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
</div>
</div>
</div>
<div class="container-fluid py-3 px-xxl-5 position-fixed bottom-0 bg-body">
<div class="row">
<div class="col-12 col-lg-9" id="buttons">
<button class="btn btn-primary" id="next" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: n or s key">Next</button>
<button class="btn btn-primary d-none" id="skip" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: n key" disabled>Skip</button>
<button class="btn btn-primary" id="pause" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: p key" disabled>Pause</button>
<button class="btn btn-info" id="chat" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: enter key">Chat</button>
<button class="btn btn-danger" id="toggle-settings" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: e key" type="button">
<div class="d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear"
viewBox="0 0 16 16">
<path
d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0" />
<path
d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z" />
</svg>
</div>
</button>
<button class="btn btn-primary float-end" id="buzz" data-bs-placement="top" data-bs-toggle="tooltip" type="button"
title="Shortcut: spacebar" disabled>Buzz</button>
</div>
</div>
</div>

<div id="category-modal-root"></div>

Expand Down
80 changes: 48 additions & 32 deletions client/multiplayer/room.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ socket.onmessage = function (event) {
case 'set-username': return setUsername(data);
case 'set-year-range': return setYearRange(data);
case 'skip': return next(data);
case 'start': return start(data);
case 'start': return next(data);
case 'timer-update': return updateTimerDisplay(data.timeRemaining);
case 'toggle-lock': return toggleLock(data);
case 'toggle-powermark-only': return togglePowermarkOnly(data);
Expand Down Expand Up @@ -179,7 +179,7 @@ function connectionAcknowledged (message) {
break;
case 1:
showSkipButton();
document.getElementById('options').classList.add('d-none');
document.getElementById('settings').classList.add('d-none');
if (message.buzzedIn) {
document.getElementById('buzz').disabled = true;
document.getElementById('next').disabled = true;
Expand All @@ -191,7 +191,7 @@ function connectionAcknowledged (message) {
break;
case 2:
showNextButton();
document.getElementById('options').classList.add('d-none');
document.getElementById('settings').classList.add('d-none');
break;
}

Expand Down Expand Up @@ -239,7 +239,8 @@ async function connectionAcknowledgedQuery (message) {
document.getElementById('year-range-b').textContent = message.maxYear;
}

function connectionAcknowledgedTossup ({ tossup }) {
function connectionAcknowledgedTossup ({ tossup: currentTossup }) {
tossup = currentTossup;
document.getElementById('set-name-info').textContent = tossup?.set?.name ?? '';
document.getElementById('packet-number-info').textContent = tossup?.packet?.number ?? '-';
document.getElementById('question-number-info').textContent = tossup?.number ?? '-';
Expand Down Expand Up @@ -421,7 +422,7 @@ function logGiveAnswer ({ directive = null, message, username }) {
li.appendChild(secondBadge);
}

if (!directive) { li.id = ''; }
if (directive) { li.id = ''; }
}

function lostBuzzerRace ({ username, userId }) {
Expand All @@ -430,23 +431,43 @@ function lostBuzzerRace ({ username, userId }) {
}

function next ({ tossup: nextTossup, type, username }) {
logEvent(username, type === 'skip' ? 'skipped the question' : 'went to the next question');
tossup.question = document.getElementById('question').innerHTML;
tossup.answer = document.getElementById('answer').innerHTML.replace('ANSWER: ', '');
createTossupCard(tossup);
switch (type) {
case 'next':
logEvent(username, 'went to the next question');
break;
case 'skip':
logEvent(username, 'skipped the question');
break;
case 'start':
logEvent(username, 'started the game');
break;
default:
throw new Error('Invalid type');
}

if (type === 'next' || type === 'skip') {
tossup.question = document.getElementById('question').innerHTML;
tossup.answer = document.getElementById('answer').innerHTML.replace('ANSWER: ', '');
createTossupCard(tossup);
} else if (type === 'start') {
document.getElementById('next').classList.add('btn-primary');
document.getElementById('next').classList.remove('btn-success');
document.getElementById('next').textContent = 'Next';
}

tossup = nextTossup;
document.getElementById('set-name-info').textContent = tossup?.set.name ?? '';
document.getElementById('question-number-info').textContent = tossup?.number ?? '-';
document.getElementById('packet-number-info').textContent = tossup?.packet.number ?? '-';
document.getElementById('question-number-info').textContent = tossup?.number ?? '-';
document.getElementById('set-name-info').textContent = tossup?.set.name ?? '';

document.getElementById('options').classList.add('d-none');
document.getElementById('question').textContent = '';
document.getElementById('answer').textContent = '';
document.getElementById('question').textContent = '';

document.getElementById('buzz').textContent = 'Buzz';
document.getElementById('buzz').disabled = false;
document.getElementById('pause').textContent = 'Pause';
document.getElementById('pause').disabled = false;
document.getElementById('settings').classList.add('d-none');

showSkipButton();
updateTimerDisplay(100);
Expand Down Expand Up @@ -551,25 +572,6 @@ function setUsername ({ oldUsername, newUsername, userId }) {
}
}

function start ({ tossup: nextTossup, username }) {
logEvent(username, 'started the game');
document.getElementById('question').textContent = '';
document.getElementById('answer').textContent = '';
document.getElementById('buzz').textContent = 'Buzz';
document.getElementById('buzz').disabled = false;
document.getElementById('pause').textContent = 'Pause';
document.getElementById('pause').disabled = false;
document.getElementById('next').classList.add('btn-primary');
document.getElementById('next').classList.remove('btn-success');
document.getElementById('next').textContent = 'Next';
showSkipButton();

tossup = nextTossup;
document.getElementById('set-name-info').textContent = tossup?.set.name ?? '';
document.getElementById('question-number-info').textContent = tossup?.number ?? '-';
document.getElementById('packet-number-info').textContent = tossup?.packet.number ?? '-';
}

function toggleLock ({ lock, username }) {
logEvent(username, `${lock ? 'locked' : 'unlocked'} the room`);
document.getElementById('toggle-lock').checked = lock;
Expand Down Expand Up @@ -852,6 +854,16 @@ document.getElementById('toggle-select-by-set-name').addEventListener('click', f
}));
});

document.getElementById('toggle-settings').addEventListener('click', function () {
this.blur();
document.getElementById('buttons').classList.toggle('col-lg-9');
document.getElementById('buttons').classList.toggle('col-lg-12');
document.getElementById('content').classList.toggle('col-lg-9');
document.getElementById('content').classList.toggle('col-lg-12');
document.getElementById('settings').classList.toggle('d-none');
document.getElementById('settings').classList.toggle('d-lg-none');
});

document.getElementById('toggle-standard-only').addEventListener('click', function () {
this.blur();
socket.send(JSON.stringify({ type: 'toggle-standard-only', standardOnly: this.checked }));
Expand Down Expand Up @@ -902,6 +914,10 @@ document.addEventListener('keydown', function (event) {
if (event.target === document.body) event.preventDefault();
break;

case 'e':
document.getElementById('toggle-settings').click();
break;

case 'k':
document.getElementsByClassName('card-header-clickable')[0].click();
break;
Expand Down
Loading

0 comments on commit e6b213d

Please sign in to comment.