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

simple recipe grid

Browse Source
This commit is contained in:
BuckarooBanzay 2021-02-11 13:25:18 +01:00
parent 36c11ae141
commit 2c0d5bf379
4 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/css/mtinfo.css Normal file
View File

@ -0,0 +1,12 @@
.inventory-table td {
width: 64px;
height: 64px;
background: #00000065;
padding: 0px;
border: 0.25em solid #343434;
}
table.inventory-table {
table-layout: fixed;
}

1
app/index.html
View File

@ -7,6 +7,7 @@
<meta name="theme-color" content="#000">
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/all.min.css"/>
<link rel="stylesheet" href="css/mtinfo.css"/>
</head>
<body>
<div id="app">

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

@ -1,11 +1,15 @@
Vue.component("item-preview", {
props: {
item: { type: "string" },
item: { type: "object" },
link: { type: "boolean", default: true },
size: { type: "number", default: 300 }
},
computed: {
previewType: function(){
if (this.item.inventory_image){
return "invimage";
}
switch (this.item.drawtype){
case "normal": return "normal";
case "glasslike": return "normal";
@ -17,7 +21,7 @@ Vue.component("item-preview", {
}
},
template: /*html*/`
<div>
<router-link :to="'/items/' + item.name" :title="item.name">
<item-preview-inventoryimage
v-if="previewType == 'invimage'"
:item="item"
@ -28,7 +32,7 @@ Vue.component("item-preview", {
:item="item"
:size="size">
</item-preview-normal>
</div>
</router-link>
`
});

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

@ -5,7 +5,7 @@ Vue.component("recipe-info", {
template: /*html*/`
<div>
<recipe-info-normal v-if="recipe.type == 'normal'" :recipe="recipe"/>
<div v-else>{{ JSON.stringify(recipe) }}</div>
{{ JSON.stringify(recipe) }}
</div>
`
});
@ -13,7 +13,58 @@ Vue.component("recipe-info", {
Vue.component("recipe-info-normal", {
props: ["recipe"],
computed: {
table: function(){
const table = [
[null, null, null],
[null, null, null],
[null, null, null]
];
if (this.recipe.width == 0 && this.recipe.items.length == 2) {
// "shapeless" recipe
table[0][0] = this.recipe.items[0];
table[0][1] = this.recipe.items[1];
}
if (this.recipe.width == 1) {
table[0][0] = this.recipe.items[0];
}
if (this.recipe.width == 3){
let row = -1;
let col = 0;
for (let i=0; i<this.recipe.items.length; i++){
if (i % 3 == 0){
row++;
col = 0;
}
table[row][col] = this.recipe.items[i];
col++;
}
}
return table;
}
},
template: /*html*/`
<div>Normal recipe: {{ JSON.stringify(recipe) }}</div>
<table class="inventory-table">
<tr>
<td><item-preview v-if="table[0][0]" :item="mtinfo.items[table[0][0]]" size="64"/></td>
<td><item-preview v-if="table[0][1]" :item="mtinfo.items[table[0][1]]" size="64"/></td>
<td><item-preview v-if="table[0][2]" :item="mtinfo.items[table[0][2]]" size="64"/></td>
</tr>
<tr>
<td><item-preview v-if="table[1][0]" :item="mtinfo.items[table[1][0]]" size="64"/></td>
<td><item-preview v-if="table[1][1]" :item="mtinfo.items[table[1][1]]" size="64"/></td>
<td><item-preview v-if="table[1][2]" :item="mtinfo.items[table[1][2]]" size="64"/></td>
</tr>
<tr>
<td><item-preview v-if="table[2][0]" :item="mtinfo.items[table[2][0]]" size="64"/></td>
<td><item-preview v-if="table[2][1]" :item="mtinfo.items[table[2][1]]" size="64"/></td>
<td><item-preview v-if="table[2][2]" :item="mtinfo.items[table[2][2]]" size="64"/></td>
</tr>
</table>
`
});