Skip to content

Commit

Permalink
Custom sets!
Browse files Browse the repository at this point in the history
  • Loading branch information
@nayakrujul
nayakrujul committed Oct 19, 2024
1 parent 521b362 commit a6180c9
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 72 deletions.
62 changes: 62 additions & 0 deletions folders/custom/upload/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en" class="notranslate" translate="no">
<head>
<link rel="stylesheet" href="../../../styles/fonts.css" />
<link rel="stylesheet" href="../../../styles/main.css" />
<link rel="stylesheet" href="../../../styles/folders.css" />
<title>Custom Set | Vocabulary Testing Program 6</title>
<link rel="icon" type="image/png" href="../../../logos/logo-square.png"/>
<meta property="og:image" content="../../../logos/logo-banner.png" />
<meta property="og:image:width" content="1980" />
<meta property="og:image:height" content="1741" />
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="description" content="Study Custom Set on Vocabulary Testing Program 6." />
</head>
<body>
<div id="header"></div>
<div id="content">
<div id="settings-bar" hidden>
<!-- <span id="before-slider">Classic</span>
<label class="switch" id="switch-slider">
<input type="checkbox" id="gamemode-checkbox">
<span class="slider"></span>
</label>
<span id="after-slider" class="not-selected">Match</span> -->
<select id="gamemode-selector"></select>
<button class="start-button" id="start-button" role="button">Start!</button>
<span id="high-score">
<img class="high-score-image" />
<span id="high-score-text"></span>
</span>
<p id="help-tip"></p>
</div>
<div class="flex-container" id="units-flex"></div>
<div id="custom-upload-box">
<div id="file-input">
<input type="file" id="input-upload" name="input-upload" accept=".txt, .csv" multiple="multiple">
<label for="input-upload" id="upload-button">Choose files</label>
<p id="file-upload-text"><i>No files selected</i></p>
</div>
<button class="start-button" id="upload-go-button" role="button" disabled="true">Go!</button>
</div>
<div id="margin"></div>
</div>
<div id="footer"></div>
<script>
const OPTIONS = {lang: "cs", id: "csupload", name: "Custom Set Upload", all: false};
</script>
<script src="../../../scripts/lightdark.js"></script>
<script src="../../../scripts/header.js"></script>
<script src="../../../scripts/cookies.js"></script>
<script src="../../../scripts/footer.js"></script>
<script src="../../../scripts/misc.js"></script>
<script src="../../../scripts/folders-setup.js"></script>
<script src="../../../scripts/folders-misc.js"></script>
<script src="../../../scripts/folders-classic.js"></script>
<script src="../../../scripts/folders-match.js"></script>
<script src="../../../scripts/folders-start.js"></script>
<script src="../../../scripts/folders-custom.js"></script>
<script async data-id="101454906" src="//static.getclicky.com/js"></script>
</body>
</html>
8 changes: 4 additions & 4 deletions folders/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,17 +42,17 @@ <h1>German</h1>
</a>
</div>
</div>
<!-- <p class="line-container">
<p class="line-container">
<span class="line"></span>
<span>or</span>
<span class="line"></span>
</p>
<div class="folders-flexbox" id="folders-custom">
<a href="./create/" class="no-underline folders-link">
<a href="./custom/upload/" class="no-underline folders-link">
<h1>Custom Set</h1>
<p>Create your own custom set</p>
<p>Upload your own custom set</p>
</a>
</div> -->
</div>
<div id="margin"></div>
</div>
<div id="footer"></div>
Expand Down
46 changes: 46 additions & 0 deletions scripts/folders-custom.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
const upload = document.getElementById("input-upload");
const file_text = document.getElementById("file-upload-text");
const upload_go = document.getElementById("upload-go-button");

let terms = [];

function read_vtp6_format(text) {
let lines = text.split("\n");
lines.forEach(line => {
let spl = line.split("\t");
if (spl.length == 2) {
terms.push(spl);
} else {
console.error("Invalid line: " + line);
}
});
}

upload.addEventListener("input", () => {
let n = upload.files.length
if (n == 0) {
file_text.innerHTML = `<i>No files selected</i>`;
upload_go.disabled = true;
} else if (n == 1) {
file_text.innerHTML = `<i>1 file selected</i>`;
upload_go.disabled = false;
} else {
file_text.innerHTML = `<i>${n} files selected</i>`;
upload_go.disabled = false;
}
});

