supernullset/index.html

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  <title>battleship</title>
</head>
<body>
  <div id="board">
  </div>
</body>
<footer>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
  <script src="./main.js"></script>
</footer>
</html>

## main-uncompiled.js
export function handle_click(element, hit_boxes) {
    let status_color;
    let hit_color = "#75AF1D"
    let miss_color = "#CC3300"
    let cell = d3.select(element)

    if (hit_boxes.indexOf(cell.attr("index")) != -1) {
        status_color = hit_color
    } else {
        status_color = miss_color
    }
    cell.style("fill", status_color)
}

export function place_ship(ship, occupied) {
    let ship_placed = false
    let ship_length = ship[0]
    let bad_canidates = []
    let vertical = false
    let r = Math.round(Math.random() * 10)

    let is_viable_point = function(x,y) {
        let point = [x, y].toString()
        return (occupied.indexOf(point) == -1) && (bad_canidates.indexOf(point) == -1)
    }

    if (r <= 5) {
        vertical = true
    }

    while (ship_placed == false) {
        let start_x = Math.round(Math.random() * 9)
        let start_y = Math.round(Math.random() * 9)

        // if the guess cell is occupied, try again
        if (!is_viable_point(start_x, start_y)) {
            continue
        }

        let placement_direction;
        let r = Math.round(Math.random() * 9)

        // Search for canidates for placing a ship
        if (vertical) { // Account for vertical placement
            if ((start_x + ship_length) > 9) {
                continue
            } else {
                let is_placeable = true;
                for (let i=0; i < ship_length; i++) {
                    if (!is_viable_point(start_x + i, start_y)) {
                        is_placeable = false
                    }
                }
                if (is_placeable == true){
                    for (let i=0; i < ship_length; i++) {
                        let cell = [start_x + i, start_y].toString()
                        occupied.push(cell)
                    }
                    ship_placed = true
                }
            }

            if ((start_x - ship_length) < 0) {
                continue
            } else {
                let is_placeable = true;
                for (let i=0; i < ship_length; i++) {
                    if (!is_viable_point(start_x - i, start_y)) {
                        is_placeable = false
                    }
                }
                if (is_placeable == true) {
                    for (let i=0; i < ship_length; i++) {
                        let cell = [start_x - i, start_y].toString()
                        occupied.push(cell)
                    }
                    ship_placed = true
                }
            }
        } else {
            if ((start_y + ship_length) > 9) {
                continue
            } else {
                let is_placeable = true;
                for (let i=0; i < ship_length; i++) {
                    if (!is_viable_point(start_x, start_y + i)) {
                        is_placeable = false
                    }
                }
                if (is_placeable == true) {
                    for (let i=0; i < ship_length; i++) {
                        let cell = [start_x, start_y + i].toString()
                        occupied.push(cell)
                    }
                    ship_placed = true
                }
            }

            if ((start_y - ship_length) < 0) {
                break
            } else {
                let is_placeable = true;
                for (let i=0; i < ship_length; i++) {
                    if (is_viable_point(start_x, start_y - i)) {
                        is_placeable = false
                    }
                }
                if (is_placeable == true) {
                    for (let i=0; i < ship_length; i++) {
                        let cell = [start_x, start_y - i].toString()
                        occupied.push(cell)
                    }
                    ship_placed = true
                }
            }
        }
    }
    return
}


export function assign_ship_placement(gridSize) {

    //assume initial state is horizontal
    let ship_dimensions = [[5, 1], [4, 1], [3, 1], [3, 1], [3, 1]]
    let occupied = []

    ship_dimensions.forEach((ship) => {
        place_ship(ship, occupied)
    })

    return occupied
}

