<link rel="shortcut icon" id="gameIcon" type="image/x-icon" href="resources/favicon-normal.png">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>1255: Rise of Teutonics</title>

<link rel="stylesheet" type="text/css" href="./css/normalize.min.css">

<link rel="stylesheet" type="text/css" href="./css/game.css">

<link rel="stylesheet" type="text/css" href="./css/hire.css">

<link rel="stylesheet" type="text/css" href="./css/inn.css">

<script src="/js/lib/sentry.min.js" crossorigin="anonymous"></script>

<script>

'use strict';

if (window.location.href.indexOf("file")===-1){

Sentry.init({ dsn: 'https://84a2a9b7436b40a6868d8493ee91c6dd@o1014630.ingest.sentry.io/5979860' });

}

</script>

<!--BIND LIBRARY-->

<script src="js/lib/bind.min.js"></script>

<script src="js/lib/rivets.bundled.min.js"></script>

<!--DOM handler-->

<script src="js/dom.js" ></script>

<div id="htmlGame">

<div class="menu-panel">

<button class="tab-link" onclick="openTab(event, 'Main')" id="tabCity" type="button">Main</button>

<button class="tab-link" onclick="openTab(event, 'tabBuilding')" id="btnOpenTabBuilding" type="button">Building</button>

<button class="tab-link" onclick="openTab(event, 'Settings')" id="tabSettings" type="button">Settings</button>

<button class="tab-link" onclick="openTab(event, 'About')" id="tabAbout" type="button">How To Play</button>

<button class="tab-link" onclick="openTab(event, 'Discord')" id="tabDiscord" type="button">Discord</button>

<div id="lblEventCountdownValue" style="margin-left:20px;" onclick="game.getEventHelp()"></div>

<a href="https://www.patreon.com/bePatron?u=7838459" target="_blank"><img src="resources/patreon.png" style="padding: 6px 0px"></a>

</div>

<div class="resource-panel">

<div class="gold-val" onclick="checkGold()">

<img id="gold_img_bt" class="resource-icon" src="resources/gold_a.png">

<span id="gold" style="display:none">30</span>

<span id="panelGoldValue">{ game.gold }</span>

</div>

<div class="population-val" onclick="checkPop()">

<img id="pop_img" class="resource-icon" src="resources/pop.png">

<span id="pop" style="display:none">2</span>

<span id="panelPopValue">{ game.pop }</span>

</div>

<div class="gems-val" onclick="showModal(0, '', getAck, locObj.amber.txt, locObj.okay.txt, '');">

<img id="gems_img" class="resource-icon" src="resources/amber_ico.png">

<span id="gems" >0</span>

<span id="panelAmberValue" style="display:none">{ amber }</span>

</div>

<div class="time-val">

<img class="resource-icon" src="resources/sand_clock.png">

<span id="dcounter" >30</span>

<span id="panelTurnCountdown" style="display:none">{ dcounter }</span>

</div>

<div class="server-val">

<span id="spnServerStatusLabel">Server: </span><span id="spnServerStatusValue">n/d</span>

</div>

<div class="event-val" style="margin-left: 20px;">

<span id="event-label" onclick="getEventHelp()"></span>

<span id="event-value" onclick="getEventHelp()"></span>

</div>

</div>

<div class="content-panel">

<div id="Main" class="tab">

<canvas width="800" height="480" id="canvas" class="canvas" style="z-index:1"></canvas>

<div id="events_graphics"></div>

<button id="saveGameButton" onclick="saveGame()" class="btn" type="button">Save game</button>

<button id="loadGameButton" onclick="loadGame()" class="btn" type="button">Load game</button>

<button id="buttonPutOutFire" onclick="game.putOutFire()" class="btn" type="button">Put out fire</button>

<button id="buttonDeathPenalty" onclick="game.deathPenalty()" class="btn" type="button">Execute smb</button>

</div>

