I am making a witcher themed page as a side project and have come across a problem. I have made an alchemy page and have all ingredients listed, with all elements that can be extracted beside them. I have made a function that triggers animation with the following logic: Clicking an ingredient will trigger the animations for the according elements that can be extracted from said ingredient. For example: Fool's parsley can produce Rubedo and Vitriol, upon clicking fools parsley, rubedo shines red and vitriol blue. My problem is that once an animation is triggered once, it wont trigger again if needed for another ingredient. Example: Fools parsley makes rubedo and vitriol shine, Cadaverine makes rubedo and aether shine. If i click fools parsley, then Cadaverine, when cadaverine is clicked, only aether will shine because rubedo was already triggered once. This also makes clicking the same ingredient twice pointless, as the second time none of the elements will shine.
Here is the code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alchemy</title>
<link rel="stylesheet" href="alchemy-page-style.css">
</head>
<body>
<script type="text/javascript" src="alchemy-page.js"></script>
<!--<audio id="source" autoplay loop>
<source src="C:\Users\user\AngularProjects\The ModernWitcher's Journal\audio\pages\home-page-theme.mp3">
</audio>-->
<div class="container">
<br>
<h1 class="homepage-title">
<img src="../images/witcher-transparent.png"
class="witcher-transparent-logo">
Alchemy
<img src="../images/witcher-transparent.png"
class="witcher-transparent-logo">
</h1>
<div class="grid-col">
<div class="grid-ingredients">
<div>
<ul>
<h2>Herbal Extracts</h2>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Allspice_root.png);"
onclick="lightUpElements(['aether', 'nigredo'])">Allspice root</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Balisse_fruit.png);"
onclick="lightUpElements(['quebirth', 'rubedo'])">Balisse fruit</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Beggartick_blossom.png);"
onclick="lightUpElements(['hydragenum', 'rubedo'])">Beggartick blossom</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Berbercane_fruit.png);"
onclick="lightUpElements(['aether', 'albedo'])">Berbercane fruit</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Bryonia.png);"
onclick="lightUpElements(['vermilion', 'nigredo'])">Bryonia</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Celandine.png);"
onclick="lightUpElements(['rebis', 'nigredo'])">Celandine</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Crows_eye.png);"
onclick="lightUpElements(['vitriol', 'nigredo'])">Crow's eye</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Ergot_seeds.png);"
onclick="lightUpElements(['vermilion', 'rubedo'])">Ergot seeds</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Feainnewedd.png);"
onclick="lightUpElements(['vermilion', 'rubedo'])">Feainnewedd</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Fools_parsley_leaves.png);"
onclick="lightUpElements(['quebirth', 'rubedo'])">Fool's parsley leaves</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Ginatia_petals.png);"
onclick="lightUpElements(['aether', 'nigredo'])">Ginatia petals</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Green_mold.png);"
onclick="lightUpElements(['rebis', 'rubedo'])">Green mold</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Han.png);"
onclick="lightUpElements(['rebis', 'nigredo'])">Han</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Hellebore_petals.png);"
onclick="lightUpElements(['aether', 'rubedo'])">Hellebore petals</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Honeysuckle.png);"
onclick="lightUpElements(['quebirth', 'albedo'])">Honeysuckle</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Hop_umbels.png);"
onclick="lightUpElements(['vitriol', 'nigredo'])">Hop umbels</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Mandrake_root.png);"
onclick="lightUpElements(['quebirth', 'nigredo'])">Mandrake root</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Mistletoe.png);"
onclick="lightUpElements(['hydragenum', 'nigredo'])">Mistletoe</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Sewants.png);"
onclick="lightUpElements(['vitriol', 'rubedo'])">Sewant mushroom</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Verbena.png);"
onclick="lightUpElements(['quebirth', 'albedo'])">Verbena</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/White_myrtle_petals.png);"
onclick="lightUpElements(['vitriol', 'albedo'])">White myrtle petals</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Wolfs_aloe.png);"
onclick="lightUpElements(['hydragenum', 'albedo'])">Wolf's aloe leaves</li>
<li
style="list-style-image: url(../images/icons/alchemy/ingredients/herbs/Wolfsbane.png);"
onclick="lightUpElements(['vermilion', 'albedo'])">Wolfsbane</li>
</ul>
<div class="grid-elements">
<div>
<ul>
<h2>Elements</h2>
<li style="list-style-image: url(../images/icons/alchemy/elements/Vitriol.png);" >
<span id="vitriol">Vitriol</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Rebis.png);">
<span id="rebis">Rebis</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Aether.png);">
<span id="aether">Aether</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Quebrith.png);">
<span id="quebirth">Quebirth</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Hydragenum.png);">
<span id="hydragenum">Hydragenum</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Vermilion.png);">
<span id="vermilion">Vermilion</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Albedo.png);">
<span id="albedo">Albedo</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Nigredo.png);">
<span id="nigredo">Nigredo</span>
</li>
<li style="list-style-image: url(../images/icons/alchemy/elements/Rubedo.png);">
<span id="rubedo">Rubedo</span>
</li>
</ul>
</div>
</div>
<div class="grid-descriptions">
<p id="description"></p>
</div>
</div>
</div>
</body>
</html>
JS
let elementList = [];
let color = '';
var i = 0;
const vitriol = document.getElementById('vitriol');
const rebis = document.getElementById('rebis');
const aether = document.getElementById('aether');
const quebirth = document.getElementById('quebirth');
const hydragenum = document.getElementById('hydragenum');
const vermilion = document.getElementById('vermilion');
const albedo = document.getElementById('albedo');
const nigredo = document.getElementById('nigredo');
const rubedo = document.getElementById('rubedo');
function lightUpElements(elementList)
{
for(i = 0; i < elementList.length; i++)
{
if(elementList[i] == 'vitriol')
{
this.vitriol.style.animation = "vitriolShine 0.5s alternate 6";
}
if(elementList[i] == 'rebis')
{
this.rebis.style.animation = "rebisShine 0.5s alternate 6";
}
if(elementList[i] == 'hydragenum')
{
this.hydragenum.style.animation = "hydragenumShine 0.5s alternate 6";
}
if(elementList[i] == 'quebirth')
{
this.quebirth.style.animation = "quebirthShine 0.5s alternate 6";
}
if(elementList[i] == 'vermilion')
{
this.vermilion.style.animation = "vermilionShine 0.5s alternate 6";
}
if(elementList[i] == 'albedo')
{
this.albedo.style.animation = "albedoShine 0.5s alternate 6";
}
if(elementList[i] == 'nigredo')
{
this.nigredo.style.animation = "nigredoShine 0.5s alternate 6";
}
if(elementList[i] == 'rubedo')
{
this.rubedo.style.animation = "rubedoShine 0.5s alternate 6";
}
if(elementList[i] == 'aether')
{
this.aether.style.animation = "aetherShine 0.5s alternate 6";
}
}
}
CSS
@font-face {
src: url(../fonts/FantaisieArtistique/FantaisieArtistique.ttf);
font-family: witcher;
}
@font-face {
font-family: wonderland;
src: url(../fonts/BeyondWonderland/Beyond\ Wonderland.ttf);
}
@font-face {
font-family: witcher-videogame;
src: url(fonts/WitcherVideogame/Thewitcher-jnOj.ttf);
}
@font-face {
font-family: journal;
src: url(../fonts/Journal/Handwritten_Crystal_v2.ttf);
}
@keyframes elementsFadeIn {
from{opacity: 0;}
to{opacity: 1;}
}
@keyframes vitriolShine {
from{opacity: 1;}
to
{
background-color: rgba(0, 217, 255, 0.507);
border-radius: 10px;
}
}
@keyframes rebisShine {
from{opacity: 1;}
to
{
background-color: rgba(0, 255, 76, 0.507);
border-radius: 10px;
}
}
@keyframes aetherShine {
from{opacity: 1;}
to
{
background-color: rgba(195, 0, 255, 0.507);
border-radius: 10px;
}
}
@keyframes quebirthShine {
from{opacity: 1;}
to
{
background-color: rgba(251, 255, 0, 0.507);
border-radius: 10px;
}
}
@keyframes hydragenumShine {
from{opacity: 1;}
to
{
background-color: rgb(226, 226, 226);
border-radius: 10px;
}
}
@keyframes vermilionShine {
from{opacity: 1;}
to
{
background-color: rgba(109, 74, 0, 0.541);
border-radius: 10px;
}
}
@keyframes albedoShine {
from{opacity: 1;}
to
{
background-color: rgb(255, 255, 255);
border-radius: 10px;
}
}
@keyframes nigredoShine {
from{opacity: 1;}
to
{
background-color: rgba(0, 0, 0, 0.541);
border-radius: 10px;
}
}
@keyframes rubedoShine {
from{opacity: 1;}
to
{
background-color: rgba(109, 0, 0, 0.541);
border-radius: 10px;
}
}
html, body
{
height: 100%;
margin: 0;
padding: 0;
}
.container
{
background-image: url(../images/witcher-bestiary-background.jpg);
height: max-content;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
position: relative;
text-align: center;
animation: elementsFadeIn 1s;
}
.homepage-title
{
margin: 0 auto;
font-family: witcher;
font-size: 45px;
color: rgb(189, 0, 0);
animation: elementsFadeIn 2s;
}
.homepage-title .witcher-transparent-logo
{
bottom: 0;
background: rgba(231, 228, 228, 0.342);
border-radius: 5px;
border-style:hidden;
height: 30px;
width: 30px;
animation: elementsFadeIn 3s;
}
.grid-col
{
display:grid;
grid-template-columns: repeat(2, 300px);
justify-content: center;
padding-bottom: 50px;
margin-top: 5vh;
}
h2
{
font-family: journal;
color: rgb(180, 0, 0);
}
li
{
font-family: journal;
font-size: large;
list-style-position: inside;
justify-content: center;
}
.grid-ingredients
{
display: grid;
grid-template-columns: repeat(1);
height: max-content;
border: 10px solid transparent;
padding: 0px;
border-image: url(../images/border.png) 70 round;
background-image: url(../images/icons/notebook-clipart-old-writing-paper-5.png);
background-repeat:repeat-y;
background-position: center;
background-size: 120% 120%;
}
.grid-ingredients li:hover
{
cursor: pointer;
}
.grid-elements
{
display: grid;
grid-template-columns: repeat(1);
top: 0;
position: sticky;
height: max-content;
background-image: url(../images/icons/notebook-clipart-old-writing-paper-5.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
Seems like a very basic JS problem but I'm stuck and cant seem to find a workaround. Thank you in advance!
Aucun commentaire:
Enregistrer un commentaire