Skip to content

Commit

Permalink
use react to render category modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffrey-wu
geoffrey-wu committed Aug 15, 2024
1 parent c612519 commit 0fb880b
Show file tree
Hide file tree
Showing 13 changed files with 169 additions and 749 deletions.
213 changes: 5 additions & 208 deletions client/multiplayer/room.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -237,213 +237,7 @@ <h1 id="funny-toast-text" class="me-auto text-danger"></h1>
</div>
</div>

<div class="modal modal-lg" id="category-modal" tabindex="-1">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Select Categories and Subcategories</h5>
<button class="btn-close" data-bs-dismiss="modal" type="button" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-4" id="categories">
<h5 class="text-center">Category</h5>
<input class="btn-check" id="Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Literature">Literature<br></label>

<input class="btn-check" id="History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="History">History<br></label>

<input class="btn-check" id="Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Science">Science<br></label>

<input class="btn-check" id="Fine Arts" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Fine Arts">Fine
Arts<br></label>

<input class="btn-check" id="Religion" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Religion">Religion<br></label>

<input class="btn-check" id="Mythology" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Mythology">Mythology<br></label>

<input class="btn-check" id="Philosophy" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Philosophy">Philosophy<br></label>

<input class="btn-check" id="Social Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Social Science">Social
Science<br></label>

<input class="btn-check" id="Current Events" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Current Events">Current
Events<br></label>

<input class="btn-check" id="Geography" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Geography">Geography<br></label>

<input class="btn-check" id="Other Academic" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Other Academic">Other
Academic<br></label>

<input class="btn-check" id="Trash" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Trash">Trash<br></label>
</div>
<div class="col-4" id="subcategories">
<h5 class="text-center">Subcategory</h5>
<input class="btn-check" id="American Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="American Literature">American
Literature<br></label>

<input class="btn-check" id="British Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="British Literature">British
Literature<br></label>

<input class="btn-check" id="Classical Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Classical Literature">Classical
Literature<br></label>

<input class="btn-check" id="European Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="European Literature">European
Literature<br></label>

<input class="btn-check" id="World Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="World Literature">World
Literature<br></label>

<input class="btn-check" id="Other Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Other Literature">Other
Literature<br></label>

<input class="btn-check" id="American History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="American History">American
History <br></label>

<input class="btn-check" id="Ancient History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="Ancient History">Ancient
History<br></label>

<input class="btn-check" id="European History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="European History">European
History<br></label>

<input class="btn-check" id="World History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="World History">World
History<br></label>

<input class="btn-check" id="Other History" type="checkbox" autocomplete="off">
<label class="btn btn-outline-success w-100 rounded-0 my-1" for="Other History">Other
History<br></label>

<input class="btn-check" id="Biology" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Biology">Biology<br></label>

<input class="btn-check" id="Chemistry" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Chemistry">Chemistry<br></label>

<input class="btn-check" id="Physics" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Physics">Physics<br></label>

<input class="btn-check" id="Other Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Other Science">Other
Science<br></label>

<input class="btn-check" id="Visual Fine Arts" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Visual Fine Arts">Visual
Fine Arts<br></label>

<input class="btn-check" id="Auditory Fine Arts" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Auditory Fine Arts">Auditory Fine
Arts<br></label>

<input class="btn-check" id="Other Fine Arts" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Other Fine Arts">Other Fine
Arts<br></label>
</div>
<div class="col-4" id="alternate-subcategories">
<h5 class="text-center">Alternate <span class="d-none d-lg-inline">Subcategory</span></h5>

<input class="btn-check" id="Drama" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Drama">Drama<br></label>

<input class="btn-check" id="Long Fiction" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Long Fiction">Long Fiction<br></label>

<input class="btn-check" id="Poetry" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Poetry">Poetry<br></label>

<input class="btn-check" id="Short Fiction" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Short Fiction">Short Fiction<br></label>

<input class="btn-check" id="Misc Literature" type="checkbox" autocomplete="off">
<label class="btn btn-outline-primary w-100 rounded-0 my-1" for="Misc Literature">Misc
Literature<br></label>

<input class="btn-check" id="Math" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Math">Math<br></label>

<input class="btn-check" id="Astronomy" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Astronomy">Astronomy<br></label>

<input class="btn-check" id="Computer Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Computer Science">Computer
Science<br></label>

<input class="btn-check" id="Earth Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Earth Science">Earth Science<br></label>

<input class="btn-check" id="Engineering" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Engineering">Engineering<br></label>

<input class="btn-check" id="Misc Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-danger w-100 rounded-0 my-1" for="Misc Science">Misc Science<br></label>

<input class="btn-check" id="Architecture" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Architecture">Architecture<br></label>

<input class="btn-check" id="Dance" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Dance">Dance<br></label>

