1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
import RPSGame from "./lib/class-rps-game.js";
function createPreview() {
const preview = document.querySelector(".preview__content");
const player1Wrapper = document.createElement("div");
const player2Wrapper = document.createElement("div");
const vsWrapper = document.createElement("div");
player1Wrapper.id = "player1Wrapper";
player2Wrapper.id = "player2Wrapper";
vsWrapper.textContent = "vs";
vsWrapper.style.fontWeight = 600;
preview.append(player1Wrapper, vsWrapper, player2Wrapper);
}
function getUserPreviewId(id) {
let userId;
if (id === "player1-name" || id === "player1-ia") {
userId = "player1Wrapper";
} else if (id === "player2-name" || id === "player2-ia") {
userId = "player2Wrapper";
}
return userId;
}
function fillPreview(target) {
const userId = getUserPreviewId(target.id);
if (userId) {
const dest = document.getElementById(userId);
dest.textContent = target.value;
}
}
function toggleIABadge(target) {
const userId = getUserPreviewId(target.id);
if (userId) {
const dest = document.getElementById(userId);
target.checked
? dest.classList.add("ia-badge")
: dest.classList.remove("ia-badge");
}
}
function startGame(player1, player2, maxRound) {
const register = document.querySelector(".register");
const game = document.querySelector(".game");
const buttons = {
rock: document.querySelector(".btn--rock"),
paper: document.querySelector(".btn--paper"),
scissors: document.querySelector(".btn--scissors"),
newGame: document.querySelector(".btn--new-game"),
};
const p1Scoring = {
name: document.getElementById("player1username"),
value: document.getElementById("player1score"),
};
const p2Scoring = {
name: document.getElementById("player2username"),
value: document.getElementById("player2score"),
};
const messages = document.querySelector(".message-board");
const players = [];
players.push(player1);
players.push(player2);
const app = new RPSGame(players, buttons, p1Scoring, p2Scoring, messages);
app.init();
app.maxRound = maxRound && maxRound !== "0" ? maxRound : "";
register.style.display = "none";
game.style.display = "flex";
}
function listen() {
const inputP1Name = document.getElementById("player1-name");
const inputP2Name = document.getElementById("player2-name");
const checkboxP1IA = document.getElementById("player1-ia");
const checkboxP2IA = document.getElementById("player2-ia");
const inputMaxRound = document.getElementById("round-number");
const registerBtn = document.querySelector(".form__submit");
if (inputP1Name.value) fillPreview(inputP1Name);
if (inputP2Name.value) fillPreview(inputP2Name);
if (checkboxP1IA.checked) toggleIABadge(checkboxP1IA);
if (checkboxP2IA.checked) toggleIABadge(checkboxP2IA);
inputP1Name.addEventListener("keyup", (e) => fillPreview(e.target));
inputP2Name.addEventListener("keyup", (e) => fillPreview(e.target));
checkboxP1IA.addEventListener("change", (event) => {
toggleIABadge(event.target);
if (checkboxP2IA.checked && event.target.checked) {
checkboxP2IA.checked = false;
toggleIABadge(checkboxP2IA);
}
});
checkboxP2IA.addEventListener("change", (event) => {
toggleIABadge(event.target);
if (checkboxP1IA.checked && event.target.checked) {
checkboxP1IA.checked = false;
toggleIABadge(checkboxP1IA);
}
});
registerBtn.addEventListener("click", (event) => {
event.preventDefault();
const player1 = { username: inputP1Name.value, ia: checkboxP1IA.checked };
const player2 = { username: inputP2Name.value, ia: checkboxP2IA.checked };
const maxRound = inputMaxRound.value;
startGame(player1, player2, maxRound);
});
}
function init() {
createPreview();
listen();
}
init();
|
