mirror of
https://github.com/thepaperpilot/The-Modding-Tree.git
synced 2025-03-14 18:11:38 +00:00
First pass at ritual book design
This commit is contained in:
parent
113928ec9a
commit
73bbd29e8b
2 changed files with 88 additions and 33 deletions
|
|
@ -8,11 +8,28 @@ Vue.component("rune", {
|
|||
}">
|
||||
</button>
|
||||
</div>`
|
||||
})
|
||||
});
|
||||
|
||||
Vue.component("ritual", {
|
||||
props: ["layer", "data"],
|
||||
template: `<div class="ritual">
|
||||
<span>
|
||||
<div v-for="(row, index) in data.pattern" v-key="index" style="text-align: center;">
|
||||
<div v-for="(symbol, index) in row" v-key="index" class="upgAlign" style="display: inline-block;">
|
||||
<span class="upg can rune"
|
||||
style="display: inline-block; width: 60px; min-height: 60px; font-size: xx-large; text-align: center; line-height: 60px;"
|
||||
v-bind:style="{ backgroundColor: symbol == null ? '#3a3e45' : ritualsColor }">{{ symbol == null ? '' : '#' + symbol }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<span style="margin: 0;"><h3>{{ data.title }}</h3>{{ data.description }}</span>
|
||||
</div>`
|
||||
});
|
||||
|
||||
const rituals = {
|
||||
xp: {
|
||||
title: "Ritual of Doctrina",
|
||||
description: "Each of these rituals exponentially increases the amount of ritual xp gained per second",
|
||||
pattern: [ [ 0, 1 ], [ 1, 0 ] ],
|
||||
effect: (amount, effectiveness) => Decimal.pow(4, amount).sub(1).times(effectiveness),
|
||||
effectDisplay: () => format(ritualEffect("xp")) + " xp/s",
|
||||
|
|
@ -20,6 +37,7 @@ const rituals = {
|
|||
},
|
||||
gain: {
|
||||
title: "Ritual of Emolumentum",
|
||||
description: "Each of these rituals increases the amount of each job's primary resource is gained",
|
||||
pattern: [ [ 0, 1, 1, 0 ] ],
|
||||
effect: (amount, effectiveness) => new Decimal(amount).times(effectiveness).add(1),
|
||||
effectDisplay: () => "x" + format(ritualEffect("gain")) + " all job's primary resources",
|
||||
|
|
@ -27,6 +45,7 @@ const rituals = {
|
|||
},
|
||||
improvement: {
|
||||
title: "Ritual of Melius",
|
||||
description: "Each of these rituals increases the effectiveness of all other rituals over time, with diminishing returns",
|
||||
pattern: [ [ 0, 1, 0 ], [ 1, 2, 1 ], [ 0, 1, 0 ] ],
|
||||
effect: amount => new Decimal(amount).times(.01),
|
||||
effectDisplay: () => "+" + format(ritualEffect("improvement")) + " increased effectiveness of all other ritual effects/s",
|
||||
|
|
@ -34,6 +53,7 @@ const rituals = {
|
|||
},
|
||||
globalXp: {
|
||||
title: "Ritual of Colegium",
|
||||
description: "Each of these rituals increases the amount of each job's xp gain",
|
||||
pattern: [ [ 0, null, 0 ], [ null, null, null ], [ 0, null, 0 ] ],
|
||||
effect: (amount, effectiveness) => new Decimal(amount).times(effectiveness).add(1),
|
||||
effectDisplay: () => "x" + format(ritualEffect("globalXp")) + " all job's xp gain",
|
||||
|
|
@ -41,6 +61,7 @@ const rituals = {
|
|||
},
|
||||
speed: {
|
||||
title: "Ritual of Celeritas",
|
||||
description: "Each of these rituals increases the flow of time itself",
|
||||
pattern: [ [ 0, null, null, 0 ], [ null, 1, 1, null ], [ null, 1, 1, null ], [ 0, null, null, 0 ] ],
|
||||
effect: (amount, effectiveness) => new Decimal(amount).times(effectiveness).add(1),
|
||||
effectDisplay: () => "x" + format(ritualEffect("speed")) + " global speed multiplier",
|
||||
|
|
@ -200,38 +221,53 @@ addLayer("rituals", {
|
|||
effectiveness: new Decimal(1)
|
||||
};
|
||||
},
|
||||
tabFormat: () => player.tab !== "rituals" ? [] : [
|
||||
["sticky", [0, ["row", [["bar", "job"], ["display-text", `<span style="margin-left: 20px;">Lv. ${getJobLevel("rituals")}</span>`]]]]],
|
||||
"blank",
|
||||
["display-text", (() => {
|
||||
if (!hasMilestone("rituals", 0)) {
|
||||
return "Discover new ways to harness the arcane power at level 2";
|
||||
}
|
||||
if (!hasMilestone("rituals", 1)) {
|
||||
return "Discover new ways to harness the arcane power at level 4";
|
||||
}
|
||||
if (!hasMilestone("rituals", 3)) {
|
||||
return "Discover new ways to harness the arcane power at level 6";
|
||||
}
|
||||
if (!hasMilestone("rituals", 4)) {
|
||||
return "Discover new ways to harness the arcane power at level 8";
|
||||
}
|
||||
if (!hasMilestone("rituals", 5)) {
|
||||
return "Discover new ways to harness the arcane power at level 10";
|
||||
}
|
||||
return "";
|
||||
})()],
|
||||
"blank",
|
||||
"buyables",
|
||||
"blank",
|
||||
["sticky", ["36px", ["clickables"]]],
|
||||
"blank",
|
||||
...new Array(getRows()).fill(0).map((_,row) => ["row", new Array(getCols()).fill(0).map((_,col) => ["rune", [row, col]])]),
|
||||
"blank",
|
||||
...Object.keys(rituals).filter(id => id in player.rituals.rituals && player.rituals.rituals[id] > 0).map(id => ["display-text", `${rituals[id].title} (${player.rituals.rituals[id]}): ${rituals[id].effectDisplay()}<br/>`]),
|
||||
"blank",
|
||||
["milestones-filtered", [2, 5, 6]]
|
||||
],
|
||||
tabFormat: {
|
||||
"Main": {
|
||||
content: () => player.tab !== "rituals" ? [] : [
|
||||
["sticky", [0, ["row", [["bar", "job"], ["display-text", `<span style="margin-left: 20px;">Lv. ${getJobLevel("rituals")}</span>`]]]]],
|
||||
"blank",
|
||||
["display-text", (() => {
|
||||
if (!hasMilestone("rituals", 0)) {
|
||||
return "Discover new ways to harness the arcane power at level 2";
|
||||
}
|
||||
if (!hasMilestone("rituals", 1)) {
|
||||
return "Discover new ways to harness the arcane power at level 4";
|
||||
}
|
||||
if (!hasMilestone("rituals", 3)) {
|
||||
return "Discover new ways to harness the arcane power at level 6";
|
||||
}
|
||||
if (!hasMilestone("rituals", 4)) {
|
||||
return "Discover new ways to harness the arcane power at level 8";
|
||||
}
|
||||
if (!hasMilestone("rituals", 5)) {
|
||||
return "Discover new ways to harness the arcane power at level 10";
|
||||
}
|
||||
return "";
|
||||
})()],
|
||||
"blank",
|
||||
"buyables",
|
||||
"blank",
|
||||
["sticky", ["36px", ["clickables"]]],
|
||||
"blank",
|
||||
...new Array(getRows()).fill(0).map((_,row) => ["row", new Array(getCols()).fill(0).map((_,col) => ["rune", [row, col]])]),
|
||||
"blank",
|
||||
...Object.keys(rituals).filter(id => id in player.rituals.rituals && player.rituals.rituals[id] > 0).map(id => ["display-text", `${rituals[id].title} (${player.rituals.rituals[id]}): ${rituals[id].effectDisplay()}<br/>`]),
|
||||
"blank",
|
||||
["milestones-filtered", [2, 5, 6]]
|
||||
],
|
||||
shouldNotify: () => Object.values(tmp.rituals.buyables).some(buyable => buyable.unlocked && buyable.canAfford)
|
||||
},
|
||||
"Ritual Book": {
|
||||
content: () => player.tab !== "rituals" ? [] : [
|
||||
["sticky", [0, ["row", [["bar", "job"], ["display-text", `<span style="margin-left: 20px;">Lv. ${getJobLevel("rituals")}</span>`]]]]],
|
||||
"blank",
|
||||
["display-text", "Form rituals in the grid to gain powerful effects. You can have multiples of each ritual, and runes can be a part of multiple, overlapping rituals.<br/><br/>For any ritual, replace the tiles with any rune, but each tile with the same number must have the same rune.<br/>Blank tiles can have anything in them."],
|
||||
"blank",
|
||||
"blank",
|
||||
...Object.values(rituals).filter(ritual => ritual.unlocked()).map(ritual => ["ritual", ritual])
|
||||
]
|
||||
}
|
||||
},
|
||||
update(diff) {
|
||||
if (player.tab === this.layer || player[this.layer].timeLoopActive) {
|
||||
if (player.generators.ritualsActive && (player.tab === "generators" || player.generators.timeLoopActive)) {
|
||||
|
|
|
|||
19
style.css
19
style.css
|
|
@ -1151,3 +1151,22 @@ b, h3 {
|
|||
.rune {
|
||||
transition-property: transform, box-shadow;
|
||||
}
|
||||
|
||||
.ritual {
|
||||
display: flex;
|
||||
width: 90%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.ritual * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ritual > span {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.ritual h3 {
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue