BitBuilder

A web based freehand tool for Bitfighter.

by thread

HTML

<h1>BitBuilder</h1>


<h2>A Bitfighter Freehand Tool</h2>

<div id="pannel">
    <div id="canWrapper">
        <canvas id="myCanvas" width="500px" height="500px"></canvas>
    </div>
    <div id='interface'>
        <br/>
        <p id="mousepos">Mouse Position: 0.000, 0.000</p>
        <p>Hold down 'x' to move only in the the x direction. Hold down 'z' to move only in the y direction</p>
        <hr/>Workarea Size:
        <select id="scale" name="scale">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        <br/>Object Type:
        <select id="obj" name="obj">
            <option value="wall">Line</option>
            <option value="health">Point</option>
            <option value="zone">Fill</option>
        </select>
        <hr/>
        <p>
            <button id="save">Save</button>
            <button id="clear">Clear</button>
        </p>
        <div id="wall" class="gui">
            <p>
                <button id="undo">Undo</button>
                <br/>Draw Style:
                <button id="style">Points</button>
                <br/><span id="help1">Left click to add a point in a wall.</span>

            </p>
            <p>Wall Width:
                <select id="size" name="size">
                    <option value="50">50</option>
                    <option value="40">40</option>
                    <option value="30">30</option>
                    <option value="20">20</option>
                    <option value="10">10</option>
                    <option value="0">0 (LineItem)</option>
                </select>
            </p>
        </div>
        <div id="health" class="gui" style="display:none;">
            <p>Object:
                <select id="pointType">
                    <option value="RepairItem">RepairItem</option>
                    <option...

CSS

body {
          margin: 0px;
          padding: 0px;
          background-color: #000;
      }
      h1, h2 {
          display: block;
          text-align:center;
          margin: 10px;
          color: white;
      }
      canvas {
          width:500px;
          background-color: #999;
      }
      #pannel {
          margin-top: 10px;
          margin-bottom: 10px;
          background-color: #777;
      }
      #canWrapper {
          float: left;
          margin: 10px;
      }
      #output {
          margin: 10px;
          border: 1px solid black;
          background-color: white;
      }
      #clear {
          clear: both;
      }

JavaScript

//BitBuilder!
var bitBuilder = bitBuilder || {};
bitBuilder.x = 0;
bitBuilder.y = 0;
bitBuilder.points = [];
bitBuilder.walls = [];
bitBuilder.lockx = false;
bitBuilder.locky = false;
bitBuilder.size = 50;
bitBuilder.image = new Image();
bitBuilder.freeDraw = false;
bitBuilder.selectedItem = 'wall';
bitBuilder.repairItem = 'http://i.imgur.com/OZaWaBm.png';
bitBuilder.energyItem = 'http://i.imgur.com/ttEWG7K.png';
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');


//-------------------------------------------------------------------------------------
//event handlers

$(document).on('keydown', function (e) {
    if (e.which === 90) { // 'z' pressed
        bitBuilder.lockx = true;
    } else if (e.which === 88) { // 'x' pressed
        bitBuilder.locky = true;
    }
});

$(document).on('keyup', function (e) {
    if (e.which === 90) { // 'z' pressed
        bitBuilder.lockx = false;
    } else if (e.which === 88) { // 'x' pressed
        bitBuilder.locky = false;
    }
});

$('#save').click(function () {
    save();
    bitBuilder.points.length = 0;
});

$('#clear').click(function () {
    bitBuilder.points.length = 0;
    drawLines();
});

$('#undo').click(function () {
    if (bitBuilder.points.length > 0) {
        bitBuilder.points.length -= 1;

        bitBuilder.x = bitBuilder.points[bitBuilder.points.length - 1].x;
        bitBuilder.y = bitBuilder.points[bitBuilder.points.length - 1].y;

        drawLines();
    }
});

$('#style').click(function () {
    if (bitBuilder.freeDraw) {
        bitBuilder.freeDraw = false;
        $('#style').html('Points');
        $('#help1').html('Left click to add a point in a wall.');
    } else {
        bitBuilder.freeDraw = true;
        $('#style').html('Freehand');
        $('#help1').html('Left click to start a wall then click again to end.');
    }

    bitBuilder.points.length = 0;
    drawLines();
});

$('#scale').on('change', function (e) {
    bitBuilder.scale =...