Files
monkeygg2.github.io/games/progress-knight-reborn/index.html
T
2023-12-10 09:44:43 -06:00

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>