Crafting

crafting.markdown

Crafting

A Pen by roco on CodePen.

License.

index.html

<div class="container">
   <h1>DayZ Crafting (Custom)</h1><hr/>
        <h2>CATEGORY:</h2>
        <select id="itemCategory" class="form-control">
            <option value="">Select Category</option>
            <option value="Crafting_Resources">Crafting Resources</option>
            <option value="Weapons_and_Ammo">Weapons and Ammo</option>
            <option value="Medical">Medical</option>
            <option value="Base_Building">Base Building</option>
        </select>

        <h2>ITEM:</h2>
        <select id="itemSelect" class="form-control" disabled>
            <option value="">Select Item</option>
        </select>

        <div id="itemDetails"></div>
    </div>

<div>
  <center>
    <span class="glow">Made with ☕ by Devshades</span>
    </div>

script.js

var itemCategorySelect = document.getElementById('itemCategory');
var itemSelect = document.getElementById('itemSelect');
var itemDetailsContainer = document.getElementById('itemDetails');

itemCategorySelect.addEventListener('change', function() {
    var category = this.value;
    itemSelect.disabled = category === '';
    itemSelect.innerHTML = '<option value="">Select Item</option>';
    itemDetailsContainer.innerHTML = ''; // Clear item details when category changes

    if (category !== '') {
        var data = getData(category);
        data.forEach(function(item) {
            var option = document.createElement('option');
            option.value = item.Item;
            option.innerText = item.Item;
            itemSelect.appendChild(option);
        });
    }
});

itemSelect.addEventListener('change', function() {
    var selectedItem = this.value;
    var category = itemCategorySelect.value;
    var data = getData(category);

    var selectedItemData = data.find(function(item) {
        return item.Item === selectedItem;
    });

    // Generate HTML table for item details
    var tableHTML = '<table>';
    tableHTML += '<tr><th colspan="2">' + selectedItemData.Item + '</th></tr>';
    selectedItemData.Materials.forEach(function(material) {
        var materialName = Object.keys(material)[0];
        var materialQuantity = material[materialName];
        tableHTML += '<tr><td>' + materialName + '</td><td>' + materialQuantity + '</td></tr>';
    });
    tableHTML += '</table>';

    itemDetailsContainer.innerHTML = tableHTML;
});

