Skip to content

Commit

Permalink
Hotfix, for not displaying points
Browse files Browse the repository at this point in the history
  • Loading branch information
Nerin3 committed Jun 21, 2023
1 parent 518c2a9 commit 96c094b
Show file tree
Hide file tree
Showing 5 changed files with 106 additions and 30 deletions.
8 changes: 7 additions & 1 deletion css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion css/main.css.map
View file

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions css/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,16 +52,21 @@ html {
border-radius: 1rem 1rem 0 0;
background: rgba(43, 14, 136, 0.75);
margin-bottom: -80px;
transition: margin-bottom 0.2s;
transition: margin-bottom 0.2s, opacity 0.2s;
overflow: hidden;
@media (min-resolution: 120dpi) {
max-width: 80px!important;

margin-bottom: -80px!important;
> div {
opacity: 0;
}
}
&:hover, &:active {
max-width: fit-content!important;
margin-bottom: 0!important;
> div {
opacity: 1;
}
}
.form-range {
max-width: 200px;
Expand Down
57 changes: 56 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -788,7 +788,7 @@ <h1 class="category-title pt-2 px-5">Races</h1>
<span class="text-white fs-5">Ah, my dear mortal, now that you have chosen to design your own body, it is time to select the race you shall embody. I have carefully curated four categories for your consideration.</span>
</div>
<div class="container-xl category-bg shadow-lg rounded p-4">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 justify-content-center g-2">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-4 justify-content-center g-2">
<div class="col">
<div class="card choice" id="common-race" data-points-karma="0" data-requires="design-body">
<div class="card-header card-img-overlay">
Expand Down Expand Up @@ -836,6 +836,61 @@ <h6 class="text-center conflicts d-none"></h6>
</div>
</div>
</div>
<!-- Common Races -->
<div class="category container-xl text-center mt-2 px-0 py-2 rounded d-none after-points" data-reveals="common-race">
<div class= "category-header category-bg rounded-top mb-0 py-1 px-4">
<h1 class="category-title pt-2 px-5">Common Races</h1>
<span class="text-white fs-5">Ah, you've chosen the realm of common races. Welcome to a world brimming with familiarity and tradition. Allow me to present you with four classic options, each possessing their own unique charms and strengths.</span>
</div>
<div class="container-xl category-bg shadow-lg rounded p-4">
<div class="row row-cols-1 row-cols-sm-1 row-cols-md-4 justify-content-center g-2">
<div class="col">
<div class="card choice" id="human-race" data-points-karma="0" data-requires="common-race">
<div class="card-header card-img-overlay">
<h3 class="category-title text-center">Human</h3>
<h5 class="text-center points"></h5>
<h6 class="text-center requires d-none"></h6>
<h6 class="text-center conflicts d-none"></h6>
</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>As versatile and adaptable as ever, humans are the most widespread race in your chosen world. Their resilience and ambition have shaped history, and their innate curiosity has led them to explore every corner of the land. As a human, you will experience a full range of emotions and desires, making your life a rich tapestry of experiences.</span></div>
</div>
</div>
<div class="col">
<div class="card choice" id="elf-race" data-points-karma="0" data-requires="arborea, fantasy-gaia, or">
<div class="card-header card-img-overlay">
<h3 class="category-title text-center">Elf</h3>
<h5 class="text-center points"></h5>
<h6 class="text-center requires"></h6>
<h6 class="text-center conflicts d-none"></h6>
</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Elegant and ethereal, elves are beings of grace and wisdom. Known for their longevity, they develop deep connections with the natural world and are often skilled in magic and archery. As an elf, your beauty will be mesmerizing, and you'll have an innate ability to captivate those around you.</span></div>
</div>
</div>
<div class="col">
<div class="card choice" id="dwarf-race" data-points-karma="0" data-requires="arborea, fantasy-gaia, or">
<div class="card-header card-img-overlay">
<h3 class="category-title text-center">Dwarf</h3>
<h5 class="text-center points"></h5>
<h6 class="text-center requires"></h6>
<h6 class="text-center conflicts d-none"></h6>
</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Sturdy and steadfast, dwarves are renowned for their craftsmanship and resilience. This race is closely connected to the earth and excels in mining and smithing, creating some of the finest weapons and armor in the world. As a dwarf, you will be a bastion of strength and determination in the face of adversity.</span></div>
</div>
</div>
<div class="col">
<div class="card choice" id="orc-race" data-points-karma="0" data-requires="arborea, fantasy-gaia, or">
<div class="card-header card-img-overlay">
<h3 class="category-title text-center">Orc</h3>
<h5 class="text-center points"></h5>
<h6 class="text-center requires"></h6>
<h6 class="text-center conflicts d-none"></h6>
</div><img src="https://placehold.co/300x400" class="card-img" alt="...">
<div class="card-body text-white p-2 text-center fs-6 bg-gradient"><span>Powerful and fierce, orcs are formidable warriors who command respect and fear on the battlefield. Their physical prowess and indomitable spirit make them a force to be reckoned with. As an orc, you will possess the raw, untamed power that others may find irresistible.</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- Sex Section -->
<div class="category container-xl text-center mt-2 px-0 py-2 rounded d-none after-points" data-reveals="design-body">
<div class= "category-header category-bg rounded-top mb-0 py-1 px-4">
Expand Down
60 changes: 35 additions & 25 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,17 +103,6 @@ class Point {
#getPoints = (element, attribute) => {
return element.getAttribute(attribute) ? parseInt(element.getAttribute(attribute)) : 0;
}
#setupBackpack = () => {
const backpack = document.getElementById("backpack");
const container = backpack.appendChild(document.createElement("div"));
container.classList.add("col");
container.setAttribute("id", this.name);
const title = container.appendChild(document.createElement("h4"));
title.classList.add("backpack-title");
const points = container.appendChild(document.createElement("span"));
points.textContent = "0";
points.classList.add("fs-4");
}
#setupCosts = () => {
const elements = document.getElementsByClassName('choice');
for (let element of elements) {
Expand All @@ -122,15 +111,8 @@ class Point {
this.setCosts(cost, pointsSpan);
}
}
changePrefix = (prefix = '') => {
this.prefix = prefix;
const points = document.getElementById(this.name).querySelector('.backpack-title');
points.textContent = `${this.prefix + ' ' + this.name.charAt(0).toUpperCase() + this.name.slice(1)}:`;
}
setup() {
this.#setupBackpack();
setup(inBackpack = false) {
this.#setupCosts();
this.changePrefix();
}
modifyCosts = (element, isPositive = true) => {
const dataModifier = this.#getPoints(element, element.getAttribute(`data-${this.name.toLowerCase()}-mod`));
Expand All @@ -155,22 +137,50 @@ class Point {
}
}
}
class mainCurrency extends Point {
constructor(name = '', value = 0) {
super(name, value);
}
#setupBackpack = () => {
const backpack = document.getElementById("backpack");
const container = backpack.appendChild(document.createElement("div"));
container.classList.add("col");
container.setAttribute("id", this.name);
const title = container.appendChild(document.createElement("h4"));
title.classList.add("backpack-title");
const points = container.appendChild(document.createElement("span"));
points.textContent = "0";
points.classList.add("fs-4");
}
changePrefix = (prefix = '') => {
this.prefix = prefix;
const points = document.getElementById(this.name).querySelector('.backpack-title');
points.textContent = `${this.prefix + ' ' + this.name.charAt(0).toUpperCase() + this.name.slice(1)}:`;
}
setup(inBackpack = false) {
super.setup();
this.#setupBackpack();
this.changePrefix();
}

}
class Bank {
constructor(vault = []) {
this.names = vault;
this.vault = [];
constructor(name = '$',vault = []) {
this.names = vault
this.names.unshift(name);
this.vault = [new mainCurrency(name)];
this.currencySetup();
}
currencySetup() {
for (let i = 0; i < this.names.length; i++) {
for (let i = 1; i < (this.names.length)+1; i++) {
this.vault[i] = new Point(this.names[i]);
}
}
}
const backpack = new Bank(['karma']);
const backpack = new Bank('karma');
const karma = backpack.vault[0];
karma.setup();
karma.changePrefix('Current:')
karma.changePrefix('Current')
let points = 0;
//Hide n Reveal
const hideHandler = () => {
Expand Down

0 comments on commit 96c094b

Please sign in to comment.