lifeto-shop/src/components/CharacterRoulette.vue

<template>
  <div v-for="v in characters">
    <CharacterCard :character="v" />
  </div>
</template>

<script lang="ts" setup>
import CharacterCard from './CharacterCard.vue';

const { chars, accounts, invs, activeTable } = useStoreRef()

const characters = ref([] as string[])
watch(chars, () => {
  characters.value = [...new Set([...characters.value, ...invs.value.keys()])]
}, { deep: true })

const session = storage.GetSession()
const api:LTOApi = getLTOState(LTOApiv0, session, useStoreRef())

api.GetAccounts().then(xs => {
  xs.forEach(x => {
    characters.value.push(...x.characters.map(x=>x.path))
  })
  characters.value = [...new Set([...characters.value])]
})

onMounted(()=>{
  let val = invs.value.get(activeTable.value)
  if(!val || Object.values(val.items).length == 0) {
    api.GetInventory(activeTable.value)
  }
})

</script>

<script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits, ref, watch, onMounted } from 'vue';
import { getLTOState, LTOApi, LTOApiv0 } from '../lib/lifeto';
import { LoginHelper, Session } from '../lib/session';
import { storage } from '../session_storage';
import { useStore, useStoreRef } from '../state/state';
import log from 'loglevel';

</script>