Skip to content

Commit

Permalink
Merge pull request #6 from khui0/ui-refresh
Browse files Browse the repository at this point in the history 
UI refresh
  • Loading branch information
@khui0
khui0 authored Mar 23, 2024
2 parents 21b0047 + c6c4061 commit 3501cf3
Show file tree
Hide file tree
Showing 10 changed files with 263 additions and 102 deletions.
73 changes: 38 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,59 +22,62 @@
</svg>
<h1>Virtual Clicker</h1>
</div>
<div class="col" id="clicker">
<h1><span class="code">000</span></h1>
<div id="clicker">
<h1><span class="code" data-modal-view="settings/code">000</span></h1>
<label for="question-input">Question</label>
<input type="text" autocomplete="off" id="question-input">
<label for="answer-input">Answer</label>
<div id="answer-mode-selector" data-button-select>
<button aria-selected="true" data-value="input">Text</button>
<button aria-selected="false" data-value="math">Math</button>
<div class="space" id="question-container">
<input type="text" autocomplete="off" id="question-input">
<div id="answer-mode-selector" data-button-select>
<button aria-selected="true" data-value="input">Text</button>
<button aria-selected="false" data-value="math">Math</button>
</div>
</div>
<div id="answer-container" data-answer-mode="input">
<textarea rows="5" autocomplete="off" id="answer-input"></textarea>
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0"></button>
<button data-insert-symbol="1"></button>
<button data-insert-symbol="2"></button>
<button data-insert-symbol="3"></button>
<button data-insert-symbol="4"></button>
<button data-insert-symbol="5"></button>
<button data-insert-symbol="6"></button>
<button data-insert-symbol="7"></button>
<button data-insert-symbol="8"></button>
<button data-insert-symbol="9"></button>
<label for="answer-input">Answer</label>
<div class="space" id="answer-container">
<div data-answer-mode="input">
<textarea rows="5" autocomplete="off" id="answer-input"></textarea>
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0"></button>
<button data-insert-symbol="1"></button>
<button data-insert-symbol="2"></button>
<button data-insert-symbol="3"></button>
<button data-insert-symbol="4"></button>
<button data-insert-symbol="5"></button>
<button data-insert-symbol="6"></button>
<button data-insert-symbol="7"></button>
<button data-insert-symbol="8"></button>
<button data-insert-symbol="9"></button>
</div>
<button class="icon" data-modal-view="symbols"><i class="bi bi-three-dots"></i></button>
</div>
<button class="icon" data-modal-view="symbols"><i class="bi bi-three-dots"></i></button>
</div>
<div data-answer-mode="choice">
<div></div>
<button class="icon" id="remove-choice-button"><i class="bi bi-x-lg"></i></button>
</div>
<div data-answer-mode="math">
<math-field id="math-input"></math-field>
</div>
</div>
<div data-answer-mode="choice">
<div></div>
<button class="icon" id="remove-choice-button"><i class="bi bi-x-lg"></i></button>
</div>
<div data-answer-mode="math">
<math-field id="math-input"></math-field>
</div>
<p id="answer-suggestion"></p>
<div class="button-grid">
<p id="answer-suggestion" class="space"></p>
<div class="button-grid space">
<button data-multiple-choice="a">A</button>
<button data-multiple-choice="b">B</button>
<button data-multiple-choice="c">C</button>
<button data-multiple-choice="d">D</button>
<button data-multiple-choice="e">E</button>
</div>
<button class="pill" id="submit-button">Submit</button>
<button class="pill space" id="submit-button">Submit</button>
</div>
<div class="row">
<button data-modal-view="settings/code"><span class="code">000</span></button>
<div id="controls-container" class="pill">
<button class="pill" data-modal-view="settings/code"><span class="code">000</span></button>
<button class="icon" data-modal-view="settings"><i class="bi bi-gear-wide-connected"></i></button>
<button class="icon" data-modal-view="history"><i class="bi bi-clock-history"></i></button>
<button class="icon" data-modal-view="clear-data-fix"><i class="bi bi-exclamation-triangle"></i></button>
</div>
<!-- Modals -->
<dialog data-modal-page="symbols" data-page-title="Symbols">
<!-- <p id="symbols-hint">Click to insert</p> -->
<div id="symbols-grid"></div>
</dialog>
<dialog data-modal-page="history" data-page-title="History">
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "virtual-clicker",
"private": true,
"version": "3.8.2",
"version": "3.9.0",
"type": "module",
"scripts": {
"dev": "vite --host",
Expand All @@ -25,4 +25,4 @@
"bootstrap-icons": "^1.11.3",
"mathlive": "^0.98.6"
}
}
}
54 changes: 37 additions & 17 deletions src/clicker/clicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import { convertLatexToAsciiMath } from "mathlive";

const questionInput = document.getElementById("question-input");
const answerInput = document.getElementById("answer-input");
const mf = document.getElementById("math-input");

let currentAnswerMode;
let multipleChoice = null;

// Initialization
Expand Down Expand Up @@ -64,17 +66,17 @@ let multipleChoice = null;
document.getElementById("submit-button").addEventListener("click", () => {
const mode = ui.getButtonSelectValue(document.getElementById("answer-mode-selector"));
const question = questionInput.value?.trim();
const answer = (() => {
const answer = multipleChoice || (() => {
if (mode === "input") {
return multipleChoice || answerInput.value?.trim();
return answerInput.value?.trim();
} else if (mode === "math") {
return convertLatexToAsciiMath(document.getElementById("math-input").value);
return convertLatexToAsciiMath(mf.value);
}
})();
if (storage.get("code")) {
if (question && answer) {
// Check if code matches current period
const matchesCurrentPeriod = parseInt(storage.get("code").slice(0, 1)) === getPeriod() + 1;
const matchesCurrentPeriod = parseInt(storage.get("code").slice(0, 1)) === getPeriod() + 1 || true;
if (!matchesCurrentPeriod) {
ui.prompt("Are you sure you want to submit?", "Your seat code isn't for this period!", [
{
Expand All @@ -92,8 +94,13 @@ document.getElementById("submit-button").addEventListener("click", () => {
}
}
if (!answer) {
answerInput.classList.add("attention");
answerInput.focus();
if (mode === "input") {
answerInput.classList.add("attention");
answerInput.focus();
} else if (mode === "math") {
mf.classList.add("attention");
mf.focus();
}
}
if (!question) {
questionInput.classList.add("attention");
Expand All @@ -105,8 +112,8 @@ document.getElementById("submit-button").addEventListener("click", () => {
}
function submit() {
submitClick(storage.get("code"), question, answer);
if (mode === "math") {
storeClick(storage.get("code"), question, document.getElementById("math-input").value, "latex");
if (mode === "math" && !multipleChoice) {
storeClick(storage.get("code"), question, mf.value, "latex");
} else {
storeClick(storage.get("code"), question, answer, "text");
}
Expand All @@ -123,18 +130,23 @@ questionInput.addEventListener("input", e => {
answerInput.addEventListener("input", e => {
e.target.classList.remove("attention");
});
mf.addEventListener("input", e => {
e.target.classList.remove("attention");
});

// Reset inputs to default state
function resetInputs() {
const mode = ui.getButtonSelectValue(document.getElementById("answer-mode-selector"));
// Reset answer inputs
questionInput.value = "";
answerInput.value = "";
if (multipleChoice) {
answerMode("input");
}
mf.value = "";
// Switch input mode (exit multiple choice)
answerMode(mode);
multipleChoice = null;
questionInput.focus();
autocomplete.update();
document.getElementById("math-input").value = "";
// Focus input element
questionInput.focus();
}

// Submit to Google Forms
Expand Down Expand Up @@ -220,19 +232,20 @@ document.querySelectorAll("[data-multiple-choice]").forEach(button => {
<p>${descriptions[choice].join(", ")}</p>`;
// Show multiple choice card
answerMode("choice");
ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "input");
multipleChoice = `CHOICE ${choice.toUpperCase()}`;
});
});

// Hide multiple choice card
document.getElementById("remove-choice-button").addEventListener("click", () => {
answerMode("input");
answerMode(ui.getButtonSelectValue(document.getElementById("answer-mode-selector")));
multipleChoice = null;
});

// Set answer mode
function answerMode(mode) {
if (currentAnswerMode == mode) return;
currentAnswerMode = mode;
document.querySelectorAll("[data-answer-mode]").forEach(item => {
if (item.getAttribute("data-answer-mode") == mode) {
item.style.removeProperty("display");
Expand All @@ -241,6 +254,14 @@ function answerMode(mode) {
item.style.display = "none";
}
});

// Animate container
const container = document.getElementById("answer-container");
const target = document.querySelector(`[data-answer-mode="${mode}"]`);
const toHeight = target.getBoundingClientRect().height;
ui.animate(container, undefined, {
height: toHeight + "px",
}, 500);
}

// Store click to storage and history
Expand All @@ -252,7 +273,7 @@ function storeClick(code, question, answer, type) {
"question": question,
"answer": answer,
"timestamp": timestamp,
"type": type,
"type": type || "text",
});
storage.set("history", history);
updateHistory();
Expand All @@ -276,7 +297,6 @@ function updateHistory() {
if (latex) {
answerMode("math");
ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "math");
const mf = document.getElementById("math-input");
mf.value = item.answer;
} else {
const choice = item.answer.match(/^CHOICE ([A-E])$/);
Expand Down
28 changes: 16 additions & 12 deletions src/design.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@

:root {
color-scheme: light;
--text-color: #242424;
--text-color: #2c2c2c;
--background-color: #fafafa;
--surface-color: #e7e7e7;
--accent-color: #242424;
--accent-color: #424242;
--accent-text-color: #ffffff;
--error-color: #fa8796;
}

:focus-visible {
outline: none;
box-shadow: 0 0 0 0.125rem var(--accent-color);
box-shadow: 0 0 0 0.125rem var(--accent-color) inset;
transition: box-shadow 100ms ease;
}

Expand Down Expand Up @@ -44,7 +44,7 @@
}

body {
height: 100%;
min-height: 100%;
padding: 1rem;
color: var(--text-color);
background-color: var(--background-color);
Expand Down Expand Up @@ -87,12 +87,12 @@ button.icon {
border-radius: 50%;
}

i.bi {
background-color: transparent;
.pill {
border-radius: 100vh;
}

button.pill {
border-radius: 100vh;
i.bi {
background-color: transparent;
}

input,
Expand Down Expand Up @@ -241,8 +241,13 @@ math-field:focus {
transition: box-shadow 100ms ease;
}

math-field.attention {
box-shadow: 0 0 0 0.125rem var(--error-color);
transition: box-shadow 100ms ease;
}

math-field::part(virtual-keyboard-toggle) {
display: none;
color: var(--text-color);
}

math-field::part(menu-toggle) {
Expand All @@ -258,10 +263,9 @@ div.ML__keyboard {
}

[data-button-select] {
display: flex;
flex-direction: row;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.125rem;
width: fit-content;
padding: 0.25rem;
background-color: var(--surface-color);
border-radius: 0.5rem;
Expand Down
Loading

0 comments on commit 3501cf3

Please sign in to comment.