mirror of
https://github.com/thepaperpilot/The-Modding-Tree.git
synced 2025-01-31 15:41:35 +00:00
Implemented cards
This commit is contained in:
parent
7b92e3fcd9
commit
26421c1537
4 changed files with 175 additions and 200 deletions
71
images/Time2wait.svg
Normal file
71
images/Time2wait.svg
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.0"
|
||||
width="180"
|
||||
height="185"
|
||||
id="wait"
|
||||
inkscape:version="0.48.5 r10040"
|
||||
sodipodi:docname="Time2wait.svg">
|
||||
<metadata
|
||||
id="metadata12">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs10" />
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1438"
|
||||
inkscape:window-height="828"
|
||||
id="namedview8"
|
||||
showgrid="false"
|
||||
inkscape:zoom="80.860654"
|
||||
inkscape:cx="68.458512"
|
||||
inkscape:cy="142.42279"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="wait" />
|
||||
<path
|
||||
d="M 163.85386,82.236035 C 170.58386,130.03604 140.18386,174.06604 95.94386,180.29604 C 51.683856,186.53604 10.383856,152.73604 3.683856,104.82604 C -2.9961436,56.936035 27.383856,12.936035 71.583856,6.7360356 C 115.78386,0.53603558 156.78386,34.336035 163.78386,82.236035 L 163.85386,82.236035 z"
|
||||
id="p1"
|
||||
style="fill:#b3b3b3" />
|
||||
<path
|
||||
d="M 175.052,82.236027 C 181.782,130.036 151.382,174.066 107.142,180.296 C 62.881986,186.536 21.581986,152.736 14.881986,104.826 C 8.2019864,56.936027 38.581986,12.936027 82.781986,6.7360273 C 126.982,0.5360273 167.98199,34.336027 174.98199,82.236027 L 175.05199,82.236027 z"
|
||||
id="p2"
|
||||
style="fill:#ac9d93" />
|
||||
<path
|
||||
d="M 159.03899,84.506075 C 164.41199,122.83603 140.08199,157.93603 104.682,162.93603 C 69.331986,167.92603 36.281986,140.936 30.881986,102.53603 C 25.581986,64.236027 49.881986,29.036027 85.281986,24.036027 C 120.682,19.136027 153.682,46.036 159.039,84.536027 L 159.039,84.536027 L 159.039,84.506075 z"
|
||||
id="p3"
|
||||
style="fill:#f2f2f2" />
|
||||
<path
|
||||
d="m 94.710027,35.543401 c 28.134753,0.422938 28.665603,8.035968 28.665603,8.035968 -0.17778,20.185893 -27.70917,32.761621 -27.421845,50.258056 0.109588,6.671885 6.718915,16.567425 12.558195,21.854265 5.8393,5.28682 12.47484,12.26543 13.53652,18.39815 1.0617,6.13271 1.85797,11.20807 1.85797,11.20807 0,0 -6.37014,9.30481 -27.073061,8.88187 -20.702941,-0.42295 -30.86089,-5.72148 -31.319825,-9.51629 -0.04365,-0.36094 2.296129,-11.03001 2.374696,-11.26549 3.212458,-9.63038 10.126793,-13.41616 15.143172,-20.244 0,0 9.137292,-12.4732 8.402689,-19.214893 -0.456827,-17.74315 -25.420495,-29.435829 -25.927349,-50.359738 0.0068,0 1.068484,-8.458915 29.203235,-8.035968 z"
|
||||
id="p4"
|
||||
style="fill:#d9d3d0;stroke:#ac9d93;stroke-width:3.5"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="scssscssccccs" />
|
||||
<path
|
||||
d="M 88,73.187504 C 86.33289,73.246848 84.637423,73.527617 82.90625,74.062504 C 83.422929,74.573829 84.987441,80.434987 87.312504,84.781252 C 89.229484,88.364701 91.45207,93.62493 92.312504,95.6875 L 92.312504,122.0625 C 90.861744,123.91035 88.414063,126.56646 85.12,128.96875 C 79.387722,133.1592 74.956,139.88555 68.75,149.9375 C 75.785285,151.64044 85.322962,153.53125 92,153.53125 C 98.677032,153.53125 112.02722,151.9842 119.0625,150.28126 C 114.62688,141.10249 108.20603,133.1592 102.46875,128.96875 C 99.25164,126.619 96.868885,124.02993 95.40625,122.1875 L 95.40625,94.406254 C 95.988527,91.889757 96.864204,88.504661 97.656251,87.093751 C 98.947947,84.792787 102.56249,76.093754 102.5625,76.093754 C 97.780212,74.646039 93.00132,73.00946 88,73.187504 L 88,73.187504 z"
|
||||
id="p5"
|
||||
style="fill:#ac9d93" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
|
|
@ -1,3 +1,26 @@
|
|||
function createCard(title, description, onDraw) {
|
||||
return { title, description, onDraw };
|
||||
}
|
||||
|
||||
const nothingCard = () => createCard("His job is not to wield power but to draw attention away from it.", "Do nothing.", () => {});
|
||||
const gainPointsCard = () => createCard("Don't Panic.", "Successfully study some properties", () => addPoints("study", getResetGain("study")));
|
||||
|
||||
const baseCards = () => {
|
||||
return [ nothingCard(), nothingCard(), nothingCard(), nothingCard(), nothingCard(), nothingCard(), gainPointsCard(), gainPointsCard(), gainPointsCard() ];
|
||||
};
|
||||
|
||||
const cardFormat = (card, id = "", width = "200px", height = "300px") => {
|
||||
// TODO observe/science symbol
|
||||
return ["display-text", `<div id="${id}" class="card ${id && "flipCard"}" style="width: ${width}; height: ${height};">
|
||||
<span style="border-bottom: 1px solid white; margin: 0; max-height: calc(50% - 30px); padding-bottom: 10px;">
|
||||
<h3>${card.title}</h3>
|
||||
</span>
|
||||
<span style="flex-basis: 0%;"><span>${card.description}</span></span>
|
||||
<span style="flex-shrink: 1"></span>
|
||||
<img src="images/Time2wait.svg"/>
|
||||
</div>`];
|
||||
};
|
||||
|
||||
addLayer("study", {
|
||||
name: "study",
|
||||
resource: "properties studied",
|
||||
|
|
@ -14,73 +37,46 @@ addLayer("study", {
|
|||
xp: new Decimal(0),
|
||||
lastLevel: new Decimal(0),
|
||||
realTime: 0,
|
||||
timeLoopActive: false
|
||||
timeLoopActive: false,
|
||||
drawPeriod: 10,
|
||||
drawProgress: 0,
|
||||
cards: baseCards(),
|
||||
lastCard: null
|
||||
};
|
||||
},
|
||||
getResetGain() {
|
||||
if (!tmp[this.layer].layerShown || (player.tab !== this.layer && !player[this.layer].timeLoopActive)) {
|
||||
return new Decimal(0);
|
||||
}
|
||||
let gain = new Decimal(1);
|
||||
let gain = new Decimal(10);
|
||||
gain = gain.times(new Decimal(1.1).pow(getJobLevel(this.layer)));
|
||||
return gain;
|
||||
},
|
||||
passiveGeneration: new Decimal(1),
|
||||
tabFormat: [
|
||||
"main-display",
|
||||
["display-text", () => `You are collecting <span style="color: ${flowersColor}; text-shadow: ${flowersColor} 0 0 10px">${format(tmp.flowers.getResetGain)}</span> flowers per second`],
|
||||
"blank",
|
||||
["display-text", () => {
|
||||
if (player.flowers.xp.lte(1e3)) {
|
||||
return "There's a very large field of flowers";
|
||||
}
|
||||
if (player.flowers.xp.lte(1e5)) {
|
||||
return "A small patch is missing from the field of flowers";
|
||||
}
|
||||
if (player.flowers.xp.lte(1e7)) {
|
||||
return "A medium patch is missing from the field of flowers";
|
||||
}
|
||||
if (player.flowers.xp.lte(4e8)) {
|
||||
return "A large patch is missing from the field of flowers";
|
||||
}
|
||||
if (player.flowers.xp.lte(9e8)) {
|
||||
return "The field of flowers looks about half way picked";
|
||||
}
|
||||
if (player.flowers.xp.lte(1e9)) {
|
||||
return "There are very few flowers left";
|
||||
}
|
||||
if (player.flowers.xp.gte(1e9) && player.chapter === 1) {
|
||||
return "The field is barren";
|
||||
}
|
||||
return "";
|
||||
}],
|
||||
"blank",
|
||||
["display-text", () => {
|
||||
if (!hasMilestone("flowers", 0)) {
|
||||
return "Discover new ways to harness the flower's power at level 2";
|
||||
}
|
||||
if (!hasMilestone("flowers", 1)) {
|
||||
return "Discover new ways to harness the flower's power at level 4";
|
||||
}
|
||||
if (!hasMilestone("flowers", 2)) {
|
||||
return "Discover new ways to harness the flower's power at level 6";
|
||||
}
|
||||
if (!hasMilestone("flowers", 3)) {
|
||||
return "Discover new ways to harness the flower's power at level 8";
|
||||
}
|
||||
if (!hasMilestone("flowers", 4)) {
|
||||
return "Discover new ways to harness the flower's power at level 10";
|
||||
}
|
||||
return "";
|
||||
}],
|
||||
() => player.chapter === 1 && hasMilestone("flowers", "4") ? ["upgrade", "nextChapter"] : null,
|
||||
"blank",
|
||||
"buyables",
|
||||
"blank",
|
||||
"upgrades"
|
||||
],
|
||||
tabFormat: {
|
||||
"Main": {
|
||||
content: () => [
|
||||
"main-display",
|
||||
["display-text", `Next draw in ${new Decimal(player.study.drawPeriod - player.study.drawProgress).clampMax(9.99).toFixed(2)} seconds`],
|
||||
"blank",
|
||||
player.study.lastCard == null ? null : cardFormat(player.study.lastCard, "mainCard")
|
||||
// TODO add milestones to buy new cards (2), remove cards(4), random encounters(6), and upgrade cards(8)
|
||||
]
|
||||
},
|
||||
"Deck": {
|
||||
content: () => [["row", player.study.cards.map(card => cardFormat(card))]]
|
||||
}
|
||||
},
|
||||
update(diff) {
|
||||
if (player.tab === this.layer || player[this.layer].timeLoopActive) {
|
||||
player[this.layer].realTime += diff;
|
||||
player[this.layer].drawProgress += diff;
|
||||
if (player[this.layer].drawProgress > player[this.layer].drawPeriod) {
|
||||
player[this.layer].drawProgress = 0;
|
||||
const newCard = player[this.layer].cards[Math.floor(Math.random() * player.study.cards.length)];
|
||||
// TODO proc lastCard
|
||||
newCard.onDraw();
|
||||
player[this.layer].lastCard = newCard;
|
||||
}
|
||||
}
|
||||
let jobLevel = new Decimal(getJobLevel(this.layer));
|
||||
if (jobLevel.neq(player[this.layer].lastLevel)) {
|
||||
|
|
@ -90,150 +86,8 @@ addLayer("study", {
|
|||
},
|
||||
onAddPoints(gain) {
|
||||
let xpGain = gain;
|
||||
if (hasUpgrade(this.layer, 13)) {
|
||||
xpGain = xpGain.times(upgradeEffect(this.layer, 13));
|
||||
}
|
||||
xpGain = xpGain.times(buyableEffect("flowers", 12));
|
||||
player[this.layer].xp = player[this.layer].xp.add(xpGain);
|
||||
},
|
||||
milestones: {
|
||||
0: {
|
||||
requirementDescription: "Level 2",
|
||||
done: () => player.flowers.xp.gte(10)
|
||||
},
|
||||
1: {
|
||||
requirementDescription: "Level 4",
|
||||
done: () => player.flowers.xp.gte(1e3)
|
||||
},
|
||||
2: {
|
||||
requirementDescription: "Level 6",
|
||||
done: () => player.flowers.xp.gte(1e5)
|
||||
},
|
||||
3: {
|
||||
requirementDescription: "Level 8",
|
||||
done: () => player.flowers.xp.gte(1e7)
|
||||
},
|
||||
4: {
|
||||
requirementDescription: "Level 10",
|
||||
done: () => player.flowers.xp.gte(1e9)
|
||||
}
|
||||
},
|
||||
buyables: {
|
||||
rows: 1,
|
||||
cols: 3,
|
||||
11: {
|
||||
title: "I tried to look at the thing in a scientific spirit<br/>",
|
||||
display() {
|
||||
return `Each casting of this spell increases its cost, and makes collecting flowers 50% faster.<br/><br/>Currently: x${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
|
||||
},
|
||||
cost(x) {
|
||||
return new Decimal(1000).times(new Decimal(3).pow(x || getBuyableAmount(this.layer, this.id)));
|
||||
},
|
||||
effect() {
|
||||
return new Decimal(1.5).pow(getBuyableAmount(this.layer, this.id));
|
||||
},
|
||||
canAfford() {
|
||||
return player[this.layer].points.gte(this.cost());
|
||||
},
|
||||
buy() {
|
||||
player[this.layer].points = player[this.layer].points.sub(this.cost());
|
||||
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
|
||||
},
|
||||
unlocked: () => hasMilestone("flowers", 1)
|
||||
},
|
||||
12: {
|
||||
title: "Why should I trouble myself?<br/>",
|
||||
display() {
|
||||
return `Each casting of this spell increases its cost, and doubles experience gain.<br/><br/>Currently: x${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
|
||||
},
|
||||
cost(x) {
|
||||
return new Decimal(10000).times(new Decimal(4).pow(x || getBuyableAmount(this.layer, this.id)));
|
||||
},
|
||||
effect() {
|
||||
return new Decimal(2).pow(getBuyableAmount(this.layer, this.id));
|
||||
},
|
||||
canAfford() {
|
||||
return player[this.layer].points.gte(this.cost());
|
||||
},
|
||||
buy() {
|
||||
player[this.layer].points = player[this.layer].points.sub(this.cost());
|
||||
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
|
||||
},
|
||||
unlocked: () => hasMilestone("flowers", 2)
|
||||
},
|
||||
13: {
|
||||
title: "And there was Weena dancing at my side!<br/>",
|
||||
display() {
|
||||
return `Each casting of this spell increases its cost, and raises flower collection rate to an additive +.05 power.<br/><br/>Currently: ^${format(this.effect())}<br/><br/>Cost: ${format(this.cost())} flowers`;
|
||||
},
|
||||
cost(x) {
|
||||
return new Decimal(250000).times(new Decimal(10).pow(x || getBuyableAmount(this.layer, this.id)));
|
||||
},
|
||||
effect() {
|
||||
return new Decimal(.05).times(getBuyableAmount(this.layer, this.id)).add(1);
|
||||
},
|
||||
canAfford() {
|
||||
return player[this.layer].points.gte(this.cost());
|
||||
},
|
||||
buy() {
|
||||
player[this.layer].points = player[this.layer].points.sub(this.cost());
|
||||
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1));
|
||||
},
|
||||
unlocked: () => hasMilestone("flowers", 3)
|
||||
}
|
||||
},
|
||||
upgrades: {
|
||||
rows: 1,
|
||||
cols: 4,
|
||||
nextChapter: {
|
||||
title: "And those that carry us forward, are dreams.<br/>",
|
||||
description: "Close the time loop.",
|
||||
unlocked: true,
|
||||
onPurchase() {
|
||||
showTab("none");
|
||||
player.chapter = 2;
|
||||
player.timeSlots = new Decimal(1);
|
||||
}
|
||||
},
|
||||
11: {
|
||||
title: "A chain of beautiful flowers<br>",
|
||||
description: "Increase collection speed based on how many flowers you have<br>",
|
||||
cost: new Decimal(10),
|
||||
effect: () => player.flowers.points.clampMin(1).pow(0.1).add(1),
|
||||
unlocked: () => hasMilestone("flowers", 0),
|
||||
effectDisplay() {
|
||||
return `x${format(this.effect())}`;
|
||||
}
|
||||
},
|
||||
12: {
|
||||
title: "A big garland of flowers<br>",
|
||||
description: "Increase collection speed based on your collecting flowers level",
|
||||
cost: new Decimal(100),
|
||||
effect: () => new Decimal(getJobLevel("flowers")).pow(2).div(10).add(1),
|
||||
unlocked: () => hasMilestone("flowers", 0),
|
||||
effectDisplay() {
|
||||
return `x${format(this.effect())}`;
|
||||
}
|
||||
},
|
||||
13: {
|
||||
title: "Weena's Gift<br>",
|
||||
description: "Increase experience gain based on real time spent collecting flowers",
|
||||
cost: new Decimal(250),
|
||||
effect: () => new Decimal(player.flowers.realTime).div(100).add(1),
|
||||
unlocked: () => hasMilestone("flowers", 0),
|
||||
effectDisplay() {
|
||||
return `x${format(this.effect())}`;
|
||||
}
|
||||
},
|
||||
14: {
|
||||
title: "White Sphinx<br>",
|
||||
description: "Increase flower collection based on the number of upgrades bought",
|
||||
cost: new Decimal(500),
|
||||
effect: () => Decimal.pow(1.5, player.flowers.upgrades.length),
|
||||
unlocked: () => hasMilestone("flowers", 0),
|
||||
effectDisplay() {
|
||||
return `x${format(this.effect())}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -78,6 +78,6 @@ function maxTickLength() {
|
|||
function fixOldSave(oldVersion){
|
||||
if (oldVersion === "0.0") {
|
||||
player.chapter = 1;
|
||||
player.flowers.points = player.flowers.points.clampMax(1e9);
|
||||
}
|
||||
console.log(oldVersion, player.chapter);
|
||||
}
|
||||
52
style.css
52
style.css
|
|
@ -730,9 +730,59 @@ button > * {
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 720px) {
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.col.right {
|
||||
min-width: 100%;
|
||||
background: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 10px;
|
||||
background: darkcyan;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
box-shadow: black 4px 4px 8px 0px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.card > span {
|
||||
flex-basis: 30%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card > img {
|
||||
max-width: 50%;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.flipCard {
|
||||
animation: flip 1s;
|
||||
}
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotateY(90deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue