feat: New features (research, invest, gambling, new game+, trophies)
This commit is contained in:
+45
-35
@@ -14,48 +14,49 @@
|
||||
<body>
|
||||
<header class="topbar">
|
||||
<h1 class="topbar__title" id="game-title" data-i18n="theme.title">Idle Clicker</h1>
|
||||
<div class="topbar__controls">
|
||||
<label class="field">
|
||||
<span class="field__label" data-i18n="ui.theme">Theme</span>
|
||||
<select id="theme-select"></select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field__label" data-i18n="ui.language">Language</span>
|
||||
<select id="locale-select"></select>
|
||||
</label>
|
||||
<button class="btn btn--ghost" id="open-settings" type="button" data-i18n="ui.settings">Save & settings</button>
|
||||
</div>
|
||||
<button class="btn btn--ghost menu-toggle" id="menu-toggle" type="button" aria-expanded="false" aria-controls="menu">
|
||||
<span aria-hidden="true">☰</span> <span data-i18n="ui.menu">Menu</span>
|
||||
</button>
|
||||
<!-- Tabs + controls: a burger menu on phones, a tab bar from tablet width (see css/layout.css) -->
|
||||
<nav class="menu" id="menu" data-i18n-attr="aria-label:ui.menu">
|
||||
<ul class="tabs" id="tabs"></ul>
|
||||
<div class="menu__controls">
|
||||
<label class="field">
|
||||
<span class="field__label" data-i18n="ui.theme">Theme</span>
|
||||
<select id="theme-select"></select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field__label" data-i18n="ui.language">Language</span>
|
||||
<select id="locale-select"></select>
|
||||
</label>
|
||||
<button class="btn btn--ghost" id="open-settings" type="button" data-i18n="ui.settings">Save & settings</button>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Always visible, whichever section is open -->
|
||||
<section class="resourcebar" aria-label="Resources">
|
||||
<div class="res res--primary">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.units"></span>
|
||||
<div><span class="res__label" data-i18n="theme.res.units"></span><strong id="v-units">0</strong></div>
|
||||
</div>
|
||||
<div class="res">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.funds"></span>
|
||||
<div><span class="res__label" data-i18n="theme.res.funds"></span><strong id="v-funds">0</strong></div>
|
||||
</div>
|
||||
<div class="res">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.material"></span>
|
||||
<div><span class="res__label" data-i18n="theme.res.material"></span><strong id="v-material">0</strong></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="banner" id="cookie-warning" hidden data-i18n="toast.cookiesBlocked"></p>
|
||||
|
||||
<main class="game" id="game">
|
||||
<main class="views">
|
||||
<div class="game" id="game" data-view="main">
|
||||
<!-- Overview -->
|
||||
<section class="panel panel--stats" aria-labelledby="h-stats">
|
||||
<h2 class="panel__title" id="h-stats" data-i18n="ui.overview">Overview</h2>
|
||||
<div class="tiles">
|
||||
<div class="tile tile--primary">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.units"></span>
|
||||
<div>
|
||||
<span class="tile__label" data-i18n="theme.res.units"></span>
|
||||
<strong class="tile__value" id="v-units">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.funds"></span>
|
||||
<div>
|
||||
<span class="tile__label" data-i18n="theme.res.funds"></span>
|
||||
<strong class="tile__value" id="v-funds">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tile">
|
||||
<span class="icon icon--placeholder" aria-hidden="true" data-icon="res.material"></span>
|
||||
<div>
|
||||
<span class="tile__label" data-i18n="theme.res.material"></span>
|
||||
<strong class="tile__value" id="v-material">0</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="stats">
|
||||
<div><dt data-i18n="ui.totalProduced"></dt><dd id="v-total">0</dd></div>
|
||||
<div><dt data-i18n="ui.production"></dt><dd id="v-rate">0</dd></div>
|
||||
@@ -120,6 +121,15 @@
|
||||
<p class="hint" id="upgrades-empty" data-i18n="ui.noUpgrades"></p>
|
||||
<ul class="cards" id="upgrades"></ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- The other sections are built by js/ui/*View.js; they unlock with progress -->
|
||||
<div class="view" data-view="contracts" id="view-contracts" hidden></div>
|
||||
<div class="view" data-view="invest" id="view-invest" hidden></div>
|
||||
<div class="view" data-view="research" id="view-research" hidden></div>
|
||||
<div class="view" data-view="gamble" id="view-gamble" hidden></div>
|
||||
<div class="view" data-view="legacy" id="view-legacy" hidden></div>
|
||||
<div class="view" data-view="achievements" id="view-achievements" hidden></div>
|
||||
</main>
|
||||
|
||||
<!-- Save & settings -->
|
||||
|
||||
Reference in New Issue
Block a user