@mundogamernetwork/shared-ui 1.1.95 → 1.2.0

package/components/playtest/StarRatingInput.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+// Reusable 1–5 star rating input. No star-rating component existed anywhere
+// in shared-ui before this (community-frontend currently copy-pastes inline
+// star SVG per usage per this session's research) — built fresh here so
+// every playtest flow (baseline "scale" sections, concept-poll star_rating
+// votes) shares one implementation.
+const props = withDefaults(defineProps<{
+	modelValue: number | null
+	max?: number
+	disabled?: boolean
+	size?: number
+}>(), {
+	max: 5,
+	disabled: false,
+	size: 22,
+});
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: number): void
+}>();
+
+import { ref } from "vue";
+
+const hovered = ref<number | null>(null);
+
+function select(n: number) {
+	if (props.disabled) return;
+	emit("update:modelValue", n);
+}
+
+function starClass(n: number): string {
+	const active = hovered.value ?? props.modelValue ?? 0;
+	return n <= active ? "star-rating__star star-rating__star--active" : "star-rating__star";
+}
+</script>
+
+<template>
+	<div
+		class="star-rating"
+		:class="{ 'star-rating--disabled': disabled }"
+		role="radiogroup"
+		:aria-label="`Rating out of ${max}`"
+	>
+		<button
+			v-for="n in max"
+			:key="n"
+			type="button"
+			class="star-rating__btn"
+			:class="starClass(n)"
+			:disabled="disabled"
+			:aria-checked="modelValue === n"
+			role="radio"
+			@click="select(n)"
+			@mouseenter="hovered = n"
+			@mouseleave="hovered = null"
+		>
+			<svg
+				:width="size"
+				:height="size"
+				viewBox="0 0 24 24"
+				:fill="n <= (hovered ?? modelValue ?? 0) ? 'currentColor' : 'none'"
+				stroke="currentColor"
+				stroke-width="1.5"
+			>
+				<path
+					d="M12 2.5l2.9 6.06 6.6.77-4.85 4.6 1.24 6.57L12 17.3l-5.89 3.2 1.24-6.57-4.85-4.6 6.6-.77L12 2.5z"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</button>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.star-rating {
+	display: inline-flex;
+	gap: 4px;
+
+	&--disabled {
+		opacity: 0.6;
+	}
+
+	&__btn {
+		background: none;
+		border: none;
+		padding: 2px;
+		cursor: pointer;
+		line-height: 0;
+		color: var(--secondary-info-fg, #666);
+		transition: color 0.12s, transform 0.12s;
+
+		&:hover:not(:disabled) {
+			transform: scale(1.08);
+		}
+
+		&:disabled {
+			cursor: not-allowed;
+		}
+	}
+
+	&__star--active {
+		color: var(--primary, #D297FF);
+	}
+}
+</style>

package/components/playtest/accessibility/CriterionRow.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+// One accessibility criterion's evaluation row — result enum + conditional
+// notes (required when result==='fail', per StoreAccessibilityEvaluationRequest.php)
+// + tester_uses_accommodation checkbox (weights testers who actually rely on
+// the accommodation). Server upserts per-criterion — safe to auto-save each
+// row as the tester completes it, not just at the end.
+import { ref, computed, watch } from "vue";
+import type { AccessibilityEvaluationResult, PlaytestAccessibilityCriterionMeta } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	criterionKey: string;
+	meta: PlaytestAccessibilityCriterionMeta;
+	autoSave?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "save", payload: { criterion: string; result: AccessibilityEvaluationResult; notes?: string | null; tester_uses_accommodation?: boolean }): void
+}>();
+
+const RESULTS: AccessibilityEvaluationResult[] = ["pass", "fail", "partial", "not_applicable"];
+
+const result = ref<AccessibilityEvaluationResult | "">("");
+const notes = ref("");
+const usesAccommodation = ref(false);
+
+const notesRequired = computed(() => result.value === "fail");
+const isComplete = computed(() => !!result.value && (!notesRequired.value || notes.value.trim().length > 0));
+
+function save() {
+	if (!result.value) return;
+	if (notesRequired.value && !notes.value.trim()) return;
+	emit("save", {
+		criterion: props.criterionKey,
+		result: result.value,
+		notes: notes.value || null,
+		tester_uses_accommodation: usesAccommodation.value,
+	});
+}
+
+// Auto-save whenever the row becomes complete (per-criterion upsert is safe
+// server-side) — opt-out via autoSave=false if the orchestrator wants an
+// explicit "save" button flow instead.
+watch([result, notes, usesAccommodation], () => {
+	if (props.autoSave !== false && isComplete.value) save();
+});
+
+defineExpose({ isComplete, save });
+</script>
+
+<template>
+	<div class="criterion-row">
+		<div class="criterion-row__header">
+			<h4 class="criterion-row__label">{{ meta.label }}</h4>
+			<label class="criterion-row__accommodation">
+				<input type="checkbox" v-model="usesAccommodation">
+				{{ $t("playtest.accessibility.uses_accommodation", "I personally rely on this accommodation") }}
+			</label>
+		</div>
+
+		<div class="criterion-row__results">
+			<label
+				v-for="r in RESULTS"
+				:key="r"
+				class="criterion-row__result"
+				:class="{ 'criterion-row__result--selected': result === r }"
+			>
+				<input type="radio" :value="r" v-model="result" :name="`criterion-${criterionKey}`">
+				{{ r.replace('_', ' ') }}
+			</label>
+		</div>
+
+		<div v-if="notesRequired" class="criterion-row__notes">
+			<label class="criterion-row__notes-label">
+				{{ $t("playtest.accessibility.notes_required", "Notes (required when failing)") }}
+			</label>
+			<textarea v-model="notes" rows="2" class="criterion-row__textarea" />
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.criterion-row {
+	padding: 14px 0;
+	border-bottom: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		gap: 8px;
+		margin-bottom: 10px;
+	}
+
+	&__label {
+		font-size: 14px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__accommodation {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		font-size: 11px;
+		color: var(--secondary-info-fg, #aaa);
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__results {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	&__result {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 12px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		font-size: 12px;
+		text-transform: capitalize;
+		color: var(--text-primary, #fff);
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__notes {
+		margin-top: 10px;
+
+		&-label {
+			display: block;
+			font-size: 11px;
+			color: var(--danger, #e53935);
+			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: 8px;
+		font-size: 12px;
+		resize: vertical;
+	}
+}
+</style>

package/components/playtest/baseline/BaselineSectionStep.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+// One baseline section's rating+text inputs, driven entirely by the
+// section's catalog metadata (scale/text requirement) from
+// GET /playtest/catalog — never hardcodes per-section behavior, since the
+// catalog is the single source of truth (PlaytestFormSection::all() on the
+// backend, mirrored here).
+import { computed } from "vue";
+import StarRatingInput from "../StarRatingInput.vue";
+import type { PlaytestFormSectionMeta, PlaytestAnswerEntry } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	sectionKey: string;
+	meta: PlaytestFormSectionMeta;
+	modelValue: PlaytestAnswerEntry;
+}>();
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: PlaytestAnswerEntry): void
+}>();
+
+const rating = computed({
+	get: () => props.modelValue.rating ?? null,
+	set: (v: number | null) => emit("update:modelValue", { ...props.modelValue, rating: v ?? undefined }),
+});
+
+const text = computed({
+	get: () => props.modelValue.text ?? "",
+	set: (v: string) => emit("update:modelValue", { ...props.modelValue, text: v }),
+});
+
+const textRequired = computed(() => props.meta.text === "required");
+const textOptional = computed(() => props.meta.text === "optional");
+const showText = computed(() => props.meta.text !== "none");
+
+const isValid = computed(() => {
+	if (props.meta.scale && !rating.value) return false;
+	if (textRequired.value && !text.value.trim()) return false;
+	return true;
+});
+
+defineExpose({ isValid });
+</script>
+
+<template>
+	<div class="baseline-step">
+		<h4 class="baseline-step__label">{{ meta.label }}</h4>
+
+		<div v-if="meta.scale" class="baseline-step__rating">
+			<StarRatingInput v-model="rating as any" />
+		</div>
+
+		<div v-if="showText" class="baseline-step__text">
+			<label :for="`baseline-text-${sectionKey}`" class="baseline-step__text-label">
+				{{ textRequired
+					? $t("playtest.baseline.feedback_required", "Your feedback (required)")
+					: $t("playtest.baseline.feedback_optional", "Your feedback (optional)") }}
+			</label>
+			<textarea
+				:id="`baseline-text-${sectionKey}`"
+				v-model="text"
+				class="baseline-step__textarea"
+				rows="4"
+				:required="textRequired"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.baseline-step {
+	padding: 16px 0;
+	border-bottom: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&__label {
+		font-size: 15px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0 0 10px;
+	}
+
+	&__rating {
+		margin-bottom: 12px;
+	}
+
+	&__text-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;
+	}
+}
+</style>

package/components/playtest/compliance/ChecklistItemRow.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+// One compliance checklist item's result row — status enum (only 3: no
+// 'partial', unlike accessibility) + conditional notes (required when
+// status==='fail', per SubmitComplianceResultRequest.php) + optional
+// evidence_url (populated via POST /playtest/media beforehand). IMPORTANT:
+// unlike accessibility's per-criterion upsert, the parent submit endpoint
+// REPLACES the whole results array for the checklist on every call — this
+// row only emits its own entry; the orchestrator/composable is responsible
+// for merging it into the full accumulated set before calling submit.
+import { ref, computed, watch } from "vue";
+import type { ComplianceResultStatus, PlaytestComplianceChecklistItem } from "../../../services/playtestTesterService";
+
+const props = defineProps<{
+	item: PlaytestComplianceChecklistItem;
+	uploading?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(e: "change", payload: { key: string; status: ComplianceResultStatus; notes?: string | null; evidence_url?: string | null }): void
+	(e: "upload-evidence", file: File): void
+}>();
+
+const STATUSES: ComplianceResultStatus[] = ["pass", "fail", "not_applicable"];
+
+const status = ref<ComplianceResultStatus | "">("");
+const notes = ref("");
+const evidenceUrl = ref<string | null>(null);
+
+const notesRequired = computed(() => status.value === "fail");
+const isComplete = computed(() => !!status.value && (!notesRequired.value || notes.value.trim().length > 0));
+
+function emitChange() {
+	if (!status.value) return;
+	if (notesRequired.value && !notes.value.trim()) return;
+	emit("change", {
+		key: props.item.key,
+		status: status.value,
+		notes: notes.value || null,
+		evidence_url: evidenceUrl.value,
+	});
+}
+
+watch([status, notes, evidenceUrl], emitChange);
+
+function onFileChange(e: Event) {
+	const file = (e.target as HTMLInputElement).files?.[0];
+	if (file) emit("upload-evidence", file);
+}
+
+function setEvidenceUrl(url: string | null) {
+	evidenceUrl.value = url;
+}
+
+defineExpose({ isComplete, setEvidenceUrl });
+</script>
+
+<template>
+	<div class="checklist-item-row">
+		<div class="checklist-item-row__header">
+			<h4 class="checklist-item-row__label">{{ item.label }}</h4>
+			<span v-if="item.severity" class="checklist-item-row__severity">{{ item.severity }}</span>
+		</div>
+
+		<p v-if="item.description" class="checklist-item-row__description">{{ item.description }}</p>
+
+		<div class="checklist-item-row__statuses">
+			<label
+				v-for="s in STATUSES"
+				:key="s"
+				class="checklist-item-row__status"
+				:class="{ 'checklist-item-row__status--selected': status === s }"
+			>
+				<input type="radio" :value="s" v-model="status" :name="`compliance-${item.key}`">
+				{{ s.replace('_', ' ') }}
+			</label>
+		</div>
+
+		<div v-if="notesRequired" class="checklist-item-row__notes">
+			<label class="checklist-item-row__notes-label">
+				{{ $t("playtest.compliance.notes_required", "Notes (required when failing)") }}
+			</label>
+			<textarea v-model="notes" rows="2" class="checklist-item-row__textarea" />
+		</div>
+
+		<div v-if="item.evidence_required || status === 'fail'" class="checklist-item-row__evidence">
+			<label class="checklist-item-row__evidence-label">
+				{{ $t("playtest.compliance.attach_evidence", "Attach evidence (screenshot/video)") }}
+			</label>
+			<input type="file" accept="image/*,video/mp4,video/quicktime,video/webm" @change="onFileChange">
+			<span v-if="uploading" class="checklist-item-row__uploading">{{ $t("playtest.compliance.uploading", "Uploading…") }}</span>
+			<span v-else-if="evidenceUrl" class="checklist-item-row__uploaded">{{ $t("playtest.compliance.uploaded", "Attached") }}</span>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.checklist-item-row {
+	padding: 14px 0;
+	border-bottom: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+
+	&__label {
+		font-size: 14px;
+		font-weight: 700;
+		color: var(--card-article-title, #fff);
+		margin: 0;
+	}
+
+	&__severity {
+		font-size: 10px;
+		font-weight: 700;
+		text-transform: uppercase;
+		color: var(--secondary-info-fg, #aaa);
+		border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
+		padding: 2px 8px;
+	}
+
+	&__description {
+		font-size: 12px;
+		color: var(--secondary-info-fg, #aaa);
+		margin: 0 0 10px;
+	}
+
+	&__statuses {
+		display: flex;
+		gap: 8px;
+	}
+
+	&__status {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+		padding: 6px 12px;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		cursor: pointer;
+		font-size: 12px;
+		text-transform: capitalize;
+		color: var(--text-primary, #fff);
+
+		&--selected {
+			border-color: var(--primary, #D297FF);
+			background: rgba(210, 151, 255, 0.08);
+		}
+
+		input {
+			accent-color: var(--primary, #D297FF);
+		}
+	}
+
+	&__notes,
+	&__evidence {
+		margin-top: 10px;
+	}
+
+	&__notes-label,
+	&__evidence-label {
+		display: block;
+		font-size: 11px;
+		color: var(--secondary-info-fg, #aaa);
+		margin-bottom: 6px;
+	}
+
+	&__notes-label {
+		color: var(--danger, #e53935);
+	}
+
+	&__textarea {
+		width: 100%;
+		background: var(--bg-app-badge, #1a1a1a);
+		border: 1px solid var(--button-secondary-default-bg, #2a2a2a);
+		color: var(--text-primary, #fff);
+		padding: 8px;
+		font-size: 12px;
+		resize: vertical;
+	}
+
+	&__uploading,
+	&__uploaded {
+		display: inline-block;
+		margin-left: 8px;
+		font-size: 11px;
+		color: var(--secondary-info-fg, #888);
+	}
+
+	&__uploaded {
+		color: var(--primary, #D297FF);
+	}
+}
+</style>