initial commit

frontend/frontend.js

@@ -0,0 +1,42 @@
+const updateUi = (state) => {
+  $('#embed-copy').val(`${location.href}/gfx.html`);
+  $('#state').text(JSON.stringify(state, null, 2))
+
+  $('#text-state').text(state.state);
+  $('#data-state').text(state.dataState);
+}
+
+const updateState = async () => {
+  const response = await LPTE.request({
+    meta: {
+      namespace: 'rcv-rune-gfx',
+      type: 'request',
+      version: 1
+    }
+  });
+
+  updateUi(response.state);
+}
+
+const nextStep = () => {
+  LPTE.emit({
+    meta: {
+      namespace: 'rcv-rune-gfx',
+      type: 'next-step',
+      version: 1
+    }
+  })
+}
+
+const prevStep = () => {
+  LPTE.emit({
+    meta: {
+      namespace: 'rcv-rune-gfx',
+      type: 'previous-step',
+      version: 1
+    }
+  })
+}
+
+updateState();
+setInterval(updateState, 1000);

frontend/gfx-script.js

@@ -0,0 +1,98 @@
+let previousState = 'HIDDEN'
+
+const updateUi = data => {
+  console.log(data);
+
+  if (data.state === 'HIDDEN') {
+    $('.blue-box').addClass('hidden');
+    $('.red-box').addClass('hidden');
+    console.log('state is hidden')
+  } else {
+    console.log(previousState, data.state)
+    if (previousState !== data.state) {
+      $('.red-box').addClass('hidden');
+      $('.blue-box').addClass('hidden');
+      previousState = data.state;
+      return;
+    }
+
+    const num = parseInt(data.state);
+
+    const championMapping = {
+      1: [1, 6],
+      2: [2, 7],
+      3: [3, 8],
+      4: [4, 9],
+      5: [5, 10]
+    }
+
+    const getDDragonPath = clientPath => `/serve/static-league/img/${clientPath}`
+
+    const getDDragonPathsFromRunes = runes => ({
+      primary: getDDragonPath(runes[0].icon),
+      primary1: getDDragonPath(runes[1].icon),
+      primary2: getDDragonPath(runes[2].icon),
+      primary3: getDDragonPath(runes[3].icon),
+      secondary1: getDDragonPath(runes[4].icon),
+      secondary2: getDDragonPath(runes[5].icon)
+    })
+
+    console.log(data.participants[championMapping[num][0] - 1].perks.perkConstants)
+
+    const championLeft = data.participants[championMapping[num][0] - 1].champion
+    const championRight = data.participants[championMapping[num][1] - 1].champion
+    const runesLeft = data.participants[championMapping[num][0] - 1].perks.perkConstants
+    const runesRight = data.participants[championMapping[num][1] - 1].perks.perkConstants
+    const splashLinkLeft = `/serve/static-league/img/champion/centered/${championLeft.key}.jpg`
+    const splashLinkRight = `/serve/static-league/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);
+    }
+
+    $('.red-box').removeClass('hidden');
+    $('.blue-box').removeClass('hidden');
+
+    $('.blue-box').css('background-image', `url(${splashLinkLeft})`);
+    $('.red-box').css('background-image', `url(${splashLinkRight})`);
+
+    applyImages('blue', runesLeftFull);
+    applyImages('red', runesRightFull);
+  }
+
+  previousState = data.state;
+}
+
+const tick = async () => {
+  const data = await this.LPTE.request({
+    meta: {
+      namespace: 'rcv-rune-gfx',
+      type: 'request',
+      version: 1
+    }
+  });
+  updateUi(data.state);
+}
+
+window.LPTE.onready(() => {
+  tick()
+  setTimeout(tick, 100)
+  // setInterval(tick, 1000)
+
+  window.LPTE.on('rcv-rune-gfx', 'update', data => {
+    const timeout = previousState === 'HIDDEN' ? 1 : 1000
+    updateUi(data.state)
+    setTimeout(() => updateUi(data.state), timeout)
+  })
+})

frontend/gfx-style.css

@@ -0,0 +1,65 @@
+.box.hidden {
+  width: 0 !important;
+}
+
+.box {
+  position: absolute;
+  width: 800px;
+  height: 260px;
+
+  bottom: 109px;
+
+  transition: width 1s ease-in-out;
+
+  background-size: cover;
+  background-position: top center;
+}
+.blue-box {
+  right: calc(50% + 80px);
+}
+.red-box {
+  left: calc(50% + 80px);
+}
+
+.box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.runes {
+  position: absolute;
+  bottom: 0;
+
+  width: 100%;
+  height: 60px;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.runes-content {
+  width: 500px;
+  height: 100%;
+  margin: 0 auto;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rune {
+  margin: 0 20px;
+}
+
+.rune.small {
+  height: 60%;
+}
+
+.rune.primary {
+  height: 90%;
+}
+
+.rune.spacing {
+  width: 20px;
+}

frontend/gfx.html

@@ -0,0 +1,43 @@
+<html>
+  <head>
+    <title>RCV Rune GFX</title>
+    <link rel="stylesheet" href="/pages/op-rcv-rune-gfx/gfx-style.css" />
+
+    <script src="/vendor/jquery/jquery.min.js"></script>
+    <script src="/static/main-bundle.js"></script>
+
+    <script src="/pages/op-rcv-rune-gfx/gfx-script.js"></script>
+  </head>
+  <body>
+    <div class="box blue-box hidden">
+      <div class="box-content">
+        <div class="runes">
+          <div class="runes-content">
+            <img class="rune primary" id="blue-rune-primary" />
+            <img class="rune small" id="blue-rune-primary-1" />
+            <img class="rune small" id="blue-rune-primary-2" />
+            <img class="rune small" id="blue-rune-primary-3" />
+            <div class="rune spacing"></div>
+            <img class="rune small" id="blue-rune-secondary-1" />
+            <img class="rune small" id="blue-rune-secondary-2" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="box red-box hidden">
+      <div class="box-content">
+        <div class="runes">
+          <div class="runes-content">
+            <img class="rune primary" id="red-rune-primary" />
+            <img class="rune small" id="red-rune-primary-1" />
+            <img class="rune small" id="red-rune-primary-2" />
+            <img class="rune small" id="red-rune-primary-3" />
+            <div class="rune spacing"></div>
+            <img class="rune small" id="red-rune-secondary-1" />
+            <img class="rune small" id="red-rune-secondary-2" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

frontend/index.html

@@ -0,0 +1,18 @@
+<script src="/pages/op-rcv-rune-gfx/frontend.js"></script>
+
+<h1>RCVolus Runes: Operator Cockpit</h1>
+<h2>Preview</h2>
+<div style="width: 480px; height: 270px; overflow: hidden;">
+  <iframe src="/pages/op-rcv-rune-gfx/gfx.html" width="1920" height="1080" style="transform: scale(0.25); transform-origin: 0 0;"></iframe>
+</div>
+
+<h2>State</h2>
+<p>State: <span id="text-state">LOADING</span></p>
+<p>Data state: <span id="data-state">LOADING</span></p>
+<button class="btn btn-secondary" onclick="nextStep()">Next step</button>
+<button class="btn btn-secondary" onclick="prevStep()">Previous step</button>
+<button class="btn btn-secondary" onclick="$('#state').toggle()">Toggle show/hide</button>
+<div id="state" style="width: 100%; height: auto; white-space: pre-wrap; display: none"></div>
+
+<h3>Embed</h3>
+<input style="width: 100%;" readonly id="embed-copy" />

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "rcv-rune-gfx",
+  "version": "1.0.0",
+  "description": "Module that provides GFX elements for runes (reforged) League of Legends games",
+  "author": "Larce",
+  "license": "MIT",
+  "toolkit": {
+    "modes": [
+      "PLUGIN"
+    ],
+    "plugin": {
+      "main": "plugin.js"
+    }
+  }
+}