krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve admin panel stats input

Browse Source
This commit is contained in:
Phillip Thelen
2024-09-03 13:11:53 +02:00
parent ff53a387d4
commit 665b934e35
4 changed files with 201 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
website/client/src/components/admin-panel/user-support/stats-row.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<div class="form-group row">
<label class="col-sm-3 col-form-label"
:class="color">{{ label }}</label>
<div class="col-sm-9">
<input
v-bind:value="value"
v-on:input="$emit('input', parseInt($event.target.value, 10))"
class="form-control"
type="number"
:step="step"
:max="max"
:min="min"
>
</div>
</div>
</template>
<style lang="scss" scoped>
@import '~@/assets/scss/colors.scss';
.about-row {
margin-left: 0px;
margin-right: 0px;
}
.red-label {
color: $red_100;
}
.blue-label {
color: $blue_100;
}
.purple-label {
color: $purple_300;
}
.yellow-label {
color: $yellow_50;
}
</style>
<script>
export default {
model: {
prop: 'value',
event: 'input',
},
props: {
label: {
type: String,
required: true,
},
color: {
type: String,
default: 'text-label',
},
value: {
type: Number,
required: true,
},
step: {
type: String,
default: 'any',
},
min: {
},
max: {
},
},
};
</script>

280
website/client/src/components/admin-panel/user-support/stats.vue
View File

