348 lines
16 KiB
HTML
348 lines
16 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
|
|
<link href="css/dark.css" rel="stylesheet" type="text/css"/>
|
|
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
|
|
<title>Progress Knight Reborn</title>
|
|
|
|
</head>
|
|
<body class="dark" id="body">
|
|
<div class="w3-margin">
|
|
<h1>Progress Knight - Reborn</h1>
|
|
<div style="width: 1220px; height: 600px">
|
|
<!--******* Left-hand summary panel *******-->
|
|
<div class="panel w3-padding" style="width: 300px; height: auto; float: left">
|
|
<span id="deathText">
|
|
<div style="font-size: large; color: red">Age has caught up to you</div>
|
|
<div class="sidebar-element" style="color: gray">Your age has met your lifespan, use the amulet to rebirth before you pass away</div>
|
|
</span>
|
|
<div class="" style="font-size: large">Age <span id="ageDisplay">14</span> Day <span id="dayDisplay">0</span></div>
|
|
<div class="sidebar-element" style="color: gray">Lifespan: <span id="lifespanDisplay">70</span> years</div>
|
|
<button class="w3-button button sidebar-element" id="pauseButton" onclick="setPause()">Pause</button>
|
|
<span class="inline" id="automation" style="margin-left: 8px">
|
|
<span>
|
|
<div class="inline">Auto-promote</div>
|
|
<input class="inline" id="autoPromote" type="checkbox"/>
|
|
</span>
|
|
<span>
|
|
<div class="inline">Auto-learn</div>
|
|
<input class="inline sidebar-element" id="autoLearn" type="checkbox"/>
|
|
</span>
|
|
</span>
|
|
<div id="coinDisplay" style="font-size: large">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div style="color: gray">Balance (in coins)</div>
|
|
<ul class="sidebar-element" style="padding-left: 20px;">
|
|
<li><span style="color: rgb(9, 160, 230)">Net/day: </span><b id="signDisplay"></b><span id="netDisplay">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span></li>
|
|
<li><span style="color: green">Income/day: </span><span id="incomeDisplay">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span></li>
|
|
<li><span style="color: red">Expense/day: </span><span id="expenseDisplay">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span></li>
|
|
</ul>
|
|
<span id="quickTaskDisplay">
|
|
<div class="small-margin inline job progress-bar progressBar" style="width: 230px">
|
|
<div class="progress-fill progressFill" style="background-color:rgb(225, 165, 0)"></div>
|
|
<div class="progress-text name">Task</div>
|
|
</div>
|
|
<div class="sidebar-element" style="color: gray">Current job</div>
|
|
<div class="small-margin skill progress-bar progressBar" style="width: 230px">
|
|
<div class="progress-fill progressFill" style="background-color:rgb(225, 165, 0)"></div>
|
|
<div class="progress-text name">Task</div>
|
|
</div>
|
|
<div class="sidebar-element" style="color: gray">Current skill</div>
|
|
</span>
|
|
<div style="font-size: large"><span style="color: rgb(15, 105, 207)">Happiness: </span><span id="happinessDisplay"></span></div>
|
|
<div class="sidebar-element" style="color: gray">Affects all xp gain</div>
|
|
<span id="evilInfo">
|
|
<div style="font-size: large"><span style="color: rgb(200, 0, 0)">Evil: </span><span id="evilDisplay"></span></div>
|
|
<div class="sidebar-element" style="color: gray">Affects dark magic xp gain</div>
|
|
</span>
|
|
<!--
|
|
<span id="scheduling">
|
|
<div style="font-size: large">Scheduling</div>
|
|
<div style="color: gray" class="sidebar-element">Schedule time to jobs/skills</div>
|
|
<span style="height: 30px">
|
|
<p style="width: 5px">Jobs</br>(32%)</p>
|
|
<input id="schedulingSlider" class="slider" type="range" min="0" max="100" value="0">
|
|
<p style="width: 5px">Skills</br>(68%)</p>
|
|
</span>
|
|
</span>
|
|
-->
|
|
<span id="timeWarping">
|
|
<div style="font-size: large"><span style="color: rgb(204, 34, 219)">Time warping: </span><span id="timeWarpingDisplay"></span></div>
|
|
<div style="color: gray">Affects game speed</div>
|
|
<button class="w3-button button sidebar-element" id="timeWarpingButton" onclick="setTimeWarping()" style="margin-top: 5px; width:150px">Enable warp</button>
|
|
</span>
|
|
</div> <!-- End left-hand summary panel -->
|
|
<!--******* Nav-bar with tabbed content navigation buttons *******-->
|
|
<div class="panel w3-margin-left" style="width: 900px; height: 40px; float: left">
|
|
<div class="w3-button w3-bar-item tabButton" id="jobTabButton" onclick="setTab(this, 'jobs')">Jobs</div>
|
|
<div class="w3-button w3-bar-item tabButton" onclick="setTab(this, 'skills')">Skills</div>
|
|
<div class="w3-button w3-bar-item tabButton" id="shopTabButton" onclick="setTab(this, 'shop')">Shop</div>
|
|
<div class="w3-button w3-bar-item tabButton" id="townTabButton" onclick="setTab(this, 'town')">Town</div>
|
|
<div class="w3-button w3-bar-item tabButton" id="rebirthTabButton" onclick="setTab(this, 'rebirth')">Amulet</div>
|
|
<div class="w3-button w3-bar-item tabButton" onclick="setTab(this, 'settings')" style="float: right">Settings</div>
|
|
</div> <!-- End nav-bar -->
|
|
<div class="panel w3-margin-left w3-margin-top w3-padding" style="width: 900px; height: auto; float: left">
|
|
<template class="headerRowTaskTemplate">
|
|
<tr>
|
|
<th class="category" style="width: 250px">Job</th>
|
|
<th>Level</th>
|
|
<th class="valueType">Value type</th>
|
|
<th>Xp/day</th>
|
|
<th>Xp left</th>
|
|
<th class="maxLevel">Max level</th>
|
|
<th class="skipSkill">Skip</th>
|
|
</tr>
|
|
</template>
|
|
<template class="headerRowItemTemplate">
|
|
<tr>
|
|
<th class="category" style="width: 250px">Item</th>
|
|
<th style="width: 100px">Active</th>
|
|
<th style="width: 250px">Effect</th>
|
|
<th>Expense/day</th>
|
|
</tr>
|
|
</template>
|
|
<template class="rowTaskTemplate">
|
|
<tr>
|
|
<td>
|
|
<div class="progress-bar progressBar tooltip">
|
|
<div class="progress-fill progressFill"></div>
|
|
<div class="progress-text name">Task</div>
|
|
<span class="tooltipText"></span>
|
|
</div>
|
|
</td>
|
|
<td class="level">Level</td>
|
|
<td class="value">
|
|
<div class="effect"></div>
|
|
<div class="income">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</td>
|
|
<td class="xpGain">Xp/day</td>
|
|
<td class="xpLeft">Xp left</td>
|
|
<td class="maxLevel">Max level</td>
|
|
<td class="skipSkill">
|
|
<input class="checkbox" type="checkbox"/>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template class="rowItemTemplate">
|
|
<tr>
|
|
<td>
|
|
<button class="button item-button tooltip">
|
|
<span class="name"></span>
|
|
<span class="tooltipText">tooltip</span>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<div class="w3-border w3-circle" style="width: 40px; height: 40px; padding: 7px">
|
|
<div class="active w3-circle" style="width: 24px; height: 24px;"></div>
|
|
</div>
|
|
</td>
|
|
<td class="effect"></td>
|
|
<td class="expense">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<template class="requiredRowTemplate">
|
|
<td class="w3-text-gray" colspan="5" style="padding-left: 16px">
|
|
Required:
|
|
<span class="value" colspan="5">
|
|
<span class="levels"></span>
|
|
<span class="coins">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span>
|
|
<span class="evil" style="color: rgb(200, 0, 0)"></span>
|
|
</span>
|
|
</td>
|
|
</template>
|
|
<!--********************************* Tab Definitions ************************************-->
|
|
<div class="tab" id="jobs">
|
|
<table class="w3-table w3-bordered" id="jobTable">
|
|
</table>
|
|
</div>
|
|
<div class="tab" id="skills">
|
|
<table class="w3-table w3-bordered" id="skillTable">
|
|
</table>
|
|
</div>
|
|
<div class="tab" id="shop">
|
|
<table class="w3-table w3-bordered" id="itemTable">
|
|
</table>
|
|
</div>
|
|
<div class="tab" id="town">
|
|
<h4>Town</h4>
|
|
<p>Your heroic feats in battle have earned you a title of nobility and a huge swath of some rather...undesirable land.
|
|
Your territory is hundreds of miles from the nearest village, the soil is infertile, and the few living beings around are bandits and hermits. It's going to
|
|
take a lot of work to make this place worth anything.
|
|
</p>
|
|
<p style="display: inline-block;">Town Income per day: </p>
|
|
<div id="townIncomeDisplay" style="font-size: large; display: inline-block;">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<hr/>
|
|
<h5>Basic Buildings</h5>
|
|
<div class="w3-row">
|
|
<button class="tooltip button item-button w3-black w3-round-large w3-border w3-border-grey w3-quarter w3-margin-right w3-margin-bottom" id="woodenHut" type="button">
|
|
Wooden Hut<span class="w3-badge w3-margin-left w3-white">0</span>
|
|
<span class="tooltipText" id="tooltip-woodenHut">Wooden Hut <hr/><br/> A humble dwelling that provides the basic requirements of nature.
|
|
Rough wooden logs join together in support of brown thatched roofing, providing a cozy retreat from rain and wind. <br/>
|
|
Your people won't become spoiled while living in huts such as these; they'll be one with nature. <br/><br/>
|
|
Cost: <span id="coins-woodenHut">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span> <br/>
|
|
Cost growth: 1.0% <br/>
|
|
Effect: None</span>
|
|
</button>
|
|
<button class="tooltip button item-button w3-black w3-round-large w3-border w3-border-grey w3-quarter w3-margin-right w3-margin-bottom" id="farm" type="button">
|
|
Farm <span class="w3-badge w3-margin-left w3-white">0</span>
|
|
<span class="tooltipText" id="tooltip-farm">Farm <hr/><br/>
|
|
Rocks abound within these sour patches of inhospitable soil you and your people call "farms". <br/>
|
|
Healing the soil is a monumental undertaking. It will doubtless take generations of care. Or some nifty magic...<br/><br/>
|
|
|
|
Cost: <span id="coins-farm">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span> <br/>
|
|
Cost growth: 5.0% <br/>
|
|
Effect: Additional daily income: 150 coppers <br/></span>
|
|
</button>
|
|
<button class="tooltip button item-button w3-black w3-round-large w3-border w3-border-grey w3-quarter w3-margin-right w3-margin-bottom" id="grainShed" type="button">
|
|
Grain Shed<span class="w3-badge w3-margin-left w3-white">0</span>
|
|
<span class="tooltipText" id="tooltip-grainShed">Grain Shed <hr/><br/>
|
|
A savy merchant knows the dynamics of supply and demand. Besides the obvious fact that storing your grain delays that pesky nuisance of winter starvation,
|
|
your grain sheds allow your townsfolk to hold off selling their grain until prices rise. The more grain storage your town builds, the more influence on prices
|
|
your town wields. <br/><br/>
|
|
Cost: <span id="coins-grainShed">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</span> <br/>
|
|
Cost growth: 7.0% <br/>
|
|
Effect: Additional 6% Farm income (compounding) <br/><br/>
|
|
|
|
Note: Your town's abuse of the grain markets has been noted. Expect the kingdon to limit your egregious profits soon.<br/></span>
|
|
</button>
|
|
<button class="tooltip button item-button w3-black w3-round-large w3-border w3-border-grey w3-quarter w3-margin-right w3-margin-bottom" type="button">
|
|
Secret <span class="w3-badge w3-margin-left w3-white">0</span>
|
|
<span class="tooltipText">Soon!</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="tab" id="rebirth">
|
|
<ul>
|
|
<li style="margin: 8px;">
|
|
You stumble across a strange looking amulet on your 25th birthday. It does not look like
|
|
it has any worth on the market given that it's made from cheap-looking copper. However, you
|
|
feel a weird urge to keep the amulet, so you slip it into your pocket for safekeeping.
|
|
</li>
|
|
<li id="rebirthNote1" style="margin: 8px;">
|
|
On your 45th birthday, you feel the amulet shiver uncontrollably in your pocket. You take it
|
|
out and the constant shivering suddenly stops. More to your bizarre surprise, you notice
|
|
a strange etching on the centre of the amulet.
|
|
</li>
|
|
<li id="rebirthNote2" style="margin: 8px;">
|
|
<div style="margin-bottom: 8px">
|
|
On your 65th birthday, you once again encounter the strange, unexplained shivering from your
|
|
amulet. But this time, a living eyeball emerges from the centre. Although terribly frightened,
|
|
you realise you do not have many years to live left anyway so you consider touching the eye
|
|
to see what happens.
|
|
</div>
|
|
<i style="color: grey">
|
|
By touching the eyeball, you will be reborn and have to restart life again, losing all your levels and coins.
|
|
However, you will gain <b>xp multipliers</b> for your jobs and skills equivalent to: <b>1 + the max level of the skill or job / 10.</b>
|
|
This means you will learn everything again much more quickly than you did in your previous life. <span style="color: rgb(200, 0, 0)">
|
|
Something tells you that the amulet might transform even further after living for <b>2 whole centuries</b>...</span>
|
|
</i>
|
|
<button class="w3-button button" onclick="rebirthOne()" style="margin-bottom: 8px; margin-top: 8px">Touch the eye</button>
|
|
</li>
|
|
<li id="rebirthNote3" style="margin: 8px;">
|
|
<div style="margin-bottom: 8px;">
|
|
Your gut instinct was right. The moment you hit the grand age of 200, you hear an ominous hum coming from the amulet.
|
|
A mouth emerges from its surface and begins to cackle, and proceeds to say: "So you've made it this far... Are you ready to embrace evil?"
|
|
</div>
|
|
<i style="color: rgb(200, 0, 0)">
|
|
If you decide to embrace evil, there is a price. All of your levels, coins and even max levels will be reset.
|
|
Your town will be utterly annihilated; your townspeople slaughtered by your own hand.
|
|
You will be reborn as a fresh slate. However, you will unlock a new line of skills and gain
|
|
<b><span id="evilGainDisplay"></span> evil</b>, which will heavily impact your future lives.
|
|
</i>
|
|
<button class="w3-button button" onclick="rebirthTwo()" style="margin-bottom: 8px; margin-top: 8px">Embrace evil</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab" id="settings">
|
|
<ul>
|
|
<li>
|
|
<h2>Import/export save</h2>
|
|
<button class="w3-button button" onclick="importGameData()">Import</button>
|
|
<button class="w3-button button" onclick="exportGameData()">Export</button>
|
|
<form style="margin-top: 16px">
|
|
<input id="importExportBox" style="width:300px; height:30px" type="text"/>
|
|
</form>
|
|
</li>
|
|
<li>
|
|
<h2>Toggle light/dark mode</h2>
|
|
<button class="w3-button button" onclick="setLightDarkMode()">Toggle</button>
|
|
</li>
|
|
<li>
|
|
<h2>Join the discord community!</h2>
|
|
<a href="https://discord.gg/fTRS4pHGka" target="_blank">
|
|
<img height="100" src="https://cdn.icon-icons.com/icons2/2108/PNG/512/discord_icon_130958.png" width="100"/>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<h2>Hard reset game</h2>
|
|
<button class="w3-button button w3-red" onclick="resetGameData()">Reset</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="js/HackTimer.js" type="text/javascript"></script>
|
|
<script src="js/classes.js" type="text/javascript"></script>
|
|
<script src="js/townBuildings.js" type="text/javascript"></script>
|
|
<script src="js/townFunctions.js" type="text/javascript"></script>
|
|
<script src="js/updateTooltip.js" type="text/javascript"></script>
|
|
<script src="js/main.js" type="text/javascript"></script>
|
|
</html> |