sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve visual layout to fill entire screen with artist names

Browse Source 
Increase the number of artist names displayed and adjust their placement to better fill the available screen space, enhancing the visual density of the pattern.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a30b9c04-9932-4529-acf1-1bf333d06387
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/jdAEdU5
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-04 15:18:04 +00:00
parent c19169180f
commit 40bd27d5c4
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772637430140.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

29
client/src/components/artist-pattern-bg.tsx
View File

@ -9,6 +9,8 @@ const ARTISTS = [
"Die 3 Z'widern", "Mark Ed", "Natascha", "Meli Stein",
"SUSAL", "Pfundskerle", "Da Wadltreiber", "Sanny",
"Alex Reichinger", "Sigrid & Marina", "Folx Stadl", "Gipfelstammtisch",
"Wildecker Herzbuben", "Herzilein", "Jonny Hill", "Ramona Martiness",
"Kayla Kristin", "Kevin Neon", "Robi Zupan", "Oberkrainer",
];
function seededRandom(seed: number) {
@ -29,17 +31,22 @@ export default function ArtistPatternBg({ children, className = "", seed = 42 }:
const items = useMemo(() => {
const rng = seededRandom(seed);
const result: { name: string; x: number; y: number; size: number; opacity: number; rotation: number; italic: boolean }[] = [];
const count = 40;
for (let i = 0; i < count; i++) {
result.push({
name: ARTISTS[Math.floor(rng() * ARTISTS.length)],
x: rng() * 100,
y: (i / count) * 100 + (rng() - 0.5) * 8,
size: 11 + rng() * 11,
opacity: 0.08 + rng() * 0.12,
rotation: -15 + rng() * 30,
italic: rng() > 0.6,
});
const rows = 20;
const cols = 6;
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
const cellW = 100 / cols;
const cellH = 100 / rows;
result.push({
name: ARTISTS[Math.floor(rng() * ARTISTS.length)],
x: col * cellW + rng() * cellW * 0.8,
y: row * cellH + rng() * cellH * 0.7,
size: 10 + rng() * 8,
opacity: 0.07 + rng() * 0.11,
rotation: -20 + rng() * 40,
italic: rng() > 0.6,
});
}
}
return result;
}, [seed]);