<div id="Explore" class="tab">

<canvas width="800" height="480" id="canvasMap" class="canvas" style="z-index:1"></canvas>

</div>

<div id="tabUniversity" class="tab">

<div id="available_researches">

</div>

<!--<img src="resources/serpentine.png" onclick="game.research('artillery')">-->

<div id="lblReseachHelp" class="building-description"></div>

</div>

<div id="Settings" class="tab">

<h3><div id="labelSettings">Settings</div></h3>

<button id="btnReg" onclick="setReg()" type="button">REG</button>

<button id="btnLogin" onclick="setLogin()" style="margin-left:20px;" type="button">LOGIN</button><br>

Nickname: <input id="login" type="text" value=""><br>

Password: <input id="password" type="password" value=""><br>

<span id="emailLine">Email: <input id="email" type="text" value=""> - trully optional, only for account recovering<br></span>

<button id="btnRegLogin" onclick="remoteRegLogin()" type="button">Register</button><br><hr>

<select id="selectLng" size="1" onchange="reloadLang()">

<option id="optionLngEn" selected value="en-US">English</option>

<option id="optionLngRu" value="ru-RU">Русский</option>

<option id="optionLngGe" value="de-DE">Deutsch</option>

<option id="optionLngEo" value="eo">Esperanto</option>

<option id="optionLngFr" value="fr-FR">Français</option>

</select>

<table>

<tbody>

<tr>

<td width="40%"><label id="labelAutosave">Autosave</label><img id="autosaveImg" onclick="changeAutosave()" src="resources/button_red.png" style="margin-left: 20px;"></td>

<td><button id="buttonExportGame" onclick="exportGame()" type="button">Export Game</button></td>

<td><button id="buttonImportGame" onclick="importGame()" type="button">Import Game</button></td>

</tr>

</tbody>

</table>

<button id="buttonSaveToCloud" onclick="cloudQuickSave()" style="margin-bottom:20px; margin-top:15px;" type="button">Save to Cloud</button>

<button id="buttonLoadFromCloud" onclick="cloudQuickLoad()" style="margin-left:30px; margin-bottom:20px; margin-top:15px;" type="button">Load save from Cloud</button>

<br>

<input type="text" id="savestring" name="savestring" value="" style="width:600px">

<br>

<a id="downloadGame" href="https://github.com/Areso/1255-burgomaster/archive/gh-pages.zip">Download game for playing off-grid (to play without Internet connection)</a>

<br>

<br>

<button id="btnColorMode" onclick="changeColorMode()" type="button">ChangeColorMode</button>

<button id="btnSoundSettings" onclick="openTab(null, 'tabSettingsSound')" type="button">Open sound settings</button>

<br>

<br>

<input type="checkbox" id="cbMobileUI" value="mobileUI" onclick="game.mobileUI()" style="margin-left: 50px;"><label id="lblStnMobileUI">Mobile UI</label>

Research <label id="lblStnEventLogSize" style="margin-left: 20px;">Event log size</label>

<input type="text" id="inpStnEventLogSize" value="" onchange="game.setupEventLogSize()" style="width:35px; margin-right:10px;">

<label id="lblStnLines">lines</label>

<br>

<br>

<label id="lblStnAliasResult"></label><br>

<textarea id="patchnotes" class="interface" value="" style="width:700px; height:280px; top:255px; left:40px; visibility: hidden;"></textarea>

</div>

<div id="tabModTools" class="tab">

<button id="set_btn" onclick="reloadSettings()" style="visibility: hidden" type="button">reload settings</button>

<button id="ban_btn" onclick="reloadBanned()" style="visibility: hidden" type="button">reload banned</button>

<div id="moderation_area" name="moderation" class="interface" value="" style="width:800px; height:150px; top: 80px; left: 10px"></div>

</div>

<div id="tabSettingsSound" class="tab">

<label id="lblSoundMenu">Sound effects and music</label><br>

