From 72c79802f3e6ab06a6d6138e2e7321e886d231fd Mon Sep 17 00:00:00 2001 From: Himyu Date: Thu, 15 Sep 2022 23:22:12 +0200 Subject: [PATCH] update js for new structures --- frontend/frontend.js | 39 ++++++++++++++++++++------------------- frontend/gfx-script.js | 32 +++++++++++++++----------------- frontend/gfx.html | 1 - frontend/index.html | 2 +- 4 files changed, 36 insertions(+), 38 deletions(-) diff --git a/frontend/frontend.js b/frontend/frontend.js index 1787514..f66429f 100644 --- a/frontend/frontend.js +++ b/frontend/frontend.js @@ -1,22 +1,23 @@ -const updateUi = (state) => { - $('#embed-copy').val( - `${location.href}/gfx.html${ - window.apiKey !== null ? '?apikey=' + window.apiKey : '' - }` - ) - $('#state').text(JSON.stringify(state, null, 2)) - - $('#text-state').text(state.state) - $('#data-state').text(state.dataState) -} +const updateUi = async (state) => { + const port = await window.constants.getWebServerPort() + const location = `http://localhost:${port}/pages/op-module-league-runes` + + const apiKey = await window.constants.getApiKey() + + document.querySelector("#embed-copy").value = `${location}/gfx.html${apiKey !== null ? "?apikey=" + apiKey : ""}` + document.querySelector("#runes-gfx").src = `${location}/gfx.html${apiKey !== null ? "?apikey=" + apiKey : ""}` -const namespace = 'module-league-runes' + document.querySelector("#state").innerHTML = JSON.stringify(state, null, 2) + + document.querySelector("#text-state").innerHTML = state.state + document.querySelector("#data-state").innerHTML = state.dataState +} const updateState = async () => { const response = await LPTE.request({ meta: { - namespace, - type: 'request', + namespace: "module-league-runes", + type: "request", version: 1 } }) @@ -27,8 +28,8 @@ const updateState = async () => { const nextStep = () => { LPTE.emit({ meta: { - namespace, - type: 'next-step', + namespace: "module-league-runes", + type: "next-step", version: 1 } }) @@ -37,8 +38,8 @@ const nextStep = () => { const prevStep = () => { LPTE.emit({ meta: { - namespace, - type: 'previous-step', + namespace: "module-league-runes", + type: "previous-step", version: 1 } }) @@ -46,5 +47,5 @@ const prevStep = () => { LPTE.onready(async () => { updateState() - LPTE.on(namespace, 'update', (e) => updateUi(e.state)) + LPTE.on("module-league-runes", "update", (e) => updateUi(e.state)) }) diff --git a/frontend/gfx-script.js b/frontend/gfx-script.js index f4fc9d4..ff446b2 100644 --- a/frontend/gfx-script.js +++ b/frontend/gfx-script.js @@ -3,12 +3,12 @@ const namespace = 'module-league-runes' const updateUi = (data) => { if (data.state === 'HIDDEN') { - $('.blue-box').addClass('hidden') - $('.red-box').addClass('hidden') + document.querySelector('.blue-box').classList.add('hidden') + document.querySelector('.red-box').classList.add('hidden') } else { if (previousState !== data.state) { - $('.red-box').addClass('hidden') - $('.blue-box').addClass('hidden') + document.querySelector('.red-box').classList.add('hidden') + document.querySelector('.blue-box').classList.add('hidden') previousState = data.state return } @@ -44,27 +44,25 @@ const updateUi = (data) => { data.participants[championMapping[num][1] - 1].perks.perkConstants const splashLinkLeft = `/serve/module-league-static/img/champion/centered/${championLeft.key}.jpg` const splashLinkRight = `/serve/module-league-static/img/champion/centered/${championRight.key}.jpg` - // const splashLinkLeft = `https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${championLeft.id}_0.jpg` - // const splashLinkRight = `https://ddragon.leagueoflegends.com/cdn/img/champion/splash/${championRight.id}_0.jpg` - // https://ddragon.leagueoflegends.com/cdn/img/perk-images/Styles/RunesIcon.png const runesLeftFull = getDDragonPathsFromRunes(runesLeft) const runesRightFull = getDDragonPathsFromRunes(runesRight) const applyImages = (prefix, runes) => { - $(`#${prefix}-rune-primary`).attr('src', runes.primary) - $(`#${prefix}-rune-primary-1`).attr('src', runes.primary1) - $(`#${prefix}-rune-primary-2`).attr('src', runes.primary2) - $(`#${prefix}-rune-primary-3`).attr('src', runes.primary3) - $(`#${prefix}-rune-secondary-1`).attr('src', runes.secondary1) - $(`#${prefix}-rune-secondary-2`).attr('src', runes.secondary2) + document.querySelector(`#${prefix}-rune-primary`).src = runes.primary + document.querySelector(`#${prefix}-rune-primary-1`).src = runes.primary1 + document.querySelector(`#${prefix}-rune-primary-2`).src = runes.primary2 + document.querySelector(`#${prefix}-rune-primary-3`).src = runes.primary3 + document.querySelector(`#${prefix}-rune-secondary-1`).src = runes.secondary1 + document.querySelector(`#${prefix}-rune-secondary-2`).src = runes.secondary2 } - $('.red-box').removeClass('hidden') - $('.blue-box').removeClass('hidden') + document.querySelector('.red-box').classList.remove('hidden') + document.querySelector('.blue-box').classList.remove('hidden') - $('.blue-box').css('background-image', `url(${splashLinkLeft})`) - $('.red-box').css('background-image', `url(${splashLinkRight})`) + document.querySelector('.blue-box').style.backgroundImage = `url(${splashLinkLeft})` + + document.querySelector('.red-box').style.backgroundImage = `url(${splashLinkRight})` applyImages('blue', runesLeftFull) applyImages('red', runesRightFull) diff --git a/frontend/gfx.html b/frontend/gfx.html index df07d27..599351c 100644 --- a/frontend/gfx.html +++ b/frontend/gfx.html @@ -3,7 +3,6 @@ RCV Rune GFX - diff --git a/frontend/index.html b/frontend/index.html index ee34fac..3e60f64 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,7 @@

RCVolus Runes: Operator Cockpit

Preview