// Mock function to fetch data based on category (replace with actual data retrieval)
function getData(category) {
    switch (category) {
       case 'Crafting_Resources':
                return [
                    {
                        "Item": "Improvised Rope 1",
                        "Materials": [
                            {"Rags": 6},
                            {"Rags": 6}
                        ]
                    },
                    {
                        "Item": "Improvised Rope 2",
                        "Materials": [
                            {"Pile of Guts": 1},
                            {"Knife": 1}
                        ]
                    },
                    {
                        "Item": "Short Stick 1",
                        "Materials": [
                            {"Long Wooden Stick": 1},
                            {"Knife": 1}
                        ]
                    },
                    {
                        "Item": "Short Stick 2",
                        "Materials": [
                            {"Firewood": 1},
                            {"Hatchet": 1}
                        ]
                    },
                    {
                        "Item": "Plank 1",
                        "Materials": [
                            {"Lumber Pile": 1},
                            {"Saw": 1}
                        ]
                    },
                    {
                        "Item": "Plank 2",
                        "Materials": [
                            {"Wooden Log": 1},
                            {"Saw": 1}
                        ]
                    },
                    {
                        "Item": "Burlap Strips",
                        "Materials": [
                            {"Burlap Sack": 1},
                            {"Knife": 1}
                        ]
                    }
                ];
            case 'Weapons_and_Ammo':
                return [
                    {
                        "Item": "Improvised Spear",
                        "Materials": [
                            {"Long Wooden Stick": 1},
                            {"Bones": 1}
                        ]
                    },
                    {
                        "Item": "Baseball Bat Nailed",
                        "Materials": [
                            {"Baseball Bat": 1},
                            {"Nails": 13}
                        ]
                    },
                    {
                        "Item": "Improvised Suppressor",
                        "Materials": [
                            {"Plastic Bottle": 1},
                            {"Duct tape": 1}
                        ]
                    },
                    {
                        "Item": "Upgraded Improvised Suppressor",
                        "Materials": [
                            {"Improvised Suppressor":1},
{"Epoxy": 1}
]
},
{
"Item": "Tripwire",
"Materials": [
{"Short Stick": 2},
{"Metal Wire": 1}
]
},
{
"Item": "Improvised Arrow",
"Materials": [
{"Stick": 1},
{"Knife": 1},
{"Feathers": 1}
]
}
];
case 'Medical':
return [
{
"Item": "Rag",
"Materials": [
{"Knife": 1},
{"Variation of clothes": 1}
]
},
{
"Item": "IV Saline Bag",
"Materials": [
{"Saline Bag": 1},
{"IV Start Kit": 1}
]
},
{
"Item": "IV Bloodbag",
"Materials": [
{"Blood Collection Kit": 1},
{"IV Start Kit": 1}
]
},
{
"Item": "Splint",
"Materials": [
{"Rag/Bandage/Duct Tape": 1},
{"Stick": 1}
]
},
{
"Item": "Improvised Gas Mask Filter",
"Materials": [
{"Charcoal Tablets": "1-10"},
{"Dust Mask": 1},
{"Plastic Bottle": 1}
]
}
];
case 'Base_Building':
return [
{
"Item": "Fence Kit",
"Materials": [
{"Rope": 1},
{"Wooden Stick": 2}
]
},
{
"Item": "Watchtower Kit",
"Materials": [
{"Rope": 1},
{"Wooden Stick": 4}
]
},
{
"Item": "Flag Pole Kit",
"Materials": [
{"Rope": 1},
{"Wooden Stick": 4}
]
},
{
"Item": "Tarp Shelter",
"Materials": [
{"Long Wooden Stick": 4},
{"Tarp": 4}
]
},
{
"Item": "Shelter Kit",
"Materials": [
{"Rope": 1},
{"Wooden Stick": 4}
]
},
{
"Item": "Fire Barrel",
"Materials": [
{"Oil Barrel": 1},
{"Knife": 1}
]
},
{
"Item": "Wooden Crate",
"Materials": [
{"Plank": 8},
{"Nails": 16}
]
},
{
"Item": "Base",
"Materials": [
{"Flag pole kit": 1},
{"Log": 1},
{"Sledgehammer": 1}
]
},
{
"Item": "Support",
"Materials": [
{"LARGE stones": 32},
{"Logs": 6},
{"Shovel or Pickaxe": 1}
]
},
{
"Item": "Pole",
"Materials": [
{"Logs": 3},
{"Nails": 60},
{"Metal Wire": 1},
{"Rope": 1},
{"Hatchet or Hammer": 1}
]
},
{
"Item": "Base",
"Materials": [
{"Fence kit": 1},
{"Logs": 2},
{"Shovel": 1}
]
},
{
"Item": "Upper & Lower Frame",
"Materials": [
{"Planks": 8},
{"Nails": 16},
{"Hammer or Hatchet": 1}
]
},
{
"Item": "Wood Paneling",
"Materials": [
{"Planks": 10},
{"Nails": 20},
{"Hatcher or Hammer": 1}
]
},
{
"Item": "Metal Paneling",
"Materials": [
{"Sheet Metal": 6},
{"Nails": 24},
{"Hatchet or Hammer": 1}
]
},
{
"Item": "Watchtower",
"Materials": [
{"Watchtower Kit": 1},
{"Logs": 4},
{"Shovel": 1}
]
},
{
"Item": "Each level's base (L1/L2/L3)",
"Materials": [
{"Wooden Logs": 4}
]
},
{
"Item": "Each level's floor (L1/L2)",
"Materials": [
{"Nails": 20},
{"Planks": 10}
]
},
{
"Item": "Each level's stairs (L1/L2)",
"Materials": [
{"Nails": 18},
{"Planks": 6}
]
},
{
"Item": "Wood Paneling",
"Materials": [
{"Nails": 10},
{"Planks": 4}
]
},
{
"Item": "Metal Paneling",
"Materials": [
{"Nails": 10},
{"Sheet Metal": 6}
]
},
{
"Item": "Roof",
"Materials": [
{"Nails": 20},
{"Sheet Metal": 6},
{"Wooden Planks": 6}
]
},
{
"Item": "Double Door kit",
"Materials": [
{"Woodenstick": 2},
{"Rope": 1}
]
},
{
"Item": "Door Base",
"Materials": [
{"Logs": 2},
{"Shovel/Pickaxe": 1}
]
},
{
"Item": "2x Bracings (frames)",
"Materials": [
{"Wooden Plank": 8},
{"Nails": 30}
]
},
{
"Item": "2x Wooden Paneling",
"Materials": [
{"Wooden Plank": 16},
{"Nails": 30}
]
},
{
"Item": "2x Metal Paneling",
"Materials": [
{"Sheet Metal": 4},
{"Nails": 40}
]
},
{
"Item": "Fireplace",
"Materials": [
{"Short Stick": 1},
{"Rag": 1}
]
},
{
"Item": "Fireplace Upgrade",
"Materials": [
{"Fireplace Kit": 1},
{"Stone": 1}
]
},
{
"Item": "Hand Drill Kit",
"Materials": [
{"Oak Bark": 1},
{"Short Stick": 1}
]
},
{
"Item": "Improvised Cooking Stand",
"Materials": [
{"Short Stick": 2},
{"Long Stick": 1}
]
},
{
"Item": "Torch",
"Materials": [
{"Short Stick": 1},
{"Rag": 1}
]
},
{
"Item": "Gas Stove",
"Materials": [
{"Gas Canister": 1},
{"Gas Stove": 1}
]
},
{
"Item": "Gas Lamp",
"Materials": [
{"Gas Canister": 1},
{"Gas Lamp": 1}
]
},
{
"Item": "Stone Knife",
"Materials": [
{"Small Stone": 2}
]
},
{
"Item": "Small Stone",
"Materials": [
{"Stone": 1},
{"Pickaxe": 1}
]
},
{
"Item": "Stone Spear",
"Materials": [
{"Small Stone": 2},
{"Long Stick": 1}
]
},
{
"Item": "Bone Spear",
"Materials": [
{"Bone": 2},
{"Long Stick": 1}
]
},
{
"Item": "Fertilizer (Garden Lime)",
"Materials": [
{"Guts": "10%"},
{"Plant Material": "10%"}
]
},
{
"Item": "Small Fish Trap",
"Materials": [
{"Plastic Bottle": 1},
{"Knife": 1}
]
},
{
"Item": "Fish Net Trap",
"Materials": [
{"Netting": 1},
{"Metal Wire": 1}
]
},
{
"Item": "Improvised Fishing Rod",
"Materials": [
{"Long Wooden Stick": 1},
{"Rope": 1}
]
},
{
"Item": "Bone Fishing Hook",
"Materials": [
{"Bones": 1},
{"Knife": 1}
]
},
{
"Item": "Rabbit Snare",
"Materials": [
{"Short Stick": 1},
{"Metal Wire": 1}
]
}
];
default:
return {};
}
}

style.css

body {
    background-color: #1a1a1a;
    color: #fff;
    font-family: 'Arial', sans-serif;
}

h2 {
  color: #D50000
}
.container {
    max-width: 600px;
    margin: 100px auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 10px;
    border-bottom: 1px solid #666;
}

th {
    background-color: #444;
    color: #fff;
    text-align: left;
}

.select-category, .select-item {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: #444;
    color: #fff;
}

.select-item:disabled {
    opacity: 0.5;
}

.select-item option {
    background-color: #333;
}

.item-details-container {
    margin-top: 20px;
}
.glow {
    animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
    0% {
        color: #ff0000;
        text-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 50px #ff0000, 0 0 60px #ff0000, 0 0 70px #ff0000;
    }
    100% {
        color: #ff3333;
        text-shadow: 0 0 20px #ff3333, 0 0 30px #ff3333, 0 0 40px #ff3333, 0 0 50px #ff3333, 0 0 60px #ff3333, 0 0 70px #ff3333, 0 0 80px #ff3333;
    }
}

.form-control {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background-color: #444;
    color: #fff;
    margin-bottom: 10px;
}

.form-control:disabled {
    opacity: 0.5;
}

.credits {
    margin-top: 50px;
    color: #ccc;
    font-size: 14px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />