Skip to content

Commit

Permalink
hatched-pet-dialog in items / stable
Browse files Browse the repository at this point in the history
  • Loading branch information
negue committed Aug 7, 2017
1 parent 8081762 commit 97cb450
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 47 deletions.
43 changes: 23 additions & 20 deletions website/client/components/achievements/levelUp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -47,30 +47,33 @@
a.tumblr-share-button(:data-href='socialLevelLink', data-notes='none')
</template>

<style scope>
.modal-content {
min-width: 28em;
}
<style lang="scss">
#level-up {
.modal-body {
padding-bottom: 0;
}
.modal-content {
min-width: 28em;
}
.modal-footer {
margin-top: 0;
}
.modal-body {
padding-bottom: 0;
}
.herobox {
margin:auto 8.3em;
width: 6em;
height: 9em;
padding-top: 0;
cursor:default;
}
.modal-footer {
margin-top: 0;
}
.herobox {
margin: auto 8.3em;
width: 6em;
height: 9em;
padding-top: 0;
cursor: default;
}
.character-sprites {
margin: 0;
width: 0;
.character-sprites {
margin: 0;
width: 0;
}
}
</style>

Expand Down
25 changes: 21 additions & 4 deletions website/client/components/inventory/items/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,10 @@
template(slot="itemBadge", scope="ctx")
span.badge.badge-pill.badge-item.badge-quantity {{ ctx.item.quantity }}

hatchedPetDialog(
:pet="hatchedPet",
@closed="closeHatchedPetDialog()"
)