export function build_board(targetId, gridSize) {
    let gridDefinition = []
    let hit_boxes = assign_ship_placement(gridSize)
    let order = 0
    for (let yOrigin=0, i=0; i < gridSize; i++) {
        for (let xOrigin = 0, j=0; j < gridSize; j++) {
            gridDefinition.push({
                x: xOrigin * 50,
                y: yOrigin * 50,
                width: 50,
                height: 50,
                index: [i,j].toString(),
                order: order
            })
            xOrigin++;
            order++;
        }
        yOrigin++;
        order++;
    }

    let canvas = d3.select(targetId).append("svg")
        .attr("width", 500)
        .attr("height", 500)

    let board = canvas.selectAll(".board")
        .data([gridDefinition])
        .enter().append("svg:g")
        .attr("class", "board")

    let cells = board.selectAll(".cell")
        .data( gridDefinition )
        .enter().append("svg:circle")
        .attr("cx", (d) => d.x + 25 )
        .attr("cy", (d) => d.y + 25 )
        .attr("r", 15)
        .attr("width", (d) => d.width )
        .attr("height", (d) => d.height )
        .attr("index", (d) => d.index )
        .on('click', function(){ handle_click(this, hit_boxes) })
        .style("fill", '#FFF')
        .style("stroke", '#555')
}

build_board("#board", 10);

## main.js
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.handle_click = handle_click;
exports.place_ship = place_ship;
exports.assign_ship_placement = assign_ship_placement;
exports.build_board = build_board;
function handle_click(element, hit_boxes) {
    var status_color = undefined;
    var hit_color = "#75AF1D";
    var miss_color = "#CC3300";
    var cell = d3.select(element);

    if (hit_boxes.indexOf(cell.attr("index")) != -1) {
        status_color = hit_color;
    } else {
        status_color = miss_color;
    }
    cell.style("fill", status_color);
}

function place_ship(ship, occupied) {
    var ship_placed = false;
    var ship_length = ship[0];
    var bad_canidates = [];
    var vertical = false;
    var r = Math.round(Math.random() * 10);

    var is_viable_point = function is_viable_point(x, y) {
        var point = [x, y].toString();
        return occupied.indexOf(point) == -1 && bad_canidates.indexOf(point) == -1;
    };

    if (r <= 5) {
        vertical = true;
    }

    while (ship_placed == false) {
        var start_x = Math.round(Math.random() * 9);
        var start_y = Math.round(Math.random() * 9);

        // if the guess cell is occupied, try again
        if (!is_viable_point(start_x, start_y)) {
            continue;
        }

        var placement_direction = undefined;
        var _r = Math.round(Math.random() * 9);

        // Search for canidates for placing a ship
        if (vertical) {
            // Account for vertical placement
            if (start_x + ship_length > 9) {
                continue;
            } else {
                var is_placeable = true;
                for (var i = 0; i < ship_length; i++) {
                    if (!is_viable_point(start_x + i, start_y)) {
                        is_placeable = false;
                    }
                }
                if (is_placeable == true) {
                    for (var i = 0; i < ship_length; i++) {
                        var cell = [start_x + i, start_y].toString();
                        occupied.push(cell);
                    }
                    ship_placed = true;
                }
            }

            if (start_x - ship_length < 0) {
                continue;
            } else {
                var is_placeable = true;
                for (var i = 0; i < ship_length; i++) {
                    if (!is_viable_point(start_x - i, start_y)) {
                        is_placeable = false;
                    }
                }
                if (is_placeable == true) {
                    for (var i = 0; i < ship_length; i++) {
                        var cell = [start_x - i, start_y].toString();
                        occupied.push(cell);
                    }
                    ship_placed = true;
                }
            }
        } else {
            if (start_y + ship_length > 9) {
                continue;
            } else {
                var is_placeable = true;
                for (var i = 0; i < ship_length; i++) {
                    if (!is_viable_point(start_x, start_y + i)) {
                        is_placeable = false;
                    }
                }
                if (is_placeable == true) {
                    for (var i = 0; i < ship_length; i++) {
                        var cell = [start_x, start_y + i].toString();
                        occupied.push(cell);
                    }
                    ship_placed = true;
                }
            }

            if (start_y - ship_length < 0) {
                break;
            } else {
                var is_placeable = true;
                for (var i = 0; i < ship_length; i++) {
                    if (is_viable_point(start_x, start_y - i)) {
                        is_placeable = false;
                    }
                }
                if (is_placeable == true) {
                    for (var i = 0; i < ship_length; i++) {
                        var cell = [start_x, start_y - i].toString();
                        occupied.push(cell);
                    }
                    ship_placed = true;
                }
            }
        }
    }
    return;
}

