macrat/triz.html

## triz.html
<!doctype html>

<html>
<head>
<title>TRIZ的なやつ</title>
<style>
html {
	background-color: #ddd;
	height: 100%;
}
body {
	margin: 0;
	height: 100%;
}
main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}
#list {
	font-size: 120%;
	line-height: 1.5em;
	padding: 1em;
}
#card {
	font-size: 140%;
	padding: 3em 5em;
	box-shadow: 3px 3px 7px gray;
	background-color: white;
}
button {
	font-size: 100%;
	background-color: white;
	border-width: 0;
	padding: .5em 1em;
	margin: 1em;
	box-shadow: 2px 2px 3px gray;
}
.shortcut {
	color: #aaa;
}
#usage {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(64, 64, 64, 0.4);
}
#usage a {
	color: skyblue;
}
#usage > div {
	background-color: rgba(64, 64, 64, 0.7);
	color: white;
	padding: 5em 7em;
	font-size: 130%;
}
#usage > div > h1 {
	border-bottom: 1px solid white;
	font-weight: normal;
}
</style>
</head>

<body>
	<div id=usage onClick="onCloseUsage();">
		<div>
			<h1>TRIZ的なやつ</h1>
			とりあえずばーっと見て、使えそうなものを選んでください。<br>
			やり終わったあとで一覧が出るので、それぞれについて検討します。<br>
			すると、新しい発明が出来るらしいです。<br>
			<br>
			TRIZのテキストは<a href="http://www.itmedia.co.jp/bizid/articles/0804/22/news064.html">IT Media</a>より。<br>
			それ以外はMIT License (c)2015 <a href="http://blanktar.jp">MacRat</a><br>
		</div>
	</div>

	<main>
		<div id=card></div>

		<div id=list></div>

		<div id=buttons>
			<button id=use onClick="onUse();">使う<span class="shortcut">(u)</span></button><button id=drop onClick="onDrop();">捨てる<span class="shortcut">(d)</span></button><button id=restart onClick="init();">もう一回やる<span class="shortcut">(r)</span></button>
		</div>
	</main>
</body>

<script>
cards = [
	'分けよ',
	'離せ',
	'一部を変えよ',
	'バランスを崩させよ',
	'2つを併せよ',
	'ほかにも使えるようにせよ',
	'内部に入り込ませよ',
	'バランスを作り出せ',
	'反動を先につけよ',
	'予測し仕掛けておけ',
	'重要なところに保護を施せ',
	'同じ高さを利用せよ',
	'逆にせよ',
	'回転の動きを作り出せ',
	'環境に合わせて変えられるようにせよ',
	'大ざっぱに解決せよ、一部だけ解決せよ',
	'活用している方向の垂直方向を利用せよ',
	'振動を加えよ',
	'繰り返しを取り入れよ',
	'よい状況を続けさせよ',
	'短時間で終えよ',
	'よくない状況から何かを引き出し利用せよ',
	'状況を入り口に知らしめよ',
	'接するところに強いものを使え',
	'自ら行うように仕向けよ',
	'同じものを作れ',
	'すぐダメになるものを大量に使え',
	'触らずに動かせ',
	'水と空気の圧を利用せよ',
	'望む形にできる強い覆いを使え',
	'吸いつく素材を加えよ',
	'色を変えよ',
	'質を合わせよ',
	'出なくさせるか、出たものを戻させよ',
	'温度や柔軟性を変えよ',
	'固体を気体・液体に変えよ',
	'熱で膨らませよ',
	'「そこを満たしているもの」のずっと濃いものを使え',
	'反応の起きにくいものでそこを満たせ',
	'組み合わせたものを使え'
]

var use_list = [];
var i = -1;

function init(){
	use_list = [];
	i = -1;
	nextCard();
	document.querySelector('#card').style.display = 'inline-block';
	document.querySelector('#use').style.display = 'inline-block';
	document.querySelector('#drop').style.display = 'inline-block';
	document.querySelector('#restart').style.display = 'none';
	document.querySelector('#list').style.display = 'none';
}
init();

function done(){
	document.querySelector('#card').style.display = 'none';
	document.querySelector('#use').style.display = 'none';
	document.querySelector('#drop').style.display = 'none';
	document.querySelector('#restart').style.display = 'inline-block';
	document.querySelector('#list').style.display = 'inline-block';
	document.querySelector('#list').innerHTML = '';
	for(var i=0; i<use_list.length; i++){
		document.querySelector('#list').innerHTML += cards[use_list[i]] + '<br>';
	}
}

function nextCard(){
	i++;

	if(i >= cards.length){
		return done();
	}

	document.querySelector('#card').innerText = cards[i];
}

function onUse(){
	if(i < cards.length){
		use_list.push(i);
	}
	nextCard();
}

function onDrop(){
	nextCard();
}

function onCloseUsage(){
	document.querySelector('#usage').style.display = 'none';
}

