index.html

<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="node_modules/jqueryui/jquery-ui.css" rel="stylesheet">
        <script src="node_modules/jquery/dist/jquery.js">
        </script>
        <script src="node_modules/jqueryui//jquery-ui.js">
        </script>
        <script src="code.js"></script>
        <style>
            canvas {
                display: block;
                float:left;
            }
            div.sidebar {
                float: left;
                padding-left: 10px;
                height: 600px;
                overflow: scroll;
                width: 400px;
            }
            div.footerbar {
                clear: both;
            }
            .sidebar .wall:hover, .sidebar .object:hover, .sidebar .spawnpoint:hover {
                background-color: blue;
            }
            .sidebar .walls, .sidebar .objects, .sidebar .parts, .sidebar .spawn {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .sidebar .objects li, .sidebar .spawn li {
                float: left;
            }

            .sidebar .commands {
                list-style: none;
            }

            .sidebar .walls img {
                height:16px;
            }

            .sidebar .objects img, .sidebar .spawn img {
                height: 50px;
            }

            .sidebar .walls img.special, .sidebar .objects img.special {
                height:auto;
            }

            div.notes {
                clear: both;
            }

            ul.parts img {
                height: 16px;
            }
        </style>
    </head>
    <body>
        <img src="Assets/Mat.png" id="background" style="display: none;">
        <img src="Assets/Mat2x.png" id="background2x" style="display: none;">
        <canvas width="600" height="600" id="canvas">

        </canvas>
        <div class="sidebar">
            <h3>Walls</h3>
            <div>
                <ul class="walls">
                    <li><img class="wall" src="Assets/Walls/Wide-Entrance-Wallx2.png" id="wide_entrance_wall_2" data-x1="16" data-y1="16" data-x2="561" data-y2="16"></li>
    
                    <li><img class="wall" src="Assets/Walls/Wallx12.png" id="wall_12" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Wide-Hatchway-Wallx5.png" id="wide_hatchway_wall_5" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Hatchway-Wallx3.png" id="hatchway_wall_3" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Window-Wallx3.png" id="window_wall_3" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Entrance-Wallx2.png" id="entrance_wall_2" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Cell-Wall.png" id="cell_wall" data-x1="11" data-y1="16" data-x2="284" data-y2="16"></li>
    
                    <li><img class="wall" src="Assets/Walls/Half-Wallx3.png" id="half_wall_3" data-x1="11" data-y1="16" data-x2="145" data-y2="16"></li>
                    <li><img class="wall" src="Assets/Walls/Half-Wall-Hatchwayx2.png" id="half_wall_hatchway_2" data-x1="11" data-y1="16" data-x2="145" data-y2="16"></li>
                    <li><img class="wall special" src="Assets/Walls/Quarantine-Partition.png" id="quarantine_partition" data-x1="2" data-y1="16" data-x2="265" data-y2="279" width="143"></li>
                </ul>
            </div>
            <h3>Objects</h3>
            <div>
                <ul class="objects">
                    <li><img class="object" src="Assets/Objects/Auto-doc.png" id="auto_doc"></li>
                    <li><img class="object" src="Assets/Objects/Chairx2.png" id="chair_2"></li>
                    <li><img class="object" src="Assets/Objects/CO2Scrubber.png" id="co2_scrubber"></li>
                    <li><img class="object" src="Assets/Objects/Conduit.png" id="conduit"></li>
                    <li><img class="object" src="Assets/Objects//GroundConduitx2.png" id="groundconduit"></li>
                    <li><img class="object" src="Assets/Objects/Large_Crate_Bright_Red.png" id="large_crate_bright_red"></li>
                    <li><img class="object" src="Assets/Objects/Large_Crate_Bright_Yellow.png" id="large_crate_bright_yellow"></li>
                    <li><img class="object" src="Assets/Objects/Large_Crate_Greenx2.png" id="large_crate_green_2"></li>
                    <li><img class="object" src="Assets/Objects/Large_Crate_Yellowx2.png" id="large_crate_yellow_2"></li>
                    <li><img class="object" src="Assets/Objects//Particle_Transmitter.png" id="particle_transmitter"></li>
                    <li><img class="object" src="Assets/Objects/Reactor.png" id="reactor"></li>
                    <li><img class="object" src="Assets/Objects/Shuttle.png" id="shuttle"></li>
                    <li><img class="object" src="Assets/Objects/Small_Crate_Bright_Red.png" id="small_crate_bright_red"></li>
                    <li><img class="object" src="Assets/Objects/Small_Crate_Bright_Yellow.png" id="small_crate_bright_yellow"></li>
                    <li><img class="object" src="Assets/Objects/Small_Crate_Greenx2.png" id="small_crate_green_2"></li>
                    <li><img class="object" src="Assets/Objects//Small_Crate_Redx2.png" id="small_crate_red_2"></li>
                    <li><img class="object" src="Assets/Objects/Tablex2.png" id="table_2"></li>
                    <li><img class="object" src="Assets/Objects//Workstationx2.png" id="workstation_2"></li>
                </ul>
            </div>
            <h3>Wall-mounted Objects</h3>
            <div>
                <ul class="objects">
                    <li><img class="object" src="Assets/Walldecoration/Advertising-Boardx2.png" id="advertising_board_2"></li>
                    <li><img class="object" src="Assets/Walldecoration/Bunk-Green.png" id="bunk_green"></li>
                    <li><img class="object" src="Assets/Walldecoration/Bunkx2.png" id="bunk_2"></li>
                    <li><img class="object special" src="Assets/Walldecoration/Girderx4.png" id="girder_4" width="250"></li>
                    <li><img class="object" src="Assets/Walldecoration/Ladder.png" id="ladder"></li>
                    <li><img class="object" src="Assets/Walldecoration/Lockerx2.png" id="locker_2"></li>
                    <li><img class="object" src="Assets/Walldecoration/Screen.png" id="screen"></li>
                    <li><img class="object" src="Assets/Walldecoration/Shop-Counterx2.png" id="shop_counter_2"></li>
                    <li><img class="object" src="Assets/Walldecoration/Shop-Display-Standx2.png" id="shop_display_stand_2"></li>
                    <li><img class="object" src="Assets/Walldecoration//Storage-Locker.png" id="storage_locker"></li>
                    <li><img class="object" src="Assets/Walldecoration/Wall-Consolex2.png" id="wall_console_2"></li>
                    <li><img class="object" src="Assets/Walldecoration/Zeds-Bar.png" id="zeds_bar"></li>
                </ul>
            </div>
            <h3>Airlocks / Spawnpoints</h3>
            <div>
                <ul class="spawn">
                    <li><img class="spawnpoint" src="Assets/Icons/Airlock-Door.png" id="airlock"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-1.png" id="entry-1"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-2.png" id="entry-2"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-3.png" id="entry-3"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-4.png" id="entry-4"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-5.png" id="entry-5"></li>
                    <li><img class="spawnpoint" src="Assets/Icons/Entry-Point-6.png" id="entry-6"></li>
                </ul>
            </div>
            <h3>Symbols</h3>
            <div>
                <ul class="objects">
                    <li><img class="object" src="Assets/Icons/Civilian-Blue.png" id="civilian-blue"></li>
                    <li><img class="object" src="Assets/Icons/Civilian-Green.png" id="civilian-green"></li>
                    <li><img class="object" src="Assets/Icons/Civilian-Yellow.png" id="civilian-yellow"></li>
                    <li><img class="object" src="Assets/Icons/Ganger.png" id="ganger"></li>
                    <li><img class="object" src="Assets/Icons/Security-Guard.png" id="security-guard"></li>
                    <li><img class="object" src="Assets/Icons/Objective-3UA.png" id="objective-3"></li>
                    <li><img class="object" src="Assets/Icons/Objective-5UA.png" id="objective-5"></li>
                    <li><img class="object" src="Assets/Icons/Objective-7UA.png" id="objective-7"></li>
                    <li><img class="object" src="Assets/Icons/Purge-Assassin.png" id="purge-assasin"></li>
                    <li><img class="object" src="Assets/Icons/Purge-Devastator.png" id="purge-devastator"></li>
                    <li><img class="object" src="Assets/Icons/Purge-Harvester.png" id="purge-harvester"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-1.png" id="obj-entry-1"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-2.png" id="obj-entry-2"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-3.png" id="obj-entry-3"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-4.png" id="obj-entry-4"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-5.png" id="obj-entry-5"></li>
                    <li><img class="object" src="Assets/Icons/Entry-Point-6.png" id="obj-entry-6"></li>
                </ul>
            </div>
            <h3>Functions</h3>
            <div>
                <ul class="commands">
                    <li><button id="delete" style="display:none;">Delete</button></li>
                    <li><button id="rotate" style="display:none;">Rotate</button></li>
                    <li><button id="save">Save Map</button><a style="display:none" id="save_link" download="map.json" href="">Download</a></li>
                    <li><button id="load">Load Map</button> <input type="file" id="load_file" style="display: none;"></li>
                    <li><button id="image">Generate Image</button><a style="display:none" id="image_link" download="map.png" href="">Download</a></li>
                    <li><button id="2xbutton">Double-sized Scenario</button></li>
                    <li><button id="1xbutton">Single-sized Scenario</button></li>
                </ul>
            </div>
            <h3>Parts List</h3>
            <div>
                <ul class="parts">

                </ul>                
            </div>
        </div>
        <div class="notes">
            <h3>Keyboard Shortcuts</h3>
            <p>
                When hovering over an object, press Backspace to delete it. Use the arrow keys left and right to rotate the object.
            </p>
            <p class="copyright">
                Core Space and all associated characters, names, places and things are ™ and © Battle Systems Ltd 2020. Used with permission. <a href="http://www.battlesystems.co.uk">www.battlesystems.co.uk</a>
            </p>
        </div>
    </body>
</html>