Add some explanations, improved styles
authorBenjamin Auder <benjamin.auder@somewhere>
Sun, 4 Feb 2018 18:42:33 +0000 (19:42 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Sun, 4 Feb 2018 18:42:33 +0000 (19:42 +0100)
css/rpsls.css
img/rock_paper_scissors_lizard_spock.gif [new file with mode: 0644]
index.html

index 4b0bbbe..5e3e86d 100644 (file)
@@ -1,10 +1,12 @@
 #rpsls {
        margin-top: 50px;
        margin-bottom: 50px;
+       min-height: calc(100vh - 100px);
 }
 
 .topSpacing {
        margin-top: 40px;
+       margin-bottom: 10px;
 }
 
 .leftSpacing {
        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 (file)
index 0000000..8036a4a
Binary files /dev/null and b/img/rock_paper_scissors_lizard_spock.gif differ
index 335b5a1..2b99c37 100644 (file)
@@ -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">
                                        <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>