You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
4.2 KiB
Vue
98 lines
4.2 KiB
Vue
<template>
|
|
<div class="rumble">
|
|
<section class="intro">
|
|
<div class="bg-only"></div>
|
|
<img class="rumbleLogo" alt="Regional Rumble Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.png" />
|
|
<img class="rumbleYellowLogo" alt="Regional Rumble SSA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957469adearr23-brand-logo-regional-ssa.png" />
|
|
<img class="rumbleGreenLogo" alt="Regional Rumble MENA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957436a783rr23-brand-logo-regional-mena.png" />
|
|
<img class="rumbleRedLogo" alt="Regional Rumble Asia Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650954c83f3farr23-brand-logo-regional-asia.png" />
|
|
<img class="rlLogo" alt="Featuring RL logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65084e280f323rl_featuringrl_logo.png">
|
|
<div class="scroll-indicator">
|
|
scroll
|
|
</div>
|
|
</section>
|
|
|
|
<section class="selector">
|
|
<div class="apac" @click="gotoRoute('/regionalrumble/apac')">
|
|
<span class="unoverlay"></span>
|
|
<img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
|
|
</div>
|
|
<div class="me" @click="gotoRoute('/regionalrumble/mena')">
|
|
<span class="unoverlay"></span>
|
|
<img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
|
|
</div>
|
|
<div class="ssa" @click="gotoRoute('/regionalrumble/ssa')">
|
|
<span class="unoverlay"></span>
|
|
<img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
|
|
</div>
|
|
</section>
|
|
<section class="footer">
|
|
Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license. © 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'RegionalRumble',
|
|
methods: {
|
|
gotoRoute(route) {
|
|
document.querySelector('header').classList.remove('scroll');
|
|
this.$router.push(route);
|
|
},
|
|
},
|
|
mounted() {
|
|
const h = document.querySelector('header');
|
|
const container = document.querySelector('.rumble');
|
|
container.addEventListener('scroll', () => {
|
|
if(container.scrollTop > 128) {
|
|
if(!h.classList.contains('scroll')) {
|
|
h.classList.add('scroll')
|
|
}
|
|
} else {
|
|
if(h.classList.contains('scroll')) {
|
|
h.classList.remove('scroll')
|
|
}
|
|
}
|
|
});
|
|
|
|
const apac = document.querySelector('.apac')[0];
|
|
const apac_overlay = document.querySelector('.apac span');
|
|
const me = document.querySelector('.me')[0];
|
|
const me_overlay = document.querySelector('.me span');
|
|
const ssa = document.querySelector('.ssa')[0];
|
|
const ssa_overlay = document.querySelector('.ssa span');
|
|
|
|
apac_overlay.addEventListener('mouseover', () => {
|
|
me_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
ssa_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
});
|
|
|
|
apac_overlay.addEventListener('mouseout', () => {
|
|
me_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
ssa_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
});
|
|
|
|
me_overlay.addEventListener('mouseover', () => {
|
|
apac_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
ssa_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
});
|
|
|
|
me_overlay.addEventListener('mouseout', () => {
|
|
apac_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
ssa_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
});
|
|
|
|
ssa_overlay.addEventListener('mouseover', () => {
|
|
apac_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
me_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
|
|
});
|
|
|
|
ssa_overlay.addEventListener('mouseout', () => {
|
|
apac_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
me_overlay.style['background'] = "rgba(0, 0, 0, 0)";
|
|
});
|
|
}
|
|
}
|
|
</script>
|