<!--Note, those above overwrite those below-->

<table border="0" width="100%">

<tbody>

<tr>

<td width="60%"><label id="lblOption">Option</label></td>

<td width="20%"><label id="lblOn">On</label></td>

<td width="20%"><label id="lblOff">Off</label></td>

</tr>

<tr>

<td width="60%"><label id="lblSfxAll">All sound effects</label></td>

<td width="20%"><input type="radio"

name="sfx"

id="sfx_on"

value="on"

onchange="setupAudio('sfx','all',1)"></td>

<td width="20%"><input type="radio"

name="sfx"

id="sfx_off"

value="off"

onchange="setupAudio('sfx','all',0)"

checked="checked"></td>

</tr>

<tr>

<td width="60%"><label id="lblSfxEvt">Effects on all events</label></td>

<td width="20%"><input type="radio"

name="sfx_events"

id="sfx_events_on"

value="on"

onchange="setupAudio('sfx','events',1)"></td>

<td width="20%"><input type="radio"

name="sfx_events"

id="sfx_events_off"

value="off"

onchange="setupAudio('sfx','events',0)"

checked="checked"></td>

</tr>

<tr>

<td width="60%"><label id="lblSfxEvtAR">Effects on action required events</label></td>

<td width="20%"><input type="radio"

name="sfx_actions"

id="sfx_actions_on"

value="on"

onchange="setupAudio('sfx','actions',1)"></td>

<td width="20%"><input type="radio"

name="sfx_actions"

id="sfx_actions_off"

value="off"

onchange="setupAudio('sfx','actions',0)"

checked="checked"></td>

</tr>

<tr>

<td width="60%">-----</td>

<td width="20%">-----</td>

<td width="20%">-----</td>

</tr>

<tr>

<td width="60%"><label id="lblMscAll">Music all</label></td>

<td width="20%"><input type="radio"

name="music_all"

id="music_on"

value="on"

onchange="setupAudio('music','all',1)"></td>

<td width="20%"><input type="radio"

name="music_all"

id="music_off"

value="off"

onchange="setupAudio('music','all',0)"

checked="checked"></td>

</tr>

<tr>

<td width="60%"><label id="lblMscScr">Lore and scenery music</label></td>

<td width="20%"><input type="radio"

name="music_script"

id="music_scripts_on"

onchange="setupAudio('music','scripts',1)"

value="on"></td>

<td width="20%"><input type="radio"

name="music_script"

id="music_scripts_off"

value="off"

onchange="setupAudio('music','scripts',0)"

checked="checked"></td>

</tr>

</tbody>

</table>

<br>

<hr>

<button id="btnToGeneralSettings" onclick="openTab(null, 'Settings')" type="button">Back</button>

</div>

<div id="tabGarrison" class="tab">

<h3><div id="labelGarrison">Garrison</div></h3>

<div id="divtreasuryGuard">

<table border="1">

<tbody>

<tr>

<td>

<div id="treasury_guard_div" align="center">

<img src="resources/knight6.png">

</div>

</td>

</tr>

<tr>

<td>

<button id="buttonFireGuard" onclick="game.fireTreasuryGuard()" style="width:100px" type="button">Fire</button>

<span id="treasuryGuard">0</span>

<button id="buttonHireGuard" onclick="game.hireTreasuryGuard()" style="width:100px" type="button">Hire</button>

</td>

</tr>

</tbody>

</table>

</div>

</div>

<div id="tabFirebrigade" class="tab">

<h3><label id="lblFirebrigade">Fire brigade</label></h3>

<table border="0" width="100%">

<tbody>

<tr>

<td width="60%"><label id="lblFBOption">The fire service is</label></td>

<td width="20%"><label id="lblFBOn">on duty</label></td>

<td width="20%"><label id="lblFBOff">off duty</label></td>

</tr>

<tr>

<td width="60%"></td>

<td width="20%"><input type="radio"

