View on GitHub

Unique AoE2 Civ Drafts

Replacing pictures on aoe2cm.net

Welcome to the Civpick-UI-Project

Created to enjoy an unique look of civilization drafts on Nili’s streams.

The Draft
How a draft could look like

Drawings were made and owned by AgniousPrime. Code was written by SyntacticSalt (or SyntacticSugar, who knows – contact on discord SyntacticSugar#1829).

Installation Instructions and Requirements

In the browser

Currently, only Chrome/Chromium is tested and supported. Firefox might work as well.

  1. Install Tampermonkey, a browser addon to support userscripts.
  2. Click here to install the script.
  3. Accept installation when asked by Tampermonkey.
  4. You are done! Enjoy a hippo-themed civ draft.

In OBS

  1. Create a “Browser Source” in OBS with the link to the draft
  2. Copy the following CSS into the Custom CSS section in the source settings.
body, html, footer.footer {
    background-color: rgba(0, 0, 0, 0) !important;
    margin: 0px auto;
    overflow: hidden;
}

.header-navigation, #root > nav, #draft-id-info {
    display: none !important;
}

.box {
    background-color: transparent !important;
}

.civ-panel.pick.is-inline-block.has-value > .stretchy-background {
    background: transparent !important;
}

.pick,
.steal {
    height: 138px;
}

.ban {
    height: 138px;
    width: 112px;
}

.ban img,
.pick img,
.steal img {
    background: transparent;
}

div.stretchy-wrapper {
    padding-bottom: 127.5%;
}

div.stretchy-wrapper>div.stretchy-text {
    background: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
}

div.stretchy-wrapper>div.stretchy-text {
    text-shadow: 1px 1px 0px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
}

.choice>div>div.stretchy-wrapper {
    padding-bottom: 126%;
}

.choice>div>div.stretchy-wrapper>div.stretchy-text {
    font-size: 12px;
    padding-top: 0;
}

#player-host > .player img[alt~="Armenians"],
#civgrid img[alt~="Armenians"],
#player-none > .player img[alt~="Armenians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCompositeBowman%20B.png")
}
#player-guest > .player img[alt~="Armenians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCompositeBowman%20R.png")
}

#player-host > .player img[alt~="Aztecs"],
#civgrid img[alt~="Aztecs"],
#player-none > .player img[alt~="Aztecs"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliJaguar%20B.png")
}
#player-guest > .player img[alt~="Aztecs"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliJaguar%20R.png")
}

#player-host > .player img[alt~="Berbers"],
#civgrid img[alt~="Berbers"],
#player-none > .player img[alt~="Berbers"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCamelArcher%20B.png")
}
#player-guest > .player img[alt~="Berbers"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCamelArcher%20R.png")
}

#player-host > .player img[alt~="Bengalis"],
#civgrid img[alt~="Bengalis"],
#player-none > .player img[alt~="Bengalis"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliRatha%20B.png")
}
#player-guest > .player img[alt~="Bengalis"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliRatha%20R.png")
}

#player-host > .player img[alt~="Britons"],
#civgrid img[alt~="Britons"],
#player-none > .player img[alt~="Britons"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/nililongbow%20B.png")
}
#player-guest > .player img[alt~="Britons"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/nililongbow%20R.png")
}

#player-host > .player img[alt~="Bohemians"],
#civgrid img[alt~="Bohemians"],
#player-none > .player img[alt~="Bohemians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBohemians%20B.png")
}
#player-guest > .player img[alt~="Bohemians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBohemians%20R.png")
}

#player-host > .player img[alt~="Bulgarians"],
#civgrid img[alt~="Bulgarians"],
#player-none > .player img[alt~="Bulgarians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKonnik%20B.png")
}
#player-guest > .player img[alt~="Bulgarians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKonnik%20R.png")
}

#player-host > .player img[alt~="Burgundians"],
#civgrid img[alt~="Burgundians"],
#player-none > .player img[alt~="Burgundians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCoustie%20B.png")
}
#player-guest > .player img[alt~="Burgundians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCoustie%20R.png")
}

#player-host > .player img[alt~="Burmese"],
#civgrid img[alt~="Burmese"],
#player-none > .player img[alt~="Burmese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliArambai%20B.png")
}
#player-guest > .player img[alt~="Burmese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliArambai%20R.png")
}

#player-host > .player img[alt~="Byzantines"],
#civgrid img[alt~="Byzantines"],
#player-none > .player img[alt~="Byzantines"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCata%20v3%20B.png")
}
#player-guest > .player img[alt~="Byzantines"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCata%20v3%20R.png")
}

#player-host > .player img[alt~="Celts"],
#civgrid img[alt~="Celts"],
#player-none > .player img[alt~="Celts"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliWoad%20B.png")
}
#player-guest > .player img[alt~="Celts"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliWoad%20R.png")
}

