@mundogamernetwork/shared-ui 1.1.96 → 1.2.1

package/components/playtest/concept-poll/EmojiReactionVote.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+// poll_type=emoji_reaction — answer shape {option_id, emoji}.
+import { ref, computed } from "vue";
+import VoteReasonField from "./VoteReasonField.vue";
+import type { PlaytestConceptPollOption } from "../../../services/playtestTesterService";
+
+const props = withDefaults(defineProps<{
+	options: PlaytestConceptPollOption[];
+	submitting?: boolean;
+	emojiChoices?: string[];
+}>(), {
+	emojiChoices: () => ["😍", "😀", "😐", "😕", "😡"],
+});
+
+const emit = defineEmits<{
+	(e: "submit", payload: { answer: { option_id: number; emoji: string }; reason: string }): void
+}>();
+
+const selected = ref<number | null>(null);
+const emoji = ref<string | null>(null);
+const reason = ref("");
+
+const canSubmit = computed(() =>
+	selected.value !== null && !!emoji.value && reason.value.trim().length >= 3 && !props.submitting
+);
+
+function submit() {
+	if (!canSubmit.value || selected.value === null || !emoji.value) return;
+	emit("submit", { answer: { option_id: selected.value, emoji: emoji.value }, reason: reason.value.trim() });
+}
+</script>
+
+<template>
+	<div class="emoji-vote">
+		<div class="emoji-vote__options">
+			<label
+				v-for="opt in options"
+				:key="opt.id"
+				class="emoji-vote__option"
+				:class="{ 'emoji-vote__option--selected': selected === opt.id }"
+			>
+				<input type="radio" :value="opt.id" v-model="selected" name="emoji-vote-option">
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="emoji-vote__media">
+				<span>{{ opt.label }}</span>
+			</label>
+		</div>
+
+		<div v-if="selected !== null" class="emoji-vote__emojis">
+			<span class="emoji-vote__emojis-label">{{ $t("playtest.concept_poll.emoji_label", "Pick your reaction") }}</span>
+			<div class="emoji-vote__emojis-row">
+				<button
+					v-for="e in emojiChoices"
+					:key="e"
+					type="button"
+					class="emoji-vote__emoji-btn"
+					:class="{ 'emoji-vote__emoji-btn--selected': emoji === e }"
+					@click="emoji = e"
+				>
+					{{ e }}
+				</button>
+			</div>
+		</div>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary emoji-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.emoji-vote {
+	&__options {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin-bottom: 16px;
+	}
+
+	&__option {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 14px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 2px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		color: var(--text-primary, #fff);
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__media {
+		width: 40px;
+		height: 40px;
+		object-fit: cover;
+	}
+
+	&__emojis {
+		margin-bottom: 16px;
+
+		&-label {
+			display: block;
+			font-size: 12px;
+			color: var(--secondary-info-fg, #aaa);
+			margin-bottom: 8px;
+		}
+
+		&-row {
+			display: flex;
+			gap: 8px;
+		}
+	}
+
+	&__emoji-btn {
+		font-size: 1.6rem;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 2px solid var(--button-secondary-default-bg, #2a2a2a);
+		padding: 6px 10px;
+		cursor: pointer;
+		transition: transform 0.12s, border-color 0.12s;
+
+		&:hover {
+			transform: scale(1.1);
+		}
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>

package/components/playtest/concept-poll/FiveSecondTestVote.vue

@@ -0,0 +1,197 @@
+<script setup lang="ts">
+// poll_type=five_second_test — answer shape {option_id, recall_text}. No
+// server-side timer exists for this poll type (confirmed against the
+// backend this session) — the countdown/hide/recall sequence below is pure
+// client state, and is inherently bypassable (a tester could inspect the DOM
+// during the reveal window). Accepted as a known limitation per the plan.
+import { ref, computed, onBeforeUnmount } from "vue";
+import VoteReasonField from "./VoteReasonField.vue";
+import type { PlaytestConceptPollOption } from "../../../services/playtestTesterService";
+
+const props = withDefaults(defineProps<{
+	options: PlaytestConceptPollOption[];
+	submitting?: boolean;
+	seconds?: number;
+}>(), {
+	seconds: 5,
+});
+
+const emit = defineEmits<{
+	(e: "submit", payload: { answer: { option_id: number; recall_text: string }; reason: string }): void
+}>();
+
+type Phase = "intro" | "showing" | "recall";
+
+const phase = ref<Phase>("intro");
+const remaining = ref(props.seconds);
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const selected = ref<number | null>(null);
+const recallText = ref("");
+const reason = ref("");
+
+function start() {
+	phase.value = "showing";
+	remaining.value = props.seconds;
+	timer = setInterval(() => {
+		remaining.value -= 1;
+		if (remaining.value <= 0) {
+			stopTimer();
+			phase.value = "recall";
+		}
+	}, 1000);
+}
+
+function stopTimer() {
+	if (timer) {
+		clearInterval(timer);
+		timer = null;
+	}
+}
+
+onBeforeUnmount(stopTimer);
+
+const canSubmit = computed(() =>
+	selected.value !== null &&
+	recallText.value.trim().length > 0 &&
+	reason.value.trim().length >= 3 &&
+	!props.submitting
+);
+
+function submit() {
+	if (!canSubmit.value || selected.value === null) return;
+	emit("submit", {
+		answer: { option_id: selected.value, recall_text: recallText.value.trim() },
+		reason: reason.value.trim(),
+	});
+}
+</script>
+
+<template>
+	<div class="five-sec-vote">
+		<div v-if="phase === 'intro'" class="five-sec-vote__intro">
+			<p>{{ $t("playtest.concept_poll.five_second_intro", `You'll see the image(s) for ${seconds} seconds, then answer from memory.`) }}</p>
+			<button type="button" class="btn primary" @click="start">
+				{{ $t("playtest.concept_poll.five_second_start", "Start") }}
+			</button>
+		</div>
+
+		<div v-else-if="phase === 'showing'" class="five-sec-vote__showing">
+			<div class="five-sec-vote__countdown">{{ remaining }}</div>
+			<div class="five-sec-vote__images">
+				<img v-for="opt in options" :key="opt.id" :src="opt.media_url ?? ''" :alt="opt.label" class="five-sec-vote__media">
+			</div>
+		</div>
+
+		<div v-else class="five-sec-vote__recall">
+			<div class="five-sec-vote__options">
+				<label
+					v-for="opt in options"
+					:key="opt.id"
+					class="five-sec-vote__option"
+					:class="{ 'five-sec-vote__option--selected': selected === opt.id }"
+				>
+					<input type="radio" :value="opt.id" v-model="selected" name="five-sec-option">
+					<span>{{ opt.label }}</span>
+				</label>
+			</div>
+
+			<label for="recall-text" class="five-sec-vote__recall-label">
+				{{ $t("playtest.concept_poll.recall_label", "What do you remember? (required)") }}
+			</label>
+			<textarea id="recall-text" v-model="recallText" class="five-sec-vote__textarea" rows="3" required />
+
+			<VoteReasonField v-model="reason" />
+
+			<button type="button" class="btn primary five-sec-vote__submit" :disabled="!canSubmit" @click="submit">
+				{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.five-sec-vote {
+	&__intro {
+		text-align: center;
+		padding: 24px 0;
+
+		p {
+			color: var(--secondary-info-fg, #aaa);
+			margin-bottom: 16px;
+		}
+	}
+
+	&__showing {
+		text-align: center;
+	}
+
+	&__countdown {
+		font-size: 2.5rem;
+		font-weight: 800;
+		color: var(--primary, #D297FF);
+		margin-bottom: 12px;
+	}
+
+	&__images {
+		display: flex;
+		gap: 12px;
+		justify-content: center;
+		flex-wrap: wrap;
+	}
+
+	&__media {
+		max-width: 100%;
+		max-height: 320px;
+		object-fit: contain;
+	}
+
+	&__options {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		margin-bottom: 16px;
+	}
+
+	&__option {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 14px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 2px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		color: var(--text-primary, #fff);
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__recall-label {
+		display: block;
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin-bottom: 6px;
+	}
+
+	&__textarea {
+		width: 100%;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		color: var(--text-primary, #fff);
+		padding: 10px;
+		font-size: 13px;
+		resize: vertical;
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>

package/components/playtest/concept-poll/HeadToHeadVote.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// poll_type=head_to_head — answer shape {option_id}. Typically exactly 2
+// options (A/B), rendered side by side; the poll model doesn't hard-cap
+// option count server-side, so this renders whatever options come back.
+import { ref, computed } from "vue";
+import VoteReasonField from "./VoteReasonField.vue";
+import type { PlaytestConceptPollOption } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	options: PlaytestConceptPollOption[];
+	submitting?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "submit", payload: { answer: { option_id: number }; reason: string }): void
+}>();
+
+const selected = ref<number | null>(null);
+const reason = ref("");
+
+const canSubmit = computed(() => selected.value !== null && reason.value.trim().length >= 3 && !props.submitting);
+
+function submit() {
+	if (!canSubmit.value || selected.value === null) return;
+	emit("submit", { answer: { option_id: selected.value }, reason: reason.value.trim() });
+}
+</script>
+
+<template>
+	<div class="h2h-vote">
+		<div class="h2h-vote__options">
+			<button
+				v-for="opt in options"
+				:key="opt.id"
+				type="button"
+				class="h2h-vote__option"
+				:class="{ 'h2h-vote__option--selected': selected === opt.id }"
+				@click="selected = opt.id"
+			>
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="h2h-vote__media">
+				<span class="h2h-vote__label">{{ opt.label }}</span>
+			</button>
+		</div>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary h2h-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.h2h-vote {
+	&__options {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+		gap: 12px;
+	}
+
+	&__option {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		padding: 14px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 2px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		color: var(--text-primary, #fff);
+		transition: border-color 0.15s;
+
+		&:hover {
+			border-color: var(--primary, #D297FF);
+		}
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+	}
+
+	&__media {
+		width: 100%;
+		max-height: 140px;
+		object-fit: cover;
+	}
+
+	&__label {
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>

package/components/playtest/concept-poll/MultiSelectVote.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+// poll_type=multi_select — answer shape {option_ids: number[]}, must be a
+// non-empty array (VoteConceptPollRequest.php).
+import { ref, computed } from "vue";
+import VoteReasonField from "./VoteReasonField.vue";
+import type { PlaytestConceptPollOption } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	options: PlaytestConceptPollOption[];
+	submitting?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "submit", payload: { answer: { option_ids: number[] }; reason: string }): void
+}>();
+
+const selected = ref<number[]>([]);
+const reason = ref("");
+
+const canSubmit = computed(() => selected.value.length > 0 && reason.value.trim().length >= 3 && !props.submitting);
+
+function toggle(id: number) {
+	const idx = selected.value.indexOf(id);
+	if (idx === -1) selected.value.push(id);
+	else selected.value.splice(idx, 1);
+}
+
+function submit() {
+	if (!canSubmit.value) return;
+	emit("submit", { answer: { option_ids: [...selected.value] }, reason: reason.value.trim() });
+}
+</script>
+
+<template>
+	<div class="multi-select-vote">
+		<div class="multi-select-vote__options">
+			<label
+				v-for="opt in options"
+				:key="opt.id"
+				class="multi-select-vote__option"
+				:class="{ 'multi-select-vote__option--selected': selected.includes(opt.id) }"
+			>
+				<input type="checkbox" :checked="selected.includes(opt.id)" @change="toggle(opt.id)">
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="multi-select-vote__media">
+				<span class="multi-select-vote__label">{{ opt.label }}</span>
+			</label>
+		</div>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary multi-select-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.multi-select-vote {
+	&__options {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	&__option {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 10px 14px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 2px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		color: var(--text-primary, #fff);
+		transition: border-color 0.15s;
+
+		&:hover {
+			border-color: var(--primary, #D297FF);
+		}
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__media {
+		width: 48px;
+		height: 48px;
+		object-fit: cover;
+	}
+
+	&__label {
+		font-size: 14px;
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>

package/components/playtest/concept-poll/RankedChoiceVote.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+// poll_type=ranked_choice — answer shape {ranking: number[]} (>=2 unique
+// option_ids, in order of preference). No sortable/drag-and-drop library is
+// a dependency anywhere in this repo (checked package.json + node_modules
+// this session) — per the "no generic backend"-style instruction against
+// adding a new dependency for one component, this implements a simple
+// up/down-arrow reorder list instead of pulling in vuedraggable/sortablejs.
+import { ref, computed } from "vue";
+import VoteReasonField from "./VoteReasonField.vue";
+import type { PlaytestConceptPollOption } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	options: PlaytestConceptPollOption[];
+	submitting?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "submit", payload: { answer: { ranking: number[] }; reason: string }): void
+}>();
+
+// Initialize ranking in the order options were given (position asc, from
+// the poll's own ordering) — tester reorders from there.
+const ranking = ref<PlaytestConceptPollOption[]>([...props.options]);
+const reason = ref("");
+
+const canSubmit = computed(() => ranking.value.length >= 2 && reason.value.trim().length >= 3 && !props.submitting);
+
+function moveUp(index: number) {
+	if (index === 0) return;
+	const arr = ranking.value;
+	[arr[index - 1], arr[index]] = [arr[index], arr[index - 1]];
+}
+
+function moveDown(index: number) {
+	if (index === ranking.value.length - 1) return;
+	const arr = ranking.value;
+	[arr[index], arr[index + 1]] = [arr[index + 1], arr[index]];
+}
+
+function submit() {
+	if (!canSubmit.value) return;
+	emit("submit", {
+		answer: { ranking: ranking.value.map((o) => o.id) },
+		reason: reason.value.trim(),
+	});
+}
+</script>
+
+<template>
+	<div class="ranked-choice-vote">
+		<p class="ranked-choice-vote__hint">
+			{{ $t("playtest.concept_poll.ranked_hint", "Order these from your most to least preferred (use the arrows).") }}
+		</p>
+
+		<ol class="ranked-choice-vote__list">
+			<li v-for="(opt, index) in ranking" :key="opt.id" class="ranked-choice-vote__item">
+				<span class="ranked-choice-vote__position">{{ index + 1 }}</span>
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="ranked-choice-vote__media">
+				<span class="ranked-choice-vote__label">{{ opt.label }}</span>
+				<span class="ranked-choice-vote__controls">
+					<button
+						type="button"
+						class="ranked-choice-vote__arrow"
+						:disabled="index === 0"
+						:aria-label="$t('playtest.concept_poll.move_up', 'Move up')"
+						@click="moveUp(index)"
+					>
+						<i class="fa-solid fa-arrow-up" />
+					</button>
+					<button
+						type="button"
+						class="ranked-choice-vote__arrow"
+						:disabled="index === ranking.length - 1"
+						:aria-label="$t('playtest.concept_poll.move_down', 'Move down')"
+						@click="moveDown(index)"
+					>
+						<i class="fa-solid fa-arrow-down" />
+					</button>
+				</span>
+			</li>
+		</ol>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary ranked-choice-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.ranked-choice-vote {
+	&__hint {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0 0 10px;
+	}
+
+	&__list {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 8px 12px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+	}
+
+	&__position {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 22px;
+		height: 22px;
+		font-size: 12px;
+		font-weight: 700;
+		background: var(--primary, #D297FF);
+		color: var(--key-accent-ink, #13161C);
+		flex-shrink: 0;
+	}
+
+	&__media {
+		width: 36px;
+		height: 36px;
+		object-fit: cover;
+		flex-shrink: 0;
+	}
+
+	&__label {
+		flex: 1;
+		font-size: 13px;
+		color: var(--text-primary, #fff);
+	}
+
+	&__controls {
+		display: flex;
+		gap: 4px;
+	}
+
+	&__arrow {
+		background: none;
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		color: var(--text-primary, #fff);
+		padding: 4px 8px;
+		cursor: pointer;
+
+		&:hover:not(:disabled) {
+			border-color: var(--primary, #D297FF);
+		}
+
+		&:disabled {
+			opacity: 0.35;
+			cursor: not-allowed;
+		}
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>