an early-poly rts ui kit

Reign

Půlnoční sklo, tesaný kámen, syté zlato a tvrdé low-poly fazety. Jedno CSS, čtyři rasy, dvanáct barev hráčů.

v1.26.0.6401
esence

Čtyři rasy, jeden atribut

Celý kit se přeskinuje jediným data-race na kořeni — přesně jako HUD ve hře. Zkus to; přepne se úplně všechno, včetně téhle stránky.

procedurální art

Standarty frakcí

Žádné obrázky — heraldika kreslená kódem do canvas textury a zavěšená na simulovanou látku: vlna posouvá vodorovné pásy a její sklon svítí a stíní záhyby. Čtyři identity: neochvějná lidská modř se štítem a mečem, orkská rudá rvaná válkou, Pohroma rozežraná moly visící v cárech a měsíční stříbro elfů.

Human
Orc
Undead
Night Elf
destilát

Epické prvky frakcí

Z každé standarty vytažené to podstatné, dvakrát: hero tlačítko — jedno, maximálně dvě na aplikaci, s vlastním dechem glow své rasy — a top-crop pozadí, které vyplní libovolně velký prostor motivem koruny vlajky. Čisté CSS, barvy zapečené: lidské tlačítko zůstane lidské v jakémkoliv skinu.

rg-hero-btn--human
rg-hero-btn--orc
rg-hero-btn--undead
rg-hero-btn--nightelf
HeroLevelKills
Priestess of the Hunt764
Demon Hunter541
Upkeep High Upkeep stejný motiv, jiná velikost
komponenty

Suroviny, upkeep a denní doba

Černý pás nahoře: zlato, dřevo, jídlo, stav upkeepu barvou — a otáčivé hodiny se sluncem a měsícem. Den trvá minutu, jak se sluší.

12 640 3 280 64/100 Low Upkeep
No Upkeep Low Upkeep High Upkeep — daň z impéria, barvou
komponenty

Command card

Mřížka 4×3, hotkey v rohu, autocast pulzuje zlatými rohy (zkus kliknout na léčení), tooltip s cenou a požadavky. Najeď na Holy Light.

Stavy

hover rozsvítí sklo, --active drží zlaté podsvícení, --autocast pulzuje, --disabled zhasne. Počty kusů vlevo nahoře, hotkey vpravo dole — jak jinak.

komponenty

Talentový web

Souhvězdí prázdných soketů — obsah si dosadíš jakýkoliv, tohle je čisté UI. Klik učí (pravý klik odučí), naučené cesty rozsvítí zlaté jiskry putující po spojnicích, klíčové uzly odemykají ultimátu s aurou. Přepni rasu a celý web se převlékne.

Points 16 klik = +1 · pravý klik = −1
War Command Sorcery
komponenty

Jednotky a hrdinové

Zelené zdraví, které žloutne a rudne. Portrét v kamenném rámu s odznakem levelu, výběrová mřížka s mini-bary, atributy hrdiny a fialové XP.

Selected: Footman ×8
Hrdina
7
Strength34+6
Agility18
Intelligence22+2
Vitály
552 / 600
276 / 600
84 / 600
169 / 260
Segmented
zeleň → žluť (--hurt) → rudá (--crit); mana je královská modř
komponenty

Dvanáct barev hráčů

Klasická dvanáctka. Nastav --rg-team a obarví se jmenovky, bary i tečky na minimapě.

komponenty

Výrobní fronta

Kasárna dřou: velký slot ukazuje, co se cvičí, fronta čeká, zelený pruh sype segmenty.

Training — Footman
0%
komponenty

Chat, dialog a fanfára

Jména v barvě hráče s tvrdou obrysovkou, systémové zprávy zlatě. A přes celou obrazovku umí přeletět fanfára.

[All] Insup: gl hf [All] Grubby: u2 [Allies] ToD: fast expo, tower rush incoming Grubby has left the game. [All] Insup: gg
komponenty

Formuláře

Zapuštěné vstupy s tvrdou fazetou, checkbox se zkosenými rohy.

všechno dohromady

Herní obrazovka

Cimbuří, minimapa s pingem, vybraná jednotka, command card. Přepni rasu tlačítky výš a vrať se sem — kámen, sklo i zlato se převléknou.

2 455 870 38/60 No Upkeep
3
Priestess of the Hunt
468 / 600
135 / 260
24–32 5 320
import

Jak to použít

Jeden soubor + volitelné fonty. Rasa je atribut, tým je proměnná.

<!-- 1. import --> <link rel="stylesheet" href="reign.css"> <link rel="stylesheet" href="reign-fonts.css"> <!-- volitelné --> <!-- 2. rasa na kořeni --> <body class="rg-app" data-race="undead"> <!-- 3. skládej --> <div class="rg-bar rg-bar--hp"> <div class="rg-bar__fill" style="--rg-value:78%"></div> </div> <span class="rg-plate" style="--rg-team:var(--rg-team-teal)"> <span class="rg-plate__name">ToD</span> </span>