#player-host > .player img[alt~="Chinese"],
#civgrid img[alt~="Chinese"],
#player-none > .player img[alt~="Chinese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliChuKoNu%20B.png")
}
#player-guest > .player img[alt~="Chinese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliChuKoNu%20R.png")
}

#player-host > .player img[alt~="Cumans"],
#civgrid img[alt~="Cumans"],
#player-none > .player img[alt~="Cumans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKipchak%20B.png")
}
#player-guest > .player img[alt~="Cumans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKipchak%20R.png")
}

#player-host > .player img[alt~="Dravidians"],
#civgrid img[alt~="Dravidians"],
#player-none > .player img[alt~="Dravidians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliUrumi%20B.png")
}
#player-guest > .player img[alt~="Dravidians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliUrumi%20R.png")
}

#player-host > .player img[alt~="Ethiopians"],
#civgrid img[alt~="Ethiopians"],
#player-none > .player img[alt~="Ethiopians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliShotel%20B.png")
}
#player-guest > .player img[alt~="Ethiopians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliShotel%20R.png")
}

#player-host > .player img[alt~="Franks"],
#civgrid img[alt~="Franks"],
#player-none > .player img[alt~="Franks"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliAxeman%20B.png")
}
#player-guest > .player img[alt~="Franks"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliAxeman%20R.png")
}

#player-host > .player img[alt~="Georgians"],
#civgrid img[alt~="Georgians"],
#player-none > .player img[alt~="Georgians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMonaspa%20B.png")
}
#player-guest > .player img[alt~="Georgians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMonaspa%20R.png")
}

#player-host > .player img[alt~="Goths"],
#civgrid img[alt~="Goths"],
#player-none > .player img[alt~="Goths"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliHuskarl2%20B.png")
}
#player-guest > .player img[alt~="Goths"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliHuskarl2%20R.png")
}

#player-host > .player img[alt~="Gurjaras"],
#civgrid img[alt~="Gurjaras"],
#player-none > .player img[alt~="Gurjaras"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliChakram%20B.png")
}
#player-guest > .player img[alt~="Gurjaras"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliChakram%20R.png")
}

#player-host > .player img[alt~="Hindustanis"],
#civgrid img[alt~="Hindustanis"],
#player-none > .player img[alt~="Hindustanis"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGhulam%20B.png")
}
#player-guest > .player img[alt~="Hindustanis"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGhulam%20R.png")
}

#player-host > .player img[alt~="Huns"],
#civgrid img[alt~="Huns"],
#player-none > .player img[alt~="Huns"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliTarkan%20B.png")
}
#player-guest > .player img[alt~="Huns"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliTarkan%20R.png")
}

#player-host > .player img[alt~="Incas"],
#civgrid img[alt~="Incas"],
#player-none > .player img[alt~="Incas"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKamayuk%20B.png")
}
#player-guest > .player img[alt~="Incas"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKamayuk%20R.png")
}

#player-host > .player img[alt~="Indians"],
#civgrid img[alt~="Indians"],
#player-none > .player img[alt~="Indians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliEleArch%20B.png")
}
#player-guest > .player img[alt~="Indians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliEleArch%20R.png")
}

#player-host > .player img[alt~="Italians"],
#civgrid img[alt~="Italians"],
#player-none > .player img[alt~="Italians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGenoese%20XBow%20B.png")
}
#player-guest > .player img[alt~="Italians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGenoese%20XBow%20R.png")
}

#player-host > .player img[alt~="Japanese"],
#civgrid img[alt~="Japanese"],
#player-none > .player img[alt~="Japanese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliSamurai%20B.png")
}
#player-guest > .player img[alt~="Japanese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliSamurai%20R.png")
}

#player-host > .player img[alt~="Khmer"],
#civgrid img[alt~="Khmer"],
#player-none > .player img[alt~="Khmer"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBallerEle%20B.png")
}
#player-guest > .player img[alt~="Khmer"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBallerEle%20R.png")
}

#player-host > .player img[alt~="Koreans"],
#civgrid img[alt~="Koreans"],
#player-none > .player img[alt~="Koreans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliHippoShip%20B.png")
}
#player-guest > .player img[alt~="Koreans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliHippoShip%20R.png")
}

#player-host > .player img[alt~="Lithuanians"],
#civgrid img[alt~="Lithuanians"],
#player-none > .player img[alt~="Lithuanians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliLeitis%20B.png")
}
#player-guest > .player img[alt~="Lithuanians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliLeitis%20R.png")
}

