yuru4c/rps.html

## rps.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja-JP">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>じゃんけん予測</title>

	<style type="text/css">
		html {
			-webkit-text-size-adjust: none;
			   -moz-text-size-adjust: none;
			    -ms-text-size-adjust: none;
		}
		th, td {
			padding-right: 0.5em;
			padding-left:  0.5em;
			text-align: right;
		}

		#panel {
			font-size: 1.25em;
		}
		#panel input {
			font-size: inherit;
			width: 100%;
		}
		#panel td + td {
			position: relative;
			padding-left: 1em;
		}
		.bar {
			position: absolute;
			top:    0;
			bottom: 0;
			left:   0;
			z-index: -1;
			background-color: lightgray;
		}

		#history th + th {
			text-align: center;
		}
	</style>
</head>
<body>
	<div>
		<br>
		<table id="panel"></table>
		<br>
		<table id="history"></table>
		<br>
	</div>

	<script type="text/javascript" src="rps.js"></script>
	<script type="text/javascript">
		(function ($) {

			function Option(rps, name) {
				var self = this;
				this.name = name;

				this.tr = $.createElement('tr');
				var td0 = $.createElement('td');

				this.button = $.createElement('input');
				this.button.type = 'button';
				this.button.value = name;
				this.button.onclick = function () {
					rps();
					self.clicked();
					return false;
				};
				td0.appendChild(this.button);

				this.tr.appendChild(td0);
				var td1 = $.createElement('td');

				var span = $.createElement('span');
				this.text = $.createTextNode('');
				span.appendChild(this.text);
				td1.appendChild(span);

				var bar = $.createElement('div');
				this.style = bar.style;
				bar.className = 'bar';
				td1.appendChild(bar);

				this.tr.appendChild(td1);
			}
			var prototype = Option.prototype;

			prototype.update = function (rational) {
				this.tr.title = rational;
				var percent   = rational * 100;
				this.text.data   = percent.toFixed(3);
				this.style.width = percent + '%';
			};

			prototype.td = function () {
				var td = $.createElement('td');
				td.title = this.tr.title;
				td.appendChild($.createTextNode(this.text.data));
				return td;
			};

			prototype.click = function () {
				this.button.click();
			};

			onload = function () {
				var panel   = $.getElementById('panel');
				var history = $.getElementById('history');

				var r = new Option(rps.rock, 'グー');
				var p = new Option(rps.paper, 'パー');
				var s = new Option(rps.scissors, 'チョキ');

				function predict() {
					var table = rps();

					r.update(table.r);
					p.update(table.p);
					s.update(table.s);
				}
				predict();

				panel.appendChild(r.tr);
				panel.appendChild(s.tr);
				panel.appendChild(p.tr);

				var i = 0;
				prototype.clicked = function () {
					var tr = $.createElement('tr');

					var th0 = $.createElement('th');
					th0.appendChild($.createTextNode(++i));
					tr.appendChild(th0);

					var th1 = $.createElement('th');
					th1.appendChild($.createTextNode(this.name));
					tr.appendChild(th1);

					tr.appendChild(r.td());
					tr.appendChild(s.td());
					tr.appendChild(p.td());

					history.insertBefore(tr, history.firstChild);
					predict();
				};

				onkeypress = function (ev) {
					switch (ev.key) {
						case 'j': r.click(); break;
						case 'k': s.click(); break;
						case 'l': p.click(); break;
					}
				};
			};

		})(document);
	</script>
</body>
</html>

