Toggle sidebar

Difference between revisions of "Mir4Test" - LOMCN Wiki

View source History
(Created page with "== AVA Mir 4 Map Database == This page provides a database of stages in the AVA Mir 4 game. === Search and Filter === <form method="get" action=""> {| class="wikitable" style...")
 
Line 1: Line 1:
−
== AVA Mir 4 Map Database ==
 
−
This page provides a database of stages in the AVA Mir 4 game.
 
  
−
=== Search and Filter ===
+
<!DOCTYPE html>
−
<form method="get" action="">
+
<html lang="en">
−
{| class="wikitable" style="width:100%; margin-bottom:10px; background-color:#f9f9f9;"
+
<head>
−
|-
+
    <meta charset="UTF-8">
−
! style="text-align:left;" | Search:
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
| <input type="text" name="search" placeholder="Search by Stage Name or ID" value="{{#urlget:search|}}">
+
    <title>Create Recipe</title>
−
! style="text-align:left;" | Type:  
+
    <link rel="icon" href="Images/favicon.ICO" type="image/x-icon">
−
| <select name="type" onchange="this.form.submit();">
+
    <style>
−
    <option value="">All Types</option>
+
        body {
−
    <!-- Add options dynamically -->
+
            font-family: Arial, sans-serif;
−
    <option value="Custom" {{#ifeq:{{#urlget:type}}|Custom|selected}} >Custom</option>
+
            background: url('Images/backdrop.bmp') no-repeat center center fixed;
−
    <option value="Field" {{#ifeq:{{#urlget:type}}|Field|selected}} >Field</option>
+
            background-size: cover;
−
    <option value="Fight" {{#ifeq:{{#urlget:type}}|Fight|selected}} >Fight</option>
+
            margin: 0; padding: 20px; color: #fff; text-align: center;
−
    <!-- Add remaining stage types as options -->
+
        }
−
</select>
+
        h1 { color: #ffcc00; }
−
! style="text-align:left;" | Sort by:  
+
        .container {
−
| <select name="sort" onchange="this.form.submit();">
+
            background: rgba(0, 0, 0, 0.7); margin: 0 auto; padding: 20px;
−
    <option value="id_asc" {{#ifeq:{{#urlget:sort}}|id_asc|selected}}>Stage ID (Low to High)</option>
+
            border-radius: 10px; max-width: 600px; text-align: left;
−
    <option value="id_desc" {{#ifeq:{{#urlget:sort}}|id_desc|selected}}>Stage ID (High to Low)</option>
+
        }
−
</select>
+
        label, select, input, button { display: block; margin: 10px 0; width: 100%; }
−
|}
+
        select, input, button {
−
<button type="submit">Apply Filters</button>
+
            padding: 8px; border-radius: 5px; border: none;
−
</form>
+
        }
 +
        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;
 +
        }
  
−
=== Stage List ===
+
        .return-button:hover {
−
{| class="wikitable sortable" style="width:100%;"
+
            background-color: #2b5cb5;
−
|-
+
        }
−
! Stage ID
+
    </style>
−
! Stage Name
+
</head>
−
! Type
+
<body>
−
|-
+
    <h1>Create Recipe</h1>
−
<!-- Example of dynamic rows -->
+
    <a href="../database.html" class="return-button">Return to Main Database</a>
−
| 1
 
−
| Unnamed Stage
 
−
| Field
 
−
|-
 
−
| 2
 
−
| Siege Battle
 
−
| Siege
 
−
|-
 
−
| 3
 
−
| Dungeon Maze
 
−
| Labyrinth
 
−
|}
 
  
−
=== Pagination ===
+
    <div class="container">
−
<div style="text-align:center;">
+
        <label>Recipe (Item Name):</label>
−
<!-- Pagination links -->
+
        <select id="recipeTitle"></select>
−
[{{fullurl:{{FULLPAGENAME}}|page=1}} 1] | [{{fullurl:{{FULLPAGENAME}}|page=2}} 2] | [{{fullurl:{{FULLPAGENAME}}|page=3}} 3]
+
 
−
</div>
+
        <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">
 +
 
 +
        <!-- Tools Section -->
 +
        <div class="section">
 +
            <label>Tools:</label>
 +
            <div id="tools-container"></div>
 +
            <button type="button" onclick="addTool()">Add Tool</button>
 +
        </div>
 +
 
 +
        <!-- Ingredients Section -->
 +
        <div class="section">
 +
            <label>Ingredients:</label>
 +
            <div id="ingredients-container"></div>
 +
            <button type="button" onclick="addIngredient()">Add Ingredient</button>
 +
        </div>
 +
 
 +
        <!-- File Name -->
 +
        <label>File Name:</label>
 +
        <input type="text" id="fileName" placeholder="Enter file name (no extension)">
 +
 
 +
        <button onclick="generateRecipe()">Generate Recipe File</button>
 +
    </div>
 +
 
 +
    <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>

Revision as of 23:56, 23 February 2025

<!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>

Retrieved from ‘https://www.lomcn.org/wiki/index.php?title=Mir4Test&oldid=3604’
Top Bottom