#player-host > .player img[alt~="Magyars"],
#civgrid img[alt~="Magyars"],
#player-none > .player img[alt~="Magyars"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMH%20B.png")
}
#player-guest > .player img[alt~="Magyars"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMH%20R.png")
}

#player-host > .player img[alt~="Malay"],
#civgrid img[alt~="Malay"],
#player-none > .player img[alt~="Malay"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKarambit%20B.png")
}
#player-guest > .player img[alt~="Malay"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliKarambit%20R.png")
}

#player-host > .player img[alt~="Malians"],
#civgrid img[alt~="Malians"],
#player-none > .player img[alt~="Malians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGbeto%20B.png")
}
#player-guest > .player img[alt~="Malians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliGbeto%20R.png")
}

#player-host > .player img[alt~="Mayans"],
#civgrid img[alt~="Mayans"],
#player-none > .player img[alt~="Mayans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliPlume%20B.png")
}
#player-guest > .player img[alt~="Mayans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliPlume%20R.png")
}

#player-host > .player img[alt~="Mongols"],
#civgrid img[alt~="Mongols"],
#player-none > .player img[alt~="Mongols"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMangudai%20B.png")
}
#player-guest > .player img[alt~="Mongols"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMangudai%20R.png")
}

#player-host > .player img[alt~="Persians"],
#civgrid img[alt~="Persians"],
#player-none > .player img[alt~="Persians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliWarEle%20B.png")
}
#player-guest > .player img[alt~="Persians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliWarEle%20R.png")
}

#player-host > .player img[alt~="Poles"],
#civgrid img[alt~="Poles"],
#player-none > .player img[alt~="Poles"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliObuch%20B.png")
}
#player-guest > .player img[alt~="Poles"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliObuch%20R.png")
}

#player-host > .player img[alt~="Portuguese"],
#civgrid img[alt~="Portuguese"],
#player-none > .player img[alt~="Portuguese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliOrganGun%20B.png")
}
#player-guest > .player img[alt~="Portuguese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliOrganGun%20R.png")
}

#player-host > .player img[alt~="Romans"],
#civgrid img[alt~="Romans"],
#player-none > .player img[alt~="Romans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCenturion%20B.png")
}
#player-guest > .player img[alt~="Romans"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliCenturion%20R.png")
}

#player-host > .player img[alt~="Saracens"],
#civgrid img[alt~="Saracens"],
#player-none > .player img[alt~="Saracens"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMameluke%20B.png")
}
#player-guest > .player img[alt~="Saracens"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliMameluke%20R.png")
}

#player-host > .player img[alt~="Sicilians"],
#civgrid img[alt~="Sicilians"],
#player-none > .player img[alt~="Sicilians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliserjeant%20Bv2.png")
}
#player-guest > .player img[alt~="Sicilians"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliserjeant%20Rv2.png")
}

#player-host > .player img[alt~="Slavs"],
#civgrid img[alt~="Slavs"],
#player-none > .player img[alt~="Slavs"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBoyar%20B.png")
}
#player-guest > .player img[alt~="Slavs"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBoyar%20R.png")
}

#player-host > .player img[alt~="Spanish"],
#civgrid img[alt~="Spanish"],
#player-none > .player img[alt~="Spanish"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliConq%20B.png")
}
#player-guest > .player img[alt~="Spanish"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliConq%20R.png")
}

#player-host > .player img[alt~="Tatars"],
#civgrid img[alt~="Tatars"],
#player-none > .player img[alt~="Tatars"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliFlamingCamel%20B.png")
}
#player-guest > .player img[alt~="Tatars"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliFlamingCamel%20R.png")
}

#player-host > .player img[alt~="Teutons"],
#civgrid img[alt~="Teutons"],
#player-none > .player img[alt~="Teutons"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliTeuto2%20B.png")
}
#player-guest > .player img[alt~="Teutons"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliTeuto2%20R.png")
}

#player-host > .player img[alt~="Turks"],
#civgrid img[alt~="Turks"],
#player-none > .player img[alt~="Turks"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliJanissary%20B.png")
}
#player-guest > .player img[alt~="Turks"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliJanissary%20R.png")
}

#player-host > .player img[alt~="Vietnamese"],
#civgrid img[alt~="Vietnamese"],
#player-none > .player img[alt~="Vietnamese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliRattan%20B.png")
}
#player-guest > .player img[alt~="Vietnamese"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliRattan%20R.png")
}

#player-host > .player img[alt~="Vikings"],
#civgrid img[alt~="Vikings"],
#player-none > .player img[alt~="Vikings"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBerserk%20B%20v2.png")
}
#player-guest > .player img[alt~="Vikings"]
{
    content: url("https://aoe2syntactic.github.io/civpick-ui/assets/images/civs/niliBerserk%20R%20v2.png")
}