Merge branch 'daniel-server' of https://github.com/OSU-CS290-Sp18/final-project-group-4 into daniel-server

Add a link to the about page

public/css/main.css

@@ -1,28 +1,26 @@
 h1, h2, h3, h4, h5, h6 {
   font-family: "Comfortaa", serif;
-  text-align: center;
+  text-align: center; }
-}
 
 h1 {
   font-family: "Bangers", serif;
   font-size: 7em;
   color: darkred;
   display: inline;
-  margin: 0px 45%;
+  margin: 0px;
+  margin-top: 10px;
+  margin-bottom: 10px;
   background: white;
   padding: 2px 17px 2px 8px;
-  border-radius: 15px;
+  border-radius: 15px; }
-}
 
 body {
   font-family: "Comfortaa", sans-serif;
   margin: 0px;
-  background-color: #f4f4f4;
+  background-color: #f4f4f4; }
-}
 
 .rules-body {
-  background-image: url(../../src/Go/views/grid.jpg);
+  background-image: url(/images/grid.jpg); }
-}
 
 .rules-title {
   font-family: "Bangers", serif;
@@ -33,85 +31,58 @@ body {
   line-height: 115px;
   padding: 10px;
   background-color: white;
-  margin-left: 35%;
+  margin-left: 35%; }
-}
 
 .content-wrapper {
   max-width: 750px;
-  margin: auto;
+  margin: auto; }
-}
 
 ul.rules-list {
   background-color: #f4f4f4;
   padding: 26px;
   border-radius: 15px;
-  margin: 0px 25px;
+  margin: 0px 25px; }
-}
 
 li.rule {
   padding: 3px;
-  font-size: 18px;
+  font-size: 18px; }
-}
 
 ul.game-instructions {
   display: flex;
-}
+  padding: 0px; }
 
 li#welcome {
   padding: 0px 10px 0px 5px;
   border-left: solid tomato;
   text-align: center;
