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
This commit is contained in:
clairecahill 2018-06-12 21:18:51 -07:00
commit 2ed23ee32b
10 changed files with 86 additions and 289 deletions

202
public/css/main.css vendored
View File

@ -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.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%; }
padding: 5.55556%; }
.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%; }
>>>>>>> 733c32748eb734f126d45e84e3609b04d4f1f023
padding: 2.63158%; }
.black-cell .overlay {
background-color: black;
}
background-color: black; }
.white-cell .overlay {
background-color: white;
}
background-color: white; }
.split-wrapper {
display: flex;
width: 100%;
}
@media screen and (max-width: 640px) {
.split-wrapper {
flex-direction: column;
}
}
width: 100%; }
@media screen and (max-width: 640px) {
.split-wrapper {
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;
}
.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 scale 1.3;
}
.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=public/css/main.css.map */
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 .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 .25s, color .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 .25s, border-width .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; }

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 KiB

After

Width:  |  Height:  |  Size: 180 KiB

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

@ -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 */

View File

@ -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

View File

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

View File

@ -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">

View File

@ -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 players 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>