From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sun, 4 Feb 2018 18:42:33 +0000 (+0100)
Subject: Add some explanations, improved styles
X-Git-Url: https://git.auder.net/variants/current/doc/css/img/%7B%7B?a=commitdiff_plain;h=82587ff558558a84e1491c01667055789b72b26f;p=rpsls-bot.git

Add some explanations, improved styles
---

diff --git a/css/rpsls.css b/css/rpsls.css
index 4b0bbbe..5e3e86d 100644
--- a/css/rpsls.css
+++ b/css/rpsls.css
@@ -1,10 +1,12 @@
 #rpsls {
 	margin-top: 50px;
 	margin-bottom: 50px;
+	min-height: calc(100vh - 100px);
 }
 
 .topSpacing {
 	margin-top: 40px;
+	margin-bottom: 10px;
 }
 
 .leftSpacing {
@@ -42,8 +44,16 @@
 	font-weight: bold;
 }
 
+#explanations {
+	background-color: lightgrey;
+}
+
+.block {
+	display: block;
+	margin: 10px auto;
+}
+
 footer {
-	position: absolute;
-	bottom: 0;
+	height: 50px;
 	width: 100%;
 }
diff --git a/img/rock_paper_scissors_lizard_spock.gif b/img/rock_paper_scissors_lizard_spock.gif
new file mode 100644
index 0000000..8036a4a
Binary files /dev/null and b/img/rock_paper_scissors_lizard_spock.gif differ
diff --git a/index.html b/index.html
index 335b5a1..2b99c37 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 	</head>
 
 	<body>
-		<div class="container" id="rpsls">
+		<div class="container center" id="rpsls">
 			<div class="row">
 				<div class="col s12">
 					<form class="center">
@@ -32,9 +32,26 @@
 					<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">yagu0 on github</a></p>
+			<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>