Compare commits
2 Commits
791af99662
...
e4e555cac3
| Author | SHA1 | Date | |
|---|---|---|---|
| e4e555cac3 | |||
| 2b63370873 |
@@ -86,7 +86,20 @@
|
||||
|
||||
<div class="field-group">
|
||||
<label for="room-password">Room password (optional)</label>
|
||||
<input type="password" id="room-password" name="password" maxlength="64" placeholder="Optional password">
|
||||
<input
|
||||
type="password"
|
||||
id="room-password"
|
||||
name="password"
|
||||
maxlength="64"
|
||||
placeholder="Optional password"
|
||||
autocomplete="new-password"
|
||||
data-bwignore="true"
|
||||
data-1p-ignore="true"
|
||||
data-lpignore="true"
|
||||
autocapitalize="off"
|
||||
autocorrect="off"
|
||||
spellcheck="false"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -362,6 +362,17 @@ body.is-dragging-window .ui-tool-title-bar {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.side-panel-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.side-panel-window > .window-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.participants-window {
|
||||
min-height: 24rem;
|
||||
}
|
||||
@@ -421,12 +432,13 @@ body.is-dragging-window .ui-tool-title-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.55rem;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.participants-scroll {
|
||||
flex: 1;
|
||||
min-height: 13rem;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
@@ -203,7 +203,9 @@ function parseNumericVote(value) {
|
||||
|
||||
function calculateSummary(state) {
|
||||
const rows = new Map();
|
||||
const numericVotes = [];
|
||||
const scoreVotes = [];
|
||||
const cardIndexByValue = new Map(state.cards.map((cardValue, index) => [cardValue, index]));
|
||||
let hasNumericVote = false;
|
||||
|
||||
state.participants.forEach((participant) => {
|
||||
if (!participant.connected) {
|
||||
@@ -221,26 +223,42 @@ function calculateSummary(state) {
|
||||
|
||||
const numeric = parseNumericVote(participant.voteValue);
|
||||
if (numeric !== null) {
|
||||
numericVotes.push(numeric);
|
||||
hasNumericVote = true;
|
||||
scoreVotes.push(numeric);
|
||||
return;
|
||||
}
|
||||
|
||||
if (cardIndexByValue.has(participant.voteValue)) {
|
||||
scoreVotes.push(cardIndexByValue.get(participant.voteValue));
|
||||
}
|
||||
});
|
||||
|
||||
let average = null;
|
||||
if (numericVotes.length > 0) {
|
||||
average = numericVotes.reduce((acc, value) => acc + value, 0) / numericVotes.length;
|
||||
if (scoreVotes.length > 0) {
|
||||
average = scoreVotes.reduce((acc, value) => acc + value, 0) / scoreVotes.length;
|
||||
}
|
||||
|
||||
const deckNumeric = state.cards
|
||||
.map(parseNumericVote)
|
||||
.filter((value) => value !== null)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
let averageCard = null;
|
||||
let recommended = null;
|
||||
if (average !== null && deckNumeric.length > 0) {
|
||||
recommended = deckNumeric.find((value) => value >= average) ?? deckNumeric[deckNumeric.length - 1];
|
||||
if (!hasNumericVote && average !== null && state.cards.length > 0) {
|
||||
const roundedIndex = Math.min(
|
||||
state.cards.length - 1,
|
||||
Math.max(0, Math.round(average)),
|
||||
);
|
||||
averageCard = state.cards[roundedIndex];
|
||||
recommended = state.cards[roundedIndex];
|
||||
} else {
|
||||
const deckNumeric = state.cards
|
||||
.map(parseNumericVote)
|
||||
.filter((value) => value !== null)
|
||||
.sort((a, b) => a - b);
|
||||
|
||||
if (average !== null && deckNumeric.length > 0) {
|
||||
recommended = deckNumeric.find((value) => value >= average) ?? deckNumeric[deckNumeric.length - 1];
|
||||
}
|
||||
}
|
||||
|
||||
return { rows, average, recommended };
|
||||
return { rows, average, recommended, averageCard };
|
||||
}
|
||||
|
||||
function renderSummary(state) {
|
||||
@@ -251,7 +269,7 @@ function renderSummary(state) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { rows, average, recommended } = calculateSummary(state);
|
||||
const { rows, average, recommended, averageCard } = calculateSummary(state);
|
||||
summaryBody.innerHTML = '';
|
||||
|
||||
if (rows.size === 0) {
|
||||
@@ -274,7 +292,11 @@ function renderSummary(state) {
|
||||
});
|
||||
}
|
||||
|
||||
summaryAverage.textContent = average === null ? 'Average: -' : `Average: ${average.toFixed(2)}`;
|
||||
if (averageCard !== null) {
|
||||
summaryAverage.textContent = `Average: ${averageCard}`;
|
||||
} else {
|
||||
summaryAverage.textContent = average === null ? 'Average: -' : `Average: ${average.toFixed(2)}`;
|
||||
}
|
||||
summaryRecommended.textContent = recommended === null ? 'Recommended: -' : `Recommended: ${recommended}`;
|
||||
}
|
||||
|
||||
@@ -400,6 +422,34 @@ function updateShareLink() {
|
||||
shareLinkInput.value = raw ? `${window.location.origin}${raw}` : '';
|
||||
}
|
||||
|
||||
function fallbackCopyFromShareInput() {
|
||||
shareLinkInput.focus();
|
||||
shareLinkInput.select();
|
||||
shareLinkInput.setSelectionRange(0, shareLinkInput.value.length);
|
||||
document.execCommand('copy');
|
||||
}
|
||||
|
||||
async function selectAndCopyShareLink() {
|
||||
if (!shareLinkInput.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
shareLinkInput.focus();
|
||||
shareLinkInput.select();
|
||||
shareLinkInput.setSelectionRange(0, shareLinkInput.value.length);
|
||||
|
||||
if (!navigator.clipboard || !window.isSecureContext) {
|
||||
fallbackCopyFromShareInput();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await navigator.clipboard.writeText(shareLinkInput.value);
|
||||
} catch (_err) {
|
||||
fallbackCopyFromShareInput();
|
||||
}
|
||||
}
|
||||
|
||||
function connectSSE() {
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
@@ -502,6 +552,9 @@ async function changeName() {
|
||||
revealBtn.addEventListener('click', () => adminAction('reveal'));
|
||||
resetBtn.addEventListener('click', () => adminAction('reset'));
|
||||
shareAdminToggle.addEventListener('change', updateShareLink);
|
||||
shareLinkInput.addEventListener('click', () => {
|
||||
void selectAndCopyShareLink();
|
||||
});
|
||||
changeNameBtn.addEventListener('click', () => {
|
||||
void changeName();
|
||||
});
|
||||
|
||||
@@ -40,6 +40,10 @@
|
||||
return Math.min(max, Math.max(min, value));
|
||||
}
|
||||
|
||||
function hasOwn(obj, key) {
|
||||
return Object.prototype.hasOwnProperty.call(obj, key);
|
||||
}
|
||||
|
||||
function parseJSON(value, fallback) {
|
||||
if (!value) {
|
||||
return fallback;
|
||||
@@ -153,7 +157,58 @@
|
||||
saveWindowLayouts();
|
||||
}
|
||||
|
||||
function ensureWindowLayout(def) {
|
||||
function measureLayoutFromContent(def) {
|
||||
const windowEl = def.el;
|
||||
const fallback = def.defaultLayout;
|
||||
const wasHidden = windowEl.classList.contains('hidden');
|
||||
const previousStyles = {
|
||||
visibility: windowEl.style.visibility,
|
||||
left: windowEl.style.left,
|
||||
top: windowEl.style.top,
|
||||
width: windowEl.style.width,
|
||||
height: windowEl.style.height,
|
||||
right: windowEl.style.right,
|
||||
bottom: windowEl.style.bottom,
|
||||
transform: windowEl.style.transform,
|
||||
};
|
||||
|
||||
if (wasHidden) {
|
||||
windowEl.classList.remove('hidden');
|
||||
}
|
||||
|
||||
windowEl.style.visibility = 'hidden';
|
||||
windowEl.style.left = '-10000px';
|
||||
windowEl.style.top = '-10000px';
|
||||
windowEl.style.width = 'max-content';
|
||||
windowEl.style.height = 'auto';
|
||||
windowEl.style.right = 'auto';
|
||||
windowEl.style.bottom = 'auto';
|
||||
windowEl.style.transform = 'none';
|
||||
|
||||
const rect = windowEl.getBoundingClientRect();
|
||||
|
||||
windowEl.style.visibility = previousStyles.visibility;
|
||||
windowEl.style.left = previousStyles.left;
|
||||
windowEl.style.top = previousStyles.top;
|
||||
windowEl.style.width = previousStyles.width;
|
||||
windowEl.style.height = previousStyles.height;
|
||||
windowEl.style.right = previousStyles.right;
|
||||
windowEl.style.bottom = previousStyles.bottom;
|
||||
windowEl.style.transform = previousStyles.transform;
|
||||
|
||||
if (wasHidden) {
|
||||
windowEl.classList.add('hidden');
|
||||
}
|
||||
|
||||
return normalizeLayout({
|
||||
left: fallback.left,
|
||||
top: fallback.top,
|
||||
width: Number.isFinite(rect.width) && rect.width > 0 ? Math.ceil(rect.width) : fallback.width,
|
||||
height: Number.isFinite(rect.height) && rect.height > 0 ? Math.ceil(rect.height) : fallback.height,
|
||||
}, fallback);
|
||||
}
|
||||
|
||||
function ensureWindowLayout(def, options = {}) {
|
||||
if (isMobileViewport()) {
|
||||
def.el.style.right = 'auto';
|
||||
def.el.style.bottom = 'auto';
|
||||
@@ -161,7 +216,12 @@
|
||||
return;
|
||||
}
|
||||
|
||||
const normalized = normalizeLayout(windowLayouts[def.id], def.defaultLayout);
|
||||
const hasSavedLayout = hasOwn(options, 'hasSavedLayout')
|
||||
? options.hasSavedLayout
|
||||
: hasOwn(windowLayouts, def.id);
|
||||
const normalized = hasSavedLayout
|
||||
? normalizeLayout(windowLayouts[def.id], def.defaultLayout)
|
||||
: measureLayoutFromContent(def);
|
||||
const clamped = clampLayoutToViewport(normalized);
|
||||
applyLayout(def.el, clamped);
|
||||
windowLayouts[def.id] = clamped;
|
||||
@@ -284,11 +344,20 @@
|
||||
|
||||
function initWindowLayouts() {
|
||||
windowLayouts = loadWindowLayouts();
|
||||
let shouldPersistSeededLayouts = false;
|
||||
|
||||
windowDefs.forEach((def) => {
|
||||
ensureWindowLayout(def);
|
||||
const hasSavedLayout = hasOwn(windowLayouts, def.id);
|
||||
ensureWindowLayout(def, { hasSavedLayout });
|
||||
if (!hasSavedLayout) {
|
||||
shouldPersistSeededLayouts = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (shouldPersistSeededLayouts) {
|
||||
saveWindowLayouts();
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
if (isMobileViewport()) {
|
||||
return;
|
||||
|
||||
Reference in New Issue
Block a user