+ {{ data.index[currentElement][0] }} {{ data.index[currentElement][1] }}
-
- {{currentHiddenFromLength}} entries shown
+
+
+
+
Crafting Recipe
+
+
+ |
+ {{ data.index[recipe.A][0] }} {{ data.index[recipe.A][1] }}
+ |
+ + |
+
+ {{ data.index[recipe.B][0] }} {{ data.index[recipe.B][1] }}
+ |
+ = |
+
+ {{ data.index[recipe.C][0] }} {{ data.index[recipe.C][1] }}
+ |
+
+
+
+ Loading...
+
-
@@ -313,6 +341,8 @@
Used in
el: '#app',
data: {
data: { index: {}, list: [], costs: {}, data: {}, metadata: { recipeCount: 0, loadedChunks: [] } },
+ craftingTreeData: [],
+ craftingTreeReady: false,
currentElement: "",
showHiddenRecipes: false,
searchQuery: "",
@@ -377,6 +407,12 @@ Used in
currentHiddenToLength: function () {
return this.data.data[this.currentElement]?.hiddenTo.length || 0
},
+ currentFromLength: function () {
+ return this.currentFrom.length + (this.data.data[this.currentElement]?.hiddenFrom.length || 0);
+ },
+ currentToLength: function () {
+ return this.currentTo.length + (this.data.data[this.currentElement]?.hiddenTo.length || 0);
+ },
elementList: function () {
console.log("(computed) elementList")
// console.log(this.data.index)
@@ -387,13 +423,24 @@ Used in
console.log("(computed) elementCount")
return Object.keys(this.data.index).length - 1;
},
+ isDefaultElement: function(){
+ return this.data.costs[this.currentElement] == 1;
+ }
},
methods: {
navigateTo: function (element) {
- if (!this.data.data[element] && element != "") {
- this.loadChunk(getChunk(element))
+ if (element != "") {
+ if(!this.data.data[element]){
+ this.loadChunk(getChunk(element));
+ }
+ this.craftingTreeData = [];
+ this.craftingTreeReady = false;
+ this.calcCraftingTree(element).then(result => {
+ this.craftingTreeData = result;
+ this.craftingTreeReady = true;
+ });
}
- setQuery({ e: this.currentElement });
+ setQuery({ e: element });
this.showHiddenRecipes = false;
this.currentElement = element;
this.loaded = 1000
@@ -421,14 +468,49 @@ Used in
}
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
},
- loadChunk: function (chunk) {
- fetch(DATA_PREFIX + `chunk-${chunk}.json`)
- .then(response => { console.log("Loaded chunk", chunk); return response.json() })
+ loadChunk: async function (chunk) {
+ return fetch(DATA_PREFIX + `chunk-${chunk}.json`)
+ .then(response => {
+ console.log("Loaded chunk", chunk);
+ return response.json()
+ })
.then(data => {
this.data.data = Object.freeze(Object.assign({}, this.data.data, data))
this.data.metadata.loadedChunks.push(chunk)
- console.log(this.data.data)
- })
+ });
+ },
+ calcCraftingTree: async function(element) {
+ if (this.data.costs[element] == 1) {
+ return [];
+ }
+
+ let craftingList = [];
+ let usedElements = new Set();
+ let result = [];
+ craftingList.push(element);
+
+ while (craftingList.length > 0) {
+ let thisElement = craftingList.shift();
+ if (usedElements.has(thisElement)) {
+ continue;
+ }
+ usedElements.add(thisElement);
+
+ if (!this.data.data[thisElement] && thisElement != "") {
+ await this.loadChunk(getChunk(thisElement));
+ }
+
+ result.unshift({A: this.data.data[thisElement].from[0][0], B: this.data.data[thisElement].from[0][1], C: thisElement});
+
+ if (this.data.costs[this.data.data[thisElement].from[0][0]] != 1) {
+ craftingList.push(this.data.data[thisElement].from[0][0]);
+ }
+
+ if (this.data.costs[this.data.data[thisElement].from[0][1]] != 1) {
+ craftingList.push(this.data.data[thisElement].from[0][1]);
+ }
+ }
+ return result;
}
},
mounted() {
diff --git a/web/styles.css b/web/styles.css
index 866f3291..9b2d1988 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -4,7 +4,6 @@
body {
font-family: "Roboto", sans-serif;
- width: 100vw;
height: 100vh;
background-color: #191919;
color: #c6c7c7;
@@ -46,11 +45,21 @@ body {
border: 1px solid #45505c;
}
+.details-wrapper {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
.ingredients-flex {
display: flex;
flex-direction: row;
gap: 2rem;
text-align: center;
+ background: #202020;
+ padding: 20px;
+ border-radius: 10px;
+ margin: 20px;
}
.ingredients-list {
@@ -87,13 +96,13 @@ body {
align-items: center;
}
-@media (max-width: 900px) {
+@media (max-width: 1000px) {
.ingredients-flex {
flex-direction: column;
}
#app {
- padding: 1rem 1rem 3rem;
+ padding: 1rem 1rem 1rem;
}
}
From 080ec0c35a516d094c70feff91140ad46f634d4a Mon Sep 17 00:00:00 2001
From: Reu Zuidema <22671898+reumarks@users.noreply.github.com>
Date: Sun, 25 Feb 2024 18:35:08 -0500
Subject: [PATCH 02/12] Added very basic sliding panel design
---
web/index.html | 116 ++++++++++++++++++++++++++-----------------------
web/styles.css | 74 ++++++++++++++++++++++---------
2 files changed, 115 insertions(+), 75 deletions(-)
diff --git a/web/index.html b/web/index.html
index f066588f..d126d003 100644
--- a/web/index.html
+++ b/web/index.html
@@ -84,42 +84,15 @@ Enjoying my site?