-
Notifications
You must be signed in to change notification settings - Fork 0
/
practice.js
119 lines (100 loc) · 3.3 KB
/
practice.js
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
116
117
118
119
import { addOption, addBlankOption, removeChild } from './util.js';
const teams = 2;
const colors = [];
const selects = [];
var playerOptions = [];
var page = 2;
var edited = true;
const pages = ["loading-page", "display-page", "edit-page"].map(p => document.getElementById(p));
const roster = document.getElementById("roster");
const nav = document.getElementsByTagName("nav")[0];
for (let t = 0; t < teams; t++) {
document.getElementById("team" + t).querySelectorAll("select").forEach((s, i) => {
s.addEventListener("change", change);
s.ariaLabel = "Team " + t + " #" + (i + 1);
selects.push(s);
});
}
for (let i = 0; i < nav.children.length; i++) {
nav.children[i].addEventListener('click', e => {
if (!(e instanceof PopStateEvent))
history.pushState(i, "Bug 223190");
// switch page
nav.children[page].disabled = false;
nav.children[i].disabled = true;
showPage(i);
switch (page) {
case 1:
display();
break;
}
});
}
const dark = window.matchMedia("prefers-color-scheme: dark");
for (let t = 0; t < teams; t++) {
const c = document.getElementById("team" + t).getElementsByTagName("input")[0];
if (dark) c.value = "#ffffff";
colors.push(c);
}
window.addEventListener("popstate", ev => nav.children[ev.state ?? 0].onclick(ev));
showPage(2);
reset();
document.getElementById("reset-btn").addEventListener('click', reset);
function showPage(newPage) {
pages[page].style.display = "none";
pages[newPage].style.display = "unset";
page = newPage;
}
function change(event) {
const val = event.target.value;
const old = event.target.name;
event.target.name = val;
if (old !== "") addPlayer(old, event.target);
if (val !== "") removePlayer(val);
edited = true;
}
function addPlayer(player, skip) {
playerOptions.push(player);
selects.forEach(i => {
if (i.name !== player && i !== skip)
addOption(i, player);
});
roster.append(player + "\n");
}
function removePlayer(player, skip = true) {
playerOptions = playerOptions.filter(v => v !== player);
selects.forEach(i => {
if (!skip || i.name !== player)
removeChild(i, player);
if (!skip) {
i.name = "";
}
});
roster.textContent = roster.textContent.split("\n").filter(p => p !== player).join("\n");
}
function display() {
for (let t = 0; t < teams; t++) {
const output = document.getElementById("o-team" + t);
output.style.color = colors[t].value;
if (!edited) continue;
const players = [];
document.getElementById("team" + t).querySelectorAll("select").forEach(s => {
if (s.value)
players.push(s.value);
});
output.textContent = players.join("\n");
}
if (edited) edited = false;
}
export function reset() {
const playersStoreRaw = localStorage.getItem("players");
playerOptions = playersStoreRaw ? playersStoreRaw.split("\n") : [];
selects.forEach(i => i.textContent = '');
roster.textContent = playerOptions.join("\n");
if (playerOptions.length)
selects.forEach(i => {
i.name = "";
addBlankOption(i);
playerOptions.forEach(p => addOption(i, p));
});
}