document.onkeydown = function(e){
	onCloseUsage();
	var func = {85: onUse, 68: onDrop, 82: init};
	func[e.keyCode]();
}
</script>
</html>
	<!doctype html>

	<html>
	<head>
	<title>TRIZ的なやつ</title>
	<style>
	html {
	background-color: #ddd;
	height: 100%;
	}
	body {
	margin: 0;
	height: 100%;
	}
	main {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	}
	#list {
	font-size: 120%;
	line-height: 1.5em;
	padding: 1em;
	}
	#card {
	font-size: 140%;
	padding: 3em 5em;
	box-shadow: 3px 3px 7px gray;
	background-color: white;
	}
	button {
	font-size: 100%;
	background-color: white;
	border-width: 0;
	padding: .5em 1em;
	margin: 1em;
	box-shadow: 2px 2px 3px gray;
	}
	.shortcut {
	color: #aaa;
	}
	#usage {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: rgba(64, 64, 64, 0.4);
	}
	#usage a {
	color: skyblue;
	}
	#usage > div {
	background-color: rgba(64, 64, 64, 0.7);
	color: white;
	padding: 5em 7em;
	font-size: 130%;
	}
	#usage > div > h1 {
	border-bottom: 1px solid white;
	font-weight: normal;
	}
	</style>
	</head>

	<body>
	<div id=usage onClick="onCloseUsage();">
	<div>
	<h1>TRIZ的なやつ</h1>
	とりあえずばーっと見て、使えそうなものを選んでください。<br>
	やり終わったあとで一覧が出るので、それぞれについて検討します。<br>
	すると、新しい発明が出来るらしいです。<br>
	<br>
	TRIZのテキストは<a href="http://www.itmedia.co.jp/bizid/articles/0804/22/news064.html">IT Media</a>より。<br>
	それ以外はMIT License (c)2015 <a href="http://blanktar.jp">MacRat</a><br>
	</div>
	</div>

	<main>
	<div id=card></div>

	<div id=list></div>

	<div id=buttons>
	<button id=use onClick="onUse();">使う<span class="shortcut">(u)</span></button><button id=drop onClick="onDrop();">捨てる<span class="shortcut">(d)</span></button><button id=restart onClick="init();">もう一回やる<span class="shortcut">(r)</span></button>
	</div>
	</main>
	</body>

	<script>
	cards = [
	'分けよ',
	'離せ',
	'一部を変えよ',
	'バランスを崩させよ',
	'2つを併せよ',
	'ほかにも使えるようにせよ',
	'内部に入り込ませよ',
	'バランスを作り出せ',
	'反動を先につけよ',
	'予測し仕掛けておけ',
	'重要なところに保護を施せ',
	'同じ高さを利用せよ',
	'逆にせよ',
	'回転の動きを作り出せ',
	'環境に合わせて変えられるようにせよ',
	'大ざっぱに解決せよ、一部だけ解決せよ',
	'活用している方向の垂直方向を利用せよ',
	'振動を加えよ',
	'繰り返しを取り入れよ',
	'よい状況を続けさせよ',
	'短時間で終えよ',
	'よくない状況から何かを引き出し利用せよ',
	'状況を入り口に知らしめよ',
	'接するところに強いものを使え',
	'自ら行うように仕向けよ',
	'同じものを作れ',
	'すぐダメになるものを大量に使え',
	'触らずに動かせ',
	'水と空気の圧を利用せよ',
	'望む形にできる強い覆いを使え',
	'吸いつく素材を加えよ',
	'色を変えよ',
	'質を合わせよ',
	'出なくさせるか、出たものを戻させよ',
	'温度や柔軟性を変えよ',
	'固体を気体・液体に変えよ',
	'熱で膨らませよ',
	'「そこを満たしているもの」のずっと濃いものを使え',
	'反応の起きにくいものでそこを満たせ',
	'組み合わせたものを使え'
	]

	var use_list = [];
	var i = -1;

	function init(){
	use_list = [];
	i = -1;
	nextCard();
	document.querySelector('#card').style.display = 'inline-block';
	document.querySelector('#use').style.display = 'inline-block';
	document.querySelector('#drop').style.display = 'inline-block';
	document.querySelector('#restart').style.display = 'none';
	document.querySelector('#list').style.display = 'none';
	}
	init();

	function done(){
	document.querySelector('#card').style.display = 'none';
	document.querySelector('#use').style.display = 'none';
	document.querySelector('#drop').style.display = 'none';
	document.querySelector('#restart').style.display = 'inline-block';
	document.querySelector('#list').style.display = 'inline-block';
	document.querySelector('#list').innerHTML = '';
	for(var i=0; i<use_list.length; i++){
	document.querySelector('#list').innerHTML += cards[use_list[i]] + '<br>';
	}
	}

	function nextCard(){
	i++;

	if(i >= cards.length){
	return done();
	}

	document.querySelector('#card').innerText = cards[i];
	}

	function onUse(){
	if(i < cards.length){
	use_list.push(i);
	}
	nextCard();
	}

	function onDrop(){
	nextCard();
	}

	function onCloseUsage(){
	document.querySelector('#usage').style.display = 'none';
	}

	document.onkeydown = function(e){
	onCloseUsage();
	var func = {85: onUse, 68: onDrop, 82: init};
	func[e.keyCode]();
	}
	</script>
	</html>