<input class="btn-check" id="Film" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Film">Film<br></label>

<input class="btn-check" id="Jazz" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Jazz">Jazz<br></label>

<input class="btn-check" id="Opera" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Opera">Opera<br></label>

<input class="btn-check" id="Photography" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Photography">Photography<br></label>

<input class="btn-check" id="Misc Arts" type="checkbox" autocomplete="off">
<label class="btn btn-outline-warning w-100 rounded-0 my-1" for="Misc Arts">Misc Arts<br></label>

<input class="btn-check" id="Anthropology" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Anthropology">Anthropology<br></label>

<input class="btn-check" id="Economics" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Economics">Economics<br></label>

<input class="btn-check" id="Linguistics" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Linguistics">Linguistics<br></label>

<input class="btn-check" id="Psychology" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Psychology">Psychology<br></label>

<input class="btn-check" id="Sociology" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Sociology">Sociology<br></label>

<input class="btn-check" id="Other Social Science" type="checkbox" autocomplete="off">
<label class="btn btn-outline-secondary w-100 rounded-0 my-1" for="Other Social Science">Other Social
Science<br></label>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div id="category-modal-root"></div>

<div class="modal" id="report-question-modal" tabindex="-2">
<div class="modal-dialog">
Expand Down Expand Up @@ -488,7 +282,10 @@ <h5 class="modal-title">Report Question</h5>
<script type="module" src="/script.js"></script>

<script type="module" src="/scripts/readers.js"></script>
<script type="module" src="/multiplayer/room.js"></script>

<script type="module" src="/react/umd/react.production.min.js"></script>
<script type="module" src="/react-dom/umd/react-dom.production.min.js"></script>
<script type="module" src="/multiplayer/room.min.js"></script>

<script type="module" src="/scripts/dual-slider.js"></script>
</body>
Expand Down
50 changes: 15 additions & 35 deletions client/multiplayer/room.js → client/multiplayer/room.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import CategoryManager from '../scripts/utilities/category-manager.js';
import { attachDropdownChecklist, getDropdownValues } from '../scripts/utilities/dropdown-checklist.js';
import { arrayToRange, createTossupCard, rangeToArray } from '../scripts/utilities/index.js';
import { escapeHTML } from '../scripts/utilities/strings.js';
import CategoryModal from '../scripts/components/CategoryModal.min.js';

const categoryManager = new CategoryManager();
let changedCategories = false;
let oldCategories = JSON.stringify(categoryManager.export());

let maxPacketNumber = 24;

Expand Down Expand Up @@ -801,13 +802,6 @@ document.getElementById('buzz').addEventListener('click', function () {
socket.send(JSON.stringify({ type: 'give-answer-live-update', message: '' }));
});

document.getElementById('category-modal').addEventListener('hidden.bs.modal', function () {
if (changedCategories) {
socket.send(JSON.stringify({ type: 'update-categories', ...categoryManager.export() }));
}
changedCategories = false;
});

document.getElementById('chat').addEventListener('click', function () {
this.blur();
document.getElementById('chat-input-group').classList.remove('d-none');
Expand Down Expand Up @@ -967,33 +961,6 @@ document.getElementById('year-range-a').onchange = function () {
socket.send(JSON.stringify({ type: 'year-range', minYear, maxYear }));
};

document.querySelectorAll('#categories input').forEach(input => {
input.addEventListener('click', function () {
this.blur();
categoryManager.updateCategory(input.id);
categoryManager.loadCategoryModal();
changedCategories = true;
});
});

document.querySelectorAll('#subcategories input').forEach(input => {
input.addEventListener('click', function () {
this.blur();
categoryManager.updateSubcategory(input.id);
categoryManager.loadCategoryModal();
changedCategories = true;
});
});

document.querySelectorAll('#alternate-subcategories input').forEach(input => {
input.addEventListener('click', function () {
this.blur();
categoryManager.updateAlternateSubcategory(input.id);
categoryManager.loadCategoryModal();
changedCategories = true;
});
});

document.addEventListener('keydown', function (event) {
// press escape to close chat
if (event.key === 'Escape' && document.activeElement.id === 'chat-input') {
Expand Down Expand Up @@ -1047,3 +1014,16 @@ document.addEventListener('keypress', function (event) {

attachDropdownChecklist();
document.getElementById('username').value = username;

const root = ReactDOM.createRoot(document.getElementById('category-modal-root'));
root.render(
<CategoryModal
categoryManager={categoryManager}
onClose={() => {
if (oldCategories !== JSON.stringify(categoryManager.export())) {
socket.send(JSON.stringify({ type: 'update-categories', ...categoryManager.export() }));
}
oldCategories = JSON.stringify(categoryManager.export());
}}
/>
);
Loading

0 comments on commit 0fb880b

Please sign in to comment.