name="inp_fb"

id="fb_on"

value="on"

onchange="game.setupFirebrigade(1)"></td>

<td width="20%"><input type="radio"

name="inp_fb"

id="fb_off"

value="off"

onchange="game.setupFirebrigade(0)"

checked="checked"></td>

</tr>

</tbody>

</table>

<br>

<label id="lblFBUpKeepPrice">The price of sustain of the service is:</label><label id="lblFBUpkeepPriceValue" style="margin-left:20px;">0</label>

<br>

<div id="divFBProgress" style="display: none">0% of fire extinguished</div>

<br>

</div>

<div id="tabBuilding" class="tab">

<div class="building-wrapper">

<div class="building-list">

<div id="bldHome" class="building-card">

<div class="building-card__img">

<img

id="home_img"

src="./resources/home_as.png"

alt="home_as.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="homes" class="btn is-tutorial" onclick="game.Build('Home')" type="button">Build Home</button>

</div>

</div>

<div id="bldDefence" class="building-card">

<div class="building-card__img">

<img

id="defences_img"

src="./resources/wallsf_as2.png"

alt="wallsf_as2.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="defence" class="btn is-tutorial" onclick="game.Build('Wall')" type="button">Build Walls</button>

</div>

</div>

<div id="bldTreasury" class="building-card">

<div class="building-card__img">

<img

id="treasury_img"

src="./resources/treasury_as.png"

alt="treasury_as.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="treasury" class="btn is-tutorial" onclick="game.Build('Treasury')" type="button">Build Treasury</button>

</div>

</div>

<div id="bldGallows" class="building-card">

<div class="building-card__img">

<img

id="gallows_img"

src="./resources/gallows.png"

alt="gallows.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldGallows" class="btn is-tutorial" onclick="game.buildGallowsOrFountain('Gallows')" type="button">Build Gallows</button>

</div>

</div>

<div id="bldFountain" class="building-card">

<div class="building-card__img">

<img

id="fountain_img"

src="./resources/fountain.png"

alt="fountain.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldFountain" class="btn is-tutorial" onclick="game.buildGallowsOrFountain('Fountain')" type="button">Build Fountain</button>

</div>

</div>

<div id="bldStash" class="building-card">

<div class="building-card__img">

<img

id="moneystash_img"

src="./resources/trapdoor.png"

alt="trapdoor.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldStash" class="btn is-tutorial" onclick="game.Build('Stash')" type="button">Build Stash</button>

</div>

</div>

<div id="bldStable" class="building-card">

<div class="building-card__img">

<img

id="stable_img"

src="./resources/stable.png"

alt="stable.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldStable" class="btn is-tutorial" onclick="game.Build('Stable')" type="button">Build Stable</button>

</div>

</div>

<div id="bldArchery" class="building-card">

<div class="building-card__img">

<img

id="archery_img"

src="./resources/archery_range.png"

alt="archery_range.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldArchery" class="btn is-tutorial" onclick="game.Build('Archery')" type="button">Build Archery range</button>

</div>

</div>

<div id="bldInn" class="building-card">

<div class="building-card__img">

<img

id="inn_img"

src="./resources/inn.png"

alt="tavern.png"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBldInn" class="btn is-tutorial" onclick="game.Build('Inn')" type="button">Build Inn</button>

</div>

</div>

<!--UNIVERSITY-->

<div id="bldUniversity" class="building-card">

<div class="building-card__img">

<img

id="university_img"

src="./resources/university2.png"

alt="university image"

onmouseover="game.help(this)"

onclick="game.help(this)">

</div>

<div class="building-card__action">

<button id="buttonBuildUniversity" class="btn is-tutorial" onclick="game.Build('University')" type="button">Build University</button>

</div>

</div>

</div>

</div>

<div id="lblBuildHelp" class="building-description"></div>

</div>

<div id="About" class="tab">

<div id="aboutGameWrapper">

<div >

<h1><div id="lblAbout_h1">1255 Burgomaster</div></h1>

<h2><div id="lblAbout_h2">How to play</div></h2>

<div >

<label id="lblAbout_wiki">wiki</label>

<label id="lblAbout_feedback">feedback</label>

<br>

<label id="lblAbout_meh"></label>

<br>

<br>

<label id="lblAbout_supLang"></label>

<label id="lblAbout_googleLang"></label>

<br>

</div>

</div>

</div>

</div>

<div id="tabPopulation" class="tab">

<div id="lblTabPop">Population history tab</div>

<br>

<table border="1">

<tbody>

<tr id="popStatK">

</tr>

<tr id="popStatV">

</tr>

</tbody>

</table>

<br>

<button id="btnPopAtStart" onclick="popAtStart()" style="width:160px" type="button">To the beginning</button>

<button id="btnPopPrev" onclick="popPrev()" style="width:160px" type="button">Earlier</button>

<button id="btnPopNext" onclick="popNext()" style="width:160px" type="button">Later</button>

<button id="btnPopAtEnd" onclick="popAtEnd()" style="width:160px" type="button">To the end</button>

<br>

<br>

<div id="lblCurrentPopLimit"></div>

</div>

<div id="tabGold" class="tab">

<div id="lblTabGold">Gold history tab</div>

<br>

<table border="1">

<tbody>

<tr id="goldStatK">

</tr>

<tr id="goldStatV">

</tr>

</tbody>

</table>

<br>

<button id="btnGoldAtStart" onclick="goldAtStart()" style="width:160px" type="button">To the beginning</button>

<button id="btnGoldPrev" onclick="goldPrev()" style="width:160px" type="button">Earlier</button>

<button id="btnGoldNext" onclick="goldNext()" style="width:160px" type="button">Later</button>

<button id="btnGoldAtEnd" onclick="goldAtEnd()" style="width:160px" type="button">To the end</button>

<br>

<br>

<div id="lblCurrentGoldLimit"></div>

</div>

<div id="tabInn" class="tab">

<h3 id="lblTabInn">Welcome to Inn!</h3>

<div id="hireHeroBlock">

<label id="lblAvailableForHire">Hero for hire</label>

<table>

<tbody>

<tr>

<!-- <td class="heroPhoto"> -->

<td width="39%">

<!--HRP-->

<img id="imgPrevHero" src="resources/pointer_l.png" onclick="prevHero()">

<img id="imgHeroForHire" src="resources/hero-knight.png">

<img id="imgNextHero" src="resources/pointer_r.png" onclick="nextHero()">

</td>

<td width="61%">

<!-- <td class="heroInfo"></td> -->

<div>

<label id="lblClassForHire">Knight</label>

<label>, </label>

<label id="lblLevelForHireLbl">level </label>

<label id="lblLevelForHire">1</label>

</div>

<div>

<label id="lblPrimaryStats">ATK:2, DEF:2, INT: 2, MP: 20</label>

</div>

<div>

<label id="lblSpeciality">Get high chances to increase ATK when level up</label>

</div>

</td>

</tr>

</tbody>

</table>

<button id="btnHireHero" class="btn" onclick="game.heroHire()" style="width:160px; margin-left: 70px" type="button">Hire hero %arg1 level</button>

</div>

<div id="heroUpkeep">

<label id="lblUpkeepSrc">The primary source of payments to the hero's troops is </label>

<select id="selectUpkeepSrc" size="1" onchange="game.changeUpkeepSrc()">

<option id="optionPurse" selected value="0">Hero's purse</option>

<option id="optionTreasury" value="1">Treasury</option>

</select>

</div>

<div id="heroStats"></div>

<button id="btnDismissHero" class="btn" onclick="game.heroDismiss()" style="width:160px; visibility:hidden" type="button">Dismiss hero</button>

