Claire's changes, add styling, backgrounds, and rules page
This commit is contained in:
clairecahill
parent
7190ea2ded
commit
7eab8eb71e
|
|
@ -1,37 +1,95 @@
|
|||
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%; }
|
||||
padding: 5.5555555556%;
|
||||
}
|
||||
.board-cell .overlay {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -40,36 +98,51 @@ body {
|
|||
width: 80%;
|
||||
height: 80%;
|
||||
border-radius: 50%;
|
||||
transition: background-color .25s; }
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
.board-cell.small {
|
||||
padding: 5.55556%; }
|
||||
padding: 5.5555555556%;
|
||||
}
|
||||
.board-cell.medium {
|
||||
padding: 3.84615%; }
|
||||
padding: 3.8461538462%;
|
||||
}
|
||||
.board-cell.large {
|
||||
padding: 2.63158%; }
|
||||
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%; }
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.split-wrapper {
|
||||
flex-direction: column; } }
|
||||
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; }
|
||||
padding: 10px;
|
||||
}
|
||||
.split-wrapper form input {
|
||||
margin-top: 20px;
|
||||
padding: 5px;
|
||||
|
|
@ -78,38 +151,49 @@ body {
|
|||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
max-width: 300px; }
|
||||
.split-wrapper form input[type="radio"] {
|
||||
max-width: 300px;
|
||||
}
|
||||
.split-wrapper form input[type=radio] {
|
||||
opacity: 0;
|
||||
width: 0px;
|
||||
height: 0px; }
|
||||
.split-wrapper form input[type="radio"]:checked ~ label {
|
||||
height: 0px;
|
||||
}
|
||||
.split-wrapper form input[type=radio]:checked ~ label {
|
||||
color: tomato;
|
||||
transition: color .25s; }
|
||||
.split-wrapper form input[type="submit"] {
|
||||
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 {
|
||||
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"] {
|
||||
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 {
|
||||
display: block;
|
||||
}
|
||||
.split-wrapper form input[type=text]:focus {
|
||||
border-width: 3px;
|
||||
transition: background-color .25s, border-width .25s; }
|
||||
transition: background-color 0.25s, border-width 0.25s;
|
||||
}
|
||||
.split-wrapper form .radio-parent {
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
max-width: 300px; }
|
||||
max-width: 300px;
|
||||
}
|
||||
.split-wrapper form .radio-wrapper {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
text-align: center; }
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=public/css/main.css.map */
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
BIN
src/Go/views/go-example.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
src/Go/views/grid.jpg
Normal file
BIN
src/Go/views/grid.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
|
|
@ -1,3 +1,11 @@
|
|||
<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>
|
||||
|
|
|
|||
24
src/Go/views/rules.html
Normal file
24
src/Go/views/rules.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user