JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>Human avatar/dress up. Several layers: background, scenery, body + clothes, foreground. Few poses to choose from. For now, render all on same canvas; can modify pet renderer class for separate canvases (editor tool) later.</p>

<div id='avatar-container'></div>

<div id='av-options'>

    <div id='av-options-skin' class='av-options'>
        Skin: <input type='color' id='select-skin' value='#C2AB9B'>
    </div>
    
    <div id='av-options-eyes' class='av-options'>
    Eyes: <select id='select-eye-style'>
    <option value='0'>No eyes</option>
    <option value='1'>Normal</option>
    <option value='2'>Closed</option>
    <option value='3'>Half-closed</option>
    <option value='4'>One closed</option>
    <option value='5'>Wide</option>
    <option value='6'>Smile</option>
    <option value='7'>Glare</option>
    <option value='8'>Quizzical</option>
    </select>
    <input type='color' id='select-eye-colour' value='#6B4E3A'>
    </div>
    
    <div id='av-options-hair' class='av-options'>
    Hair: <select id='select-hair-style'>
    <option value='0'>Bald</option>
    <option value='1'>Short</option>
    <option value='2'>Shoulder</option>
    <option value='3'>Long Straight</option>
    <option value='4'>Long Wavy</option>
    <option value='5'>Long Curly</option>
    <option value='0'>Plait</option>
    <option value='0'>Long Plait</option>
    </select>
    <input type='color' id='select-hair-colour1' value='#6B4E3A'>
    <br>
    <select id='select-hair-effect1'>
    <option value='0'>None</option>
    <option value='1'>Roots</option>
    <option value='2'>Tips</option>
    <option value='3'>Latter Half</option>
    <option value='4'>Streaks</option>
    <option value='5'>Gradient</option>
    <option value='6'>One Side</option>
    </select>
    <input type='color' id='select-hair-colour2' value='#6B4E3A'>
    <select id='select-hair-effect2'>
    <option value='0'>None</option>
    <option value='1'>Roots</option>
    <option value='2'>Tips</option>
 ...

CSS

div, img, canvas, button, p, a, ul, li {
    box-sizing: border-box;
}

#avatar-container {
    width: 300px;
    height: 400px;
    background-color: #eee;
}

#av-options {
    width: 800px;
    height: 500px;
    background-color: #eee;
    margin: 10px auto;
    position: relative;
}
#av-options .av-options {
    position: absolute;
    border: 1px solid grey;
    padding: 5px;
}

#av-options-skin {
    width: 220px;
    height: 50px;
    top: 0;
    left: 0;
}
#av-options-hair {
    top: 60px;
    left: 0;
    width: 220px;
    height: 200px;
}
#av-options-eyes {
    top: 0;
    left: 230px;
    width: 220px;
    height: 50px;
}

JavaScript

const db = {

    items: [
        {id: 1, name: "Scarf"},
        {id: 2, name: "Shirt"},
        {id: 3, name: "Socks"},
        {id: 4, name: "Long Socks"},
        {id: 5, name: "Shorts"},
        {id: 6, name: "Leggings"},
        {id: 7, name: "Trousers"},
        {id: 8, name: "T-shirt"},
        {id: 9, name: "Mini Jacket"},
        {id: 10, name: "Tie"},
        {id: 11, name: "Bowtie"},
        {id: 12, name: "Long-sleeved Top"},
        {id: 13, name: "Sandals"},
        {id: 14, name: "Roman Sandals"},
        {id: 15, name: "Fingerless Gloves"},
        {id: 16, name: "Witch Hat"},
        {id: 17, name: "Elf Ears"},
        {id: 18, name: "Feather Wings"},
        {id: 19, name: "Cat Tail"},
        {id: 20, name: "Mohican Hair"},
        {id: 21, name: "Long Wavy Hair"},
        {id: 22, name: "Scruffy Short Hair"},
        {id: 23, name: "Fringe Hair"},
        {id: 24, name: "Ponytail"}
    ],

    // Just a list of owned items.
    avatarWardrobe: [
    
    ],
    
    // Items currently applied.
    // Their colours etc can be changed freely.
    avatarWearing: [
        {itemId: 4}
    ]

};

$("#av-tab-buttons").on("click", ".av-tab-btn", function(){
    let tab = $(this).data("tab");
    $(".av-tab-btn").removeClass("av-active-tab");
    $(this).addClass("av-active-tab");
    
    $(".av-tab-content").hide();
    $("#av-tab-" + tab).show();
});