Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • ost/we1/testat-rockpaperscissoirs
1 result
Show changes
Commits on Source (3)
Hide whitespace changes
Inline Side-by-side
TestatVorlage/schere-stein-papier.html
View file @ aa2fc613
......@@ -9,8 +9,8 @@
<body>
<h1>Rock Paper Scissors Well Matchstick</h1>
<div id="login">
<button id="change-online-mode"></button>
<section id="login">
<button id="change-online-mode-button" class="mode-change-enabled"></button>
<form id="login-form">
<label for="username-input">Username:</label>
<input id="username-input" placeholder="Please enter an username">
......@@ -28,9 +28,9 @@
</thead>
<tbody id="ranking-table"></tbody>
</table>
</div>
</section>
<div id="game">
<section id="game">
<label id="username-display"></label>
<div id="options" class="options-enabled">
<button class="option" id="rock">Rock</button>
......@@ -40,6 +40,8 @@
<button class="option" id="matchstick">Matchstick</button>
</div>
<label id="wait-label">&nbsp;</label>
<table id="game-table">
<tbody>
<tr><td class="hand-row-entry"><label id="player-hand" class="hand"></label></td></tr>
......@@ -61,7 +63,7 @@
</thead>
<tbody id="history"></tbody>
</table>
</div>
</section>
</body>
</html>
TestatVorlage/scripts/main.js
View file @ aa2fc613
......@@ -8,8 +8,9 @@ const loginScreen = document.querySelector('#login');
const gameScreen = document.querySelector('#game');
const options = document.querySelector('#options');
const waitLabel = document.querySelector('#wait-label');
const changeModeButton = document.querySelector('#change-online-mode');
const changeModeButton = document.querySelector('#change-online-mode-button');
const loginForm = document.querySelector('#login-form');
const usernameInput = document.querySelector('#username-input');
const rankingTable = document.querySelector('#ranking-table');
......@@ -29,6 +30,8 @@ const visibleClass = 'visible';
const hiddenClass = 'hidden';
const optionsDisabledClass = 'options-disabled';
const optionsEnabledClass = 'options-enabled';
const modeChangeDisabledClass = 'mode-change-disabled';
const modeChangeEnabledClass = 'mode-change-enabled';
function addToHistory(userHand, opponentHand, winText) {
historyTableBody.innerHTML = `<tr><td>${winText}</td>\t<td>${userHand}</td>\t<td>${opponentHand}\n</td></tr>${historyTableBody.innerHTML}`;
......@@ -51,7 +54,22 @@ function handleOpponentPicked(userHand, opponentHand, gameEval) {
addToHistory(userHand, opponentHand, winText);
options.classList.replace(optionsDisabledClass, optionsEnabledClass);
let timeout = 3;
waitLabel.innerText = 'Next round starts in soon';
const countdown = setInterval(() => {
if (timeout > 0) {
waitLabel.innerText = `Next round starts in ${timeout}`;
timeout--;
} else {
clearTimeout(countdown);
waitLabel.innerText = '\n';
options.classList.replace(optionsDisabledClass, optionsEnabledClass);
}
}, 1000);
}
function sanitizePlayername(playerName) {
return playerName.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
}
function showRankings(rankings) {
......@@ -59,16 +77,23 @@ function showRankings(rankings) {
for (const ranking of rankings) {
rankingsHtml += `<tr><td>${ranking.rank}</td><td>${ranking.wins}</td><td>`;
for (let i = 0; i < ranking.players.length - 1; i++) {
rankingsHtml += `${ranking.players[i]}, `;
const playerName = sanitizePlayername(ranking.players[i]);
rankingsHtml += `${playerName}, `;
}
let playerName = ranking.players[ranking.players.length - 1];
playerName = playerName.replace(/</g, '&lt;').replace(/>/g, '&gt;');
const playerName = sanitizePlayername(ranking.players[ranking.players.length - 1]);
rankingsHtml += `${playerName}</td></tr>`;
}
rankingTable.innerHTML = rankingsHtml;
}
function updateRankings(rankings) {
if (changeModeButton.classList.contains(modeChangeDisabledClass)) {
changeModeButton.classList.replace(modeChangeDisabledClass, modeChangeEnabledClass);
}
showRankings(rankings);
}
function onOptionClick(event) {
const userHand = event.target.innerText;
playerHandLabel.innerText = userHand;
......@@ -163,9 +188,11 @@ function updateOnlineButton() {
}
function triggerOnlineState() {
changeModeButton.classList.replace(modeChangeEnabledClass, modeChangeDisabledClass);
setConnected(!isConnected());
updateOnlineButton();
getRankings(showRankings);
getRankings(updateRankings);
}
options.addEventListener('click', (event) => onOptionClick(event));
......@@ -174,5 +201,5 @@ mainMenuButton.addEventListener('click', onMainMenuClick);
changeModeButton.addEventListener('click', triggerOnlineState);
window.addEventListener('DOMContentLoaded', () => setScreenVisible(false));
window.addEventListener('DOMContentLoaded', () => getRankings(showRankings));
window.addEventListener('DOMContentLoaded', () => getRankings(updateRankings));
window.addEventListener('DOMContentLoaded', updateOnlineButton);
TestatVorlage/styles/global.css
View file @ aa2fc613
......@@ -68,3 +68,13 @@ td {
.options-enabled {
pointer-events: auto;
}
.mode-change-enabled {
pointer-events: auto;
color: black;
}
.mode-change-disabled {
pointer-events: none;
color: gray;
}