[rpsls-bot.git] / index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Rock Paper Scissors Lizard Spock</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
		<link rel="stylesheet" href="css/rpsls.css">
	</head>

	<body>
		<div class="container center" id="rpsls">
			<div class="row">
				<div class="col s12">
					<form class="center">
						<div class="input-field inline" title="The number of human moves remembered by the program. Higher means better performances, generally">
							<input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
							<label for="nInput">Memory</label>
						</div>
						<span class="leftSpacing" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">
							<input id="drawIsLost" type="checkbox" v-model="drawIsLost">
							<label for="drawIsLost">Winner bot</label>
						</span>
					</form>
				</div>
			</div>
			<div class="row topSpacing">
				<img v-for="(symb,i) in symbols" class="image" :class="{compChoice:compMove==i,humanChoice:humanMove==i}" :src="imgSource(symb)" @click="play(i)">
				<p class="blue-text center message topSpacing" v-if="humanMove>=0 && compMove>=0">{{ symbols[humanMove] + " " + messages[humanMove][compMove] + " " + symbols[compMove] }}</p>
				<p class="center scoreMsg topSpacing">
					<span>Score: </span>
					<span class="score">{{ gameState }}</span>
				</p>
			</div>
			<div id="explanations" class="row topSpacing">
				<hr/>
				<p>
					Your play Rock-Paper-Scissors-Lizard-Spock as described by Sheldon in TBBT, season 2 <a href="http://www.imdb.com/title/tt1256039/">episode 8</a>.
				</p>
				<img class="block" src="img/rock_paper_scissors_lizard_spock.gif">
				<p>
					Your opponent is a bot implementing an algorithm described <a href="https://www.his.se/PageFiles/8158/Henrik_Engstrom.pdf">here</a>.
				</p>
				<hr/>
				<p>
					<span style="color:purple">Tips</span> to improve computer strength:<br/>
					[*] check the square "Winner bot";<br/>
					[*] augment computer memory.
				</p>
				<p>Note also that bot performances are expected to get better over time: play a lot!</p>
			</div>
		</div>
		<footer class="center grey-text">
			<p>Images were found on the web; if they should be removed, let me know <a href="https://github.com/yagu0/rpsls/issues">on github</a></p>
		</footer>
	</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="js/rpsls.js"></script>
Commit	Line	Data
	1	<!doctype html>
	2	<html lang="en">
	3
	4	<head>
	5	<meta charset="utf-8">
	6	<title>Rock Paper Scissors Lizard Spock</title>
	7	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
	8	<link rel="stylesheet" href="css/rpsls.css">
	9	</head>
	10
	11	<body>
	12	<div class="container center" id="rpsls">
	13	<div class="row">
	14	<div class="col s12">
	15	<form class="center">
	16	<div class="input-field inline" title="The number of human moves remembered by the program. Higher means better performances, generally">
	17	<input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
	18	<label for="nInput">Memory</label>
	19	</div>
	20	<span class="leftSpacing" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">
	21	<input id="drawIsLost" type="checkbox" v-model="drawIsLost">
	22	<label for="drawIsLost">Winner bot</label>
	23	</span>
	24	</form>
	25	</div>
	26	</div>
	27	<div class="row topSpacing">
	28	<img v-for="(symb,i) in symbols" class="image" :class="{compChoice:compMove==i,humanChoice:humanMove==i}" :src="imgSource(symb)" @click="play(i)">
	29	<p class="blue-text center message topSpacing" v-if="humanMove>=0 && compMove>=0">{{ symbols[humanMove] + " " + messages[humanMove][compMove] + " " + symbols[compMove] }}</p>
	30	<p class="center scoreMsg topSpacing">
	31	<span>Score: </span>
	32	<span class="score">{{ gameState }}</span>
	33	</p>
	34	</div>
	35	<div id="explanations" class="row topSpacing">
	36	<hr/>
	37	<p>
	38	Your play Rock-Paper-Scissors-Lizard-Spock as described by Sheldon in TBBT, season 2 <a href="http://www.imdb.com/title/tt1256039/">episode 8</a>.
	39	</p>
	40	<img class="block" src="img/rock_paper_scissors_lizard_spock.gif">
	41	<p>
	42	Your opponent is a bot implementing an algorithm described <a href="https://www.his.se/PageFiles/8158/Henrik_Engstrom.pdf">here</a>.
	43	</p>
	44	<hr/>
	45	<p>
	46	<span style="color:purple">Tips</span> to improve computer strength:<br/>
	47	[*] check the square "Winner bot";<br/>
	48	[*] augment computer memory.
	49	</p>
	50	<p>Note also that bot performances are expected to get better over time: play a lot!</p>
	51	</div>
	52	</div>
	53	<footer class="center grey-text">
	54	<p>Images were found on the web; if they should be removed, let me know <a href="https://github.com/yagu0/rpsls/issues">on github</a></p>
	55	</footer>
	56	</body>
	57
	58	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	59	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
	60	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
	61	<script src="js/rpsls.js"></script>