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

719 lines
42 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/dark.css">
<link rel="stylesheet" type="text/css" href="css/colorblind.css">
<link rel="stylesheet" type="text/css" href="css/currencies.css">
<title>Progress Knight Quest</title>
<link rel="shortcut icon" href="img/logo.ico" />
</head>
<body id="body" class="dark" style="font-size: x-small">
<div class="w3-margin">
<div class="header">
<img src="img/logos.png" alt="logos" />
<h3>Progress Knight Quest</h3>
</div>
<div id="row" class="row">
<div id="info" class="panel w3-padding quick-bar" style="width:20em">
<div id="challengeTitle" class="challenge-title">
In challenge: <span id="challengeName"></span>
</div>
<div class="text-caption" id="errorInfo" hidden="true">
<div>⚠️ Oh no! It looks like something on the site broke.. If this issue persists, feel free to contact the developers.</div>
<br>
</div>
<div id="deathText" class="hidden">
<div class="text-caption" style="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>
</div>
<div class="text-caption"><span id="ageDisplay">Age 14 Day 0</span></div>
<div class="sidebar-element" style="color: gray">
Lifespan: <span id="lifespanDisplay">70</span> years
<br>Real Time: <span id="realtimeDisplay">00:00:00</span>
</div>
<button id="pauseButton" class="w3-button button sidebar-element" onClick="togglePause()">Pause</button>
<div class="text-caption" id="coinDisplay">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div style="color: gray">Balance</div>
<ul class="sidebar-element" style="padding-left: 1em;">
<li>
<span style="color: rgb(9, 160, 230)">Net: </span><b id="signDisplay"></b>
<div id="netDisplay" style="display: inline;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li>
<span style="color: green">Income: </span>
<div id="incomeDisplay" style="display: inline;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li>
<span style="color: red">Expense: </span>
<div id="expenseDisplay" style="display: inline;">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</li>
</ul>
<div id="quickTaskDisplay" class="hidden">
<div class="small-margin inline job progress-bar progressBar">
<div class="progress-fill progressFill current"></div>
<div class="progress-text name">Task</div>
</div>
</div>
<div class="text-caption" style="padding-top: 0.2em"><span style="color: rgb(15, 105, 207)">Happiness: </span><span id="happinessDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Affects all XP gain</div>
<div id="evilInfo" class="hidden">
<div class="text-caption"><span style="color: rgb(200, 0, 0)">Evil: </span><span id="evilDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Affects Dark Magic XP gain</div>
</div>
<div id="essenceInfo" class="hidden">
<div class="text-caption"><span style="color: rgb(24, 210, 217)">Essence: </span><span id="essenceDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Affects Almightiness XP gain</div>
</div>
<div id="darkMatterInfo" class="hidden">
<div class="text-caption"><span style="color: rgb(114, 83, 182)">Dark Matter: </span><span id="darkMatterDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Affects all XP gain</div>
</div>
<div id="darkOrbsInfo" class="hidden">
<div class="text-caption"><span style="color: rgb(143, 114, 207)">Dark Orbs: </span><span id="darkOrbsDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Used to buy items in the Dark Matter shop</div>
</div>
<div id="timeWarping">
<div class="text-caption"><span style="color: rgb(204, 34, 219)">Time Warping: </span><span id="timeWarpingDisplay"></span></div>
<div style="color: gray" class="sidebar-element">Affects game speed</div>
</div>
<div id="rebirthButton1" class="hidden">
<div class="text-caption"><span style="color: rgb(102, 229, 71)">Rebirth</span></div>
<button class="w3-button button" style="margin-bottom: 0.1em; margin-top: 0.8em; width: 100%" onClick="rebirthOne()">Touch the eye</button>
</div>
<div id="rebirthButton2" class="hidden">
<button class="w3-button button" style="margin-bottom: 0.1em; margin-top: 0.8em; width: 100% " onClick="rebirthTwo()">Embrace evil: <span style="color: rgb(240, 0, 0)" id="evilGainButtonDisplay"></span></button>
</div>
<div id="rebirthButton3" class="hidden">
<button class="w3-button button" style="margin-bottom: 0.1em; margin-top: 0.8em; width: 100% " onClick="rebirthThree()">Transcend: <span style="color: rgb(24, 210, 217)" id="essenceGainButtonDisplay"></span></button>
</div>
<div id="rebirthButton4" class="hidden">
<button class="w3-button button" style="margin-bottom: 0.1em; margin-top: 0.8em; width: 100% " onClick="rebirthFour()">Collapse the universe: <span style="color: rgb(102, 229, 71)" id="darkMatterGainButtonDisplay"></span></button>
</div>
</div>
<div id="column" class="column">
<div id="tabcolumn" class="panel w3-margin-left tabs-tab-column">
<div class="w3-button w3-bar-item tabButton baritem" id="jobsTabButton" onClick="setTab('jobs')">Hero</div>
<div class="w3-button w3-bar-item tabButton baritem hidden" id="skillsTabButton" onClick="setTab('skills')">Skills</div>
<div class="w3-button w3-bar-item tabButton baritem hidden" id="shopTabButton" onClick="setTab('shop')">Shop</div>
<div class="w3-button w3-bar-item tabButton baritem" id="challengesTabButton" onClick="setTab('challenges')">Challenges</div>
<div class="w3-button w3-bar-item tabButton baritem" id="milestonesTabButton" onClick="setTab('milestones')">Milestones</div>
<div class="w3-button w3-bar-item tabButton baritem" id="rebirthTabButton" onClick="setTab('rebirth')">Amulet</div>
<div class="w3-button w3-bar-item tabButton baritem" id="darkMatterTabButton" onClick="setTab('darkMatter')">Dark Matter</div>
<div class="w3-button w3-bar-item tabButton baritem" id="settingsTabButton" onClick="setTab('settings')">Settings</div>
</div>
<div id="maincolumn" class="panel w3-margin-left w3-margin-top w3-padding tabs-main-column">
<template class="headerRowTaskTemplate">
<tr>
<th class="category" style="width: 20em">Job</th>
<th>Level</th>
<th class="valueType" style="width: 18em">Value type</th>
<th>Xp/day</th>
<th>Xp&nbsp;left</th>
<th class="maxLevel">Max</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</td>
</tr>
</template>
<template class="headerRowItemTemplate">
<tr class="item-header-row" onclick="forceAutobuy()">
<th class="category" style="width: 20em">
<button class="button-no-button tooltip" style="background-color:transparent;" onclick="forceAutobuy()">
<span class="name">Item</span>
<span class="tooltipText">Click to activate auto-buy</span>
</button>
</th>
<th>Active</th>
<th style="width: 20em">Effect</th>
<th>Expense/day</th>
</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="outer-circle center-g-inside">
<div class="active inner-circle"></div>
</div>
</td>
<td class="effect"></td>
<td class="expense">
<span></span>
<span></span>
<span></span>
<span></span>
</td>
</tr>
</template>
<template class="headerRowMilestoneTemplate">
<tr>
<th style="width: 6em">Goal</th>
<th style="width: 15em" class="category">Milestone Tier</th>
<th>Effect</th>
</tr>
</template>
<template class="rowMilestoneTemplate">
<tr>
<td style="color: rgb(24, 210, 217)" class="essence"></td>
<td>
<div class="progress-bar progressBar tooltip" style="width: 100%">
<div class="progress-fill progressFill" style="background-color: green"></div>
<span class="tooltipText"></span>
<div class="progress-text name">Milestone</div>
</div>
</td>
<td class="description"></td>
</tr>
</template>
<template class="requiredRowTemplate">
<td class="w3-text-gray" style="padding-left: 0.8em;" colspan=5>
Required:
<div class="value" colspan=5 style="display:inline">
<span class="levels"></span>
<div class="coins" style="display:inline">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<span style="color: rgb(200, 0, 0)" class="evil"></span>
<span style="color: rgb(24, 210, 217)" class="essence"></span>
<span style="color: rgb(114, 83, 182)" class="darkMatter"></span>
</div>
</td>
</template>
<div class="tab" id="jobs">
<div id="jobPage" style="flex: 1; margin-left: 0.5em;">
<table id="jobTable" class="w3-table w3-bordered">
</table>
</div>
<div id="skillPage" style="flex: 1; margin-left: 0.5em;">
<table id="skillTable" class="w3-table w3-bordered">
</table>
</div>
<div id="itemPage" style="flex: 1; margin-left: 0.5em;">
<table id="itemTable" class="w3-table w3-bordered">
</table>
</div>
</div>
<div class="tab hidden" id="skills">
</div>
<div class="tab hidden" id="shop">
</div>
<div class="tab" id="challenges">
<div class="panel w3-margin-left w3-margin-top w3-padding">
<div>
<div style="color:rgb(240, 0, 0)">Starting a challenge will <b>reset</b> your coins, levels and max levels.</div>
<div>The more you advance in the challenge, the higher the reward.</div>
<div>Challenge rewards are always active, even in challenges.</div>
</div>
<div id="exitChallengeDiv">
<p>Current challenge: <b><span id="activeChallengeName"></span></b></p>
<button class="w3-button button" onclick="exitChallenge()">Exit challenge</button>
<div id="currentChallengeReward1" class="an_unhappy_life hidden" style="display: inline; padding-left:1em">Current reward: Multiplies happiness by x<span id="currentChallengeHappinessBuff"></span></div>
<div id="currentChallengeReward2" class="rich_and_the_poor hidden" style="display: inline; padding-left:1em">Current reward: Multiplies income by x<span id="currentChallengeIncomeBuff"></span></div>
<div id="currentChallengeReward3" class="time_does_not_fly hidden" style="display: inline; padding-left:1em">Current reward: Multiplies time warping by x<span id="currentChallengeTimewarpingBuff"></span></div>
<div id="currentChallengeReward4" class="dance_with_the_devil hidden" style="display: inline; padding-left:1em">Current reward: Multiplies essence gain by x<span id="currentChallengeEssenceGainBuff"></span></div>
<div id="currentChallengeReward5" class="legends_never_die hidden" style="display: inline; padding-left:1em">Current reward: Multiplies evil gain by x<span id="currentChallengeEvilGainBuff"></span></div>
</div>
<div id="anUnhappyLifeChallenge" style="padding-top:2em">
<div class="text-caption challenge-title">1. An unhappy life</div>
<div style="color:gray; padding-bottom:0.3em">Reduces happiness by ^0.5</div>
<div style="color: gold; padding-bottom: 0.3em">Goal: Reach <span id="challengeGoal1">992.2M</span> Happiness</div>
<div id="challengeReward1" class="reward">Reward: Multiplies happiness by x<span id="challengeHappinessBuff">1</span></div>
<button id="challengeButton1" class="w3-button button" onclick="enterChallenge('an_unhappy_life')">Enter challenge</button>
</div>
<div id="theRichAndThePoorChallenge" style="padding-top:2em">
<div class="text-caption challenge-title">2. The rich and the poor</div>
<div style="color:gray; padding-bottom:0.3em">Reduces income by ^0.35</div>
<div style="color: gold; padding-bottom: 0.3em">Goal: Reach <div id="challengeGoal2" class="coins" style="display:inline">
<span></span>
<span></span>
<span></span>
<span></span>
</div> Gross Income</div>
<div id="challengeReward2" class="reward">Reward: Multiplies income by x<span id="challengeIncomeBuff">1</span></div>
<button id="challengeButton2" class="w3-button button" onclick="enterChallenge('rich_and_the_poor')">Enter challenge</button>
</div>
<div id="timeDoesNotFlyChallenge" style="padding-top:2em">
<div class="text-caption challenge-title">3. Time does not fly</div>
<div style="color: gray; padding-bottom: 0.3em">Reduces time warping by ^0.7</div>
<div style="color: gold; padding-bottom: 0.3em">Goal: Reach x<span id="challengeGoal3">1.0M</span> Time Warping</div>
<div id="challengeReward3" class="reward">Reward: Multiplies time warping by x<span id="challengeTimewarpingBuff">1</span></div>
<button id="challengeButton3" class="w3-button button" onclick="enterChallenge('time_does_not_fly')">Enter challenge</button>
</div>
<div id="danceWithTheDevilChallenge" style="padding-top:2em">
<div class="text-caption challenge-title">4. Dance with the devil</div>
<div style="color: gray; padding-bottom: 0.3em">Reduces Dark Magic and Almightiness XP effect enormously, max level reduces XP gain and happiness is reduced by ^0.075</div>
<div style="color: gold; padding-bottom: 0.3em">Goal: Reach <span id="challengeGoal4">5.8k</span> Evil Gain</div>
<div id="challengeReward4" class="reward">Reward: Multiplies essence gain by x<span id="challengeEssenceGainBuff">1</span></div>
<button id="challengeButton4" class="w3-button button" onclick="enterChallenge('dance_with_the_devil')">Enter challenge</button>
</div>
<div id="legendsNeverDieChallenge" style="padding-top:2em">
<div class="text-caption challenge-title">5. Legends never die</div>
<div style="color: gray; padding-bottom: 0.3em">Reduces your lifespan by ^0.72, happiness does nothing and Dark Magic XP effect is always 1x</div>
<div style="color: gold; padding-bottom: 0.3em">Goal: Reach Chairman lvl <span id="challengeGoal5">1227</span></div>
<div id="challengeReward5" class="reward">Reward: Multiplies evil gain by x<span id="challengeEvilGainBuff">1</span></div>
<button id="challengeButton5" class="w3-button button" onclick="enterChallenge('legends_never_die')">Enter challenge</button>
</div>
</div>
</div>
<div class="tab" id="milestones">
<div id="milestonePage" style="flex: 1; margin-left: 0.5em;">
<table id="milestoneTable" class="w3-table w3-bordered">
</table>
</div>
<div id="dummyPage1" style="flex: 2; margin-left: 0.5em;">
</div>
</div>
<div class="tab" id="rebirth">
<div id="rebirthPage" style="flex: 1; margin-left: 0.5em;" >
<ul>
<li style="margin: 0.4em;">
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 style="margin: 0.4em;" id="rebirthNote1" class="hidden">
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 style="margin: 0.4em;" id="rebirthNote2" class="hidden">
<div style="margin-bottom: 0.4em">
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 classes and abilities equivalent to: <b>1 + the max level of the class or ability / 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 evolve after living for <b>2 whole centuries</b>...
</span>
</i>
<br>
<button class="w3-button button" style="margin-bottom: 0.4em; margin-top: 0.4em " onClick="rebirthOne()">Touch the eye</button>
<br>
</li>
<li style="margin: 0.4em;" id="rebirthNote3" class="hidden">
<div style="margin-bottom: 0.4em;">
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?"
<br><span style="color: rgb(200, 0, 0)">
The amulet might transform even further after living for a <b>millennium</b>.
</span>
</div>
<i style="color: rgb(200, 0, 0)">
If you decide to embrace evil, all of your levels, coins and even max levels will be reset.
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>
<br>
<button class="w3-button button" style="margin-bottom: 0.4em; margin-top: 0.4em " onClick="rebirthTwo()">Embrace evil</button>
<br>
</li>
<li style="margin: 0.4em;" id="rebirthNote4" class="hidden">
<div style="margin-bottom: 0.4em;">
A thousand years have come and gone and yet, you still remain alive... somehow. You feel your amulet shivering again and to your surprise, you see small tendrils
full of eyeballs emergin from it. As you are about to drop the amulet, you hear frightening screech followed by whispers in your head... <b>"You have to embrace the Void..."</b>
<br>
<span style="color: rgb(200, 0, 0)">
The amulet will reach its final form after <b>ten millennia</b>!
</span>
</div>
<i style="color: rgb(204, 0, 255)">
You have unlocked <b>"The Void"</b> class category along with <b>"Void Manipulation"</b> abilities.
</i>
</li>
<li style="margin: 0.4em;" id="rebirthNote5" class="hidden">
<div style="margin-bottom: 0.4em;">
Ten millenia have passed... most of them spent serving the Void, yet there is still a glimpse of humanity inside of you. All of the sudden your amulet starts to glow in the distance,
illuminating darkness around you with the brightness of a thousand suns. With the very last remnant of your free will, you run to your amulet and touch it... <b>
"You are now part of something bigger than yourself..."
</b>
</div>
<i style="color: rgb(255, 204, 102)">
You have unlocked <b>"Galactic Council"</b> class category along with <b>"Celestial Powers"</b> abilities.
<i style="color: grey">
<br>
If you decide to <b>transcend</b>, you will be reborn once again, losing all your coins, <b>evil</b> and current levels.
However, your max levels won't be erased, but instead multiplied with the effect from the <b>Cosmic Recollection</b> ability and you will gain
<i style="color: rgb(24, 210, 217)">
<b><span id="essenceGainDisplay"></span> essence</b>,
</i>
along with new abilities that will boost you even further in your journey.
<br>
<i style="color: rgb(200, 0, 0)">
Transcend will only appear if you have the <b>Cosmic Recollection</b> ability unlocked!
</i>
</i>
<br>
</i>
<div style="margin-bottom: 0.4em;" id="rebirthNote6" class="hidden">
<button class="w3-button button" style="margin-bottom: 0.4em; margin-top: 0.4em" onClick="rebirthThree()">Transcend</button>
</div>
</li>
<li style="margin: 0.4em;" id="rebirthNote7" class="hidden">
<i style="color: rgb(114, 83, 182)">
You are starting to become way too powerful. The end of the universe may be near...
</i>
<i style="color: grey">
<br>
If you decide to <b>collapse the universe</b>, all of your levels, coins, max levels, evil, and <b>essence</b> will be reset. You will be reborn as a fresh slate in a new universe, with no memory of milestones and challenges from any of your past selves. In exchange, you will unlock a third new line of abilities and gain <i style="color: rgb(114, 83, 182)">
<b><span id="darkMatterGainDisplay"></span> Dark Matter</b>,
</i>
which will boost you much further in your journey across the multiverse.
</i>
<br>
<button class="w3-button button" style="margin-bottom: 0.4em; margin-top: 0.4em " onClick="rebirthFour()">Collapse the universe</button>
</li>
</ul>
</div>
<div id="dummyPage2" style="flex: 2; margin-left: 0.5em;">
</div>
</div>
<div class="tab" id="darkMatter">
<div class="column">
<div class="panel w3-margin-left">
<div class="w3-button w3-bar-item tabButtonDarkMatter baritem w3-blue-gray" id="shopTabTabButton" onClick="setTabDarkMatter('shopTab')">Shop</div>
<div class="w3-button w3-bar-item tabButtonDarkMatter baritem" id="skillTreeTabTabButton" onClick="setTabDarkMatter('skillTreeTab')">Skills</div>
</div>
<div id="maincolumnSettings" class="panel w3-margin-left w3-margin-top w3-padding settings-main-column">
<div id="shopTab" class="tabDarkMatter">
<div id="settingsPage" style="flex: 1; margin-left: 0.5em;">
<div class="panel w3-margin-left w3-margin-top w3-padding">
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Dark Orb Generator</div>
<div style="color:gray; padding-bottom:0.3em">Generates <b id="darkOrbGenerator"></b> <span style="color: rgb(143, 114, 207)">Dark Orb</span> per day</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b id="darkOrbGeneratorCost"></b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
<button class="w3-button button" id="darkOrbGeneratorBuyButton" onclick="buyDarkOrbGenerator()">Upgrade</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">A miracle</div>
<div style="color:gray; padding-bottom:0.3em">Keep <b>Magic Eye</b> when performing a Dark Matter reset</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b>10</b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
<button class="w3-button button" id="aMiracleBuyButton" onclick="buyAMiracle()">Buy</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">A deal with the Chairman</div>
<div style="color:gray; padding-bottom: 0.5em;">Reward: Multiply <span style="color: rgb(199, 21, 133);">T.A.A & Magic</span> XP gain by x<span id="aDealWithTheChairmanEffect"></span></div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b id="aDealWithTheChairmanCost"></b> <span style="color: rgb(143, 114, 207)">Dark Orbs</span></div>
<button class="w3-button button" onclick="buyADealWithTheChairman()">Upgrade</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">A gift from god</div>
<div style="color:gray; padding-bottom: 0.5em;">Reward: Multiply <span style="color: rgb(24, 210, 217)">Essence</span> gain by x<span id="aGiftFromGodEffect"></span></div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b id="aGiftFromGodCost"></b> <span style="color: rgb(143, 114, 207)">Dark Orbs</span></div>
<button class="w3-button button" onclick="buyAGiftFromGod()">Upgrade</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Life coach</div>
<div style="color:gray; padding-bottom: 0.5em;">Reward: Multiply <span style="color: lightgreen;">Income</span> by x<span id="lifeCoachEffect"></span></div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b id="lifeCoachCost"></b> <span style="color: rgb(143, 114, 207)">Dark Orbs</span></div>
<button class="w3-button button" onclick="buyLifeCoach()">Upgrade</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Gotta be fast</div>
<div style="color:gray; padding-bottom: 0.5em;">Reward: Multiply <span style="color: rgb(204, 34, 219)">Time Warping</span> by x<span id="gottaBeFastEffect"></span></div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b id="gottaBeFastCost"></b> <span style="color: rgb(143, 114, 207)">Dark Orbs</span></div>
<button class="w3-button button" onclick="buyGottaBeFast()">Upgrade</button>
</div>
</div>
</div>
</div>
<div id="skillTreeTab" class="tabDarkMatter">
<div class="panel w3-margin-left w3-margin-top w3-padding">
<div style="padding-top:2em">
<div style="color:gray; padding-bottom:0.3em">
You can only choose 1 upgrade in each category; pick wisely. You can reset the skills, but you will <b>NOT</b> get your <span style="color: rgb(114, 83, 182)">Dark Matter</span> back!
</div>
<button class="w3-button button" onclick="resetSkillTree()">Reset Skills</button>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Speed is life</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="speedIsLife1" class="w3-button button" onclick="buySpeedOfLife(1)">Buy</button> -
Multiply <span style="color: rgb(204, 34, 219)">Time Warping</span> by <b>3x</b>,
but divide <span style="color: rgb(200, 0, 0)">Evil</span> gain by <b>2x</b>
</div>
<div style="color: rgb(255, 255, 255); padding: 0.6em">OR</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="speedIsLife2" class="w3-button button" onclick="buySpeedOfLife(2)">Buy</button> -
Multiply <span style="color: rgb(204, 34, 219)">Time Warping</span> by <b>7x</b>,
but divide <span style="color: rgb(24, 210, 217)">Essence</span> gain by <b>2x</b>
</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b>100</b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Your greatest debt</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="yourGreatestDebt1" class="w3-button button" onclick="buyYourGreatestDebt(1)">Buy</button> -
Multiply <span style="color:rgb(255, 204, 102)">all XP</span> gain by <b>500x</b>,
but divide <span style="color: lightgreen;">Income</span> by <b>10x</b>
</div>
<div style="color: rgb(255, 255, 255); padding: 0.6em">OR</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="yourGreatestDebt2" class="w3-button button" onclick="buyYourGreatestDebt(2)">Buy</button> -
Multiply <span style="color: rgb(200, 0, 0)">Evil gain</span> by <b>100x</b>,
but divide <span style="color: lightgreen;">Income</span> by <b>2x</b>
</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b>1k</b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Essence collector</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="essenceCollector1" class="w3-button button" onclick="buyEssenceCollector(1)">Buy</button> -
Multiply <span style="color: rgb(24, 210, 217)">Essence</span> gain by <b>500x</b>,
but divide <span style="color: rgb(200, 0, 0)">Evil</span> gain by <b>2x</b>
</div>
<div style="color: rgb(255, 255, 255); padding: 0.6em">OR</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="essenceCollector2" class="w3-button button" onclick="buyEssenceCollector(2)">Buy</button> -
Multiply <span style="color: rgb(24, 210, 217)">Essence</span> gain by <b>1000x</b>,
but divide <span style="color: lightgreen;">Income</span> by <b>25x</b>
</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b>10k</b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
</div>
<div style="padding-top:2em">
<div class="text-caption dark-matter-title">Explosion of the universe</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="explosionOfTheUniverse1" class="w3-button button" onclick="buyExplosionOfTheUniverse(1)">Buy</button> -
Multiply <span style="color:rgb(255, 204, 102)">all XP</span> gain by <b>1e100x</b>,
but divide <span style="color: rgb(24, 210, 217)">Essence</span> gain by <b>2x</b>
</div>
<div style="color: rgb(255, 255, 255); padding: 0.6em">OR</div>
<div style="color:gray; padding-bottom:0.3em">
<button id="explosionOfTheUniverse2" class="w3-button button" onclick="buyExplosionOfTheUniverse(2)">Buy</button> -
Multiply <span style="color:rgb(255, 204, 102)">all XP</span> gain by <b>1e150x</b>,
but divide <span style="color: lightgreen;">Income</span> by <b>1e6x</b>
</div>
<div style="color:gray; padding-bottom: 0.5em;">Cost: <b>100k</b> <span style="color: rgb(114, 83, 182)">Dark Matter</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab" id="settings">
<div id="columnSettings" class="column">
<div id="tabcolumnSettings" class="panel w3-margin-left settings-tab-column">
<div class="w3-button w3-bar-item tabButtonSettings baritem w3-blue-gray" id="settingsTabTabButton" onClick="setTabSettings('settingsTab')">Settings</div>
<div class="w3-button w3-bar-item tabButtonSettings baritem" id="statsTabTabButton" onClick="setTabSettings('statsTab')">Stats</div>
<div class="w3-button w3-bar-item tabButtonSettings baritem" id="changelogTabTabButton" onClick="setTabSettings('changelogTab')">Changelog</div>
</div>
<div id="maincolumnSettings" class="panel w3-margin-left w3-margin-top w3-padding settings-main-column">
<div id="settingsTab" class="tabSettings">
<div id="settingsPage" style="flex: 1; margin-left: 0.5em;">
<ul>
<li>
<div class="text-caption">
<button class="w3-button button" onClick="importGameData()">Import save</button>
<button class="w3-button button" onClick="exportGameData()" onmouseout="outExportButton()">Export save</button><span class="tooltiptext" id="exportTooltip"></span>
<form style="margin-top: 0.8em">
<input id="importExportBox" type="text" style="width:20em">
</form>
</div>
</li>
<li>
<div class="text-caption" style="margin-top: 0.4em;">Settings</div>
<table class="w3-table w3-bordered">
<tr>
<td style="padding: 0.4em; width:15em">Sticky sidebar</td>
<td><input id="settingsStickySidebar" type="checkbox" style="width:1.6em;height:1.6em" onclick="setStickySidebar(this.checked)" /></td>
</tr>
<tr>
<td>Currency notation</td>
<td style="padding: 0.4em">
<button class="w3-button button CurrencyNotation selected" onclick="setCurrency(0)">Medieval</button>
<button class="w3-button button CurrencyNotation" onclick="setCurrency(1)">Extended</button>
<button class="w3-button button CurrencyNotation" onclick="setCurrency(2)">British £sd</button>
<button class="w3-button button CurrencyNotation" onclick="setCurrency(3)">Modern $</button>
</td>
</tr>
<tr>
<td>Number notation</td>
<td style="padding: 0.4em">
<button class="w3-button button Notation selected" onclick="setNotation(0)">Standard</button>
<button class="w3-button button Notation" onclick="setNotation(1)">Scientific</button>
<button class="w3-button button Notation" onclick="setNotation(2)">Engineering</button>
</td>
</tr>
<tr>
<td>Layout</td>
<td style="padding: 0.4em">
<button class="w3-button button Layout" onclick="setLayout(1)">Standard</button>
<button class="w3-button button Layout" onclick="setLayout(0)">W I D E</button>
</td>
</tr>
<tr>
<td>Font size</td>
<td style="padding: 0.4em">
<button class="w3-button button" onmouseover="onFontButtonHover()" onmouseout="onFontButtonStopHover()" onclick="setFontSize(gameData.settings.fontSize - 1)">Smaller</button>
<button class="w3-button button" onmouseover="onFontButtonHover()" onmouseout="onFontButtonStopHover()" onclick="setFontSize(gameData.settings.fontSize + 1)">Larger</button>
<span class="tooltiptext hidden" id="fontSizeTooltip" style="color: gray">Keep pressing to change more</span>
</td>
</tr>
<tr>
<td> Color scheme</td>
<td style="padding: 0.4em">
<button class="w3-button button Theme" onClick="setTheme(0, true)">Light</button>
<button class="w3-button button Theme" onClick="setTheme(1, true)">Dark</button>
<button class="w3-button button Theme" onClick="setTheme(2, true)">Color Blind Friendly</button>
</td>
</tr>
</table>
</li>
<li>
<div class="text-caption" style="margin-top: 0.4em;">Shortcuts</div>
<div style="margin-bottom: 8px;">
Arrow Keys - Menu navigation
<br>
Spacebar - Pause
</div>
</li>
<li>
<div class="text-caption" style="margin-top: 0.4em;">
<button class="w3-button button w3-red" onClick="resetGameData()">Hard reset game</button>
</div>
</li>
<li>
<div class="text-caption" style="margin-top: 0.4em;">Links</div>
<div style="margin-bottom: 8px;">
Based on a <a href="https://symb1.github.io/progress_knight_2/" target="_blank">Progress Knight 2.0</a> mod
<br>Original game: <a href="https://ihtasham42.github.io/progress-knight/" target="_blank">Progress Knight</a>
<br><a href="https://discord.gg/fTRS4pHGka" target="_blank">Join the discord community! <img src="img/discord_icon.png" style="width:3em; height:3em;"></a>
<br><a href="https://github.com/indomit/progress_knight_2" target="_blank">Github page</a>
</div>
</li>
</ul>
<span id="version" style="font-size:smaller; float:right" class="w3-text-gray">Version: 2.2.7</span>
</div>
</div>
<div id="statsTab" class="tabSettings">
<div id="statsPage" style="flex: 1; margin-left: 0.5em;">
<div>
<ul>
<li>You started playing the game on <span id="startDateDisplay"></span>.</li>
<li>You have played for <span id="playedDaysDisplay"></span> days (real time).</li>
<li>Your existance has spanned <span id="playedGameTimeDisplay"></span> days (game time).</li>
</ul>
</div>
<div id="statsRebirth1" class="hidden">
<ul>
<li>You have touched the eye <span id="rebirthOneCountDisplay"></span> times.</li>
<li>Your fastest touch is in <span id="rebirthOneFastestDisplay"></span>.</li>
</ul>
</div>
<div id="statsRebirth2" class="hidden">
<ul>
<li>You have embraced evil <span id="rebirthTwoCountDisplay"></span> times.</li>
<li>Your fastest embrace is in <span id="rebirthTwoFastestDisplay"></span>.</li>
<li id="statsEvilGain" class="hidden">You gain <span id="evilPerSecondDisplay"></span> evil/s. Maximum <span id="maxEvilPerSecondDisplay"></span> evil/s was at <span id="maxEvilPerSecondRtDisplay"></span>.</li>
</ul>
</div>
<div id="statsRebirth3" class="hidden">
<ul>
<li>You have transcended <span id="rebirthThreeCountDisplay"></span> times.</li>
<li>Your fastest transcend is in <span id="rebirthThreeFastestDisplay"></span>.</li>
<li id="statsEssenceGain" class="hidden">You gain <span id="essencePerSecondDisplay"></span> essence/s. Maximum <span id="maxEssencePerSecondDisplay"></span> essence/s was at <span id="maxEssencePerSecondRtDisplay"></span>.</li>
</ul>
</div>
<div id="statsRebirth4" class="hidden">
<ul>
<li>You have collapsed the universe <span id="rebirthFourCountDisplay"></span> times.</li>
<li>Your fastest collapse is in <span id="rebirthFourFastestDisplay"></span>.</li>
</ul>
</div>
<div id="statsChallenges">
<ul>
<li id="challengeStat1">Challenge 1 Reward: Multiplies happiness by x<span id="challengeHappinessBuffDisplay"></span>.</li>
<li id="challengeStat2">Challenge 2 Reward: Multiplies income by x<span id="challengeIncomeBuffDisplay"></span>.</li>
<li id="challengeStat3">Challenge 3 Reward: Multiplies time warping by x<span id="challengeTimewarpingBuffDisplay"></span>.</li>
<li id="challengeStat4">Challenge 4 Reward: Multiplies essence gain by x<span id="challengeEssenceGainBuffDisplay"></span>.</li>
<li id="challengeStat5">Challenge 5 Reward: Multiplies evil gain by x<span id="challengeEvilGainBuffDisplay"></span>.</li>
</ul>
</div>
</div>
</div>
<div id="changelogTab" class="tabSettings">
<div id="changelogPage" style="flex: 1; margin-left: 0.5em;">
<pre id="changelog">
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/math.js"></script>
<script type="text/javascript" src="js/HackTimer.js"></script>
<script type="text/javascript" src="js/classes.js"></script>
<script type="text/javascript" src="js/challenges.js"></script>
<script type="text/javascript" src="js/dark_matter.js"></script>
<script type="text/javascript" src="js/tooltips.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>