<button id="btnAutocampaign" class="btn" onclick="game.autocampaign()" style="width:160px; visibility: hidden" type="button">Launch autocampaign!</button>

<button id="btnAutocampaignJournal" class="btn" onclick="openTabAutocampaignJournal()" style="width:160px; visibility: hidden" type="button">Open journal</button>

<button id="btnTowngate" class="btn" onclick="game.towngate()" style="visibility: hidden" type="button">Teleport to the town!</button>

<br>

<br>

<button id="btnLeaveCity" class="btn" onclick="game.cityLeave()" style="width:160px; visibility: hidden" type="button">Go to exploring!</button>

<button id="btnGenerateMap" class="btn" onclick="game.generateMap()" style="width:160px" type="button">Regenerate map</button>

<button id="btnAutobattlesList" class="btn" onclick="openTabAutocampaignBattle()" style="width:160px" type="button">Autocampaign battles</button>

</div>

<div id="tabAutocampaignJournal" class="tab">

<div id="lblAutocampaignJournal"></div>

<button id="btnToInn" class="btn" style="width:160px;" onclick="openTab(null, 'tabInn')" type="button">Back</button>

</div>

<div id="tabAutocampaignBattle" class="tab">

<div id="lblAutocampaignBattle"></div>

<button id="btnToInn1" class="btn" style="width:160px;" onclick="openTab(null, 'tabInn')" type="button">Back</button>

</div>

<div id="tabTroopsHiring" class="tab">

<div class="grid-container" style="width: 800px; height: 480px">

<div class="grid-item hire" id="grid-hire11">

<img id="imgHiringScreenSergeantToHire" src="resources/sergeant.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item hire" id="grid-hire12">

<img id="imgHiringScreenTurkopolToHire" src="resources/turkopol.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item hire" id="grid-hire13">

<img id="imgHiringScreenKnightToHire" src="resources/knight.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item hire not-implemented" id="grid-hire21">4</div>

<div class="grid-item hire not-implemented" id="grid-hire22">5</div>

<div class="grid-item hire not-implemented" id="grid-hire23">6</div>

<div class="grid-item" id="grid-info">info</div>

<div class="grid-item" id="grid-castellan">

<img id="imgCastellanInHiringScreen" src="resources/castellan.png">

</div>

<div class="grid-item" id="grid-garrison1">

<img id="imgHiringScreenGarrisonSergeant1" src="resources/sergeant.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item" id="grid-garrison1v">10</div>

<div class="grid-item" id="grid-garrison2">

<img id="imgHiringScreenGarrisonTurkopol2" src="resources/turkopol.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item" id="grid-garrison2v">200</div>

<div class="grid-item" id="grid-garrison3">

<img id="imgHiringScreenGarrisonKnight3" src="resources/knight.png" class="unit-img"

onmouseover="hoverInObj(this)" onmouseout="hoverOutObj(this)" onclick="selectObj(this)">

</div>

<div class="grid-item" id="grid-garrison3v">300</div>

<div class="grid-item not-implemented" id="grid-garrison4">garrison4</div>

<div class="grid-item not-implemented" id="grid-garrison4v">400</div>

<div class="grid-item not-implemented" id="grid-garrison5">garrison5</div>

<div class="grid-item not-implemented" id="grid-garrison5v">500</div>

<div class="grid-item not-implemented" id="grid-garrison6">garrison6</div>

<div class="grid-item not-implemented" id="grid-garrison6v">600</div>

<div class="grid-item visiting-hero" id="grid-hero">

<img id="imgHeroInHiringScreen" width="90px" height="90px" style="display: none" src="" >

<img id="imgHeroInHiringScreenKnight2" style="display: none" src="resources/hero-knight.png" onmouseover="game.help(this)">

<img id="imgHeroInHiringScreenMonk2" style="display: none" src="resources/hero-monk.png" onmouseover="game.help(this)">

</div>

