feat: stats ui + inventory theme #166
Conversation
|
@StonyTV is attempting to deploy a commit to the aresrpg Team on Vercel. A member of the Team first needs to authorize it. |
| selected_character.value.wisdom !== wisdom || | ||
| selected_character.value.agility !== agility | ||
| ) { | ||
| selected_character.value = current_character(state); |
There was a problem hiding this comment.
rather than using the expensive current_character function
You could assign { vitality, strength, .. } to selected_character.value
| position absolute; | ||
| z-index 1; |
There was a problem hiding this comment.
semi-colon are not needed in stylus, does the npm run format pickup on those change?
| // @todo use image_url | ||
| img(:src="`https://assets.aresrpg.world/classe/${selected_character.classe}_${selected_character.sex}.jpg`") |
|
|
||
| const accept_loading = ref(false); | ||
|
|
||
| const stats = ref({ |
There was a problem hiding this comment.
does this need to be a ref ? also vue ref for objects are called reactive but it seems a simple const would work here
| const stats = ref({ | ||
| vitality: { | ||
| label: t('APP_ITEM_VITALITY'), | ||
| imagePath: new URL('../../assets/statistics/vitality.png', import.meta.url).href |
There was a problem hiding this comment.
usually we import the image at the top of the vue file to let the bundler generate the url
import vitality_image from '../../assets/statistics/vitality.png'
const stats = { vitality: { label, url: vitality_image } }| //- FluentCheckmark12Regular | ||
| //- span Valider | ||
| .right | ||
| vs-button.cancel(icon color="#E74C3C" v-if="has_pending_allocated_stats()" @click="cancel_pending_allocated_stats") |
There was a problem hiding this comment.
same thing about using function in rendering, this will slow down the app
| } | ||
|
|
||
|
|
||
| async function validate_stats() { |
There was a problem hiding this comment.
validate is misleading as it has a different meaning in French and in English, better to use commit or execute
|
|
||
|
|
||
| async function validate_stats() { | ||
| accept_loading.value = true; |
There was a problem hiding this comment.
For each actions triggering a blockchain transaction, let's add a confirm modal. Especially important for ZkLogin which won't need to approve in-wallet. The only case of no modal would be using an item like Bread so that it doesn't impact the gameplay, but for stats it seems important
|
|
||
| sdk.add_header(tx) | ||
|
|
||
| const { kiosks, finalize } = await sdk.get_user_kiosks({ |
There was a problem hiding this comment.
| const { kiosks, finalize } = await sdk.get_user_kiosks({ | |
| const { get_kiosk_cap_ref, finalize } = await sdk.get_user_kiosks({ |
The new sdk version directly provide that function
| context.dispatch('action/character_update', { | ||
| id: selected_character.value.id, | ||
| ...Object.keys(stats.value).map(stat => ({ [stat]: selected_character.value[stat] + (allocated_stats.value[stat] ?? 0) })), | ||
| available_points: selected_character.value.available_points - get_pending_allocated_stats_count(), | ||
| }) |
There was a problem hiding this comment.
Let's have a call about that as I implemented a more robust system with the item usage feature
This PR includes a redesign of the inventory theme as well as the addition of the characteristics menu.
Inventory appearance:
Characteristics menu image:
