update js for new structures

rcv-prod-toolkit · Sep 15, 2022 · 72c7980 · 72c7980
1 parent e2c243c
commit 72c7980
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 38 deletions.
diff --git 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,14 +38,14 @@ const nextStep = () => {
 const prevStep = () => {
   LPTE.emit({
     meta: {
-      namespace,
-      type: 'previous-step',
+      namespace: "module-league-runes",
+      type: "previous-step",
       version: 1
     }
   })
 }
 
 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
@@ -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
@@ -3,7 +3,6 @@
     <title>RCV Rune GFX</title>
     <link rel="stylesheet" href="gfx-style.css" />
 
-    <script src="/vendor/jquery/jquery.min.js"></script>
     <script src="/static/main-bundle.js"></script>
 
     <script src="gfx-script.js"></script>

diff --git a/frontend/index.html b/frontend/index.html
@@ -4,7 +4,7 @@ <h1>RCVolus Runes: Operator Cockpit</h1>
 <h2>Preview</h2>
 <div style="width: 480px; height: 270px; overflow: hidden">
   <iframe
-    src="/pages/op-module-league-runes/gfx.html"
+    id="runes-gfx"
     width="1920"
     height="1080"
     style="transform: scale(0.25); transform-origin: 0 0"