Remake of the challenge tab

This commit is contained in:
IvarK 2017-09-05 23:25:43 +03:00
parent ad2def145b
commit d6010e02df
3 changed files with 261 additions and 78 deletions

View File

@ -321,33 +321,188 @@
<div id="challenges" class="tab">
<br>
<div class="divider"><br></div>
<button id="challenge1" class="challengesbtn">Reach infinity for the first time.</button>
<div class="divider"><br></div>
<button id="challenge2" class="challengesbtn">Buying anything halts your production, gradually coming back over 3 minutes.</button>
<div class="divider"><br></div>
<button id="challenge3" class="challengesbtn">First dimension is heavily weakened but gets an exponentially increasing bonus that resets on reset.</button>
<div class="divider"><br></div>
<button id="challenge4" class="challengesbtn">There are only 6 dimensions, with dimension boost and antimatter galaxy costs modified.</button>
<div class="divider"><br></div>
<button id="challenge5" class="challengesbtn">Every dimension tier bought doubles the cost of every dimension.</button>
<div class="divider"><br></div>
<button id="challenge6" class="challengesbtn">Tickspeed starts at 7%.</button>
<div class="divider"><br></div>
<button id="challenge7" class="challengesbtn">Each dimension produces the dimension 2 below it; first dimensions produce reduced antimatter.</button>
<div class="divider"><br></div>
<button id="challenge8" class="challengesbtn">Buying a dimension automatically erases all lower tier dimensions, like a sacrifice without the boost.</button>
<div class="divider"><br></div>
<button id="challenge9" class="challengesbtn">Multiplier per 10 dimensions is random from 0.15 and 10 (x1.1 with upgrade)</button>
<div class="divider"><br></div>
<button id="challenge10" class="challengesbtn">Each dimension costs the dimension 2 before it, with modified prices</button>
<div class="divider"><br></div>
<button id="challenge11" class="challengesbtn">Dimension Boost and galaxies are useless, sacrifice resets everything but is immensely more powerful</button>
<div class="divider"><br></div>
<button id="challenge12" class="challengesbtn">There's normal matter which rises. If it exceeds your antimatter, it will (soft) reset.</button>
<div class="divider"><br></div>
</div>
<br>
<table class="table" style="margin: 0 auto">
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Reach infinity for the first time.</span>
<br>
<br>
<div class="outer">
<button id="challenge1" class="challengesbtn">Start</button>
<br>
<span>Reward: First Dimension autobuyer</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Buying anything halts your production, gradually coming back over 3 minutes.</span>
<br>
<br>
<div class="outer">
<button id="challenge2" class="challengesbtn">Start</button>
<br>
<span>Reward: Second Dimension autobuyer</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">First dimension is heavily weakened but gets an exponentially increasing bonus that resets on reset.</span>
<br>
<br>
<div class="outer">
<button id="challenge3" class="challengesbtn">Start</button>
<br>
<span>Reward: Third Dimension autobuyer</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">There are only 6 dimensions, with dimension boost and antimatter galaxy costs modified.</span>
<br>
<br>
<div class="outer">
<button id="challenge4" class="challengesbtn">Start</button>
<br>
<span>Reward: Fourth Dimension autobuyer</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Whenever you buy 10 of a dimension or tickspeed, everything else of equal cost will increase to its next cost step.</span>
<br>
<br>
<div class="outer">
<button id="challenge5" class="challengesbtn">Start</button>
<br>
<span>Reward: Fifth Dimension autobuyer</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Tickspeed starts at 7%.</span>
<br>
<br>
<div class="outer">
<button id="challenge6" class="challengesbtn">Start</button>
<br>
<span>Reward: Sixth Dimension autobuyer</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Each dimension produces the dimension 2 below it; first dimensions produce reduced antimatter.</span>
<br>
<br>
<div class="outer">
<button id="challenge7" class="challengesbtn">Start</button>
<br>
<span>Reward: Seventh Dimension autobuyer</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Buying a dimension automatically erases all lower tier dimensions, like a sacrifice without the boost.</span>
<br>
<br>
<div class="outer">
<button id="challenge8" class="challengesbtn">Start</button>
<br>
<span>Reward: Eighth Dimension autobuyer</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Multiplier per 10 dimensions is random from 0.15 and 10</span>
<br>
<br>
<div class="outer">
<button id="challenge9" class="challengesbtn">Start</button>
<br>
<span>Reward: Tickspeed autobuyer</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Each dimension costs the dimension 2 before it, with modified prices</span>
<br>
<br>
<div class="outer">
<button id="challenge10" class="challengesbtn">Start</button>
<br>
<span>Reward: Automated Dimension Boosts</span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class= "challengediv">
<span style="font-size: 110%">Dimension Boost and galaxies are useless, sacrifice resets everything but is immensely more powerful</span>
<br>
<br>
<div class="outer">
<button id="challenge11" class="challengesbtn">Start</button>
<br>
<span>Reward: Automated Antimatter Galaxies</span>
</div>
</div>
</td>
<td>
<div class= "challengediv">
<span style="font-size: 110%">There's normal matter which rises. If it exceeds your antimatter, it will (soft) reset.</span>
<br>
<br>
<div class="outer">
<button id="challenge12" class="challengesbtn">Start</button>
<br>
<span>Reward: Automated Big Crunch</span>
</div>
</div>
</td>
</tr>
</table>
</div>
<div id="infinity" class="tab" alight="center">
<br>
@ -410,7 +565,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="1ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="1ison"></input>
</div>
</td>
<td>
@ -433,7 +588,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="2ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="2ison"></input>
</div>
</td>
<td>
@ -456,7 +611,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="3ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="3ison"></input>
</div>
</td>
</tr>
@ -481,7 +636,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="4ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="4ison"></input>
</div>
</td>
<td>
@ -504,7 +659,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="5ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="5ison"></input>
</div>
</td>
<td>
@ -527,7 +682,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="6ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="6ison"></input>
</div>
</td>
</tr>
@ -552,7 +707,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="7ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="7ison"></input>
</div>
</td>
<td>
@ -575,7 +730,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="8ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="8ison"></input>
</div>
</td>
<td>
@ -598,7 +753,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="9ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="9ison"></input>
</div>
</td>
@ -626,7 +781,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="10ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="10ison"></input>
</div>
</td>
<td>
@ -642,7 +797,7 @@
</select>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="11ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="11ison"></input>
</div>
</td>
<td>
@ -652,7 +807,7 @@
<div style="font-size: 80%"id="intervalInf">Current interval: 60 seconds</div>
<br>
<span style="font-size: 80%">Is active</span>
<input type="checkbox" onchange="updateAutobuyers()" checked="true" id="12ison"></input>
<input type="checkbox" onchange="updateAutobuyers()" checked="false" id="12ison"></input>
</div>
</td>

