<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Recipe</title>
<link rel="icon" href="Images/favicon.ICO" type="image/x-icon">
<style>
body {
font-family: Arial, sans-serif;
background: url('Images/backdrop.bmp') no-repeat center center fixed;
background-size: cover;
margin: 0; padding: 20px; color: #fff; text-align: center;
}
h1 { color: #ffcc00; }
.container {
background: rgba(0, 0, 0, 0.7); margin: 0 auto; padding: 20px;
border-radius: 10px; max-width: 600px; text-align: left;
}
label, select, input, button { display: block; margin: 10px 0; width: 100%; }
select, input, button {
padding: 8px; border-radius: 5px; border: none;
}
button { background: #4285F4; color: #fff; font-weight: bold; cursor: pointer; }
button:hover { background: #2b5cb5; }
.section { margin-top: 20px; }
.return-button {
display: block; margin: 20px auto; background-color: #4285F4; color: #fff;
padding: 10px 20px; border-radius: 5px; text-decoration: none;
}
.return-button {
display: inline-block;
margin: 20px 0;
background-color: #4285F4;
color: #fff;
text-decoration: none;
border-radius: 5px;
padding: 10px 20px;
font-weight: bold;
transition: background-color 0.3s ease;
}
.return-button:hover {
background-color: #2b5cb5;
}
</style>
</head> <body>
Create Recipe
<a href="../database.html" class="return-button">Return to Main Database</a>
<label>Recipe (Item Name):</label>
<select id="recipeTitle"></select>
<label>Amount:</label>
<input type="number" id="amount" value="1" min="1">
<label>Chance (%):</label>
<input type="number" id="chance" value="100" min="1" max="100">
<label>Gold Cost:</label>
<input type="number" id="goldCost" value="0" min="0">
<label>Tools:</label>
<button type="button" onclick="addTool()">Add Tool</button>
<label>Ingredients:</label>
<button type="button" onclick="addIngredient()">Add Ingredient</button>
<label>File Name:</label>
<input type="text" id="fileName" placeholder="Enter file name (no extension)">
<button onclick="generateRecipe()">Generate Recipe File</button>
<script>
let itemDatabase = [];
async function loadItemDatabase() {
const response = await fetch('csv/ItemDatabase.csv');
const text = await response.text();
const rows = text.split(/\r?\n/).map(row => row.split(',').map(cell => cell.trim()));
const headers = rows.shift();
const nameIndex = headers.indexOf('ItemName');
itemDatabase = rows.map(row => row[nameIndex]).filter(name => name);
populateDropdowns();
addTool(); // Add the first tool input
addIngredient(); // Add the first ingredient input
}
function populateDropdowns() {
const dropdowns = ['recipeTitle'];
dropdowns.forEach(id => {
const select = document.getElementById(id);
addNoneOption(select);
itemDatabase.forEach(name => {
const option = document.createElement('option');
option.value = name;
option.textContent = name;
select.appendChild(option);
});
});
}
function addNoneOption(select) {
const noneOption = document.createElement('option');
noneOption.value = "";
noneOption.textContent = "None";
select.appendChild(noneOption);
}
function addTool() {
const container = document.getElementById('tools-container');
const toolDiv = document.createElement('div');
toolDiv.innerHTML = `
<select>
${itemDatabase.map(name => `<option value="${name}">${name}</option>`).join()}
<option value="" selected>None</option>
</select>
<button type="button" onclick="removeElement(this)">Remove</button>
`;
container.appendChild(toolDiv);
}
function addIngredient() {
const container = document.getElementById('ingredients-container');
const ingDiv = document.createElement('div');
ingDiv.innerHTML = `
<select>
${itemDatabase.map(name => `<option value="${name}">${name}</option>`).join()}
<option value="" selected>None</option>
</select>
<input type="number" placeholder="Quantity" min="1" value="1">
<input type="number" placeholder="Dura" min="0">
<button type="button" onclick="removeElement(this)">Remove</button>
`;
container.appendChild(ingDiv);
}
function removeElement(button) {
button.parentElement.remove();
}
function generateRecipe() {
const title = document.getElementById('recipeTitle').value || "Unknown";
const amount = document.getElementById('amount').value;
const chance = document.getElementById('chance').value;
const goldCost = document.getElementById('goldCost').value;
// Tools
const tools = Array.from(document.querySelectorAll('#tools-container select'))
.map(select => select.value)
.filter(value => value);
// Ingredients
const ingredients = Array.from(document.querySelectorAll('#ingredients-container div'))
.map(div => {
const selects = div.querySelectorAll('select, input');
const name = selects[0].value;
const quantity = selects[1].value;
const dura = selects[2].value;
return name ? `${name} ${quantity}${dura ? ` ${dura}` : }` : null;
}).filter(item => item);
// Build content
const content = `
[Recipe] Amount ${amount} Chance ${chance} Gold ${goldCost}
[Tools] ${tools.join('\n') || 'None'}
[Ingredients] ${ingredients.join('\n') || 'None'}
`.trim();
// Save to file
const fileName = document.getElementById('fileName').value || title;
const blob = new Blob([content], { type: 'text/plain' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = `${fileName}.txt`;
link.click();
}
document.addEventListener('DOMContentLoaded', loadItemDatabase);
</script>
</body> </html>
