This commit is contained in:
Omsi 2021-08-18 16:11:30 -07:00
commit e0c5f9816c
7 changed files with 337 additions and 80 deletions

View File

@ -40,15 +40,52 @@ const PerkNetwork = {
minScale: 0.2,
maxScale: 4,
lastPerkNotation: "",
pulseTimer: 0,
initializeIfNeeded() {
const notation = Notations.current.name;
if (this.container !== undefined && notation === this.lastPerkNotation) return;
this.lastPerkNotation = notation;
this.makeNetwork();
this.network.on("click", params => {
const id = params.nodes[0];
if (!isFinite(id)) return;
Perks.find(id).purchase();
this.updatePerkColor();
this.updatePerkSize();
});
this.network.on("dragStart", () => {
const tooltip = this.container.getElementsByClassName("vis-tooltip")[0];
if (tooltip !== undefined) {
tooltip.style.visibility = "hidden";
}
});
// Change node side while dragging on Cancer theme, but skip the method otherwise because it's mildly intensive
this.network.on("dragging", () => {
SecretAchievement(45).tryUnlock();
if (Theme.current().name === "S4") PerkNetwork.updatePerkSize();
});
this.network.on("zoom", () => {
const scale = this.network.getScale();
const clampedScale = Math.clamp(scale, this.minScale, this.maxScale);
if (scale !== clampedScale) {
this.network.moveTo({ scale: clampedScale });
}
});
},
makeNetwork() {
// Just for a bit of fun, tangle it up a bit unless the player specifically chooses not to
const defaultPos = player.options.fixedPerkStartingPos;
this.nodes = new vis.DataSet(Perks.all.map(perk => ({
id: perk.id,
label: perk.config.label,
title: perk.config.description
title: perk.config.description,
x: defaultPos ? perk.config.defaultPosition.x : (100 * Math.random()),
y: defaultPos ? perk.config.defaultPosition.y : (100 * Math.random()),
})));
const edges = [];
@ -65,6 +102,7 @@ const PerkNetwork = {
nodes: this.nodes,
edges
};
const nodeOptions = {
interaction: {
hover: true,
@ -88,7 +126,8 @@ const PerkNetwork = {
selectionWidth: width => width,
color: {
inherit: "to"
}
},
hidden: ui.view.theme === "S9"
},
};
@ -104,30 +143,10 @@ const PerkNetwork = {
const network = new vis.Network(container, nodeData, nodeOptions);
this.network = network;
network.on("click", params => {
const id = params.nodes[0];
if (!isFinite(id)) return;
Perks.find(id).purchase();
this.updatePerkColors();
});
network.on("dragStart", () => {
const tooltip = container.getElementsByClassName("vis-tooltip")[0];
if (tooltip !== undefined) {
tooltip.style.visibility = "hidden";
}
});
network.on("dragging", () => SecretAchievement(45).tryUnlock());
network.on("zoom", () => {
const scale = network.getScale();
const clampedScale = Math.clamp(scale, this.minScale, this.maxScale);
if (scale !== clampedScale) {
network.moveTo({ scale: clampedScale });
}
});
},
forceNetworkRemake() {
this.container = undefined;
this.initializeIfNeeded();
},
resetPosition() {
this.network.moveTo({ position: { x: -600, y: -300 }, scale: 0.8, offset: { x: 0, y: 0 } });
@ -136,13 +155,14 @@ const PerkNetwork = {
const options = {
nodes: {
font: {
size: areVisible ? 20 : 0
size: areVisible ? 20 : 0,
color: Theme.current().isDark ? "#DDDDDD" : "#222222",
}
}
};
this.network.setOptions(options);
},
updatePerkColors() {
updatePerkColor() {
function nodeColor(perk) {
const canBeBought = perk.canBeBought;
const isBought = perk.isBought;
@ -152,12 +172,15 @@ const PerkNetwork = {
const secondaryColor = perkColor.secondary;
let backgroundColor;
if (canBeBought) backgroundColor = "#000000";
else if (isBought) backgroundColor = primaryColor;
else backgroundColor = "#656565";
if (canBeBought) {
if (Theme.current().isDark) backgroundColor = "#EEEEEE";
else backgroundColor = "#111111";
} else if (isBought) backgroundColor = primaryColor;
else if (Theme.current().isDark) backgroundColor = "#333333";
else backgroundColor = "#CCCCCC";
const hoverColor = canBeBought || isBought ? primaryColor : "#656565";
const borderColor = secondaryColor;
const borderColor = `${secondaryColor}`;
return {
background: backgroundColor,
@ -176,6 +199,23 @@ const PerkNetwork = {
const data = Perks.all
.map(perk => ({ id: perk.id, color: nodeColor(perk) }));
this.nodes.update(data);
},
updatePerkSize() {
function nodeSize(perk) {
PerkNetwork.pulseTimer += 0.1;
// Make the nodes pulse continuously on Cancer theme
const mod = Theme.current().name === "S4"
? 10 * Math.sin(5 * PerkNetwork.pulseTimer + 0.1 * perk._config.id)
: 0;
if (perk._config.label === "START") return 35 + mod;
if (perk.isBought) return 25 + mod;
if (perk.canBeBought) return 20 + mod;
return 12 + mod;
}
const data = Perks.all
.map(perk => ({ id: perk.id, size: nodeSize(perk) }));
this.nodes.update(data);
}
};
@ -187,14 +227,14 @@ Vue.component("perks-tab", {
}
},
created() {
EventHub.ui.on(GAME_EVENT.PERK_BOUGHT, () => PerkNetwork.updatePerkColors());
EventHub.ui.on(GAME_EVENT.REALITY_RESET_AFTER, () => PerkNetwork.updatePerkColors());
EventHub.ui.on(GAME_EVENT.PERK_BOUGHT, () => PerkNetwork.updatePerkColor());
},
mounted() {
PerkNetwork.initializeIfNeeded();
if (ui.view.theme === "S9") PerkNetwork.setLabelVisibility(false);
else PerkNetwork.setLabelVisibility(ui.view.shiftDown || player.options.showHintText.perks);
PerkNetwork.updatePerkColors();
PerkNetwork.updatePerkColor();
PerkNetwork.updatePerkSize();
PerkNetwork.resetPosition();
this.$refs.tab.appendChild(PerkNetwork.container);
},

View File

@ -3,16 +3,31 @@
Vue.component("pp-label", {
data() {
return {
pp: 0
pp: 0,
fixedLoadPos: false,
};
},
watch: {
fixedLoadPos(newValue) {
player.options.fixedPerkStartingPos = newValue;
},
},
methods: {
update() {
this.pp = Math.floor(Currency.perkPoints.value);
this.fixedLoadPos = player.options.fixedPerkStartingPos;
}
},
template: `
<div class="c-perk-tab__header">
You have <span class="c-perk-tab__perk-points">{{ format(pp, 2, 0) }}</span> {{ "Perk Point" | pluralize(pp) }}.
<br>
Perk choices are permanent and cannot be respecced.
<br>
<primary-button-on-off
v-model="fixedLoadPos"
class="o-primary-btn"
text="Lay out tree as untangled:"
/>
</div>`
});

View File

@ -42,6 +42,7 @@ const Theme = function Theme(name, colors) {
player.options.theme = name;
ui.view.theme = name;
window.getSelection().removeAllRanges();
PerkNetwork.forceNetworkRemake();
};
this.isDark = colors.isDark;

View File

@ -673,6 +673,7 @@ let player = {
hiddenSubtabBits: Array.repeat(0, 10),
lastOpenTab: 0,
lastOpenSubtab: Array.repeat(0, 10),
fixedPerkStartingPos: false,
},
IAP: {
totalSTD: 0,

View File

@ -316,8 +316,8 @@ GameDatabase.achievements.normal = [
get description() { return `Infinity in ${formatInt(1)} minute or less.`; },
checkRequirement: () => Time.thisInfinityRealTime.totalMinutes <= 1,
checkEvent: GAME_EVENT.BIG_CRUNCH_BEFORE,
get reward() { return `Start with ${format(1e10)} antimatter.`; },
effect: 1e10
get reward() { return `Start with ${format(2e10)} antimatter.`; },
effect: 2e10
},
{
id: 56,

View File

@ -20,16 +20,24 @@ GameDatabase.reality.perks = {
and allow you to choose from ${formatInt(4)} different Glyphs on Reality`;
},
effect: 4,
defaultPosition: {
x: 0,
y: 0
}
},
startAM: {
id: 10,
label: "SAM",
family: PERK_FAMILY.ANTIMATTER,
get description() {
return `Start every reset with ${format(1e130)} antimatter.`;
return `Start every reset with ${format(2e130)} antimatter.`;
},
bumpCurrency: () => Currency.antimatter.bumpTo(1e130),
effect: 1e130
bumpCurrency: () => Currency.antimatter.bumpTo(2e130),
effect: 2e130,
defaultPosition: {
x: -190,
y: 0
}
},
startIP1: {
id: 12,
@ -39,7 +47,11 @@ GameDatabase.reality.perks = {
return `Start every Eternity and Reality with ${format(2e15)} Infinity Points.`;
},
bumpCurrency: () => Currency.infinityPoints.bumpTo(2e15),
effect: 2e15
effect: 2e15,
defaultPosition: {
x: -375,
y: -15
}
},
startIP2: {
id: 13,
@ -49,7 +61,11 @@ GameDatabase.reality.perks = {
return `Start every Eternity and Reality with ${format(2e130)} Infinity Points.`;
},
bumpCurrency: () => Currency.infinityPoints.bumpTo(2e130),
effect: 2e130
effect: 2e130,
defaultPosition: {
x: -445,
y: -175
}
},
startEP1: {
id: 14,
@ -59,7 +75,11 @@ GameDatabase.reality.perks = {
return `Start every Reality with ${formatInt(10)} Eternity Points.`;
},
bumpCurrency: () => Currency.eternityPoints.bumpTo(10),
effect: 10
effect: 10,
defaultPosition: {
x: -415,
y: 165
}
},
startEP2: {
id: 15,
@ -69,7 +89,11 @@ GameDatabase.reality.perks = {
return `Start every Reality with ${format(2000)} Eternity Points.`;
},
bumpCurrency: () => Currency.eternityPoints.bumpTo(2000),
effect: 2000
effect: 2000,
defaultPosition: {
x: -565,
y: 205
}
},
startEP3: {
id: 16,
@ -79,7 +103,11 @@ GameDatabase.reality.perks = {
return `Start every Reality with ${format(1e9)} Eternity Points.`;
},
bumpCurrency: () => Currency.eternityPoints.bumpTo(1e9),
effect: 1e9
effect: 1e9,
defaultPosition: {
x: -700,
y: 240
}
},
startTP: {
id: 17,
@ -88,14 +116,22 @@ GameDatabase.reality.perks = {
get description() {
return `After unlocking Dilation, gain ${formatInt(10)} Tachyon Particles.`;
},
effect: () => (Enslaved.isRunning ? 1 : 10)
effect: () => (Enslaved.isRunning ? 1 : 10),
defaultPosition: {
x: -385,
y: 335
}
},
antimatterNoReset: {
id: 30,
label: "ANR",
family: PERK_FAMILY.ANTIMATTER,
description: `Dimension Boosts and Antimatter Galaxies no longer reset
Antimatter, Antimatter Dimensions, Tickspeed, or Dimensional Sacrifice.`
Antimatter, Antimatter Dimensions, Tickspeed, or Dimensional Sacrifice.`,
defaultPosition: {
x: -275,
y: 120
}
},
studyPassive: {
id: 31,
@ -105,13 +141,21 @@ GameDatabase.reality.perks = {
return `Improve Time Study 122 to ${formatX(50)} Eternity Points and
Time Study 142 to ${formatX(1e50)} Infinity Points.
In addition, Time Study 132 also makes Replicanti ${format(3)} times faster.`;
},
defaultPosition: {
x: 300,
y: -130
}
},
autounlockEU1: {
id: 40,
label: "EU1",
family: PERK_FAMILY.ETERNITY,
description: "The first row of eternity upgrades automatically unlock after the first Eternity of a Reality."
description: "The first row of eternity upgrades automatically unlock after the first Eternity of a Reality.",
defaultPosition: {
x: 50,
y: 150
}
},
autounlockEU2: {
id: 41,
@ -120,31 +164,51 @@ GameDatabase.reality.perks = {
get description() {
return `The second row of eternity upgrades automatically unlock
at ${formatX(1e10)} times less than their original price`;
},
defaultPosition: {
x: 50,
y: 325
}
},
autounlockDilation1: {
id: 42,
label: "UD1",
family: PERK_FAMILY.DILATION,
description: "After unlocking Dilation, auto-unlock the second row of Dilation Upgrades."
description: "After unlocking Dilation, auto-unlock the second row of Dilation Upgrades.",
defaultPosition: {
x: 165,
y: 565
}
},
autounlockDilation2: {
id: 43,
label: "UD2",
family: PERK_FAMILY.DILATION,
description: "After unlocking Dilation, auto-unlock the third row of Dilation Upgrades."
description: "After unlocking Dilation, auto-unlock the third row of Dilation Upgrades.",
defaultPosition: {
x: 310,
y: 605
}
},
autounlockDilation3: {
id: 44,
label: "ATT",
family: PERK_FAMILY.DILATION,
description: "Auto-unlock the passive Time Theorem generation Dilation Upgrade once you can afford it."
description: "Auto-unlock the passive Time Theorem generation Dilation Upgrade once you can afford it.",
defaultPosition: {
x: 460,
y: 580
}
},
autounlockTD: {
id: 45,
label: "ATD",
family: PERK_FAMILY.DILATION,
description: "Auto-unlock Time Dimensions 5-8 once you can afford them."
description: "Auto-unlock Time Dimensions 5-8 once you can afford them.",
defaultPosition: {
x: 605,
y: 575
}
},
autounlockReality: {
id: 46,
@ -153,50 +217,82 @@ GameDatabase.reality.perks = {
get description() {
return `Auto-unlocks Reality once you have ${format("1e4000")} Eternity Points
and have unlocked Time Dimension 8.`;
},
defaultPosition: {
x: 725,
y: 505
}
},
bypassIDAntimatter: {
id: 51,
label: "IDR",
family: PERK_FAMILY.INFINITY,
description: "Infinity Dimensions no longer have antimatter requirements."
description: "Infinity Dimensions no longer have antimatter requirements.",
defaultPosition: {
x: -580,
y: -230
}
},
bypassTGReset: {
id: 52,
label: "TGR",
family: PERK_FAMILY.DILATION,
description: "The 2nd rebuyable Dilation Upgrade no longer resets your Dilated Time."
description: "The 2nd rebuyable Dilation Upgrade no longer resets your Dilated Time.",
defaultPosition: {
x: -145,
y: 520
}
},
bypassECDilation: {
id: 53,
label: "DILR",
family: PERK_FAMILY.DILATION,
description: "Remove the Eternity Challenge 11, Eternity Challenge 12, and total Time Theorem " +
"requirements from Time Dilation unlock."
"requirements from Time Dilation unlock.",
defaultPosition: {
x: 0,
y: 640
}
},
bypassEC1Lock: {
id: 54,
label: "EC1R",
family: PERK_FAMILY.ETERNITY,
description: "Remove the Eternity Challenge 1 requirement from Time Study 181."
description: "Remove the Eternity Challenge 1 requirement from Time Study 181.",
defaultPosition: {
x: 450,
y: -160
}
},
bypassEC2Lock: {
id: 55,
label: "EC2R",
family: PERK_FAMILY.ETERNITY,
description: "Remove the Eternity Challenge 2 requirement from Time Study 181."
description: "Remove the Eternity Challenge 2 requirement from Time Study 181.",
defaultPosition: {
x: 350,
y: -270
}
},
bypassEC3Lock: {
id: 56,
label: "EC3R",
family: PERK_FAMILY.ETERNITY,
description: "Remove the Eternity Challenge 3 requirement from Time Study 181."
description: "Remove the Eternity Challenge 3 requirement from Time Study 181.",
defaultPosition: {
x: 410,
y: -25
}
},
bypassEC5Lock: {
id: 57,
label: "EC5R",
family: PERK_FAMILY.ETERNITY,
description: "Remove the Eternity Challenge 5 requirement from Time Study 62."
description: "Remove the Eternity Challenge 5 requirement from Time Study 62.",
defaultPosition: {
x: 155,
y: -85
}
},
autocompleteEC1: {
id: 60,
@ -205,7 +301,11 @@ GameDatabase.reality.perks = {
get description() {
return `Auto-complete one Eternity Challenge every ${formatInt(80)} minutes (real-time).`;
},
effect: 80
effect: 80,
defaultPosition: {
x: 345,
y: 135
}
},
autocompleteEC2: {
id: 61,
@ -214,7 +314,11 @@ GameDatabase.reality.perks = {
get description() {
return `Auto-complete one Eternity Challenge every ${formatInt(50)} minutes (real-time).`;
},
effect: 50
effect: 50,
defaultPosition: {
x: 425,
y: 235
}
},
autocompleteEC3: {
id: 62,
@ -223,7 +327,11 @@ GameDatabase.reality.perks = {
get description() {
return `Auto-complete one Eternity Challenge every ${formatInt(30)} minutes (real-time).`;
},
effect: 30
effect: 30,
defaultPosition: {
x: 325,
y: 325
}
},
autocompleteEC4: {
id: 63,
@ -232,13 +340,21 @@ GameDatabase.reality.perks = {
get description() {
return `Auto-complete one Eternity Challenge every ${formatInt(20)} minutes (real-time).`;
},
effect: 20
effect: 20,
defaultPosition: {
x: 205,
y: 270
}
},
studyActiveEP: {
id: 70,
label: "ACT",
family: PERK_FAMILY.ETERNITY,
description: "Active path multipliers are always maximized."
description: "Active path multipliers are always maximized.",
defaultPosition: {
x: 195,
y: -260
}
},
studyIdleEP: {
id: 71,
@ -247,13 +363,21 @@ GameDatabase.reality.perks = {
get description() {
return `Idle path multipliers start as if you have spent ${formatInt(15)} minutes in this Infinity/Eternity.`;
},
effect: 15
effect: 15,
defaultPosition: {
x: 265,
y: 25
}
},
studyECRequirement: {
id: 72,
label: "ECR",
family: PERK_FAMILY.ETERNITY,
description: "Remove nonTime Theorem requirements for unlocking Eternity Challenges."
description: "Remove nonTime Theorem requirements for unlocking Eternity Challenges.",
defaultPosition: {
x: 605,
y: -160
}
},
studyECBulk: {
id: 73,
@ -261,7 +385,11 @@ GameDatabase.reality.perks = {
family: PERK_FAMILY.ETERNITY,
description:
`You can complete multiple tiers of Eternity Challenges at once if
you reach the goal for a higher completion of that challenge.`
you reach the goal for a higher completion of that challenge.`,
defaultPosition: {
x: 740,
y: -135
}
},
retroactiveTP1: {
id: 80,
@ -271,7 +399,11 @@ GameDatabase.reality.perks = {
return `When buying the "You gain ${formatInt(3)} times more Tachyon Particles" Dilation Upgrade,
multiply your current Tachyon Particle amount by ${formatFloat(1.5, 1)}.`;
},
effect: 1.5
effect: 1.5,
defaultPosition: {
x: -290,
y: 460
}
},
retroactiveTP2: {
id: 81,
@ -281,7 +413,11 @@ GameDatabase.reality.perks = {
return `When buying the "You gain ${formatInt(3)} times more Tachyon Particles" Dilation Upgrade,
multiply your current Tachyon Particle amount by ${formatInt(2)}.`;
},
effect: 2
effect: 2,
defaultPosition: {
x: -200,
y: 360
}
},
retroactiveTP3: {
id: 82,
@ -291,7 +427,11 @@ GameDatabase.reality.perks = {
return `When buying the "You gain ${formatInt(3)} times more Tachyon Particles" Dilation Upgrade,
multiply your current Tachyon Particle amount by ${formatFloat(2.5, 1)}.`;
},
effect: 2.5
effect: 2.5,
defaultPosition: {
x: -120,
y: 260
}
},
retroactiveTP4: {
id: 83,
@ -301,13 +441,21 @@ GameDatabase.reality.perks = {
return `When buying the "You gain ${formatInt(3)} times more Tachyon Particles" Dilation Upgrade,
multiply your current Tachyon Particle amount by ${formatInt(3)}.`;
},
effect: 3
effect: 3,
defaultPosition: {
x: -65,
y: 145
}
},
autobuyerDilation: {
id: 100,
label: "DAU",
family: PERK_FAMILY.AUTOMATION,
description: "Unlock autobuyers for the repeatable Dilation Upgrades."
description: "Unlock autobuyers for the repeatable Dilation Upgrades.",
defaultPosition: {
x: 20,
y: 500
}
},
autobuyerFasterID: {
id: 101,
@ -317,6 +465,10 @@ GameDatabase.reality.perks = {
return `Infinity Dimension autobuyers work ${formatX(3)} faster.`;
},
effect: 1 / 3,
defaultPosition: {
x: -515,
y: -20
}
},
autobuyerFasterReplicanti: {
id: 102,
@ -326,6 +478,10 @@ GameDatabase.reality.perks = {
return `Replicanti autobuyers work ${formatX(3)} faster.`;
},
effect: 1 / 3,
defaultPosition: {
x: -425,
y: -310
}
},
autobuyerFasterDilation: {
id: 103,
@ -335,6 +491,10 @@ GameDatabase.reality.perks = {
return `Dilation Upgrade autobuyers work ${formatX(3)} faster.`;
},
effect: 1 / 3,
defaultPosition: {
x: 490,
y: 450
}
},
autobuyerTT1: {
id: 104,
@ -344,6 +504,10 @@ GameDatabase.reality.perks = {
return `Unlock a Time Theorem Autobuyer that autobuys max Time Theorems every ${formatInt(4)} seconds.`;
},
effect: 4,
defaultPosition: {
x: 190,
y: -410
}
},
autobuyerTT2: {
id: 105,
@ -351,6 +515,10 @@ GameDatabase.reality.perks = {
family: PERK_FAMILY.AUTOMATION,
description: "Upgrade the Time Theorem Autobuyer to autobuy max Time Theorems every second.",
effect: 1,
defaultPosition: {
x: 255,
y: -540
}
},
autobuyerTT3: {
id: 106,
@ -360,6 +528,10 @@ GameDatabase.reality.perks = {
return `Upgrade the Time Theorem Autobuyer to max Time Theorems ${formatInt(2)} times per second.`;
},
effect: 0.5,
defaultPosition: {
x: 360,
y: -625
}
},
autobuyerTT4: {
id: 107,
@ -369,6 +541,10 @@ GameDatabase.reality.perks = {
return `Upgrade the Time Theorem Autobuyer to max Time Theorems ${formatInt(4)} times per second.`;
},
effect: 0.25,
defaultPosition: {
x: 485,
y: -675
}
},
achievementGroup1: {
id: 201,
@ -378,7 +554,11 @@ GameDatabase.reality.perks = {
return `Reduce the Achievement timer to ${formatInt(20)} minutes per
Achievement (${formatInt(10)} minute decrease).`;
},
effect: 10
effect: 10,
defaultPosition: {
x: -45,
y: -135
}
},
achievementGroup2: {
id: 202,
@ -388,7 +568,11 @@ GameDatabase.reality.perks = {
return `Reduce the Achievement timer to ${formatInt(14)} minutes per
Achievement (${formatInt(6)} minute decrease).`;
},
effect: 6
effect: 6,
defaultPosition: {
x: -115,
y: -250
}
},
achievementGroup3: {
id: 203,
@ -398,7 +582,11 @@ GameDatabase.reality.perks = {
return `Reduce the Achievement timer to ${formatInt(9)} minutes per
Achievement (${formatInt(5)} minute decrease).`;
},
effect: 5
effect: 5,
defaultPosition: {
x: -175,
y: -365
}
},
achievementGroup4: {
id: 204,
@ -408,7 +596,11 @@ GameDatabase.reality.perks = {
return `Reduce the Achievement timer to ${formatInt(5)} minutes per
Achievement (${formatInt(4)} minute decrease).`;
},
effect: 4
effect: 4,
defaultPosition: {
x: -180,
y: -500
}
},
achievementGroup5: {
id: 205,
@ -418,14 +610,22 @@ GameDatabase.reality.perks = {
return `Reduce the Achievement timer to ${formatInt(2)} minutes per
Achievement (${formatInt(3)} minute decrease).`;
},
effect: 3
effect: 3,
defaultPosition: {
x: -195,
y: -630
}
},
achievementGroup6: {
id: 206,
label: "ACHNR",
family: PERK_FAMILY.ACHIEVEMENT,
description: "Reality no longer resets your Achievements.",
effect: 2
effect: 2,
defaultPosition: {
x: -225,
y: -755
}
}
};

View File

@ -8544,7 +8544,7 @@ input.o-automator-block-input {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 90rem;
height: 50rem;
border: 0.1rem solid black;
border: 0.2rem solid black;
}
.c-perk-network__canvas {