diff --git a/scripts/previews-smoke.cjs b/scripts/previews-smoke.cjs index ea19873..c1fe7c6 100644 --- a/scripts/previews-smoke.cjs +++ b/scripts/previews-smoke.cjs @@ -84,6 +84,7 @@ module.exports = async function previewsSmoke({ control, output, evaluate, inspe { mode: 9, qrUrl: 'https://example.org/join', text: '' }, { mode: 10, text: '' }, ]) cases.push({ index: 7, catalog: { ...original.catalog, steps: original.catalog.steps.map((old, i) => i === 7 ? { ...old, ...step } : old) }, teams: { packageKey: original.catalog.key, capturedAt: new Date().toISOString(), teams: Array.from({ length: 32 }, (_, i) => ({ id: String(i), name: `Команда ${i + 1} — Длинное название` })) } }) + for (const count of [1, 8, 20]) cases.push({ index: 7, catalog: { ...original.catalog, steps: original.catalog.steps.map((old, i) => i === 7 ? { ...old, mode: 10 } : old) }, teams: { packageKey: original.catalog.key, capturedAt: new Date().toISOString(), teams: Array.from({ length: count }, (_, i) => ({ id: String(i), name: `Команда ${i + 1} — Длинное название` })) } }) cases.push({ index: 7, catalog: { ...original.catalog, steps: original.catalog.steps.map((old, i) => i === 7 ? { ...old, mode: 10 } : old) }, teams: { packageKey: original.catalog.key, capturedAt: new Date().toISOString(), teams: [] } }) for (const item of cases) { const catalog = item.catalog ?? original.catalog @@ -105,6 +106,12 @@ module.exports = async function previewsSmoke({ control, output, evaluate, inspe if (step.mode === 10) { assert.equal(await inspect("document.querySelectorAll('.team-names p').length"), item.teams.teams.length) assert.ok(await inspect("Array.from(document.querySelectorAll('.team-names p')).every(e => { const r = e.getBoundingClientRect(); return r.top >= 0 && r.left >= 0 && r.bottom <= innerHeight && r.right <= innerWidth })")) + const singleColumn = (root) => `(() => { + const rows = Array.from(document.querySelectorAll('${root} .team-names p'), e => e.getBoundingClientRect()); + return rows.every((row, i) => Math.abs(row.left - rows[0].left) < 1 && Math.abs(row.width - rows[0].width) < 1 && (i === 0 || row.top >= rows[i - 1].bottom)); + })()` + assert.ok(await inspect(singleColumn('.output')), 'output teams form one column') + assert.ok(await evaluate(singleColumn(miniature(item.index))), 'preview teams form one column') if (item.teams.teams.length) writeFileSync('/tmp/ed054-teams-output.png', (await output.webContents.capturePage()).toPNG()) } } diff --git a/src/components/SceneView.vue b/src/components/SceneView.vue index a1cd5ce..575739e 100644 --- a/src/components/SceneView.vue +++ b/src/components/SceneView.vue @@ -32,8 +32,7 @@ const props = withDefaults(defineProps<{ introTime: '', animatedResults: false, }) -const teamColumns = computed(() => Math.max(1, Math.ceil(Math.sqrt((props.teamNames?.length ?? 0) / 4)))) -const teamRows = computed(() => Math.max(1, Math.ceil((props.teamNames?.length ?? 0) / teamColumns.value))) +const teamRows = computed(() => Math.max(1, props.teamNames?.length ?? 0)) const failedImages = reactive(new Set()) watch(() => [props.imageVersion, props.catalog.cover, props.catalog.background], () => failedImages.clear(), { flush: 'sync' }) function imageURL(url: string, version: string) { @@ -105,7 +104,14 @@ function imageURL(url: string, version: string) {

Список команд ещё не загружен

-
+

{{ name }}

Команды пока не зарегистрированы

@@ -241,8 +247,8 @@ function imageURL(url: string, version: string) { .team-names { align-items: center; display: grid; - gap: calc(var(--scene-vw) * 1.5); - grid-auto-flow: column; + gap: 0.25em; + grid-template-columns: minmax(0, 1fr); height: 100%; }