<div class="grid-item visiting-hero" id="grid-hero1">

<img id="imgHiringScreenHeroSergeant1" src="resources/sergeant.png">

</div>

<div class="grid-item visiting-hero" id="grid-hero1v">100</div>

<div class="grid-item visiting-hero" id="grid-hero2">

<img id="imgHiringScreenHeroTurkopol2" src="resources/turkopol.png">

</div>

<div class="grid-item visiting-hero" id="grid-hero2v">200</div>

<div class="grid-item visiting-hero" id="grid-hero3">

<img id="imgHiringScreenHeroKnight3" src="resources/knight.png" >

</div>

<div class="grid-item visiting-hero" id="grid-hero3v">300</div>

<div class="grid-item not-implemented" id="grid-hero4">hero4</div>

<div class="grid-item not-implemented" id="grid-hero4v">400</div>

<div class="grid-item not-implemented" id="grid-hero5">hero5</div>

<div class="grid-item not-implemented" id="grid-hero5v">500</div>

<div class="grid-item not-implemented" id="grid-hero6">hero6</div>

<div class="grid-item not-implemented" id="grid-hero6v">600</div>

</div>

</div>

<div id="tabBlackmarket" class="tab">

<div>

<div id="lblGoodsForSale">This blackmarket offers these goods for sale!</div>

<div id="tabBlackMarketTraderGoods"></div>

</div>

<div>

<div id="lblGoodsForBuying">This blackmarket could buy your goods!</div>

<div id="tabBlackMarketHeroGoods"></div>

</div>

<button id="btnLeaveBlackmarket" onclick="openTab(null, 'Explore')" style="width:160px; margin-left: 42px; margin-top: 10px;" type="button">Go to exploring!</button>

</div>

<div id="tabEvent" class="tab">

<lbl id="lblEventDetails">

</lbl>

<br>

<button id="btnToEventLeaderboard" class="interface" style="width:160px; top: 490px; left:50px;" onclick="game.openLeaderboard()" type="button">Open Leaderboard</button>

</div>

<div id="feedbackForm" class="tab">

</div>

<div id="tabEventLeaderboard" class="tab">

<div id="lblEventLBDetails">

</div>

<button id="btnToEvent" class="interface" style="width:160px; top: 490px; left:50px;" onclick="openTab(null, 'tabEvent')" type="button">Back</button>

</div>

<div id="tabEventReward" class="tab">

<lbl id="lblEventReward">

</lbl>

</div>

<div id="Discord" class="tab">

<iframe title="Discord" src="https://discordapp.com/widget?id=564554640755130409&theme=light" width="800" height="480" allowtransparency="true" frameborder="0"></iframe>

</div>

<div id="audio" class="tab">

<audio id="fireAudio0">

<source src="sounds/sfx/3_sound_of_fire_0.mp3" type="audio/mpeg">

</audio>

<audio id="stableAudio0">

<source src="sounds/sfx/16_sound_of_horse_neighing_0.mp3" type="audio/mpeg">

</audio>

<audio id="stableAudio1">

<source src="sounds/sfx/16_sound_of_horse_neighing_1.mp3" type="audio/mpeg">

</audio>

<audio id="stableAudio2">

<source src="sounds/sfx/16_sound_of_horse_neighing_2.mp3" type="audio/mpeg">

</audio>

<audio id="treasuryAudio0">

<source src="sounds/sfx/10_sound_of_treasury_0.mp3" type="audio/mpeg">

</audio>

<audio id="treasuryAudio1">

<source src="sounds/sfx/10_sound_of_treasury_1.mp3" type="audio/mpeg">

</audio>

<audio id="treasuryAudio2">

<source src="sounds/sfx/10_sound_of_treasury_2.mp3" type="audio/mpeg">

</audio>

<audio id="archeryAudio0">

<source src="sounds/sfx/14_sound_of_arrow_hitting_the_wooden_target_0.mp3" type="audio/mpeg">

</audio>

<audio id="archeryAudio1">

<source src="sounds/sfx/14_sound_of_arrow_hitting_the_wooden_target_1.mp3" type="audio/mpeg">

</audio>

<audio id="archeryAudio2">

<source src="sounds/sfx/14_sound_of_arrow_hitting_the_wooden_target_2.mp3" type="audio/mpeg">

</audio>

<audio id="fountainAudio0">

<source src="sounds/sfx/1_sound_of_fountain_0.mp3" type="audio/mpeg">

</audio>

<audio id="innAudio0">

<source src="sounds/sfx/9_sound_of_inn_0.mp3" type="audio/mpeg">

</audio>

<audio id="gallowsAudio0">

<source src="sounds/sfx/2_sound_of_gallows_0.mp3" type="audio/mpeg">

</audio>

<audio id="sawmillAudio0">

<source src="sounds/sfx/11_sawmill_sound_0.mp3" type="audio/mpeg">

</audio>

<audio id="sawmillAudio1">

<source src="sounds/sfx/11_sawmill_sound_1.mp3" type="audio/mpeg">

</audio>

<audio id="sawmillAudio2">

<source src="sounds/sfx/11_sawmill_sound_2.mp3" type="audio/mpeg">

</audio>

<audio id="plagueAudio0">

<source src="sounds/sfx/7_sound_of_dying_people_0.mp3" type="audio/mpeg">

</audio>

<audio id="stealingAudio0">

<source src="sounds/sfx/6_sound_of_stealing_gold_0.mp3" type="audio/mpeg">

</audio>

</div>

<div id="tabDebugging" class="tab">

<div id="inpTable">

</div>

<div id="outTable">

</div>

</div>

<!-- Canvas modal -->

<canvas id="myDCanvas" width="700" height="200" class="canvas-modal">

Your browser does not support the HTML5 canvas tag.

</canvas>

</div>

<div class="info-panel">

<div class="info-panel__actions">

<button id="log_btn" class="btn" onclick="openLog()" type="button">log</button>

<button id="chat_btn" class="btn" onclick="openChat()" type="button">chat</button>

<button id="mod_btn" class="btn" onclick="openTab(null, 'tabModTools')" style="visibility: hidden" type="button">mod</button>

<div id="lbl_online"><span id="spnOnline">Online: </span><span id="spnOnlineValue">n/d</span></div>

</div>

<div id="log" name="log" class="info-panel__history"></div>

<div id="chat" name="chat" class="info-panel__history"></div>

<div id="chatForm" class="info-panel__form">

<label id="inp_nickname"></label>

<div class="info-panel__form-msg">

<input type="text" id="msg_out">

</div>

<button id="btnSend" onclick="sendOnClick2()" class="btn" type="button">Send</button>

</div>

</div>

<script src="js/config.js"></script>

<script src="js/game.js"></script>

<script src="js/bindings.js"></script>

<script src="js/lib/lib_dialogue.js"></script>

<script src="js/tab_troops_hire.js"></script>

<script src="js/tab_inn.js" ></script>

<script src="js/mech_tips_story.js"></script>

<script async src="js/objects_technology_tree.js"></script>

<script async src="js/tab_university.js"></script>

<script async src="js/tab_gold_pop_stats.js"></script>

<script async src="js/tab_settings.js"></script>

<script async src="js/tab_sound_settings.js"></script>

<script async src="js/tab_blackmarket_new.js"></script>

<script async src="js/tab_building.js"></script>

<script async src="js/mech_autobattles.js"></script>

<script async src="js/mech_advmap_gen.js"></script>

<script async src="js/tab_advmap_render.js"></script>

<script async src="js/mech_random_events.js"></script>

<script async src="js/objects_units.js"></script>

<script async src="js/lib/mech_online.js"></script>

function accordion(elem, targetClass){

document.addEventListener('click', function (e) {