Skip to content

Commit

Permalink
YAY Heartsteel updated!!!!
Browse files Browse the repository at this point in the history
  • Loading branch information
@pawsnana
pawsnana committed Dec 10, 2023
1 parent 9a6948c commit c530a0e
Show file tree
Hide file tree
Showing 7 changed files with 148 additions and 39 deletions.
Binary file added projects/project-03/backgrounds/H_bright.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/project-03/backgrounds/H_dark.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified projects/project-03/backgrounds/SG_ahri_light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added projects/project-03/backgrounds/SG_arrive.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 15 additions & 1 deletion projects/project-03/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,12 @@
<div class="icon" draggable="true" id="icon_ahri_SG">Ahri (SG)</div>
<div class="icon" draggable="true" id="icon_akali_SG">Akali (SG)</div>

<div class="icon" draggable="true" id="icon_ezreal">Ezreal (H)</div>
<div class="icon" draggable="true" id="icon_kayne">Kayne (H)</div>
<div class="icon" draggable="true" id="icon_sett">Sett (H)</div>
<div class="icon" draggable="true" id="icon_yone">Yone (H)</div>
<div class="icon" draggable="true" id="icon_ksante">K'Sante (H)</div>



</nav>
Expand Down Expand Up @@ -67,7 +73,7 @@

<div id="div2_SG" class="division">
<div id="SG_background_overlay"></div>
<img id="SG_background" src="./backgrounds/SG_neeko_galaxy.png">
<img id="SG_background" src="./backgrounds/SG_arrive.png">

<div id="SG_pickdroplot" class="pick_drop_lot">
STAR GUARDIAN
Expand All @@ -78,7 +84,15 @@
</div>

<div id="div3_H" class="division">
<div id="H_background_overlay"></div>
<img id="H_background" src="./backgrounds/H_dark.jpg">

<div id="H_pickdroplot" class="pick_drop_lot">
HEARTSTEEL
<br>

<iframe id="H_link" width="560" height="315" src="https://www.youtube.com/embed/MDErQ1KTzaI?si=a1DvybXPraJkkuT0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>