## rps.js
var rps = (function () {

var Rational = (function () {

	function Rational(n, d) {
		if (!(1 in arguments)) d = 1;

		var divisor = gcd(n, d);
		this.n = n / divisor;
		this.d = d / divisor;
	}

	Rational.Z = new Rational(0);
	Rational.I = new Rational(1);

	function gcd(m, n) {
		if (n == 0) return m;
		return gcd(n, m % n);
	}

	var prototype = Rational.prototype;

	prototype.negative = function () {
		return new Rational(-this.n, this.d);
	};
	prototype.inverse = function () {
		return new Rational(this.d, this.n);
	};

	prototype.plus = function (rational) {
		return new Rational(
			this.n * rational.d + rational.n * this.d,
			this.d * rational.d
		);
	};
	prototype.minus = function (rational) {
		return this.plus(rational.negative());
	};
	prototype.multiply = function (rational) {
		return new Rational(
			this.n * rational.n,
			this.d * rational.d
		);
	};
	prototype.divide = function (rational) {
		return this.multiply(rational.inverse());
	};

	prototype.equals = function (rational) {
		return this.n == rational.n && this.d == rational.d;
	};

	prototype.toString = function () {
		return this.n + '/' + this.d;
	};
	prototype.valueOf = function () {
		return this.n / this.d;
	};

	return Rational;
})();

var Table = (function () {

	function Table(r, p, s) {
		this.r = r;
		this.p = p;
		this.s = s;
	}

	Table.Z = new Table(Rational.Z, Rational.Z, Rational.Z);

	var prototype = Table.prototype;

	prototype.plus = function (table) {
		return new Table(
			this.r.plus(table.r),
			this.p.plus(table.p),
			this.s.plus(table.s)
		);
	};

	prototype.sum = function () {
		return this.r.plus(this.p).plus(this.s);
	};
	prototype.divide = function (rational) {
		return new Table(
			this.r.divide(rational),
			this.p.divide(rational),
			this.s.divide(rational)
		);
	};
	prototype.normalize = function () {
		var sum = this.sum();
		if (sum.equals(Rational.Z)) return this;
		return this.divide(sum);
	};

	return Table;
})();

var history;

function slice(n) {
	if (n == 0) return '';
	return history.slice(-n);
}

function count(str) {
	return history.split(str).length - 1;
}

function esc(table) {
	var rz = table.r.equals(Rational.Z);
	var pz = table.p.equals(Rational.Z);
	var sz = table.s.equals(Rational.Z);

	var count = rz + pz + sz;
	var divisor = new Rational(count);

	var p = new Rational(
		3 * count,
		3 * count + history.length * (3 - count)
	);
	var q = Rational.I.minus(p);

	return new Table(
		rz ? p.divide(divisor) : table.r.multiply(q),
		pz ? p.divide(divisor) : table.p.multiply(q),
		sz ? p.divide(divisor) : table.s.multiply(q)
	);
}

function predict(order) {
	var result = Table.Z;
	for (var i = 0; i < order; i++) {
		var last = slice(i);
		var table = new Table(
			new Rational(count(last + 'r')),
			new Rational(count(last + 'p')),
			new Rational(count(last + 's'))
		);

		var sum = table.sum();
		if (sum.equals(Rational.Z)) break;
		result = result.plus(table.divide(sum));
	}
	return esc(result.normalize());
}

function init() {
	history = '';
}
init();

function rps(order) {
	return predict(0 in arguments ? order : Infinity);
}
rps.init = init;

function set(key) {
	var k = key.charAt(0);
	rps[key] = function () {
		history += k;
		return rps;
	};
	return set;
}
set('rock')('paper')('scissors');

return rps;
})();
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="ja-JP">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>じゃんけん予測</title>

	<style type="text/css">
	html {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	}
	th, td {
	padding-right: 0.5em;
	padding-left: 0.5em;
	text-align: right;
	}

	#panel {
	font-size: 1.25em;
	}
	#panel input {
	font-size: inherit;
	width: 100%;
	}
	#panel td + td {
	position: relative;
	padding-left: 1em;
	}
	.bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background-color: lightgray;
	}

	#history th + th {
	text-align: center;
	}
	</style>
	</head>
	<body>
	<div>
	<br>
	<table id="panel"></table>
	<br>
	<table id="history"></table>
	<br>
	</div>

	<script type="text/javascript" src="rps.js"></script>
	<script type="text/javascript">
	(function ($) {

	function Option(rps, name) {
	var self = this;
	this.name = name;

	this.tr = $.createElement('tr');
	var td0 = $.createElement('td');

	this.button = $.createElement('input');
	this.button.type = 'button';
	this.button.value = name;
	this.button.onclick = function () {
	rps();
	self.clicked();
	return false;
	};
	td0.appendChild(this.button);

	this.tr.appendChild(td0);
	var td1 = $.createElement('td');

	var span = $.createElement('span');
	this.text = $.createTextNode('');
	span.appendChild(this.text);
	td1.appendChild(span);

	var bar = $.createElement('div');
	this.style = bar.style;
	bar.className = 'bar';
	td1.appendChild(bar);

	this.tr.appendChild(td1);
	}
	var prototype = Option.prototype;

	prototype.update = function (rational) {
	this.tr.title = rational;
	var percent = rational * 100;
	this.text.data = percent.toFixed(3);
	this.style.width = percent + '%';
	};

	prototype.td = function () {
	var td = $.createElement('td');
	td.title = this.tr.title;
	td.appendChild($.createTextNode(this.text.data));
	return td;
	};

	prototype.click = function () {
	this.button.click();
	};

	onload = function () {
	var panel = $.getElementById('panel');
	var history = $.getElementById('history');

	var r = new Option(rps.rock, 'グー');
	var p = new Option(rps.paper, 'パー');
	var s = new Option(rps.scissors, 'チョキ');

	function predict() {
	var table = rps();

	r.update(table.r);
	p.update(table.p);
	s.update(table.s);
	}
	predict();

	panel.appendChild(r.tr);
	panel.appendChild(s.tr);
	panel.appendChild(p.tr);

	var i = 0;
	prototype.clicked = function () {
	var tr = $.createElement('tr');

	var th0 = $.createElement('th');
	th0.appendChild($.createTextNode(++i));
	tr.appendChild(th0);

	var th1 = $.createElement('th');
	th1.appendChild($.createTextNode(this.name));
	tr.appendChild(th1);

	tr.appendChild(r.td());
	tr.appendChild(s.td());
	tr.appendChild(p.td());

	history.insertBefore(tr, history.firstChild);
	predict();
	};

	onkeypress = function (ev) {
	switch (ev.key) {
	case 'j': r.click(); break;
	case 'k': s.click(); break;
	case 'l': p.click(); break;
	}
	};
	};

	})(document);
	</script>
	</body>
	</html>
	var rps = (function () {

	var Rational = (function () {

	function Rational(n, d) {
	if (!(1 in arguments)) d = 1;

	var divisor = gcd(n, d);
	this.n = n / divisor;
	this.d = d / divisor;
	}

	Rational.Z = new Rational(0);
	Rational.I = new Rational(1);

	function gcd(m, n) {
	if (n == 0) return m;
	return gcd(n, m % n);
	}

	var prototype = Rational.prototype;

	prototype.negative = function () {
	return new Rational(-this.n, this.d);
	};
	prototype.inverse = function () {
	return new Rational(this.d, this.n);
	};

	prototype.plus = function (rational) {
	return new Rational(
	this.n * rational.d + rational.n * this.d,
	this.d * rational.d
	);
	};
	prototype.minus = function (rational) {
	return this.plus(rational.negative());
	};
	prototype.multiply = function (rational) {
	return new Rational(
	this.n * rational.n,
	this.d * rational.d
	);
	};
	prototype.divide = function (rational) {
	return this.multiply(rational.inverse());
	};

	prototype.equals = function (rational) {
	return this.n == rational.n && this.d == rational.d;
	};

	prototype.toString = function () {
	return this.n + '/' + this.d;
	};
	prototype.valueOf = function () {
	return this.n / this.d;
	};

	return Rational;
	})();

	var Table = (function () {

	function Table(r, p, s) {
	this.r = r;
	this.p = p;
	this.s = s;
	}

	Table.Z = new Table(Rational.Z, Rational.Z, Rational.Z);

	var prototype = Table.prototype;

	prototype.plus = function (table) {
	return new Table(
	this.r.plus(table.r),
	this.p.plus(table.p),
	this.s.plus(table.s)
	);
	};

	prototype.sum = function () {
	return this.r.plus(this.p).plus(this.s);
	};
	prototype.divide = function (rational) {
	return new Table(
	this.r.divide(rational),
	this.p.divide(rational),
	this.s.divide(rational)
	);
	};
	prototype.normalize = function () {
	var sum = this.sum();
	if (sum.equals(Rational.Z)) return this;
	return this.divide(sum);
	};

	return Table;
	})();

	var history;

	function slice(n) {
	if (n == 0) return '';
	return history.slice(-n);
	}

	function count(str) {
	return history.split(str).length - 1;
	}

	function esc(table) {
	var rz = table.r.equals(Rational.Z);
	var pz = table.p.equals(Rational.Z);
	var sz = table.s.equals(Rational.Z);

	var count = rz + pz + sz;
	var divisor = new Rational(count);

	var p = new Rational(
	3 * count,
	3 * count + history.length * (3 - count)
	);
	var q = Rational.I.minus(p);

	return new Table(
	rz ? p.divide(divisor) : table.r.multiply(q),
	pz ? p.divide(divisor) : table.p.multiply(q),
	sz ? p.divide(divisor) : table.s.multiply(q)
	);
	}

	function predict(order) {
	var result = Table.Z;
	for (var i = 0; i < order; i++) {
	var last = slice(i);
	var table = new Table(
	new Rational(count(last + 'r')),
	new Rational(count(last + 'p')),
	new Rational(count(last + 's'))
	);

	var sum = table.sum();
	if (sum.equals(Rational.Z)) break;
	result = result.plus(table.divide(sum));
	}
	return esc(result.normalize());
	}

	function init() {
	history = '';
	}
	init();

	function rps(order) {
	return predict(0 in arguments ? order : Infinity);
	}
	rps.init = init;

	function set(key) {
	var k = key.charAt(0);
	rps[key] = function () {
	history += k;
	return rps;
	};
	return set;
	}
	set('rock')('paper')('scissors');

	return rps;
	})();