@@ -14,151 +14,107 @@
v-if="expand" v-if="expand"
class="card-body" class="card-body"
> >
<div class="form-group row"> <stats-row
<label class="col-sm-3 col-form-label red-label">Health</label> label="Health"
<div class="col-sm-9"> color="red-label"
<input :max="maxHealth"
v-model="hero.stats.hp" v-model="hero.stats.hp" />
class="form-control" <stats-row
type="number" label="Experience"
> color="yellow-label"
</div> min="0"
</div> :max="maxFieldHardCap"
<div class="form-group row"> v-model="hero.stats.exp" />
<label class="col-sm-3 col-form-label yellow-label">Experience</label> <stats-row
<div class="col-sm-9"> label="Mana"
<input color="blue-label"
v-model="hero.stats.exp" min="0"
class="form-control" :max="maxFieldHardCap"
type="number" v-model="hero.stats.mp" />
> <stats-row
</div> label="Level"
</div> step="1"
<div class="form-group row"> min="0"
<label class="col-sm-3 col-form-label blue-label">Mana</label> :max="maxLevelHardCap"
<div class="col-sm-9"> v-model="hero.stats.lvl" />
<input <stats-row
v-model="hero.stats.mp" label="Gold"
class="form-control" min="0"
type="number" :max="maxFieldHardCap"
> v-model="hero.stats.gp" />
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Level</label>
<div class="col-sm-9">
<input
v-model="hero.stats.lvl"
class="form-control"
type="number"
>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Gold</label>
<div class="col-sm-9">
<input
v-model="hero.stats.gp"
class="form-control"
type="number"
>
</div>
</div>
<h3>Stat Points</h3> <h3>Stat Points</h3>
<div class="form-group row"> <stats-row
<label class="col-sm-3 col-form-label">Unallocated</label> label="Unallocated"
<div class="col-sm-9"> min="0"
<input step="1"
v-model="hero.stats.points" :max="maxStatPoints"
class="form-control" v-model="hero.stats.points" />
type="number" <stats-row
> label="Strength"
</div> color="red-label"
</div> min="0"
<div class="form-group row"> :max="maxStatPoints"
<label class="col-sm-3 col-form-label red-label">Strength</label> step="1"
<div class="col-sm-9"> v-model="hero.stats.str" />
<input <stats-row
v-model="hero.stats.str" label="Intelligence"
class="form-control" color="blue-label"
type="number" min="0"
> :max="maxStatPoints"
</div> step="1"
</div> v-model="hero.stats.int" />
<div class="form-group row"> <stats-row
<label class="col-sm-3 col-form-label blue-label">Intelligence</label> label="Perception"
<div class="col-sm-9"> color="purple-label"
<input min="0"
v-model="hero.stats.int" :max="maxStatPoints"
class="form-control" step="1"
type="number" v-model="hero.stats.per" />
> <stats-row
</div> label="Constitution"
</div> color="yellow-label"
<div class="form-group row"> min="0"
<label class="col-sm-3 col-form-label purple-label">Perception</label> :max="maxStatPoints"
<div class="col-sm-9"> step="1"
<input v-model="hero.stats.con" />
v-model="hero.stats.per"
class="form-control"
type="number"
>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label yellow-label">Constitution</label>
<div class="col-sm-9">
<input
v-model="hero.stats.con"
class="form-control"
type="number"
>
</div>
</div>
<div class="form-group row" v-if="statPointsIncorrect"> <div class="form-group row" v-if="statPointsIncorrect">
<label class="col-sm-3 col-form-label"></label> <div class="offset-sm-3 col-sm-9 red-label">
<div class="col-sm-9 red-label">Error: Sum of stat points should equal the users level Error: Sum of stat points should equal the users level
</div> </div>
</div> </div>
<h3>Buffs</h3> <h3>Buffs</h3>
<stats-row
label="Strength"
color="red-label"
min="0"
step="1"
v-model="hero.stats.buffs.str" />
<stats-row
label="Intelligence"
color="blue-label"
min="0"
step="1"
v-model="hero.stats.buffs.int" />
<stats-row
label="Perception"
color="purple-label"
min="0"
step="1"
v-model="hero.stats.buffs.per" />
<stats-row
label="Constitution"
color="yellow-label"
min="0"
step="1"
v-model="hero.stats.buffs.con" />
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-3 col-form-label red-label">Strength</label> <div class="offset-sm-3 col-sm-9">
<div class="col-sm-9"> <button
<input type="button"
v-model="hero.stats.buffs.str" class="btn btn-warning btn-sm"
class="form-control" @click="resetBuffs">
type="number" Reset Buffs
> </button>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label blue-label">Intelligence</label>
<div class="col-sm-9">
<input
v-model="hero.stats.buffs.int"
class="form-control"
type="number"
>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label purple-label">Perception</label>
<div class="col-sm-9">
<input
v-model="hero.stats.buffs.per"
class="form-control"
type="number"
>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label yellow-label">Constitution</label>
<div class="col-sm-9">
<input
v-model="hero.stats.buffs.con"
class="form-control"
type="number"
>
</div> </div>
</div> </div>
</div> </div>
@@ -183,28 +139,23 @@
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
} }
.red-label {
color: $red_100;
}
.blue-label {
color: $blue_100;
}
.purple-label {
color: $purple_300;
}
.yellow-label {
color: $yellow_50;
}
</style> </style>
<script> <script>
import {
MAX_HEALTH,
MAX_STAT_POINTS,
MAX_LEVEL_HARD_CAP,
MAX_FIELD_HARD_CAP,
} from '@/../../common/script/constants';
import markdownDirective from '@/directives/markdown'; import markdownDirective from '@/directives/markdown';
import saveHero from '../mixins/saveHero'; import saveHero from '../mixins/saveHero';
import { mapState } from '@/libs/store'; import { mapState } from '@/libs/store';
import { userStateMixin } from '../../../mixins/userState'; import { userStateMixin } from '../../../mixins/userState';
import StatsRow from './stats-row';
function resetData (self) { function resetData (self) {
self.expand = false; self.expand = false;
} }
@@ -213,6 +164,9 @@ export default {
directives: { directives: {
markdown: markdownDirective, markdown: markdownDirective,
}, },
components: {
StatsRow,
},
mixins: [ mixins: [
userStateMixin, userStateMixin,
saveHero, saveHero,
@@ -244,6 +198,10 @@ export default {
data () { data () {
return { return {
expand: false, expand: false,
maxHealth: MAX_HEALTH,
maxStatPoints: MAX_STAT_POINTS,
maxLevelHardCap: MAX_LEVEL_HARD_CAP,
maxFieldHardCap: MAX_FIELD_HARD_CAP,
}; };
}, },
watch: { watch: {
@@ -259,8 +217,22 @@ export default {
if (this.statPointsIncorrect) { if (this.statPointsIncorrect) {
return; return;
} }
this.saveHero({hero: { stats: this.hero.stats }, msg: 'Stats'}) this.saveHero({
hero: {
_id: this.hero._id,
stats: this.hero.stats,
},
msg: 'Stats',
});
}, },
} resetBuffs () {
this.hero.stats.buffs = {
str: 0,
int: 0,
per: 0,
con: 0,
};
},
},
}; };
</script> </script>

1
website/client/src/components/admin-panel/user-support/subscriptionAndPerks.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<form @submit.prevent="saveHero({ hero: { <form @submit.prevent="saveHero({ hero: {
_id: hero._id,
purchased: hero.purchased purchased: hero.purchased
}, msg: 'Subscription Perks' })"> }, msg: 'Subscription Perks' })">
<div class="card mt-2"> <div class="card mt-2">

5
website/client/src/components/admin-panel/user-support/userProfile.vue
View File

@@ -1,5 +1,8 @@
<template> <template>
<form @submit.prevent="saveHero({hero: { profile: hero.profile }, msg: 'Users Profile'})"> <form @submit.prevent="saveHero({hero: {
_id: hero._id,
profile: hero.profile
}, msg: 'Users Profile'})">
<div class="card mt-2"> <div class="card mt-2">
<div class="card-header"> <div class="card-header">
<h3 <h3