-  list-style: none;
+  list-style: none; }
-}
+  li#welcome:last-child {
+    border-right: solid tomato; }
 
 div.top-bar {
-  background-image: url(../../src/Go/views/grid.jpg);
+  background-image: url(/images/grid.jpg);
   line-height: 135px;
-}
+  display: flex;
+  justify-content: center; }
 
 .board {
   background-color: tomato;
   padding: 20px;
   max-width: 500px;
   margin: auto;
-  border-radius: 10px;
+  margin-top: 20px;
-}
+  border-radius: 10px; }
 
 .black-player .board-cell:hover .overlay {
-  background-color: black;
+  background-color: black; }
-}
 
 .white-player .board-cell:hover .overlay {
-  background-color: white;
+  background-color: white; }
-}
 
 .board-cell {
   display: inline-block;
   position: relative;
-<<<<<<< HEAD
+  padding: 5.55556%; }
-  padding: 5.5555555556%;
-}
-.board-cell .overlay {
-  position: absolute;
-  box-sizing: border-box;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-  border-radius: 50%;
-  transition: background-color 0.25s;
-}
-.board-cell.small {
-  padding: 5.5555555556%;
-}
-.board-cell.medium {
-  padding: 3.8461538462%;
-}
-.board-cell.large {
-  padding: 2.6315789474%;
-}
-=======
-  padding: 5.5555555556%; }
   .board-cell .overlay {
     position: absolute;
     box-sizing: border-box;
@@ -122,30 +93,24 @@ div.top-bar {
     border-radius: 50%;
     transition: background-color .25s; }
   .board-cell.small {
-    padding: 5.5555555556%; }
+    padding: 5.55556%; }
   .board-cell.medium {
-    padding: 3.8461538462%; }
+    padding: 3.84615%; }
   .board-cell.large {
-    padding: 2.6315789474%; }
+    padding: 2.63158%; }
->>>>>>> 733c32748eb734f126d45e84e3609b04d4f1f023
 
 .black-cell .overlay {
-  background-color: black;
+  background-color: black; }
-}
 
 .white-cell .overlay {
-  background-color: white;
+  background-color: white; }
-}
 
 .split-wrapper {
   display: flex;
-  width: 100%;
+  width: 100%; }
-}
+  @media screen and (max-width: 640px) {
-@media screen and (max-width: 640px) {
+    .split-wrapper {
-  .split-wrapper {
+      flex-direction: column; } }
-    flex-direction: column;
-  }
-}
 
 .split-item {
   flex-grow: 1;
@@ -153,66 +118,53 @@ div.top-bar {
   border: solid tomato 1px;
   border-radius: 22px;
   background-color: white;
-  margin: 0px 10px;
+  margin: 0px 10px; }
-}
 
 .split-wrapper form {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 10px;
+  padding: 10px; }
-}
+  .split-wrapper form input {
-.split-wrapper form input {
+    margin-top: 20px;
-  margin-top: 20px;
+    padding: 5px;
-  padding: 5px;
+    padding-left: 10px;
-  padding-left: 10px;
+    padding-right: 10px;
-  padding-right: 10px;
+    border: none;
-  border: none;
+    outline: none;
-  outline: none;
+    width: 100%;
-  width: 100%;
+    max-width: 300px; }
-  max-width: 300px;
+  .split-wrapper form input[type="radio"] {
-}
+    opacity: 0;
-.split-wrapper form input[type=radio] {
+    width: 0px;
-  opacity: 0;
+    height: 0px; }
-  width: 0px;
+    .split-wrapper form input[type="radio"]:checked ~ label {
-  height: 0px;
+      color: tomato;
-}
+      transition: color .25s; }
-.split-wrapper form input[type=radio]:checked ~ label {
+  .split-wrapper form input[type="submit"] {
-  color: tomato;
+    padding: 10px;
-  transition: color 0.25s;
+    background-color: tomato;
-}
+    color: white; }
-.split-wrapper form input[type=submit] {
+    .split-wrapper form input[type="submit"]:focus, .split-wrapper form input[type="submit"]:hover {
-  padding: 10px;
+      background-color: inherit;
-  background-color: tomato;
+      color: tomato;
-  color: white;
+      transition: background-color .25s, color .25s; }
-}
+  .split-wrapper form input[type="text"] {
-.split-wrapper form input[type=submit]:focus, .split-wrapper form input[type=submit]:hover {
+    background-color: inherit;
-  background-color: inherit;
+    border-bottom: solid tomato;
-  color: tomato;
+    border-width: 2px;
-  transition: background-color 0.25s, color 0.25s scale 1.3;
+    height: 3em;
-}
+    box-sizing: border-box;
-.split-wrapper form input[type=text] {
+    display: block; }
-  background-color: inherit;
+    .split-wrapper form input[type="text"]:focus {
-  border-bottom: solid tomato;
+      border-width: 3px;
-  border-width: 2px;
+      transition: background-color .25s, border-width .25s; }
-  height: 3em;
+  .split-wrapper form .radio-parent {
-  box-sizing: border-box;
+    display: flex;
-  display: block;
+    margin-top: 20px;
-}
+    width: 100%;
-.split-wrapper form input[type=text]:focus {
+    max-width: 300px; }
-  border-width: 3px;
+  .split-wrapper form .radio-wrapper {
-  transition: background-color 0.25s, border-width 0.25s;
+    flex-grow: 1;
-}
+    display: inline-block;
-.split-wrapper form .radio-parent {
+    text-align: center; }
-  display: flex;
-  margin-top: 20px;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form .radio-wrapper {
-  flex-grow: 1;
-  display: inline-block;
-  text-align: center;
-}
-
-/*# sourceMappingURL=public/css/main.css.map */

public/css/style.css

@@ -2,6 +2,7 @@ body {
     font-family: Roboto;
     background-image: url(/images/clouds.jpg);
     background-color: #F5F7FA;
+    background-size: cover;
     color: #2d2d2d;
 }
 

public/scss/css/main.css

@@ -1,158 +0,0 @@
-h1, h2, h3, h4, h5, h6 {
-  font-family: "Comfortaa", serif;
-  text-align: center;
-}
-
-h1 {
-  font-size: 5em;
-  margin: 0px;
-}
-
-body {
-  font-family: "Comfortaa", sans-serif;
-  margin: 0px;
-  background-color: #f4f4f4;
-}
-
-.content-wrapper {
-  max-width: 750px;
-  margin: auto;
-}
-
-li {
-  list-style: none;
-}
-
-ul.game-instructions {
-  display: flex;
-}
-
-div.top-bar {
-  background-image: url(../../src/Go/views/grid.jpg);
-  line-height: 135px;
-}
-
-.board {
-  background-color: tomato;
-  padding: 20px;
-  max-width: 500px;
-  margin: auto;
-  border-radius: 10px;
-}
-
-.black-player .board-cell:hover .overlay {
-  background-color: black;
-}
-
-.white-player .board-cell:hover .overlay {
-  background-color: white;
-}
-
-.board-cell {
-  display: inline-block;
-  position: relative;
-  padding: 5.5555555556%;
-}
-.board-cell .overlay {
-  position: absolute;
-  box-sizing: border-box;
-  top: 10%;
-  left: 10%;
-  width: 80%;
-  height: 80%;
-  border-radius: 50%;
-  transition: background-color 0.25s;
-}
-.board-cell.small {
-  padding: 5.5555555556%;
-}
-.board-cell.medium {
-  padding: 3.8461538462%;
-}
-.board-cell.large {
-  padding: 2.6315789474%;
-}
-
-.black-cell .overlay {
-  background-color: black;
-}
-
-.white-cell .overlay {
-  background-color: white;
-}
-
-.split-wrapper {
-  display: flex;
-  width: 100%;
-}
-@media screen and (max-width: 640px) {
-  .split-wrapper {
-    flex-direction: column;
-  }
-}
-
-.split-item {
-  flex-grow: 1;
-  box-sizing: border-box;
-}
-
-.split-wrapper form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px;
-}
-.split-wrapper form input {
-  margin-top: 20px;
-  padding: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  border: none;
-  outline: none;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form input[type=radio] {
-  opacity: 0;
-  width: 0px;
-  height: 0px;
-}
-.split-wrapper form input[type=radio]:checked ~ label {
-  color: tomato;
-  transition: color 0.25s;
-}
-.split-wrapper form input[type=submit] {
-  padding: 10px;
-  background-color: tomato;
-  color: white;
-}
-.split-wrapper form input[type=submit]:focus, .split-wrapper form input[type=submit]:hover {
-  background-color: inherit;
-  color: tomato;
-  transition: background-color 0.25s, color 0.25s;
-}
-.split-wrapper form input[type=text] {
-  background-color: inherit;
-  border-bottom: solid tomato;
-  border-width: 2px;
-  height: 3em;
-  box-sizing: border-box;
-  display: block;
-}
-.split-wrapper form input[type=text]:focus {
-  border-width: 3px;
-  transition: background-color 0.25s, border-width 0.25s;
-}
-.split-wrapper form .radio-parent {
-  display: flex;
-  margin-top: 20px;
-  width: 100%;
-  max-width: 300px;
-}
-.split-wrapper form .radio-wrapper {
-  flex-grow: 1;
-  display: inline-block;
-  text-align: center;
-}
-
-/*# sourceMappingURL=css/main.css.map */

src/Go.cr

@@ -166,6 +166,10 @@ get "/about" do |env|
     render "src/Go/views/about.ecr"
 end
 
+get "/rules" do |env|
+    render "src/Go/views/rules.ecr"
+end
+
 get "/" do |env|
     render "src/Go/views/index.ecr", "src/Go/views/base.ecr"
 end

src/Go/views/base.ecr

@@ -7,9 +7,7 @@
     </head>
     <body>
         <div class="content-wrapper">
-	   <div class="top-bar">
+	    <div class="top-bar"><h1 class="title">GO</h1></div>
-               <h1 class="title>GO</h1>
-	    </div>
             <%= content %>
         </div>
     </body>

src/Go/views/index.ecr

@@ -4,7 +4,7 @@
 	<li id="welcome">"Capture" dots of the opposite color by surrounding them.</li>
 	<li id="welcome">Create a game by filling out the fields below, giving the next player a password in "Their password."</li>
 	<li id="welcome">Join a game by entering the corresponding session name and password.</li>
-	<li id="welcome">Additional rules are found <a href="rules.html">here.</a></li>
+	<li id="welcome">Additional rules are found <a href="/rules">here.</a></li>
 </ul>
 <div class="split-wrapper">
 	<div class="split-item">

src/Go/views/rules.ecr

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
-            <link rel="stylesheet" href="../../../public/css/main.css"> </link>
+            <link rel="stylesheet" href="/css/main.css"> </link>
 	</head>
    <body class="rules-body">
 	   <h2 class="rules-title">Rules of Go</h2>
@@ -12,7 +12,7 @@
 		   <li class="rule">Points are also earned for the dots of that player’s color remaining on the board at the end of the game.</li>
 		   <li class="rule">The player with the most points at the end of the game is the winner.</li>
 		   <li class="rule">Dots are placed one at a time. Black plays first.</li>
-		   <img src=go-example.jpg>
+		   <img src="/images/go-example.jpg">
 		   <li class="rule">This diagram, (taken from <a href=https://www.britgo.org/intro/intro2.html>britgo</a>) shows the black player capturing a white stone at a (location a shows an example of a black “eye”). The black player has 15 points of territory - 10 in the bottom right corner and 5 at the top of the board. They also earn a point for capturing a white dot at location a, so their total is 16 points. The white player has 17 points - 11 along the left side and 6 in the top right corner. Therefore, the white player would win by 1 point.</li>
 		   <li class="rule">Each player has an endless amount of dots to place.</li>
 		   <li class="rule">A player can choose to pass on a turn. This usually occurs when the player cannot place any more dots, if they are able to place it in their own “eye” or the “eye” of the other player, causing it to be captured. The game ends if both players to pass their turn.</li>