raymonf
/
lifeto-shop
forked from a/lifeto-shop
1
0
Fork 0
Code Pull Requests Activity

okay

This commit is contained in:
a 2022-08-08 19:44:43 -05:00
parent 516c91ab3f
commit 5ffa4bffc2
2 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/CharacterCard.vue
View File

@ -1,10 +1,24 @@
<template> <template>
<div> <div
<div class="cc_parent"
v-on:click="selectCharacter()" v-on:click="selectCharacter()"
> >
{{activeTable == props.character ? "*" :""}} <div class="cc_div1">
{{name}} the <span v-html="job" /> ({{galders.toLocaleString()}}g) ({{props.character}}, {{items}})</div> <span v-html="job" />
</div>
<div class="cc_div2">name: <br/> items: </div>
<div class="cc_div3"> {{name}} <br> {{items}} </div>
<div class="cc_div4">
{{galders.toLocaleString()}}g
</div>
<div class="cc_div5">
</div>
<div class="cc_div6">
{{activeTable == props.character ? "**" :""}}
</div>
<div class="cc_div7">
{{currentChar?.path.split("/")[0]}}
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -49,3 +63,26 @@ import { JobNumberToString } from '../lib/trickster';
import { storage } from '../session_storage'; import { storage } from '../session_storage';
import { useStore, useStoreRef } from '../state/state'; import { useStore, useStoreRef } from '../state/state';
</script> </script>
<style>
.cc_parent {
border: 1px black solid;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(7, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
margin-right: 10px;
margin-left: 10px;
}
.cc_div1 { grid-area: 1 / 1 / 5 / 6; }
.cc_div2 { grid-area: 5 / 2 / 6 / 3; }
.cc_div3 { grid-area: 5 / 4 / 6 / 5; }
.cc_div4 { grid-area: 6 / 4 / 7 / 5; }
.cc_div5 { grid-area: 1 / 1 / 8 / 6; }
.cc_div6 { grid-area: 7 / 1 / 8 / 3; }
.cc_div7 { grid-area: 7 / 4 / 8 / 6; }
</style>

28
src/components/CharacterRoulette.vue
View File

@ -1,7 +1,9 @@
<template> <template>
<div v-for="v in characters"> <div id="character_roulette">
<div class="single_character_card" v-for="v in characters">
<CharacterCard :character="v" /> <CharacterCard :character="v" />
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -32,15 +34,27 @@ onMounted(()=>{
api.GetInventory(activeTable.value) api.GetInventory(activeTable.value)
} }
}) })
</script> </script>
<script lang="ts"> <script lang="ts">
import { defineComponent, computed, PropType, defineProps, defineEmits, ref, watch, onMounted } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { getLTOState, LTOApi, LTOApiv0 } from '../lib/lifeto'; import { getLTOState, LTOApi, LTOApiv0 } from '../lib/lifeto';
import { LoginHelper, Session } from '../lib/session';
import { storage } from '../session_storage'; import { storage } from '../session_storage';
import { saveStore, useStore, useStoreRef } from '../state/state'; import { saveStore, useStoreRef } from '../state/state';
import log from 'loglevel';
</script> </script>
<style>
#character_roulette {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow-x: scroll;
width: 1000px;
}
.single_character_card {
display: flex;
}
</style>