<div id="div4_K" class="division">
Expand Down
117 changes: 81 additions & 36 deletions projects/project-03/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,19 +37,28 @@ document.addEventListener("DOMContentLoaded", function() {
background.style.cursor = 'default';
}

// this function is to update icon position when i move the background
function updateIconPositions(backgroundX, backgroundY) {
let icons = document.querySelectorAll('.icon');
icons.forEach(icon => {
let deltaX = backgroundX - parseInt(icon.getAttribute('data-initial-x') || 0);
let deltaY = backgroundY - parseInt(icon.getAttribute('data-initial-y') || 0);
// the floating
// function updateIconPositions(backgroundX, backgroundY) {
// // only the icons within the navbar
// let navbar = document.getElementById('navbar');
// let icons = navbar.querySelectorAll('.icon');

let iconNewX = deltaX * 0.05;
let iconNewY = deltaY * 0.05;
// icons.forEach(icon => {

// let initialX = parseInt(icon.getAttribute('data-initial-x') || 0);
// let initialY = parseInt(icon.getAttribute('data-initial-y') || 0);

icon.style.transform = `translate(${iconNewX}px, ${iconNewY}px)`;
});
}

// let deltaX = backgroundX - initialX;
// let deltaY = backgroundY - initialY;

// let iconNewX = deltaX * 0.05;
// let iconNewY = deltaY * 0.05;

// // make the new positions???
// icon.style.transform = `translate(${iconNewX}px, ${iconNewY}px)`;
// });
// }

// idk how to fix these Q___Q crying ....
let icons = document.querySelectorAll('.icon');
Expand Down Expand Up @@ -127,7 +136,10 @@ document.addEventListener("DOMContentLoaded", function() {
let divisionId = division.id;
let correctIconsForDivisions = {
'TD_pickdroplot': ['icon_akali_TD', 'icon_ekko', 'icon_senna', 'icon_qiyana', 'icon_yasuo'],

'SG_pickdroplot': ['icon_morgana', 'icon_syndra', 'icon_zoe', 'icon_lulu', 'icon_lux', 'icon_xayah', 'icon_ahri_SG', 'icon_akali_SG'],

'H_pickdroplot': ['icon_ezreal', 'icon_kayne', 'icon_sett', 'icon_yone', 'icon_ksante'],
};

let correctIcons = correctIconsForDivisions[divisionId] || [];
Expand All @@ -137,38 +149,71 @@ document.addEventListener("DOMContentLoaded", function() {
correctCount++;
}
});

console.log('Checking division:', divisionId, 'Correct count:', correctCount);


if (divisionId === 'TD_pickdroplot' && correctCount >= 3) {
var TDpickdroplot = document.getElementById('TD_pickdroplot');
var TDbackground = document.getElementById('TD_background');
var TDbackgroundOverlay = document.getElementById('TD_background_overlay');
var TDiframe = document.getElementById('TD_link');

if (TDpickdroplot && TDbackground && TDbackgroundOverlay && TDiframe) {
TDpickdroplot.style.backgroundImage = 'url(./backgrounds/TD_1.png)';
// Change background of TD_pickdroplot
TDbackground.style.opacity = '1.0';
// Adjust opacity of TD_background
TDbackgroundOverlay.style.opacity = '0';
// Make TD_background_overlay transparent
TDiframe.style.display = 'block';
// Show the TD iframe
}
}

if (divisionId === 'SG_pickdroplot' && correctCount >= 3) {
var SGpickdroplot = document.getElementById('SG_pickdroplot');
var SGbackground = document.getElementById('SG_background');
var SGbackgroundOverlay = document.getElementById('SG_background_overlay');
var SGiframe = document.getElementById('SG_link');

if (correctCount >= 3) {
if (divisionId === 'TD_pickdroplot') {
console.log('Three correct icons placed in TD_pickdroplot.');
division.style.backgroundImage = 'url(backgrounds/TD_1.png)';
document.getElementById('TD_link').style.display = 'block';
var overlay = document.getElementById('TD_background_overlay');
if (overlay) {
overlay.style.display = 'none';
}
var image = document.getElementById('TD_background');
if (image) {
image.style.opacity = '1.0';
}
if (SGpickdroplot && SGbackground && SGbackgroundOverlay && SGiframe) {
SGpickdroplot.style.backgroundImage = 'url(./backgrounds/SG_ahri_light.png)';

SGbackground.style.opacity = '1.0';

SGbackgroundOverlay.style.opacity = '0';

SGiframe.style.display = 'block';

}
}

if (divisionId === 'H_pickdroplot' && correctCount >= 3) {
var Hpickdroplot = document.getElementById('H_pickdroplot');
var Hbackground = document.getElementById('H_background');
var HbackgroundOverlay = document.getElementById('H_background_overlay');
var Hiframe = document.getElementById('H_link');

if (divisionId === 'SG_pickdroplot') {
console.log('Three correct icons placed in SG_pickdroplot.');
division.style.backgroundImage = 'url(backgrounds/SG_change.png)';
document.getElementById('SG_link').style.display = 'block';
var overlay = document.getElementById('SG_background_overlay');
if (overlay) {
overlay.style.display = 'none';
}
var image = document.getElementById('SG_background');
if (image) {
image.style.opacity = '1.0';
}
if (Hpickdroplot && Hbackground && HbackgroundOverlay && Hiframe) {
Hpickdroplot.style.backgroundImage = 'url(./backgrounds/H_bright.jpeg)';

Hbackground.style.opacity = '1.0';

HbackgroundOverlay.style.opacity = '0';

Hiframe.style.display = 'block';

}
}


}





});


54 changes: 52 additions & 2 deletions projects/project-03/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,8 +208,8 @@ body, html {
width: 750px;
z-index: 1;
position: absolute;
top: 1300px;
left: 400px;
top: 1200px;
left: 350px;
display: flex;
justify-content: space-around;
align-items: center;
Expand Down Expand Up @@ -248,6 +248,56 @@ body, html {

}

#H_background_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(128, 128, 128, 0.3);
z-index: 0;

}

#H_background {
object-fit: cover;
z-index: 1;
opacity: 0.3;
}

#H_pickdroplot {
height: 500px;
width: 750px;
z-index: 1;
position: absolute;
top: 200px;
left: 1400px;
display: flex;
justify-content: space-around;
align-items: center;
color: azure;
font-size: 24pt;
font-family:'Red Hat Mono', monospace;
padding: 10px;
border-radius: 2%;
justify-content: center;

background-size: cover;
background-position: center;
background-repeat: no-repeat;




}



#H_link {
display: none;
}


#div4_K {
background: #00FF19;
clip-path: polygon(2638px 561px, 2638px 1191px, 1705px 1309.5px, 952.5px 1082.5px, 1357px 784.5px, 2638px 561px);
Expand Down

0 comments on commit c530a0e

Please sign in to comment.