upload_go.addEventListener("click", () => {
files = [...upload.files];
files.forEach(file => {
if (file) {
let reader = new FileReader();
reader.addEventListener("load", () => {
read_vtp6_format(reader.result)
}, false);
reader.readAsText(file);
}
});
document.getElementById("custom-upload-box").hidden = true;
document.getElementById("settings-bar").hidden = false;
});
64 changes: 33 additions & 31 deletions scripts/folders-misc.js
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,43 @@
let units_flexboxes = [...document.querySelectorAll("div.units-flexbox")];
if (OPTIONS["lang"] !== "cs") {
let units_flexboxes = [...document.querySelectorAll("div.units-flexbox")];

let [unit_all, ...unit_checkboxes] = [...document.querySelectorAll(`input.folders-checkbox`)];
let [unit_all, ...unit_checkboxes] = [...document.querySelectorAll(`input.folders-checkbox`)];

units_flexboxes.forEach(flexbox => {
flexbox.addEventListener("click", (event) => {
let target = event.target;
if (target.nodeName === "INPUT") return;
while (target.nodeName !== "DIV") target = target.parentElement;
let checkbox = target.querySelector(`input[type="checkbox"]`);
console.log(checkbox);
checkbox.checked = !checkbox.checked;
change_all_box(checkbox);
}, true);
});
units_flexboxes.forEach(flexbox => {
flexbox.addEventListener("click", (event) => {
let target = event.target;
if (target.nodeName === "INPUT") return;
while (target.nodeName !== "DIV") target = target.parentElement;
let checkbox = target.querySelector(`input[type="checkbox"]`);
console.log(checkbox);
checkbox.checked = !checkbox.checked;
change_all_box(checkbox);
}, true);
});

[...unit_checkboxes, unit_all].forEach(checkbox => {
checkbox.addEventListener("input", (event) => {
change_all_box(event.target);
[...unit_checkboxes, unit_all].forEach(checkbox => {
checkbox.addEventListener("input", (event) => {
change_all_box(event.target);
});
});
});

function change_all_box(ubox) {
if (ubox === unit_all) {
unit_checkboxes.forEach(ucbox => ucbox.checked = unit_all.checked);
} else {
unit_all.checked = unit_checkboxes.every(box => box.checked);
function change_all_box(ubox) {
if (ubox === unit_all) {
unit_checkboxes.forEach(ucbox => ucbox.checked = unit_all.checked);
} else {
unit_all.checked = unit_checkboxes.every(box => box.checked);
}
document.getElementById("start-button").disabled = !unit_checkboxes.some(box => box.checked);
}
document.getElementById("start-button").disabled = !unit_checkboxes.some(box => box.checked);
}

document.addEventListener("keydown", (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === "a") {
event.preventDefault();
unit_all.checked = true;
change_all_box(unit_all);
}
});
document.addEventListener("keydown", (event) => {
if ((event.ctrlKey || event.metaKey) && event.key === "a") {
event.preventDefault();
unit_all.checked = true;
change_all_box(unit_all);
}
});
}

// function gamemode_checkbox_input() {
// if (document.getElementById("gamemode-checkbox").checked) {
Expand Down
60 changes: 31 additions & 29 deletions scripts/folders-setup.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,37 @@
let units = TERMS_LIST.split("\n\n");
if (OPTIONS["lang"] !== "cs") {
let units = TERMS_LIST.split("\n\n");

const uflex = document.getElementById("units-flex");
const uflex = document.getElementById("units-flex");

let total = 0;
let total = 0;

units = units.map((unit, uindex) => {
let [unit_header, ...urest] = unit.split("\n");
if (!assert(unit_header.startsWith("# "),
"Header " + uindex + " not in proper format.")) return;
unit_name = unit_header.slice(2);
unit_varname = unit_name.toLowerCase().replaceAll(" ", "");
let unit_terms = urest.map((uline, ulindex) => {
let uret = uline.split("\t");
if (assert(uret.length === 2,
"Line not in proper format in " +
unit_name + " (line " + ulindex + ").")
) return uret;
}).filter(l => l !== undefined);
let uflexbox = document.createElement("div");
uflexbox.classList.add("units-flexbox");
uflexbox.setAttribute("name", unit_varname);
uflexbox.innerHTML = `
<input type="checkbox" class="folders-checkbox" />
<span class="checkbox-label">${unit_name} <i>(${unit_terms.length})</i></span>`;
uflex.appendChild(uflexbox);
total += unit_terms.length;
return [[unit_name, unit_varname], unit_terms];
});
units = units.map((unit, uindex) => {
let [unit_header, ...urest] = unit.split("\n");
if (!assert(unit_header.startsWith("# "),
"Header " + uindex + " not in proper format.")) return;
unit_name = unit_header.slice(2);
unit_varname = unit_name.toLowerCase().replaceAll(" ", "");
let unit_terms = urest.map((uline, ulindex) => {
let uret = uline.split("\t");
if (assert(uret.length === 2,
"Line not in proper format in " +
unit_name + " (line " + ulindex + ").")
) return uret;
}).filter(l => l !== undefined);
let uflexbox = document.createElement("div");
uflexbox.classList.add("units-flexbox");
uflexbox.setAttribute("name", unit_varname);
uflexbox.innerHTML = `
<input type="checkbox" class="folders-checkbox" />
<span class="checkbox-label">${unit_name} <i>(${unit_terms.length})</i></span>`;
uflex.appendChild(uflexbox);
total += unit_terms.length;
return [[unit_name, unit_varname], unit_terms];
});

assert(is_unique(units.map(l => l[0][1])), "Headers are not unique.");
assert(is_unique(units.map(l => l[0][1])), "Headers are not unique.");

assert(units.length == NUM_UNITS, "Expected " + NUM_UNITS + " units, got " + units.length + ".");
assert(units.length == NUM_UNITS, "Expected " + NUM_UNITS + " units, got " + units.length + ".");

document.getElementById("insert-length-here").innerHTML = "(" + total + " terms)";
document.getElementById("insert-length-here").innerHTML = "(" + total + " terms)";
}
20 changes: 12 additions & 8 deletions scripts/folders-start.js
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
function folders_start_game() {
document.getElementById("settings-bar").hidden = true;
document.getElementById("units-flex").style.display = "none";

// game_mode = document.getElementById("gamemode-checkbox").checked ? "match" : "classic";
game_mode = document.getElementById("gamemode-selector").value;

let selected_units = [...
document.getElementById("units-flex")
.querySelectorAll("input[type=checkbox]:checked")
].map((inputbox) => inputbox.parentElement.getAttribute("name"));
if (OPTIONS["lang"] !== "cs") {
document.getElementById("units-flex").style.display = "none";
let selected_units = [...
document.getElementById("units-flex")
.querySelectorAll("input[type=checkbox]:checked")
].map((inputbox) => inputbox.parentElement.getAttribute("name"));

let selected_terms = units.filter(
lst => selected_units.includes(lst[0][1])
).map(arr => arr[1]).flat();
selected_terms = units.filter(
lst => selected_units.includes(lst[0][1])
).map(arr => arr[1]).flat();
} else {
selected_terms = terms;
}

if (game_mode === "classic") {
folders_start_legacy(selected_terms)
Expand Down
51 changes: 51 additions & 0 deletions styles/folders.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -509,6 +509,49 @@ div#finish-div {
}
}


#file-input {
input#input-upload {
opacity: 0;
width: 0.1px;
height: 0.1px;
position: absolute;
}

label#upload-button {
display: block;
position: relative;
width: 200px;
height: 50px;
border-radius: 25px;
background: linear-gradient(40deg, #ff6ec4, #7873f5);
box-shadow: 0 4px 7px rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: pointer;
transition: outline .1s linear;
margin-left: 50%;
transform: translateX(-50%);
}

input#input-upload:hover + label {
outline: 2px solid black;
}

p#file-upload-text {
text-align: center;
}
}

button#upload-go-button {
margin-left: 50%;
transform: translateX(-50%);
}


@media (hover: none) {
div#content div#match-div div.match-line-div div.match-text-div:not(.selected):hover {
background-color: initial;
Expand Down Expand Up @@ -699,6 +742,14 @@ body.dark-theme {
img#finish-image {
content: url("../images/finish-dark.svg");
}

#file-input label#upload-button {
box-shadow: 0 4px 7px rgba(255, 255, 255, 0.4);;
}

#file-input input#input-upload:hover + label#upload-button {
outline: 2px solid white;
}
}

@keyframes correctMatch {
Expand Down

0 comments on commit a6180c9

Please sign in to comment.