up

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())
     }
   }

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, props.teamNames?.length ?? 0))
-const teamRows = computed(() => Math.max(1, Math.ceil((props.teamNames?.length ?? 0) / teamColumns.value)))
 const failedImages = reactive(new Set<string>())
 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) {
       </section>
       <section v-else-if="mode === 10" class="teams-scene" aria-label="Список команд">
         <p v-if="!teamNames" class="message">Список команд ещё не загружен</p>
-        <div v-else-if="teamNames.length" class="team-names" :style="{ gridTemplateColumns: `repeat(${teamColumns}, minmax(0, 1fr))`, gridTemplateRows: `repeat(${teamRows}, minmax(0, 1fr))`, fontSize: `min(calc(var(--scene-vh) * ${40 / teamRows}), calc(var(--scene-vw) * ${5 / teamColumns}))` }">
+        <div
+        v-else-if="teamNames.length"
+        class="team-names"
+        :style="{
+          gridTemplateRows: `repeat(${teamRows}, minmax(0, 1fr))`,
+          fontSize: `min(calc(var(--scene-vh) * ${40 / teamRows}), calc(var(--scene-vw) * 5))`,
+        }"
+      >
           <p v-for="(name, index) in teamNames" :key="index">{{ name }}</p>
         </div>
         <p v-else class="message">Команды пока не зарегистрированы</p>
@@ -241,8 +247,8 @@ function imageURL(url: string, version: string) {
 .team-names {
   align-items: center;
   display: grid;
-  gap: calc(var(--scene-vw) * 1.5);
+  gap: 0.25em;
-  grid-auto-flow: column;
+  grid-template-columns: minmax(0, 1fr);
   height: 100%;
 }