117 lines
4.4 KiB
HTML
117 lines
4.4 KiB
HTML
<div hx-boost="true">
|
|
|
|
<div id="error-message" class="text-red-500 mb-4"></div>
|
|
|
|
<form method="post" hx-on="htmx:responseError: handleResponseError(event)">
|
|
<input type="text" class="hidden" name="type" value="start" />
|
|
|
|
<div id="tags-js">
|
|
<div class="flex gap-2">
|
|
<button type="button" id="selectAll" class="btn btn-sm btn-primary">Select All</button>
|
|
<button type="button" id="deselectAll" class="btn btn-sm btn-secondary">Deselect All</button>
|
|
</div>
|
|
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
{{range .SupportedTags}}
|
|
<label class="cursor-pointer badge badge-ghost badge-lg p-4 transition-colors duration-150">
|
|
<input name="tags" value="{{.}}" type="checkbox" class="hidden" />
|
|
<span>{{index $.T .}}</span>
|
|
</label>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
{{if .SignedIn}}
|
|
<label class="cursor-pointer label mt-2"> <span class="label-text">{{.T.share_game}}</span> <input name="share"
|
|
type="checkbox" class="checkbox checkbox-primary" />
|
|
</label>
|
|
{{end}}
|
|
|
|
<div>
|
|
<label class="input input-bordered flex items-center gap-2 mt-2">
|
|
{{.T.max_questions}}
|
|
<input placeholder="25" value="0" name="max_questions" type="number" class="grow" />
|
|
</label>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="input input-bordered flex items-center gap-2 mt-2">
|
|
{{.T.time_limit}}
|
|
<input placeholder="60" value="0" name="seconds" type="number" class="grow" />
|
|
</label>
|
|
</div>
|
|
|
|
<div class="mt-2 flex">
|
|
<button type="submit" class="ml-auto btn btn-primary">{{.T.play}}</button>
|
|
</div>
|
|
</form>
|
|
|
|
<form class="mt-8" method="post">
|
|
<input type="text" class="hidden" name="type" value="shared" />
|
|
<div class="join">
|
|
<label class="input input-bordered flex items-center gap-2 join-item">
|
|
share key
|
|
<input placeholder="aBc2d" name="sharekey" type="text" class="grow" />
|
|
</label>
|
|
<button type="submit" class="btn join-item btn-primary">{{.T.play}}</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function handleResponseError(event) {
|
|
const errorMessageElement = document.getElementById('error-message');
|
|
errorMessageElement.innerHTML = `{{.T.error_long}}: ${event.detail.xhr.responseText}`;
|
|
}
|
|
|
|
var tagsDiv = document.getElementById('tags-js');
|
|
var selectAllButton = tagsDiv.querySelector('#selectAll');
|
|
var deselectAllButton = tagsDiv.querySelector('#deselectAll');
|
|
var checkboxes = tagsDiv.querySelectorAll('input[name="tags"]');
|
|
|
|
// Function to update button visibility
|
|
function updateButtonVisibility() {
|
|
const anyChecked = Array.from(checkboxes).some(checkbox => checkbox.checked);
|
|
if (anyChecked) {
|
|
selectAllButton.classList.add('hidden');
|
|
deselectAllButton.classList.remove('hidden');
|
|
} else {
|
|
selectAllButton.classList.remove('hidden');
|
|
deselectAllButton.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Initialize button visibility
|
|
updateButtonVisibility();
|
|
|
|
// Select all functionality
|
|
selectAllButton.addEventListener('click', function () {
|
|
checkboxes.forEach(function (checkbox) {
|
|
checkbox.checked = true;
|
|
checkbox.parentElement.classList.add('bg-primary', 'text-black');
|
|
});
|
|
updateButtonVisibility();
|
|
});
|
|
|
|
// Deselect all functionality
|
|
deselectAllButton.addEventListener('click', function () {
|
|
checkboxes.forEach(function (checkbox) {
|
|
checkbox.checked = false;
|
|
checkbox.parentElement.classList.remove('bg-primary', 'text-black');
|
|
});
|
|
updateButtonVisibility();
|
|
});
|
|
|
|
// Toggle style and button visibility on click
|
|
tagsDiv.querySelectorAll('label').forEach(function (label) {
|
|
label.addEventListener('click', function (e) {
|
|
const checkbox = label.querySelector('input[type="checkbox"]');
|
|
checkbox.checked = !checkbox.checked;
|
|
label.classList.toggle('bg-primary', checkbox.checked);
|
|
label.classList.toggle('text-black', checkbox.checked);
|
|
updateButtonVisibility();
|
|
});
|
|
});
|
|
</script>
|