potix2/gist:1265057

## gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Reversi Assistant</title>
<style type="text/css">
#content-table {
    border: solid 1px #ccc;
    border-collapse: collapse;
    empty-cells: show;
}

#content-table tr {
}

#content-table tr th {
    background-color: #333;
    color: #fefefe;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

#content-table tr td {
    border: solid 1px #ccc;
    background-color: #159450;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: #3c3;
}

#content-table thead tr th,
#content-table tfoot tr th {
    width: 60px;
    height: 20px;
}

#content-table tbody tr th {
    width: 20px;
    height: 60px;
}

#content-table tr td.black {
    background-color: #000;
}

#content-table tr td.white {
    background-color: #fff;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//config
var classes = ['', 'white', 'black'];

function Board() {
    this.data = [];
    this.current = 1;
    this.players = [];
}

function InteractivePlayer() {
}

InteractivePlayer.prototype = {
    notifyPass: function(b) {
    },
    notifyChangePlayer: function(b) {
    },
    action: function(b, avs) {
    }
};

CPU.prototype = {
    notifyPass: function(b) {
    },
    notifyChangePlayer: function(b) {
    },
    action: function(b, avs) {
        b.put(avs[Math.floor(Math.random() * avs.length)]);
    }
};

Board.prototype = {
    startGame: function(p1, p2) {
        this.players = [p1, p2];
        this.current = 1;
        this.data = [
            0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,
            0,0,0,1,2,0,0,0,
            0,0,0,2,1,0,0,0,
            0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0,
            0,0,0,0,0,0,0,0
        ];
        this.play();
    },
    collectAvailablePlaces: function(p) {
        var result = [];
        for ( var i = 0; i < this.data.length; i++ ) {
            if ( this.canPut(i) ) {
                result.push(i);
            }
        }
        return result;
    },
    play: function() {
        var availables = this.collectAvailablePlaces(this.current);
        if ( availables.length == 0 ) {
            //pass
            this.getCurrentPlayer().notifyPass();
            this.changePlayer();
            this.play();
        }
        else {
            this.getCurrentPlayer().action(this, availables);
        }
    },
    put: function(i) {
        if ( this.canPut(i) ) {
            return true;
        }
        else {
            return false;
        }
    },
    changePlayer: function() {
        var c = this.current - 1;
        this.next = (this.next % 2) + 1;
        return this.players[c];
    },
    setRenderer: function(r) {
        this.renderer = r;
    },
};

function render(data) {
    for ( var i = 0; i < data.length; i++ ) {
        $('#content-table tbody tr:nth-child(' + (Math.floor(i/8) + 1) + ') td:nth-child(' + ((i%8) + 2) + ')')
            .removeClass()
            .addClass(classes[data[i]]);
    }
}

$('#new-button').click(init);
$('#new-button').click();
});
</script>
</head>
<body>
<table id="content-table">
<thead>
<tr><th style="width: 20px;"></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th style="width: 20px;"></th></tr>
</thead>
<tbody>
<tr><th>1</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>3</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>4</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>5</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>6</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>7</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
<tr><th>8</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
</tbody>
<tfoot>
<tr><th style="width: 20px;"></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th style="width: 20px;"></th></tr>
</tfoot>
</table>
<input id="new-button" type="button" value="New" />
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Reversi Assistant</title>
	<style type="text/css">
	#content-table {
	border: solid 1px #ccc;
	border-collapse: collapse;
	empty-cells: show;
	}

	#content-table tr {
	}

	#content-table tr th {
	background-color: #333;
	color: #fefefe;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	}

	#content-table tr td {
	border: solid 1px #ccc;
	background-color: #159450;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	color: #3c3;
	}

	#content-table thead tr th,
	#content-table tfoot tr th {
	width: 60px;
	height: 20px;
	}

	#content-table tbody tr th {
	width: 20px;
	height: 60px;
	}

	#content-table tr td.black {
	background-color: #000;
	}

	#content-table tr td.white {
	background-color: #fff;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	//config
	var classes = ['', 'white', 'black'];

	function Board() {
	this.data = [];
	this.current = 1;
	this.players = [];
	}

	function InteractivePlayer() {
	}

	InteractivePlayer.prototype = {
	notifyPass: function(b) {
	},
	notifyChangePlayer: function(b) {
	},
	action: function(b, avs) {
	}
	};

	CPU.prototype = {
	notifyPass: function(b) {
	},
	notifyChangePlayer: function(b) {
	},
	action: function(b, avs) {
	b.put(avs[Math.floor(Math.random() * avs.length)]);
	}
	};

	Board.prototype = {
	startGame: function(p1, p2) {
	this.players = [p1, p2];
	this.current = 1;
	this.data = [
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,1,2,0,0,0,
	0,0,0,2,1,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0,
	0,0,0,0,0,0,0,0
	];
	this.play();
	},
	collectAvailablePlaces: function(p) {
	var result = [];
	for ( var i = 0; i < this.data.length; i++ ) {
	if ( this.canPut(i) ) {
	result.push(i);
	}
	}
	return result;
	},
	play: function() {
	var availables = this.collectAvailablePlaces(this.current);
	if ( availables.length == 0 ) {
	//pass
	this.getCurrentPlayer().notifyPass();
	this.changePlayer();
	this.play();
	}
	else {
	this.getCurrentPlayer().action(this, availables);
	}
	},
	put: function(i) {
	if ( this.canPut(i) ) {
	return true;
	}
	else {
	return false;
	}
	},
	changePlayer: function() {
	var c = this.current - 1;
	this.next = (this.next % 2) + 1;
	return this.players[c];
	},
	setRenderer: function(r) {
	this.renderer = r;
	},
	};

	function render(data) {
	for ( var i = 0; i < data.length; i++ ) {
	$('#content-table tbody tr:nth-child(' + (Math.floor(i/8) + 1) + ') td:nth-child(' + ((i%8) + 2) + ')')
	.removeClass()
	.addClass(classes[data[i]]);
	}
	}

	$('#new-button').click(init);
	$('#new-button').click();
	});
	</script>
	</head>
	<body>
	<table id="content-table">
	<thead>
	<tr><th style="width: 20px;"></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th style="width: 20px;"></th></tr>
	</thead>
	<tbody>
	<tr><th>1</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>2</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>3</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>4</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>5</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>6</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>7</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	<tr><th>8</th><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><th></th></tr>
	</tbody>
	<tfoot>
	<tr><th style="width: 20px;"></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th style="width: 20px;"></th></tr>
	</tfoot>
	</table>
	<input id="new-button" type="button" value="New" />
	</body>
	</html>