buildpath/frontend/components/rune/Page.vue

<script setup lang="ts">
const props = defineProps<{
  primaryStyleId: number
  secondaryStyleId: number
  selectionIds: Array<number>
}>()

const primaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })
const secondaryStyle: Ref<PerkStyle> = ref({ id: 0, name: '', iconPath: '', slots: [] })

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.primaryStyleId,
  async (_newP, _oldP) => {
    refreshStyles()
  }
)
watch(
  () => props.secondaryStyleId,
  async (_newP, _oldP) => {
    refreshStyles()
  }
)

function refreshStyles() {
  for (const style of stylesData.value.styles) {
    if (style.id == props.primaryStyleId) {
      primaryStyle.value = style
    }
    if (style.id == props.secondaryStyleId) {
      secondaryStyle.value = style
    }
  }
}
refreshStyles()
</script>

<template>
  <div style="display: flex">
    <div class="rune-holder">
      <div class="rune-slot">
        <NuxtImg
          class="rune-style-img"
          style="margin: auto"
          :src="CDRAGON_BASE + mapPath(primaryStyle.iconPath)"
        />
      </div>
      <div
        v-for="(slot, slotIndex) in primaryStyle.slots.slice(0, 1)"
        :key="slotIndex"
        class="rune-slot"
      >
        <NuxtImg
          v-for="perk in slot.perks"
          :key="perk"
          width="48"
          :class="
            'rune-img rune-keystone ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')
          "
          :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
        />
      </div>
      <div
        v-for="(slot, slotIndex) in primaryStyle.slots.slice(1, 4)"
        :key="slotIndex"
        class="rune-slot"
      >
        <NuxtImg
          v-for="perk in slot.perks"
          :key="perk"
          width="48"
          :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
          :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
        />
      </div>
    </div>
    <div class="rune-spacer-bar" />
    <div class="rune-holder" style="align-content: end">
      <div class="rune-slot">
        <img style="margin: auto" :src="CDRAGON_BASE + mapPath(secondaryStyle.iconPath)" />
      </div>
      <div
        v-for="(slot, slotIndex) in secondaryStyle.slots.slice(1, 4)"
        :key="slotIndex"
        class="rune-slot"
      >
        <NuxtImg
          v-for="perk in slot.perks"
          :key="perk"
          width="48"
          :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')"
          :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"
        />
      </div>
      <!-- <div class="rune-slot mini" v-for="slot in primaryStyle.slots.slice(4, 7)">
            <img width="32" v-for="perk in slot.perks" :class="'rune-img ' + (props.selectionIds.includes(perk) ? 'rune-activated' : '')" :src="'https://raw.communitydragon.org/latest/' + mapPath(perks.get(perk).iconPath)"/>
        </div> -->
    </div>
  </div>
</template>

<style>
.rune-holder {
  /* align-content: end; */
  justify-content: center;
}
.rune-slot {
  width: calc(48 * 3px + 60px);
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  margin-bottom: 40px;
}
.mini {
  margin: auto;
  width: calc(32 * 3px + 60px);
  margin-top: 10px;
  margin-bottom: 10px;
}
.rune-img {
  max-width: 100%;
  overflow: hidden;
  filter: grayscale(1);
  border: 1px var(--color-on-surface) solid;
  border-radius: 50%;
}
.rune-keystone {
  border: none;
}
.rune-activated {
  filter: none;
}
.rune-spacer-bar {
  margin-left: 20px;
  margin-right: 20px;
  border: 1px var(--color-on-surface) solid;
}

@media only screen and (max-width: 650px) {
  .rune-slot {
    width: calc(24 * 3px + 30px);
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .rune-img {
    width: 24px;
    height: 24px;
  }
  .rune-style-img {
    width: 24px;
    height: 24px;
  }
  .rune-spacer-bar {
    margin-left: 10px;
    margin-right: 10px;
  }
}
</style>