+ const winRate =
+ (playerList[playerIndex].wonGames /
+ playerList[playerIndex].totalgames) *
+ 100
+ insertPlayer.insertAdjacentHTML(
+ 'beforebegin',
+ `
${playerIndex + 1}
@@ -88,9 +93,9 @@ const pageButton = document.querySelectorAll('.pageButton')
window.pageChange = function (newPageNumber) {
window.pageNumber = newPageNumber
- pageButton.forEach(element => element.classList.remove('exhaustedButton'))
+ pageButton.forEach((element) => element.classList.remove('exhaustedButton'))
if (window.pageNumber === 0) {
- // You see 4-7 pageButton because there are a total of 8 buttons counting the ones at the bottom of the page
+ // You see 4-7 pageButton because there are a total of 8 buttons counting the ones at the bottom of the page
pageButton[0].classList.add('exhaustedButton')
pageButton[2].classList.add('exhaustedButton')
pageButton[4].classList.add('exhaustedButton')
@@ -136,13 +141,12 @@ window.timeCheck = function (timeSelected) {
// This changes the current leaderboard(newLeaderboard), sets the page to 0 (pageNumber = 0) and resets the next and previous buttons.
window.changeLeaderboard = function (newLeaderboard) {
- leaderboardOneJSON(newLeaderboard)
- .then(data => {
- playerList = data
- playerListDivided = playerList.length / 100
- window.lastPage = Math.floor(playerListDivided)
- window.pageChange(0)
- })
+ leaderboardOneJSON(newLeaderboard).then((data) => {
+ playerList = data
+ playerListDivided = playerList.length / 100
+ window.lastPage = Math.floor(playerListDivided)
+ window.pageChange(0)
+ })
}
// Gets called once so it generates a leaderboard
@@ -151,15 +155,23 @@ window.changeLeaderboard('1v1')
const insertSearch = document.getElementById('insertSearch')
// SEARCH BAR
-function findPlayer (playerName) {
+function findPlayer(playerName) {
leaderboardOneJSON(currentLeaderboard)
.then(() => {
// input from the searchbar becomes playerName and then searchPlayer is their index number
- const searchPlayer = playerList.findIndex(element => element.label.toLowerCase() === playerName.toLowerCase())
+ const searchPlayer = playerList.findIndex(
+ (element) =>
+ element.label.toLowerCase() === playerName.toLowerCase()
+ )
const rating = playerList[searchPlayer].rating
- const winRate = playerList[searchPlayer].wonGames / playerList[searchPlayer].totalgames * 100
- insertSearch.insertAdjacentHTML('beforebegin', `
+ const winRate =
+ (playerList[searchPlayer].wonGames /
+ playerList[searchPlayer].totalgames) *
+ 100
+ insertSearch.insertAdjacentHTML(
+ 'beforebegin',
+ `
${searchPlayer + 1}
@@ -175,11 +187,14 @@ function findPlayer (playerName) {
${playerList[searchPlayer].totalgames}
-
`)
+
`
+ )
document.querySelector('#errorLog').innerText = ''
- }).catch(() => {
- document.querySelector('#errorLog').innerText = `Player "${playerName}" couldn't be found in the ${currentLeaderboard} leaderboard.`
+ })
+ .catch(() => {
+ document.querySelector('#errorLog').innerText =
+ `Player "${playerName}" couldn't be found in the ${currentLeaderboard} leaderboard.`
})
}
@@ -194,19 +209,34 @@ window.pressEnter = function (event) {
const inputText = event.target.value
// this regex grabs the current input and due to the ^, it selects whatever starts with the input, so if you type te, Tex will show up.
if (inputText === '') {
- document.querySelectorAll('.removeOldSearch').forEach(element => element.remove())
+ document
+ .querySelectorAll('.removeOldSearch')
+ .forEach((element) => element.remove())
} else {
const regex = `^${inputText.toLowerCase()}`
- const searchName = playerList.filter(element => element.label.toLowerCase().match(regex))
+ const searchName = playerList.filter((element) =>
+ element.label.toLowerCase().match(regex)
+ )
- document.querySelectorAll('.removeOldSearch').forEach(element => element.remove())
+ document
+ .querySelectorAll('.removeOldSearch')
+ .forEach((element) => element.remove())
for (const player of searchName.slice(0, 5)) {
- document.querySelector('#placeMe').insertAdjacentHTML('afterend', `
${player.label}`)
+ document
+ .querySelector('#placeMe')
+ .insertAdjacentHTML(
+ 'afterend',
+ `
${player.label}`
+ )
}
if (event.key === 'Enter') {
- document.querySelector('#searchResults').classList.remove('appearWhenSearching')
- document.querySelector('#clearSearch').classList.remove('appearWhenSearching')
+ document
+ .querySelector('#searchResults')
+ .classList.remove('appearWhenSearching')
+ document
+ .querySelector('#clearSearch')
+ .classList.remove('appearWhenSearching')
findPlayer(inputText.trim())
}
}
@@ -215,8 +245,12 @@ window.pressEnter = function (event) {
// SEACRH AND CLEAR BUTTONS
document.querySelector('#clearSearch').addEventListener('click', () => {
- document.querySelector('#searchResults').classList.add('appearWhenSearching')
+ document
+ .querySelector('#searchResults')
+ .classList.add('appearWhenSearching')
document.querySelector('#clearSearch').classList.add('appearWhenSearching')
- const leaderboardDelete = document.querySelectorAll('.leaderboardDeleteSearch')
- leaderboardDelete.forEach(element => element.remove())
+ const leaderboardDelete = document.querySelectorAll(
+ '.leaderboardDeleteSearch'
+ )
+ leaderboardDelete.forEach((element) => element.remove())
})
diff --git a/src/frontend/js/entrypoint/navigation.js b/src/frontend/js/entrypoint/navigation.js
index d2be7868..b7d982a2 100644
--- a/src/frontend/js/entrypoint/navigation.js
+++ b/src/frontend/js/entrypoint/navigation.js
@@ -6,14 +6,16 @@ document.addEventListener('DOMContentLoaded', () => {
let stillHere = 0
for (let i = 0; i < navList.length; i++) {
- // When you mouseover/click, menu appears
+ // When you mouseover/click, menu appears
navList[i].addEventListener('mouseout', () => {
stillHere = 1
if (navAbsolute[i]) {
navAbsolute[i].classList.remove('navAbsoluteActive')
setTimeout(() => {
if (stillHere === 1) {
- navAbsolute.forEach(list => { list.style.opacity = '0%' })
+ navAbsolute.forEach((list) => {
+ list.style.opacity = '0%'
+ })
}
}, 0)
}
@@ -27,10 +29,12 @@ document.addEventListener('DOMContentLoaded', () => {
}, 10)
}
})
- // when you mouseout/leave, menu dissapears
+ // when you mouseout/leave, menu dissapears
}
- const mobileNavMenuContent = document.querySelectorAll('.mobileNavMenuContent')
+ const mobileNavMenuContent = document.querySelectorAll(
+ '.mobileNavMenuContent'
+ )
const mobileNavElement = document.querySelectorAll('.mobileNavElement')
const mobileNavMenu = document.querySelectorAll('.mobileNavMenu')
const returnMenu = document.querySelector('#returnMenu')
@@ -38,28 +42,44 @@ document.addEventListener('DOMContentLoaded', () => {
let mobileSameElementClicked = 7
// Code that works out how the mobileNav menus are open
- mobileNavMenu.forEach((element, index) => element.addEventListener('click', () => {
- mobileNavMenuContent.forEach(item => { item.style.display = 'none' })
- mobileNavMenu.forEach(item => { item.style.backgroundColor = '#262626' })
- mobileNavElement.forEach(item => { item.style.display = 'none' })
- returnMenu.style.display = 'none'
+ mobileNavMenu.forEach((element, index) =>
+ element.addEventListener('click', () => {
+ mobileNavMenuContent.forEach((item) => {
+ item.style.display = 'none'
+ })
+ mobileNavMenu.forEach((item) => {
+ item.style.backgroundColor = '#262626'
+ })
+ mobileNavElement.forEach((item) => {
+ item.style.display = 'none'
+ })
+ returnMenu.style.display = 'none'
- if (mobileSameElementClicked !== index) {
- returnMenu.style.display = 'block'
- mobileNavMenu[index].style.display = 'block'
- mobileNavMenu[index].style.backgroundColor = '#3F3F3FFF'
- mobileNavMenuContent[index].style.display = 'block'
- mobileSameElementClicked = index
- } else {
- mobileSameElementClicked = 7
- mobileNavElement.forEach(item => { item.style.display = 'block' })
- }
- }))
+ if (mobileSameElementClicked !== index) {
+ returnMenu.style.display = 'block'
+ mobileNavMenu[index].style.display = 'block'
+ mobileNavMenu[index].style.backgroundColor = '#3F3F3FFF'
+ mobileNavMenuContent[index].style.display = 'block'
+ mobileSameElementClicked = index
+ } else {
+ mobileSameElementClicked = 7
+ mobileNavElement.forEach((item) => {
+ item.style.display = 'block'
+ })
+ }
+ })
+ )
// Clicking the return Menu Brings us back
returnMenu.addEventListener('click', () => {
- mobileNavMenuContent.forEach(item => { item.style.display = 'none' })
- mobileNavMenu.forEach(item => { item.style.backgroundColor = '#262626' })
- mobileNavElement.forEach(item => { item.style.display = 'block' })
+ mobileNavMenuContent.forEach((item) => {
+ item.style.display = 'none'
+ })
+ mobileNavMenu.forEach((item) => {
+ item.style.backgroundColor = '#262626'
+ })
+ mobileNavElement.forEach((item) => {
+ item.style.display = 'block'
+ })
returnMenu.style.display = 'none'
})
@@ -120,14 +140,20 @@ document.addEventListener('DOMContentLoaded', () => {
const highlightText = document.querySelectorAll('.highlightText')
let highLigthCounter = 0
- function highlightPulse () {
+ function highlightPulse() {
if (highLigthCounter < 1) {
highLigthCounter++
- highlightText.forEach(element => { element.style.transition = '1s' })
- highlightText.forEach(element => { element.style.color = '#FFFFFF' })
+ highlightText.forEach((element) => {
+ element.style.transition = '1s'
+ })
+ highlightText.forEach((element) => {
+ element.style.color = '#FFFFFF'
+ })
} else {
highLigthCounter--
- highlightText.forEach(element => { element.style.color = '#f7941d' })
+ highlightText.forEach((element) => {
+ element.style.color = '#f7941d'
+ })
}
}
diff --git a/src/frontend/js/entrypoint/newshub.js b/src/frontend/js/entrypoint/newshub.js
index 7bc0a7c4..ad0f93e2 100644
--- a/src/frontend/js/entrypoint/newshub.js
+++ b/src/frontend/js/entrypoint/newshub.js
@@ -1,9 +1,9 @@
-async function getNewshub () {
+async function getNewshub() {
const response = await fetch('/data/newshub.json')
const data = await response.json()
return await data
}
-async function getTournament () {
+async function getTournament() {
const response = await fetch('/data/tournament-news.json')
const data = await response.json()
return await data
@@ -14,13 +14,15 @@ const clientSpawn = document.getElementById('clientSpawn')
const clientContainer = document.querySelectorAll('.clientContainer')
const clientMainFeature = document.querySelectorAll('.clientMainFeature')
-function createArticles () {
+function createArticles() {
getNewshub()
- .then(data => {
+ .then((data) => {
dataLength = data.length
let fixedLinkingOrder = data.length - 1
for (let i = 0; i < data.length - 1; i++) {
- clientSpawn.insertAdjacentHTML('afterbegin', `
+ clientSpawn.insertAdjacentHTML(
+ 'afterbegin',
+ `
@@ -28,11 +30,14 @@ function createArticles () {
-`)
+`
+ )
fixedLinkingOrder--
}
- clientMainFeature[0].insertAdjacentHTML('afterbegin', `
+ clientMainFeature[0].insertAdjacentHTML(
+ 'afterbegin',
+ `
@@ -42,15 +47,19 @@ function createArticles () {