function assign_ship_placement(gridSize) {

    //assume initial state is horizontal
    var ship_dimensions = [[5, 1], [4, 1], [3, 1], [3, 1], [3, 1]];
    var occupied = [];

    ship_dimensions.forEach(function (ship) {
        place_ship(ship, occupied);
    });

    return occupied;
}

function build_board(targetId, gridSize) {
    var gridDefinition = [];
    var hit_boxes = assign_ship_placement(gridSize);
    var order = 0;
    for (var yOrigin = 0, i = 0; i < gridSize; i++) {
        for (var xOrigin = 0, j = 0; j < gridSize; j++) {
            gridDefinition.push({
                x: xOrigin * 50,
                y: yOrigin * 50,
                width: 50,
                height: 50,
                index: [i, j].toString(),
                order: order
            });
            xOrigin++;
            order++;
        }
        yOrigin++;
        order++;
    }

    var canvas = d3.select(targetId).append("svg").attr("width", 500).attr("height", 500);

    var board = canvas.selectAll(".board").data([gridDefinition]).enter().append("svg:g").attr("class", "board");

    var cells = board.selectAll(".cell").data(gridDefinition).enter().append("svg:circle").attr("cx", function (d) {
        return d.x + 25;
    }).attr("cy", function (d) {
        return d.y + 25;
    }).attr("r", 15).attr("width", function (d) {
        return d.width;
    }).attr("height", function (d) {
        return d.height;
    }).attr("index", function (d) {
        return d.index;
    }).on('click', function () {
        handle_click(this, hit_boxes);
    }).style("fill", '#FFF').style("stroke", '#555');
}

