CS-290
/
GoServer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Claire's changes, add styling, backgrounds, and rules page

This commit is contained in:
clairecahill 2018-06-11 19:56:25 -07:00
parent 7190ea2ded
commit 7eab8eb71e
7 changed files with 285 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
public/css/main.css
View File

@ -1,115 +1,199 @@
h1, h2, h3, h4, h5, h6 {
font-family: "Indie Flower", serif;
text-align: center; }
font-family: "Comfortaa", serif;
text-align: center;
}
h1 {
font-size: 5em;
margin: 0px; }
font-family: "Bangers", serif;
font-size: 7em;
color: darkred;
display: inline;
margin: 0px 45%;
background: white;
padding: 2px 17px 2px 8px;
border-radius: 15px;
}
body {
font-family: "Raleway", sans-serif;
font-family: "Comfortaa", sans-serif;
margin: 0px;
background-color: #f4f4f4; }
background-color: #f4f4f4;
}
.rules-body {
background-image: url(../../src/Go/views/grid.jpg);
}
.rules-title {
font-family: "Bangers", serif;
font-size: 66px;
color: darkred;
display: inline;
border-radius: 20px;
line-height: 115px;
padding: 10px;
background-color: white;
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;
}
li.rule {
padding: 3px;
font-size: 18px;
}
ul.game-instructions {
display: flex;
}
li#welcome {
padding: 0px 10px 0px 5px;
border-left: solid tomato;
text-align: center;
list-style: none;
}
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; }
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;
padding: 5.55556%; }
.board-cell .overlay {
position: absolute;
box-sizing: border-box;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 50%;
transition: background-color .25s; }
.board-cell.small {
padding: 5.55556%; }
.board-cell.medium {
padding: 3.84615%; }
.board-cell.large {
padding: 2.63158%; }
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; }
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;
box-sizing: border-box; }
box-sizing: border-box;
border: solid tomato 1px;
border-radius: 22px;
background-color: white;
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 .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; }
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 */

65
public/scss/main.scss
View File

@ -5,26 +5,79 @@ $background-grey: #f4f4f4;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Indie Flower", serif;
font-family: "Comfortaa", serif;
text-align: center;
}
h1 {
font-size: 5em;
margin: 0px;
font-family: "Bangers", serif;
font-size: 7em;
color:darkred;
display:inline;
margin: 0px 45%;
background: white;
padding: 2px 17px 2px 8px;
border-radius: 15px;
}
body {
font-family: "Raleway", sans-serif;
font-family: "Comfortaa", sans-serif;
margin: 0px;
background-color: $background-grey;
}
.rules-body {
background-image: url(../../src/Go/views/grid.jpg);
}
.rules-title {
font-family: "Bangers", serif;
font-size: 66px;
color: darkred;
display: inline;
border-radius: 20px;
line-height: 115px;
padding: 10px;
background-color: white;
margin-left: 35%;
}
.content-wrapper {
max-width: 750px;
margin: auto;
}
ul.rules-list {
background-color: $background-grey;
padding: 26px;
border-radius: 15px;
margin: 0px 25px;
}
li.rule {
padding: 3px;
font-size: 18px;
}
ul.game-instructions {
display: flex;
}
li#welcome {
padding: 0px 10px 0px 5px;
border-left: solid tomato;
text-align: center;
list-style: none;
}
div.top-bar {
background-image: url(../../src/Go/views/grid.jpg);
line-height: 135px;
}
.board {
background-color: tomato;
padding: 20px;
@ -97,6 +150,10 @@ body {
.split-item {
flex-grow: 1;
box-sizing: border-box;
border: solid tomato 1px;
border-radius: 22px;
background-color: white;
margin: 0px 10px;
}
.split-wrapper form {

5
src/Go/views/base.ecr
View File

@ -3,10 +3,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Bangers" rel="stylesheet">
</head>
<body>
<div class="content-wrapper">
<h1>Go</h1>
<div class="top-bar">
<h1 class="title>GO</h1>
</div>
<%= content %>
</div>
</body>

BIN
src/Go/views/go-example.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/Go/views/grid.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

62
src/Go/views/index.ecr
View File

@ -1,29 +1,37 @@
<ul class="game-instructions">
<li id="welcome">Welcome to our simulation of Go!</li>
<li id="welcome">Defeat your opponent by earning more territory.</li>
<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>
</ul>
<div class="split-wrapper">
<div class="split-item">
<h2>Create Game</h2>
<form autocomplete="off" id="create-form" action="/create" method="post">
<input required placeholder="Session Name" type="text" name="id"></input>
<input required placeholder="Your Password" type="text" name="your-password"></input>
<input required placeholder="Their Password" type="text" name="their-password"></input>
<div class="radio-parent">
<div class="radio-wrapper">
<input type="radio" name="color" id="radio-black" value="black" checked></input>
<label for="radio-black">Black</label>
</div>
<div class="radio-wrapper">
<input type="radio" name="color" id="radio-white" value="white"></input>
<label for="radio-white">White</label>
</div>
</div>
<input type="submit" value="Create Game"></input>
</form>
</div>
<div class="split-item">
<h2>Join Game</h2>
<form autocomplete="off" id="join-form" action="/game" method="post">
<input required placeholder="Session Name" type="text" name="id"></input>
<input required placeholder="Your Password" type="text" name="password"></input>
<input type="submit" value="Join Game"></input>
</form>
</div>
<div class="split-item">
<h2>Create Game</h2>
<form autocomplete="off" id="create-form" action="/create" method="post">
<input required placeholder="Session Name" type="text" name="id"></input>
<input required placeholder="Your Password" type="text" name="your-password"></input>
<input required placeholder="Their Password" type="text" name="their-password"></input>
<div class="radio-parent">
<div class="radio-wrapper">
<input type="radio" name="color" id="radio-black" value="black" checked></input>
<label for="radio-black">Black</label>
</div>
<div class="radio-wrapper">
<input type="radio" name="color" id="radio-white" value="white"></input>
<label for="radio-white">White</label>
</div>
</div>
<input type="submit" value="Create Game"></input>
</form>
</div>
<div class="split-item">
<h2>Join Game</h2>
<form autocomplete="off" id="join-form" action="/game" method="post">
<input required placeholder="Session Name" type="text" name="id"></input>
<input required placeholder="Your Password" type="text" name="password"></input>
<input type="submit" value="Join Game"></input>
</form>
</div>
</div>

24
src/Go/views/rules.html Normal file
View File

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../../../public/css/main.css"> </link>
</head>
<body class="rules-body">
<h2 class="rules-title">Rules of Go</h2>
<ul class="rules-list">
<li class="rule">The main object of the game is to cover more surface area of the board with your color (either black or white). Dots (sometimes referred to as “stones”) are placed at the intersections of lines.</li>
<li class="rule">Once a dot is placed, it cannot be removed. However, it can be “captured” by the other player if he/she completely surrounds a group of dots.</li>
<li class="rule">Every dot captured by a player earns him/her a point.</li>
<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>
<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>
<li class="rule">Strings of dots can only be formed when dots are horizontally or vertically adjacent (diagonals don’t count).</li>
<li class="rule">A player may not self-capture. A self-capture would occur if a dot was placed inside a group of the opposite color.</li>
<li class="rule">For additional rules, check out <a href=https://www.britgo.org/intro/intro2.html>this page.</a></li>
</ul>
</body>
</html>