BuckarooBanzay/mtinfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cooking recipe preview / card headers

Browse Source
This commit is contained in:
BuckarooBanzay 2021-03-03 07:53:29 +01:00
parent ed9210cc9f
commit 7b2b9fcc71
3 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/js/components/item-info.js
View File

@ -10,22 +10,48 @@ Vue.component("item-info", {
}
},
template: /*html*/`
<div>
<div class="row">
<div class="col-md-3">
<item-preview :item="item"/>
</div>
<div class="col-md-9">
<item-detail :item="item"/>
</div>
</div>
<div>
<div class="row">
<div v-for="recipe in recipes" class="col-md-2">
<recipe-info :recipe="recipe"/>
<div class="col-md-3">
<div class="card">
<div class="card-header">
Preview
</div>
<div class="card-body">
<item-preview :item="item"/>
</div>
</div>
</div>
<div class="col-md-9">
<div class="card">
<div class="card-header">
Details
</div>
<div class="card-body">
<item-detail :item="item"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Recipes
</div>
<div class="card-body">
<div class="row">
<div v-for="recipe in recipes" class="col-md-2">
<recipe-info :recipe="recipe"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<pre class="col-md-12">
Debug
{{ JSON.stringify(item, null, '\t') }}
{{ JSON.stringify(recipes, null, '\t') }}
</pre>

2
app/js/components/item-preview.js
View File

@ -43,7 +43,7 @@ Vue.component("item-preview-inventoryimage", {
computed: {
imgsrc: function(){
if (this.item.inventory_image)
return `textures/${this.item.inventory_image}`;
return `textures/${mtinfo.stripimagetransforms(this.item.inventory_image)}`;
else
return "pics/unknown_node.png";
}

25
app/js/components/recipe-info.js
View File

@ -3,12 +3,33 @@
Vue.component("recipe-info", {
props: ["recipe"],
template: /*html*/`
<div>
<recipe-info-normal v-if="recipe.type == 'normal'" :recipe="recipe"/>
<div class="card">
<div class="card-header">
{{ recipe.type }}
</div>
<div class="card-body">
<recipe-info-normal v-if="recipe.type == 'normal'" :recipe="recipe"/>
<recipe-info-cooking v-if="recipe.type == 'cooking'" :recipe="recipe"/>
Output: <b>{{ recipe.output }}</b>
</div>
</div>
`
});
Vue.component("recipe-info-cooking", {
props: ["recipe"],
computed: {
item: function(){
return mtinfo.items[this.recipe.items[0]];
}
},
template: /*html*/`
<div>
<item-preview :item="item" size="64"/>
Cook-time: <b>{{ recipe.width }}</b>
</div>
`
});
Vue.component("recipe-info-normal", {
props: ["recipe"],