[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" id="rpsls">
			<div class="row">
				<div class="col s12">
					<form class="center">
						<div class="input-field inline">
							<input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
							<label for="nInput">Memory</label>
						</div>
						<span class="leftSpacing">
							<input id="drawIsLost" type="checkbox" v-model="drawIsLost">
							<label for="drawIsLost" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">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>
		<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">yagu0 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" id="rpsls">
	13	<div class="row">
	14	<div class="col s12">
	15	<form class="center">
	16	<div class="input-field inline">
	17	<input id="nInput" type="number" v-model.number="nInput" @change="reinitialize()">
	18	<label for="nInput">Memory</label>
	19	</div>
	20	<span class="leftSpacing">
	21	<input id="drawIsLost" type="checkbox" v-model="drawIsLost">
	22	<label for="drawIsLost" title="If activated, the bot consider a draw as a lost game, and therefore tries to win even harder">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>
	36	<footer class="center grey-text">
	37	<p>Images were found on the web; if they should be removed, let me know: <a href="https://github.com/yagu0/rpsls">yagu0 on github</a></p>
	38	</footer>
	39	</body>
	40
	41	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	42	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
	43	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
	44	<script src="js/rpsls.js"></script>