div.hatchingPotionInfo(ref="draggingPotionInfo")
div(v-if="currentDraggingPotion != null")
Expand Down Expand Up @@ -156,6 +160,11 @@ import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
import Item from 'client/components/inventory/item';
import ItemRows from 'client/components/ui/itemRows';
import HatchedPetDialog from '../stable/hatchedPetDialog';
import createAnimal from 'client/libs/createAnimal';
const allowedSpecialItems = ['snowball', 'spookySparkles', 'shinySeed', 'seafoam'];
import DragDropDirective from 'client/directives/dragdrop.directive';
Expand Down Expand Up @@ -185,6 +194,7 @@ export default {
ItemRows,
bDropdown,
bDropdownItem,
HatchedPetDialog,
},
directives: {
drag: DragDropDirective,
Expand All @@ -199,6 +209,7 @@ export default {
currentDraggingPotion: null,
potionClickMode: false,
hatchedPet: null,
};
},
watch: {
Expand Down Expand Up @@ -258,8 +269,9 @@ export default {
return result;
},
hatchPet (potionKey, eggKey) {
this.$store.dispatch('common:hatch', {egg: eggKey, hatchingPotion: potionKey});
hatchPet (potion, egg) {
this.$store.dispatch('common:hatch', {egg: egg.key, hatchingPotion: potion.key});
this.hatchedPet = createAnimal(egg, potion, 'pet', this.content, this.user.items);
},
onDragEnd () {
Expand All @@ -283,7 +295,7 @@ export default {
}
},
onDrop ($event, egg) {
this.hatchPet(this.currentDraggingPotion.key, egg.key);
this.hatchPet(this.currentDraggingPotion, egg);
},
onDragLeave () {
Expand All @@ -295,7 +307,7 @@ export default {
}
if (!this.petExists(this.currentDraggingPotion.key, egg.key)) {
this.hatchPet(this.currentDraggingPotion.key, egg.key);
this.hatchPet(this.currentDraggingPotion, egg);
}
this.currentDraggingPotion = null;
Expand All @@ -316,6 +328,11 @@ export default {
}
},
closeHatchedPetDialog () {
this.hatchedPet = null;
},
mouseMoved ($event) {
if (this.potionClickMode) {
this.$refs.clickPotionInfo.style.left = `${$event.x + 20}px`;
Expand Down
97 changes: 97 additions & 0 deletions website/client/components/inventory/stable/hatchedPetDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template lang="pug">

b-modal#hatchedPet-modal(
:visible="true",
v-if="pet != null",
:hide-header="true"
)
div.content
div.dialog-header.title You hatched a new pet!


div.inner-content
div.pet-background
div(:class="pet.class")

h4.title {{ pet.name }}
div.text(v-if="!hideText")
| {{ $t('hatchedPetNotesPart1') }}
|
router-link(:to="{name: 'stable'}") {{ $t('stable') }}
|
| {{ $t('hatchedPetNotesPart2') }}


button.btn.btn-primary(@click="close()") {{ $t('onward') }}

div.clearfix(slot="modal-footer")
</template>


<style lang="scss">
@import '~client/assets/scss/colors.scss';
@import '~client/assets/scss/modal.scss';
#hatchedPet-modal {
@include centeredModal();
.modal-dialog {
width: 330px;
}
.content {
text-align: center;
}
.inner-content {
margin: 33px auto auto;
display: flex;
flex-direction: column;
align-items: center;
}
.pet-background {
width: 112px;
height: 112px;
border-radius: 4px;
background-color: $gray-700;
}
.Pet {
margin: auto;
}
.dialog-header {
color: $purple-200;
}
}
</style>


<script>
import bModal from 'bootstrap-vue/lib/components/modal';
export default {
components: {
bModal,
},
methods: {
close () {
this.$emit('closed', this.item);
this.$root.$emit('hide::modal', 'hatchedPet-modal');
},
hideDialog () {
},
},
props: {
pet: {
type: Object,
},
hideText: {
type: Boolean,
}
},
}
</script>
38 changes: 16 additions & 22 deletions website/client/components/inventory/stable/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,12 @@
button.btn.btn-primary(@click="hatchPet(hatchablePet)") {{ $t('hatch') }}
button.btn.btn-secondary.btn-flat(@click="closeHatchPetDialog()") {{ $t('cancel') }}

hatchedPetDialog(
:pet="hatchedPet",
:hideText="true",
@closed="closeHatchedPetDialog()"
)

div.foodInfo(ref="dragginFoodInfo")
div(v-if="currentDraggingFood != null")
div.food-icon(:class="'Pet_Food_'+currentDraggingFood.key")
Expand Down Expand Up @@ -454,6 +460,7 @@
import PetItem from './petItem';
import MountItem from './mountItem.vue';
import FoodItem from './foodItem';
import HatchedPetDialog from './hatchedPetDialog';
import Drawer from 'client/components/ui/drawer';
import toggleSwitch from 'client/components/ui/toggleSwitch';
import StarBadge from 'client/components/ui/starBadge';
Expand All @@ -464,6 +471,8 @@
import DragDropDirective from 'client/directives/dragdrop.directive';
import MouseMoveDirective from 'client/directives/mouseposition.directive';
import createAnimal from 'client/libs/createAnimal';
import svgInformation from 'assets/svg/information.svg';
import svgClose from 'assets/svg/close.svg';
Expand All @@ -490,6 +499,7 @@
StarBadge,
CountBadge,
DrawerSlider,
HatchedPetDialog,
},
directives: {
resize: ResizeDirective,
Expand Down Expand Up @@ -521,6 +531,7 @@
highlightPet: '',
hatchablePet: null,
hatchedPet: null,
foodClickMode: false,
currentDraggingFood: null,
Expand Down Expand Up @@ -695,28 +706,7 @@
default: {
_each(animalGroup.petSource.eggs, (egg) => {
_each(animalGroup.petSource.potions, (potion) => {
let animalKey = `${egg.key}-${potion.key}`;
animals.push({
key: animalKey,
eggKey: egg.key,
eggName: egg.text(),
potionKey: potion.key,
potionName: potion.text(),
name: this.content[`${type}Info`][animalKey].text(),
isOwned () {
return userItems[`${type}s`][animalKey] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && this.isOwned() && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
});
animals.push(createAnimal(egg, potion, type, this.content, userItems));
});
});
}
Expand Down Expand Up @@ -835,6 +825,7 @@
hatchPet (pet) {
this.$store.dispatch('common:hatch', {egg: pet.eggKey, hatchingPotion: pet.potionKey});
this.hatchedPet = pet;
this.closeHatchPetDialog();
},
Expand Down Expand Up @@ -889,6 +880,9 @@
closeHatchPetDialog () {
this.$root.$emit('hide::modal', 'hatching-modal');
},
closeHatchedPetDialog () {
this.hatchedPet = null;
},
resetHatchablePet ($event) {
if (!$event) {
Expand Down
25 changes: 25 additions & 0 deletions website/client/libs/createAnimal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
export default function createAnimal (egg, potion, type, content, userItems) {
let animalKey = `${egg.key}-${potion.key}`;

return {
key: animalKey,
class: type === 'pet' ? `Pet Pet-${animalKey}` : `Mount_Icon_${animalKey}`,
eggKey: egg.key,
eggName: egg.text(),
potionKey: potion.key,
potionName: potion.text(),
name: content[`${type}Info`][animalKey].text(),
isOwned () {
return userItems[`${type}s`][animalKey] > 0;
},
mountOwned () {
return userItems.mounts[this.key] > 0;
},
isAllowedToFeed () {
return type === 'pet' && this.isOwned() && !this.mountOwned();
},
isHatchable () {
return userItems.eggs[egg.key] > 0 && userItems.hatchingPotions[potion.key] > 0;
},
};
}
5 changes: 4 additions & 1 deletion website/common/locales/en/newClient.json
Original file line number Diff line number Diff line change
Expand Up @@ -251,5 +251,8 @@
"mysterySets": "Mystery Sets",
"fetchRecentMessages": "Fetch Recent Messages",
"showMore": "Show More",
"showLess": "Show Less"
"showLess": "Show Less",
"hatchedPetNotesPart1": "Visit the ",
"hatchedPetNotesPart2": "to feed and equip your newest pet!",
"onward": "Onward!"
}

0 comments on commit 97cb450

Please sign in to comment.