Add screenshots to home, rules, and docs

Also updates rules and documentation across the site.

Author: WildeYeastBakery

.gitignore

@@ -189,3 +189,6 @@ wpg.sqlite3
 
 # Ignore future changes to stripe configuration
 configs/stripe.yaml
+
+# Mac Users
+.DS_Store

assets/static/.gitignore

@@ -22,3 +22,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 public/csw15.txt
+
+# Images repo
+src/images/

assets/static/src/App.css

@@ -20,6 +20,18 @@ p {
   pointer-events: none;
 }
 
+.App-screenshots {
+  max-height: 50vh;
+  max-width: 95%;
+  pointer-events: none;
+}
+
+.App-gifs {
+  max-height: 50vh;
+  max-width: 95%;
+  pointer-events: none;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
     animation: App-logo-spin infinite 20s linear;

assets/static/src/images/WillowPatch.jpg

@@ -10,6 +10,7 @@ import '@rmwc/typography/styles';
 import * as g from '@rmwc/grid';
 import { Typography } from '@rmwc/typography';
 
+
 class DocsPage extends React.Component {
   render() {
     return (
@@ -18,10 +19,54 @@ class DocsPage extends React.Component {
           <g.GridCell align="left" span={3} tablet={8} />
           <g.GridCell align="middle" span={6} tablet={8}>
             <article className="text">
-              <Typography use="headline2">Documentation</Typography>
+              <Typography use="headline2">Game Play Details</Typography>
+              <p>
+                Hope it helps! Let us know if there's anything we can improve!<br />
+                <br /> Looking for quick rules? <Link to="/rules/rush">Check here
+                instead!</Link>
+              </p>
+
+              <p> You can play Rush! in a game or a room.  The host decides if
+              the party will be playing one game or a series of games in a room.
+              </p>
+
+              <Typography use="headline4">How to get started playing Rush! as
+              a <a href="#player">player</a> or a <a href ="#host">host.</a></Typography>
+              <br />
+              <br />
+              <Typography use="headline3" id="player">How to Play a Rush! Game</Typography>
+              <p> You can play as a guest or as a signed in player.  For a guest player just enter your screen name and click play as guest button.
+              </p>
+              <p> To login, follow the screen prompts to login in and play.
+              </p>
+
+              <p>
+                If you don't have an account, you can click the signup button
+                at the top of the page.
+              </p>
+
+              <p>
+                Next, place your secret passcode given to you by the host in
+                the Join an Existing Room or Game box. Click the blue "Join"
+                button.
+              </p>
+
+              <p>
+                You are now admitted to the game or room.  If you're playing
+                a in a room you will see your name along with other guests.
+                Note: Your host can admit you as a player or
+                as a spectator.  A spectator doesn't play but watches what's
+                happening in the room.
+              </p>
+
+              <p>
+                Get ready!  The countdown will begin once all players have been
+                admitted to the room. All players will see a board and letter
+                tiles pop-up on the screen.  Start placing tiles to form words.
+                <b> Follow instructions in Playing Tiles on how to do that on
+                your device. </b>
+              </p>
               <p>
-                Hope it helps! Let us know if there's anything we can improve!<br /><br />
-              Looking for rules? <Link to="/rules/rush">Check here instead!</Link>
               </p>
               <Typography use="headline3">Game Mechanics</Typography>
               <Typography use="headline4">Playing Tiles</Typography>
@@ -119,6 +164,9 @@ class DocsPage extends React.Component {
                 can press the draw button to give a new tile. When not enough
                 tiles are left, the first person to draw is the winner!
               </p>
+
+              <Typography use="headline3" id="host">How to Host a Rush! Game</Typography>
+
             </article>
           </g.GridCell>
         </g.Grid>

assets/static/src/images/alex-scheel.jpg

@@ -12,6 +12,7 @@ import { Typography } from '@rmwc/typography';
 import { Theme } from '@rmwc/theme';
 
 import logo from '../images/logo.png';
+import Winnergif from '../images/Home-Page-large.gif';
 
 class HomePage extends React.Component {
   render() {
@@ -26,18 +27,33 @@ class HomePage extends React.Component {
               <g.GridCell align="right" span={8} tablet={8}>
                 <div className="styles.intro">
                   <div>
-                    <Typography use="headline2">
-                      Welcome to Willow Patch Games!
+                    <Typography use="headline2" style={{ 'color': '#008006',
+                    'lineHeight': '75%' }}>
+                      Welcome <br/ >
+                      <span style={{ 'fontSize': '60%' }}>to</span><br/ >
+                      <strong style={{ 'color': '#000000' }}>Willow Patch Games</strong>!
                     </Typography>
                   </div>
                   <div>
-                    <Typography use="headline3" style={{ textAlign: 'left' }}>
+                    <Typography use="headline4" style={{ textAlign: 'left' }}>
                       Redefining table-top games...
                     </Typography>
-                    <Typography use="headline3" style={{ textAlign: 'right' }}>
+                    <Typography use="headline4" style={{ textAlign: 'right' }}>
                       ...and updating them for the<br />21st century
                     </Typography>
+
                   </div>
+                </div>
+              </g.GridCell>
+            </g.GridRow>
+            <g.GridRow>
+              <g.GridCell align="middle" span={4} tablet={8} phone={4}>
+                { null }
+              </g.GridCell>
+              <g.GridCell align="right" span={8}>
+                <div>
+                  <LazyLoadImage className= "App-gifs" src={Winnergif}  alt="Animated screenshot of game play" />
+
                   <p style={{ textAlign: 'left' }}>
                     Hey there! We're a small game company kick-started by two brothers
                     one week in August. We like to build games you can play with your

assets/static/src/images/blank-profile.png

@@ -6,6 +6,11 @@ import '@rmwc/typography/styles';
 import * as g from '@rmwc/grid';
 import { Typography } from '@rmwc/typography';
 
+import GameStartsScreen from '../images/Screenshots/Game starts screen 1.png';
+import YouDrewMessage from '../images/Screenshots/you drew message.png';
+import Discard from '../images/Screenshots/Discard ANN.png';
+import Winner from '../images/Screenshots/winning message.png';
+
 class RushRulesPage extends React.Component {
   render() {
     return (
@@ -14,23 +19,32 @@ class RushRulesPage extends React.Component {
           <g.GridCell align="left" span={3} tablet={8} />
           <g.GridCell align="middle" span={6} tablet={8}>
             <article className="text">
-              <Typography use="headline2">Rules - Rush!</Typography>
+              <Typography use="headline2">Quick Start Guide - Rush!</Typography>
               <p>
                 The host creates a room and selects desired customizations.
                 Customization options include changing the total number of
                 tiles, how many tiles players start with, the number of tiles
-                to draw, and the discard penalty.
+                to draw, and the discard penalty. For details go to <b> create link
+                for details on hosting </b>.
               </p>
               <p>
                 Game play starts with everyone receiving the number of initial
                 tiles set by the host. The objective of the game is to place
                 all your tiles on the board in a single, connected word grid
-                list. When any player uses up all the tiles in their bank,
-                every player "draws" or is given additional number of
-                tiles specified by the game configuration, from the pile. The
-                first person to place all their tiles on the board (when there
-                are no more in the pile!) is "out" and wins the game.
+                list.
               </p>
+              <img className= "App-screenshots" src={GameStartsScreen} sizes= "180x180" alt="Tiles populated on grid" />
+
+              <p>
+                When a player uses up all the tiles in their bank, they click
+                the draw button.Then every player automatically draws and is
+                given additional number of tiles specified by the game
+                configuration, from the pile. The first person to place all
+                their tiles on the board (when there are no more in the pile!)
+                is "out" and wins the game.
+              </p>
+              <img className= "App-screenshots" src={YouDrewMessage} sizes= "180x180" alt="You drew message shown." />
+
               <p>
                 You can play a tile on a desktop computer by clicking the
                 square it should go in and pressing a letter on the keyboard,
@@ -48,12 +62,14 @@ class RushRulesPage extends React.Component {
                 penalty)  as replacement. This is configurable and is usually
                 three.
               </p>
+              <img className= "App-screenshots" src={Discard} sizes= "180x180" alt="Discard a tile to get different tiles" />
+
               <p>
-               When you've used up all your tiles, you need to draw. If there
-               aren't enough tiles left for everyone to draw, you're the
-               winner! Note that when someone else draws, you'll also draw
-               automatically.
+               If there aren't enough tiles left for everyone to draw, someone
+               is the winner!
               </p>
+              <img className= "App-screenshots" src={Winner} sizes= "180x180" alt="Winner board is displayed." />
+
               <p>
                 We suggest roughly 35 tiles per player, 15 tiles to start, a
                 discard penalty of 3, and 1 for the draw amount. One round