View File

@ -402,21 +402,25 @@ function updateTickSpeed() {
function updateChallenges() {
var buttons = document.getElementsByClassName('onchallengebtn')
for (var i=0; i < buttons.length; i++) {
buttons[i].className = "challengesbtn";
}
for (challenge in player.challenges) {
document.getElementById(player.challenges[challenge]).className = "completedchallengesbtn";
}
if (player.currentChallenge != "") {
document.getElementById(player.currentChallenge).className = "onchallengebtn"
}
try {
var buttons = document.getElementsByClassName('onchallengebtn')
for (var i=0; i < buttons.length; i++) {
buttons[i].className = "challengesbtn";
buttons[i].innerHTML = "Start"
}
for (var i=0; i < player.challenges.length; i++) {
document.getElementById(player.challenges[i]).className = "completedchallengesbtn";
document.getElementById(player.challenges[i]).innerHTML = "Completed"
}
if (player.currentChallenge != "") {
document.getElementById(player.currentChallenge).className = "onchallengebtn"
document.getElementById(player.currentChallenge).innerHTML = "Running"
}
} catch (err) {updateChallenges()}
}
@ -2031,12 +2035,13 @@ document.getElementById("bigcrunch").onclick = function () {
if (!player.achievements.includes("To infinity!")) giveAchievement("To infinity!");
if (!player.achievements.includes("That's a lot of infinites") && player.infinitied >= 10) giveAchievement("That's a lot of infinites");
if (player.infinitied >= 1 && !player.challenges.includes("challenge1")) player.challenges.push("challenge1");
updateChallenges();
updateAutobuyers();
if (player.challenges.includes("challenge1")) player.money = 100
}
updateChallenges();
}
function startChallenge(name) {
@ -2625,7 +2630,7 @@ function init() {
showTab('infinity');
};
//show one tab during init or they'll all start hidden
showTab('infinity')
showTab('challenges')
load_game();
updateTickSpeed();
updateAutobuyers();

View File

@ -37,30 +37,55 @@
}
.challengesbtn {
width:30%;
height: 70px;
color: black;
background: #F2F2F2;
font-weight: bold;
font-family: Typewriter;
border: 3px solid #127A20;
cursor: pointer;
border-radius: 10px;
font-size: 70%;
transition-duration: 0.2s;
padding: 5px;
width:150px;
height: 30px;
color: black;
background: #F2F2F2;
font-weight: bold;
font-family: Typewriter;
border: 3px solid #127A20;
cursor: pointer;
border-radius: 10px;
font-size: 140%;
transition-duration: 0.2s;
margin: auto;
}
.challengesbtn:hover {
color: #FFF;
background: #5AC467;
color: #FFF;
background: #5AC467;
}
.outer {
position: absolute;
right: 0;
left: 0;
bottom: 5px;
}
.challengediv {
display:table;
text-align:center;
width:350px;
height: 125px;
color: black;
background: #F2F2F2;
font-weight: bold;
font-family: Typewriter;
border: 3px solid black;
border-radius: 10px;
font-size: 80%;
transition-duration: 0.2s;
padding: 2px;
margin: 3px 8px;
position: relative;
}
.completedchallengesbtn {
width:30%;
height: 70px;
width:150px;
height: 30px;
color: #FFF;
background: #5AC467;
font-weight: bold;
@ -68,14 +93,13 @@
border: 3px solid #127A20;
cursor: pointer;
border-radius: 10px;
font-size: 70%;
font-size: 140%;
transition-duration: 0.2s;
padding: 20px;
}
.onchallengebtn {
width:30%;
height: 70px;
width:150px;
height: 30px;
color: #FFF;
background: #1F1F1F;
font-weight: bold;
@ -83,9 +107,8 @@
border: 3px solid #127A20;
cursor: pointer;
border-radius: 10px;
font-size: 70%;
font-size: 140%;
transition-duration: 0.2s;
padding: 20px;
}