buildpath/frontend/components/rune/Selector.vue

<script setup lang="ts">
const props = defineProps<{
  runes: Array<{
    count: number
    primaryStyle: number
    secondaryStyle: number
    selections: Array<number>
    pickrate: number
  }>
}>()

const currentlySelectedPage = ref(0)
const primaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
const secondaryStyles: Ref<Array<PerkStyle>> = ref(Array(props.runes.length))
const keystoneIds: Ref<Array<number>> = ref(Array(props.runes.length))

const { data: perks_data }: PerksResponse = await useFetch(
  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perks.json'
)
const perks = reactive(new Map())
for (const perk of perks_data.value) {
  perks.set(perk.id, perk)
}

const { data: stylesData }: PerkStylesResponse = await useFetch(
  CDRAGON_BASE + 'plugins/rcp-be-lol-game-data/global/default/v1/perkstyles.json'
)
watch(
  () => props.runes,
  (newRunes, oldRunes) => {
    currentlySelectedPage.value = 0
    primaryStyles.value = Array(props.runes.length)
    secondaryStyles.value = Array(props.runes.length)
    keystoneIds.value = Array(props.runes.length)

    refreshStylesKeystones()
  }
)

function refreshStylesKeystones() {
  for (const style of stylesData.value.styles) {
    for (const rune of props.runes) {
      if (style.id == rune.primaryStyle) {
        primaryStyles.value[props.runes.indexOf(rune)] = style
        for (const perk of style.slots[0].perks) {
          if (rune.selections.includes(perk)) {
            keystoneIds.value[props.runes.indexOf(rune)] = perk
          }
        }
      }
      if (style.id == rune.secondaryStyle) {
        secondaryStyles.value[props.runes.indexOf(rune)] = style
      }
    }
  }
}

refreshStylesKeystones()

function runeSelect(index: number) {
  currentlySelectedPage.value = index
}
</script>

<template>
  <div style="width: fit-content">
    <RunePage
      v-if="runes[currentlySelectedPage] != undefined && runes[currentlySelectedPage] != null"
      style="margin: auto; width: fit-content"
      :primary-style-id="runes[currentlySelectedPage].primaryStyle"
      :secondary-style-id="runes[currentlySelectedPage].secondaryStyle"
      :selection-ids="runes[currentlySelectedPage].selections"
    />
    <div style="display: flex; margin-top: 20px; justify-content: center">
      <div v-for="(_, i) in runes" @click="runeSelect(i)">
        <div
          :class="
            'rune-selector-entry ' +
            (i == currentlySelectedPage ? 'rune-selector-entry-selected' : '')
          "
        >
          <div class="rs-styles-container">
            <NuxtImg
              v-if="primaryStyles[i] != null && primaryStyles[i] != undefined"
              class="rs-style-img"
              style="margin: auto"
              :src="CDRAGON_BASE + mapPath(primaryStyles[i].iconPath)"
            />
            <NuxtImg
              v-if="keystoneIds[i] != null && keystoneIds[i] != undefined"
              class="rs-style-img"
              width="34"
              :src="CDRAGON_BASE + mapPath(perks.get(keystoneIds[i]).iconPath)"
            />
            <NuxtImg
              v-if="secondaryStyles[i] != null && secondaryStyles[i] != undefined"
              class="rs-style-img"
              style="margin: auto"
              :src="CDRAGON_BASE + mapPath(secondaryStyles[i].iconPath)"
            />
          </div>
        </div>
        <h3 class="rs-pickrate">{{ (runes[i].pickrate * 100).toFixed(2) }}% pick.</h3>
      </div>
    </div>
  </div>
</template>

<style>
.rune-selector-entry {
  width: 200px;
  height: 120px;

  margin-left: 10px;
  margin-right: 10px;

  border-radius: 8%;
  border: 1px solid var(--color-on-surface);
}
.rune-selector-entry:hover {
  cursor: pointer;
}
.rune-selector-entry-selected {
  background-color: var(--color-surface-darker);
}
.rs-styles-container {
  display: flex;
  margin-top: 20px;
}
.rs-pickrate {
  text-align: center;
  margin-top: -40px;
  padding-bottom: 40px;
}
@media only screen and (max-width: 650px) {
  .rune-selector-entry {
    width: 100px;
    height: 60px;

    margin-left: 5px;
    margin-right: 5px;
  }
  .rs-styles-container {
    margin-top: 17px;
  }
  .rs-pickrate {
    margin-top: 5px;
    padding-bottom: 0px;
  }
  .rs-style-img {
    width: 24px;
    height: 24px;
  }
}
</style>