Įterpimas

Serverio monitoriaus widgetas

Įterpk vieną <script> žymą į savo bendruomenės svetainę, forumą arba Wordpress puslapį. Widgetas ciklu rodo tavo serverius kaip gyvą karuselę, kas 30 sekundžių iš boost.warzonecs.com gaudamas hostname, dabartinį žemėlapį, žaidėjų skaičių ir šalies vėliavą.

Gyva peržiūra — vienas serveris

Su vienu adresu widgetas atvaizduoja vieną statinę kortelę — jokių karuselės valdiklių. Dešinioji peržiūra perduoda data-lang="lt", todėl mygtukų užrašai (Prisijungti, Dovanoti, Boost, Kopijuoti adresą ir kt.) grįžta lietuviškai.

Platus, angliškai (numatyta)

Platus, lietuviškai

Siauras (vertikalus išdėstymas)

Gyva peržiūra — keli serveriai

Kai adresų yra du ar daugiau, widgetas po kortele prideda karuselės valdiklius ir automatiškai persuka kas šešias sekundes. Vartotojai taip pat gali pereiti tarp jų per ‹ ir › rodykles arba paliesdami taškelius.

Platus (eilutės išdėstymas)

Siauras (vertikalus išdėstymas)

Kodo fragmentas

<div id="wzcs-monitor" style="width: 820px; max-width: 100%;"></div>
<script src="https://boost.warzonecs.com/js/embed/monitor.js"
        data-servers="91.211.247.155:27015"
        data-target="#wzcs-monitor"
        data-lang="lt"
        async></script>

Widgetas užpildo savo talpyklės plotį ir virš 720 px pereina į horizontalų eilutės išdėstymą. Apvyniok jį fiksuoto pločio elementu, kad kontroliuotum, kaip jis išsidėsto. Pakeisk data-lang į bet kurį palaikomą kodą (žr. parinkčių lentelę žemiau), kad lokalizuotum mygtukų užrašus ir tooltip'us.

Parinktys

Atributas	Privaloma	Numatyta	Aprašymas
data-servers	Taip	—	Kableliais atskirtų `ip:port` sąrašas. Daugiausia 12 serverių.
data-target	Ne	(inline)	CSS selektorius elementui, į kurį atvaizduoti. Nepateikus — įterpiama šalia script žymos.
data-interval	Ne	30	Atnaujinimo intervalas sekundėmis (mažiausiai 15).
data-cycle	Ne	6	Karuselės automatinis persukimas sekundėmis. Nustatyk `0`, kad išjungtum.
data-lang	Ne	en	UI kalba. Palaikomos: `en`, `ru`, `pl`, `lt`, `de`, `fr`, `es`, `tr`, `cs`, `pt`, `ro`. Nežinomos reikšmės grįžta į anglų kalbą.

Temos keitimas

Perrašyk bet kurią CSS pasirinktinę savybę .wzcs-monitor savo stiliaus lape — pasikeitimai įsigalioja iškart, be jokių widgeto kodo pakeitimų.

.wzcs-monitor {
    --wzcs-neutral-900-60: #0a0e1a;
    --wzcs-brand-500: #22d3ee;
    --wzcs-radius-xl: 4px;
    --wzcs-font: "Fira Sans", sans-serif;
}

Pilnas žetonų sąrašas dokumentuotas /js/embed/monitor.js viršuje — neutrali paletė, brand oranžinė, smaragdinė, rausva, gintarinė, plus --wzcs-radius-* ir --wzcs-font{,-mono}.