@mundogamernetwork/shared-ui 1.1.95 → 1.2.0

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// poll_type=single_select — answer shape {option_id}, same as head_to_head
+// but rendered as a list (arbitrary option count) rather than a 2-up compare.
+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="single-select-vote">
+		<div class="single-select-vote__options">
+			<label
+				v-for="opt in options"
+				:key="opt.id"
+				class="single-select-vote__option"
+				:class="{ 'single-select-vote__option--selected': selected === opt.id }"
+			>
+				<input type="radio" :value="opt.id" v-model="selected" name="single-select-option">
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="single-select-vote__media">
+				<span class="single-select-vote__label">{{ opt.label }}</span>
+			</label>
+		</div>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary single-select-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.single-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/StarRatingVote.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+// poll_type=star_rating — answer shape {option_id, stars} (stars 1-5).
+// Reuses the shared StarRatingInput.vue rather than reimplementing stars.
+import { ref, computed } from "vue";
+import StarRatingInput from "../StarRatingInput.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; stars: number }; reason: string }): void
+}>();
+
+const selected = ref<number | null>(null);
+const stars = ref<number | null>(null);
+const reason = ref("");
+
+const canSubmit = computed(() =>
+	selected.value !== null && !!stars.value && reason.value.trim().length >= 3 && !props.submitting
+);
+
+function submit() {
+	if (!canSubmit.value || selected.value === null || !stars.value) return;
+	emit("submit", { answer: { option_id: selected.value, stars: stars.value }, reason: reason.value.trim() });
+}
+</script>
+
+<template>
+	<div class="star-vote">
+		<div class="star-vote__options">
+			<label
+				v-for="opt in options"
+				:key="opt.id"
+				class="star-vote__option"
+				:class="{ 'star-vote__option--selected': selected === opt.id }"
+			>
+				<input type="radio" :value="opt.id" v-model="selected" name="star-vote-option">
+				<img v-if="opt.media_url" :src="opt.media_url" :alt="opt.label" class="star-vote__media">
+				<span>{{ opt.label }}</span>
+			</label>
+		</div>
+
+		<div v-if="selected !== null" class="star-vote__rating">
+			<span class="star-vote__rating-label">{{ $t("playtest.concept_poll.stars_label", "Your rating") }}</span>
+			<StarRatingInput v-model="stars as any" />
+		</div>
+
+		<VoteReasonField v-model="reason" />
+
+		<button type="button" class="btn primary star-vote__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.concept_poll.submit_vote", "Submit vote") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.star-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;
+	}
+
+	&__rating {
+		margin-bottom: 16px;
+
+		&-label {
+			display: block;
+			font-size: 12px;
+			color: var(--secondary-info-fg, #aaa);
+			margin-bottom: 6px;
+		}
+	}
+
+	&__submit {
+		margin-top: 16px;
+	}
+}
+</style>

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

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// `reason` is UNCONDITIONALLY required on every concept-poll vote, regardless
+// of poll_type — verified against VoteConceptPollRequest.php this session
+// (min:3 chars, max:2000). Every *Vote.vue component mounts this at the
+// bottom of its own template — not conditionally.
+import { computed } from "vue";
+
+const props = defineProps<{
+	modelValue: string;
+}>();
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: string): void
+}>();
+
+const value = computed({
+	get: () => props.modelValue,
+	set: (v: string) => emit("update:modelValue", v),
+});
+
+const isValid = computed(() => value.value.trim().length >= 3);
+
+defineExpose({ isValid });
+</script>
+
+<template>
+	<div class="vote-reason">
+		<label for="vote-reason-input" class="vote-reason__label">
+			{{ $t("playtest.concept_poll.reason_label", "Why did you choose this? (required)") }}
+		</label>
+		<textarea
+			id="vote-reason-input"
+			v-model="value"
+			class="vote-reason__textarea"
+			rows="3"
+			minlength="3"
+			maxlength="2000"
+			required
+		/>
+		<span v-if="value.length > 0 && !isValid" class="vote-reason__hint">
+			{{ $t("playtest.concept_poll.reason_min_length", "Please write at least 3 characters.") }}
+		</span>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.vote-reason {
+	margin-top: 16px;
+
+	&__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;
+	}
+
+	&__hint {
+		display: block;
+		font-size: 11px;
+		color: var(--danger, #e53935);
+		margin-top: 4px;
+	}
+}
+</style>