build_board("#board", 10);

},{}]},{},[1]);
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
	<title>battleship</title>
	</head>
	<body>
	<div id="board">
	</div>
	</body>
	<footer>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.15/d3.min.js"></script>
	<script src="./main.js"></script>
	</footer>
	</html>
	export function handle_click(element, hit_boxes) {
	let status_color;
	let hit_color = "#75AF1D"
	let miss_color = "#CC3300"
	let cell = d3.select(element)

	if (hit_boxes.indexOf(cell.attr("index")) != -1) {
	status_color = hit_color
	} else {
	status_color = miss_color
	}
	cell.style("fill", status_color)
	}

	export function place_ship(ship, occupied) {
	let ship_placed = false
	let ship_length = ship[0]
	let bad_canidates = []
	let vertical = false
	let r = Math.round(Math.random() * 10)

	let is_viable_point = function(x,y) {
	let point = [x, y].toString()
	return (occupied.indexOf(point) == -1) && (bad_canidates.indexOf(point) == -1)
	}

	if (r <= 5) {
	vertical = true
	}

	while (ship_placed == false) {
	let start_x = Math.round(Math.random() * 9)
	let start_y = Math.round(Math.random() * 9)

	// if the guess cell is occupied, try again
	if (!is_viable_point(start_x, start_y)) {
	continue
	}

	let placement_direction;
	let r = Math.round(Math.random() * 9)

	// Search for canidates for placing a ship
	if (vertical) { // Account for vertical placement
	if ((start_x + ship_length) > 9) {
	continue
	} else {
	let is_placeable = true;
	for (let i=0; i < ship_length; i++) {
	if (!is_viable_point(start_x + i, start_y)) {
	is_placeable = false
	}
	}
	if (is_placeable == true){
	for (let i=0; i < ship_length; i++) {
	let cell = [start_x + i, start_y].toString()
	occupied.push(cell)
	}
	ship_placed = true
	}
	}

	if ((start_x - ship_length) < 0) {
	continue
	} else {
	let is_placeable = true;
	for (let i=0; i < ship_length; i++) {
	if (!is_viable_point(start_x - i, start_y)) {
	is_placeable = false
	}
	}
	if (is_placeable == true) {
	for (let i=0; i < ship_length; i++) {
	let cell = [start_x - i, start_y].toString()
	occupied.push(cell)
	}
	ship_placed = true
	}
	}
	} else {
	if ((start_y + ship_length) > 9) {
	continue
	} else {
	let is_placeable = true;
	for (let i=0; i < ship_length; i++) {
	if (!is_viable_point(start_x, start_y + i)) {
	is_placeable = false
	}
	}
	if (is_placeable == true) {
	for (let i=0; i < ship_length; i++) {
	let cell = [start_x, start_y + i].toString()
	occupied.push(cell)
	}
	ship_placed = true
	}
	}

	if ((start_y - ship_length) < 0) {
	break
	} else {
	let is_placeable = true;
	for (let i=0; i < ship_length; i++) {
	if (is_viable_point(start_x, start_y - i)) {
	is_placeable = false
	}
	}
	if (is_placeable == true) {
	for (let i=0; i < ship_length; i++) {
	let cell = [start_x, start_y - i].toString()
	occupied.push(cell)
	}
	ship_placed = true
	}
	}
	}
	}
	return
	}


	export function assign_ship_placement(gridSize) {

	//assume initial state is horizontal
	let ship_dimensions = [[5, 1], [4, 1], [3, 1], [3, 1], [3, 1]]
	let occupied = []

	ship_dimensions.forEach((ship) => {
	place_ship(ship, occupied)
	})

	return occupied
	}

	export function build_board(targetId, gridSize) {
	let gridDefinition = []
	let hit_boxes = assign_ship_placement(gridSize)
	let order = 0
	for (let yOrigin=0, i=0; i < gridSize; i++) {
	for (let xOrigin = 0, j=0; j < gridSize; j++) {
	gridDefinition.push({
	x: xOrigin * 50,
	y: yOrigin * 50,
	width: 50,
	height: 50,
	index: [i,j].toString(),
	order: order
	})
	xOrigin++;
	order++;
	}
	yOrigin++;
	order++;
	}

	let canvas = d3.select(targetId).append("svg")
	.attr("width", 500)
	.attr("height", 500)

	let board = canvas.selectAll(".board")
	.data([gridDefinition])
	.enter().append("svg:g")
	.attr("class", "board")

	let cells = board.selectAll(".cell")
	.data( gridDefinition )
	.enter().append("svg:circle")
	.attr("cx", (d) => d.x + 25 )
	.attr("cy", (d) => d.y + 25 )
	.attr("r", 15)
	.attr("width", (d) => d.width )
	.attr("height", (d) => d.height )
	.attr("index", (d) => d.index )
	.on('click', function(){ handle_click(this, hit_boxes) })
	.style("fill", '#FFF')
	.style("stroke", '#555')
	}

	build_board("#board", 10);
	(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
	"use strict";

	Object.defineProperty(exports, "__esModule", {
	value: true
	});
	exports.handle_click = handle_click;
	exports.place_ship = place_ship;
	exports.assign_ship_placement = assign_ship_placement;
	exports.build_board = build_board;
	function handle_click(element, hit_boxes) {
	var status_color = undefined;
	var hit_color = "#75AF1D";
	var miss_color = "#CC3300";
	var cell = d3.select(element);

	if (hit_boxes.indexOf(cell.attr("index")) != -1) {
	status_color = hit_color;
	} else {
	status_color = miss_color;
	}
	cell.style("fill", status_color);
	}

	function place_ship(ship, occupied) {
	var ship_placed = false;
	var ship_length = ship[0];
	var bad_canidates = [];
	var vertical = false;
	var r = Math.round(Math.random() * 10);

	var is_viable_point = function is_viable_point(x, y) {
	var point = [x, y].toString();
	return occupied.indexOf(point) == -1 && bad_canidates.indexOf(point) == -1;
	};

	if (r <= 5) {
	vertical = true;
	}

	while (ship_placed == false) {
	var start_x = Math.round(Math.random() * 9);
	var start_y = Math.round(Math.random() * 9);

	// if the guess cell is occupied, try again
	if (!is_viable_point(start_x, start_y)) {
	continue;
	}

	var placement_direction = undefined;
	var _r = Math.round(Math.random() * 9);

	// Search for canidates for placing a ship
	if (vertical) {
	// Account for vertical placement
	if (start_x + ship_length > 9) {
	continue;
	} else {
	var is_placeable = true;
	for (var i = 0; i < ship_length; i++) {
	if (!is_viable_point(start_x + i, start_y)) {
	is_placeable = false;
	}
	}
	if (is_placeable == true) {
	for (var i = 0; i < ship_length; i++) {
	var cell = [start_x + i, start_y].toString();
	occupied.push(cell);
	}
	ship_placed = true;
	}
	}

	if (start_x - ship_length < 0) {
	continue;
	} else {
	var is_placeable = true;
	for (var i = 0; i < ship_length; i++) {
	if (!is_viable_point(start_x - i, start_y)) {
	is_placeable = false;
	}
	}
	if (is_placeable == true) {
	for (var i = 0; i < ship_length; i++) {
	var cell = [start_x - i, start_y].toString();
	occupied.push(cell);
	}
	ship_placed = true;
	}
	}
	} else {
	if (start_y + ship_length > 9) {
	continue;
	} else {
	var is_placeable = true;
	for (var i = 0; i < ship_length; i++) {
	if (!is_viable_point(start_x, start_y + i)) {
	is_placeable = false;
	}
	}
	if (is_placeable == true) {
	for (var i = 0; i < ship_length; i++) {
	var cell = [start_x, start_y + i].toString();
	occupied.push(cell);
	}
	ship_placed = true;
	}
	}

	if (start_y - ship_length < 0) {
	break;
	} else {
	var is_placeable = true;
	for (var i = 0; i < ship_length; i++) {
	if (is_viable_point(start_x, start_y - i)) {
	is_placeable = false;
	}
	}
	if (is_placeable == true) {
	for (var i = 0; i < ship_length; i++) {
	var cell = [start_x, start_y - i].toString();
	occupied.push(cell);
	}
	ship_placed = true;
	}
	}
	}
	}
	return;
	}

	function assign_ship_placement(gridSize) {

	//assume initial state is horizontal
	var ship_dimensions = [[5, 1], [4, 1], [3, 1], [3, 1], [3, 1]];
	var occupied = [];

	ship_dimensions.forEach(function (ship) {
	place_ship(ship, occupied);
	});

	return occupied;
	}

	function build_board(targetId, gridSize) {
	var gridDefinition = [];
	var hit_boxes = assign_ship_placement(gridSize);
	var order = 0;
	for (var yOrigin = 0, i = 0; i < gridSize; i++) {
	for (var xOrigin = 0, j = 0; j < gridSize; j++) {
	gridDefinition.push({
	x: xOrigin * 50,
	y: yOrigin * 50,
	width: 50,
	height: 50,
	index: [i, j].toString(),
	order: order
	});
	xOrigin++;
	order++;
	}
	yOrigin++;
	order++;
	}

	var canvas = d3.select(targetId).append("svg").attr("width", 500).attr("height", 500);

	var board = canvas.selectAll(".board").data([gridDefinition]).enter().append("svg:g").attr("class", "board");

	var cells = board.selectAll(".cell").data(gridDefinition).enter().append("svg:circle").attr("cx", function (d) {
	return d.x + 25;
	}).attr("cy", function (d) {
	return d.y + 25;
	}).attr("r", 15).attr("width", function (d) {
	return d.width;
	}).attr("height", function (d) {
	return d.height;
	}).attr("index", function (d) {
	return d.index;
	}).on('click', function () {
	handle_click(this, hit_boxes);
	}).style("fill", '#FFF').style("stroke", '#555');
	}

	build_board("#board", 10);

	},{}]},{},[1]);