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>