package/components/playtest/lqa/FileIssueForm.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+// Files one localization defect — issue_type/severity enums verified against
+// StoreLocalizationIssueRequest.php this session. media_url is optional and
+// populated via POST /playtest/media (uploadPlaytestMedia) BEFORE this form
+// submits — the parent (usePlaytestResponse's uploadMedia) owns the actual
+// upload call; this component just emits the file and displays progress.
+import { ref, computed } from "vue";
+import type { LocalizationIssueType, LocalizationIssueSeverity, StoreLocalizationIssuePayload } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	campaignLocaleId: number | null;
+	submitting?: boolean;
+	uploading?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "submit", payload: StoreLocalizationIssuePayload): void
+	(e: "upload-media", file: File): void
+}>();
+
+const ISSUE_TYPES: LocalizationIssueType[] = [
+	"mistranslation", "text_truncation", "missing_string", "cultural_inappropriateness",
+	"audio_subtitle_desync", "untranslated_string", "grammar_punctuation", "inconsistent_terminology",
+];
+
+const SEVERITIES: LocalizationIssueSeverity[] = ["blocker", "critical", "major", "minor", "cosmetic"];
+
+const issueType = ref<LocalizationIssueType | "">("");
+const severity = ref<LocalizationIssueSeverity | "">("");
+const location = ref("");
+const description = ref("");
+const expectedText = ref("");
+const actualText = ref("");
+const mediaUrl = ref<string | null>(null);
+
+const canSubmit = computed(() =>
+	!!props.campaignLocaleId &&
+	!!issueType.value &&
+	!!severity.value &&
+	description.value.trim().length > 0 &&
+	!props.submitting
+);
+
+function onFileChange(e: Event) {
+	const file = (e.target as HTMLInputElement).files?.[0];
+	if (file) emit("upload-media", file);
+}
+
+function setMediaUrl(url: string | null) {
+	mediaUrl.value = url;
+}
+
+defineExpose({ setMediaUrl });
+
+function submit() {
+	if (!canSubmit.value || !props.campaignLocaleId || !issueType.value || !severity.value) return;
+	emit("submit", {
+		campaign_locale_id: props.campaignLocaleId,
+		issue_type: issueType.value,
+		severity: severity.value,
+		location: location.value || null,
+		description: description.value.trim(),
+		expected_text: expectedText.value || null,
+		actual_text: actualText.value || null,
+		media_url: mediaUrl.value,
+	});
+
+	// reset form for the next issue
+	issueType.value = "";
+	severity.value = "";
+	location.value = "";
+	description.value = "";
+	expectedText.value = "";
+	actualText.value = "";
+	mediaUrl.value = null;
+}
+</script>
+
+<template>
+	<div class="file-issue-form">
+		<div class="file-issue-form__row">
+			<label class="file-issue-form__label">{{ $t("playtest.lqa.issue_type", "Issue type") }}</label>
+			<select v-model="issueType" class="file-issue-form__select">
+				<option value="" disabled>{{ $t("playtest.lqa.select_type_placeholder", "Select…") }}</option>
+				<option v-for="t in ISSUE_TYPES" :key="t" :value="t">{{ t }}</option>
+			</select>
+		</div>
+
+		<div class="file-issue-form__row">
+			<label class="file-issue-form__label">{{ $t("playtest.lqa.severity", "Severity") }}</label>
+			<select v-model="severity" class="file-issue-form__select">
+				<option value="" disabled>{{ $t("playtest.lqa.select_severity_placeholder", "Select…") }}</option>
+				<option v-for="s in SEVERITIES" :key="s" :value="s">{{ s }}</option>
+			</select>
+		</div>
+
+		<div class="file-issue-form__row">
+			<label class="file-issue-form__label">{{ $t("playtest.lqa.location", "Location (screen/scene, optional)") }}</label>
+			<input v-model="location" type="text" class="file-issue-form__input">
+		</div>
+
+		<div class="file-issue-form__row">
+			<label class="file-issue-form__label">{{ $t("playtest.lqa.description", "Description (required)") }}</label>
+			<textarea v-model="description" rows="3" class="file-issue-form__textarea" />
+		</div>
+
+		<div class="file-issue-form__row-pair">
+			<div class="file-issue-form__row">
+				<label class="file-issue-form__label">{{ $t("playtest.lqa.expected_text", "Expected text") }}</label>
+				<textarea v-model="expectedText" rows="2" class="file-issue-form__textarea" />
+			</div>
+			<div class="file-issue-form__row">
+				<label class="file-issue-form__label">{{ $t("playtest.lqa.actual_text", "Actual text") }}</label>
+				<textarea v-model="actualText" rows="2" class="file-issue-form__textarea" />
+			</div>
+		</div>
+
+		<div class="file-issue-form__row">
+			<label class="file-issue-form__label">{{ $t("playtest.lqa.attach_screenshot", "Attach screenshot/video (optional)") }}</label>
+			<input type="file" accept="image/*,video/mp4,video/quicktime,video/webm" @change="onFileChange">
+			<span v-if="uploading" class="file-issue-form__uploading">{{ $t("playtest.lqa.uploading", "Uploading…") }}</span>
+			<span v-else-if="mediaUrl" class="file-issue-form__uploaded">{{ $t("playtest.lqa.uploaded", "Attached") }}</span>
+		</div>
+
+		<button type="button" class="btn primary file-issue-form__submit" :disabled="!canSubmit" @click="submit">
+			{{ $t("playtest.lqa.file_issue", "File issue") }}
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.file-issue-form {
+	&__row {
+		margin-bottom: 14px;
+	}
+
+	&__row-pair {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 12px;
+	}
+
+	&__label {
+		display: block;
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin-bottom: 6px;
+	}
+
+	&__select,
+	&__input,
+	&__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;
+	}
+
+	&__textarea {
+		resize: vertical;
+	}
+
+	&__uploading,
+	&__uploaded {
+		display: inline-block;
+		margin-left: 8px;
+		font-size: 11px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__uploaded {
+		color: var(--primary, #D297FF);
+	}
+
+	&__submit {
+		margin-top: 4px;
+	}
+}
+</style>

package/components/playtest/lqa/IssueList.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+// Read-only list of localization issues the tester has already filed this
+// session — filedIssues from usePlaytestResponse (client-accumulated, since
+// there's no per-tester "my issues" filter on the backend's indexIssues()).
+import type { PlaytestLocalizationIssue } from "../../../services/playtestTesterService";
+
+defineProps<{
+	issues: PlaytestLocalizationIssue[];
+}>();
+
+const SEVERITY_COLOR: Record<string, string> = {
+	blocker: "#e53935",
+	critical: "#e5793d",
+	major: "#e5c53d",
+	minor: "#8ac53d",
+	cosmetic: "#3d8ae5",
+};
+</script>
+
+<template>
+	<div class="issue-list">
+		<h4 class="issue-list__title">
+			{{ $t("playtest.lqa.filed_issues", "Issues filed this session") }} ({{ issues.length }})
+		</h4>
+
+		<p v-if="issues.length === 0" class="issue-list__empty">
+			{{ $t("playtest.lqa.no_issues_yet", "No issues filed yet.") }}
+		</p>
+
+		<ul v-else class="issue-list__items">
+			<li v-for="issue in issues" :key="issue.id" class="issue-list__item">
+				<span
+					class="issue-list__severity"
+					:style="{ color: SEVERITY_COLOR[issue.severity] ?? '#888' }"
+				>
+					{{ issue.severity }}
+				</span>
+				<span class="issue-list__type">{{ issue.issue_type }}</span>
+				<span class="issue-list__desc">{{ issue.description }}</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.issue-list {
+	margin-top: 24px;
+
+	&__title {
+		font-size: 13px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0 0 10px;
+	}
+
+	&__empty {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__items {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	&__item {
+		display: flex;
+		align-items: baseline;
+		gap: 8px;
+		padding: 8px 10px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		font-size: 12px;
+	}
+
+	&__severity {
+		font-weight: 700;
+		text-transform: uppercase;
+		font-size: 10px;
+		flex-shrink: 0;
+	}
+
+	&__type {
+		color: var(--secondary-info-fg, #aaa);
+		flex-shrink: 0;
+	}
+
+	&__desc {
+		color: var(--text-primary, #fff);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+}
+</style>

package/components/playtest/lqa/LocaleSelector.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Locale/build picker for a localization_qa campaign — GET
+// /playtest/campaigns/{id}/locales (indexLocales controller action).
+import { computed } from "vue";
+import type { PlaytestCampaignLocale } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	locales: PlaytestCampaignLocale[];
+	modelValue: number | null;
+}>();
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: number | null): void
+}>();
+
+const selected = computed({
+	get: () => props.modelValue,
+	set: (v: number | null) => emit("update:modelValue", v),
+});
+
+function remaining(locale: PlaytestCampaignLocale): number {
+	return Math.max(0, locale.responses_target - locale.responses_received);
+}
+</script>
+
+<template>
+	<div class="locale-selector">
+		<label for="locale-select" class="locale-selector__label">
+			{{ $t("playtest.lqa.select_locale", "Locale / build in scope") }}
+		</label>
+		<select id="locale-select" v-model="selected" class="locale-selector__select">
+			<option :value="null" disabled>{{ $t("playtest.lqa.select_locale_placeholder", "Select a locale…") }}</option>
+			<option v-for="locale in locales" :key="locale.id" :value="locale.id">
+				{{ locale.locale }}
+				<template v-if="locale.build_reference"> — {{ locale.build_reference }}</template>
+			</option>
+		</select>
+
+		<div v-if="selected" class="locale-selector__meta">
+			{{ $t("playtest.lqa.responses_progress", "Responses so far") }}:
+			{{ locales.find((l) => l.id === selected)?.responses_received ?? 0 }}
+			/ {{ locales.find((l) => l.id === selected)?.responses_target ?? 0 }}
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.locale-selector {
+	margin-bottom: 20px;
+
+	&__label {
+		display: block;
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin-bottom: 6px;
+	}
+
+	&__select {
+		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;
+	}
+
+	&__meta {
+		font-size: 11px;
+		color: var(--secondary-info-fg, #888);
+		margin-top: 6px;
+	}
+}
+</style>