oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add table styling to game buttons in game room

Browse source
This commit is contained in:
Sorrel Bri 2020-01-28 22:20:56 -08:00
parent b45abe5559
commit 0f02cc4cfc
4 changed files with 60 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
play-node-go/public/stylesheets/partials/_variables.scss
View file

@ -18,4 +18,8 @@ $break-points: (
$colors: (
"error": #aa3333,
);
);
$backgrounds: (
"game_room": radial-gradient(farthest-corner at 55% 40%, rgb(189, 131, 100) 0%, rgb(175, 113, 80) 65%, rgb(150, 90, 65) 90%, rgb(125, 65, 40) 100%),
)

1
play-node-go/src/components/Button/Game/Game.js
View file

@ -72,6 +72,7 @@ const GameButton = (props) => {
<div className="table__player-bowl table__player-bowl--black"></div>
</div>
<div className="table__game-board">
<div className="table__game-board--grid"></div>
</div>
<div className="table__player-area table__player-area--white">
<div className="table__player-bowl table__player-bowl--white"></div>

62
play-node-go/src/components/Button/Game/Game.scss
View file

@ -1,13 +1,13 @@
div.GameButton {
align-items: stretch;
background-color: #aa9933;
box-shadow: -2vmin 4vmin 2vmin rgba(83, 53, 35, 0.81);
display: flex;
flex-flow: column nowrap;
height: 20vw;
height: 20vh;
justify-content: space-around;
margin: 1vw;
width: 20vw;
width: 20vh;
}
div.GameButton__seat {
@ -17,7 +17,7 @@ div.GameButton__seat {
width: 50%;
&.GameButton__seat--black {
border: transparent;
border: rgba(83, 53, 35, 0.81);
border-radius: 5vw 5vw 0 0;
}
@ -29,18 +29,16 @@ div.GameButton__seat {
}
div.GameButton__table {
background-color: blue;
height: 80%;
margin: 0;
width: 100%;
}
div.GameButton__table__meta {
background-color: transparent;
display: flex;
flex-flow: column nowrap;
height: 100%;
justify-content: space-around;
justify-content: space-between;
width: 100%;
z-index: 2;
}
@ -51,9 +49,12 @@ div.GameButton__table__meta * {
div.GameButton__table__image {
align-items: center;
background: radial-gradient(farthest-corner at 55% 40%, rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 100%);
border: 0.15vw solid rgb(150, 200, 220);
// ! change border sides
background: radial-gradient(
farthest-corner at 55% 40%,
rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 100%
);
border-top: 0.1vw solid rgb(150, 200, 220);
border-right: 0.05vw solid rgb(97, 166, 194);
border-radius: 0.3vw;
display: flex;
flex-flow: column nowrap;
@ -65,9 +66,23 @@ div.GameButton__table__image {
z-index: 1;
div.table__game-board {
background: radial-gradient(farthest-corner at 55% 40%, rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%);
background: radial-gradient(
farthest-corner at 55% 40%,
rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%
);
height: 60%;
width: 60%;
display: flex;
align-items: center;
justify-content: center;
div.table__game-board--grid {
background:
repeating-linear-gradient(0deg, #000 0%, transparent 0.75%, transparent 4.25%, #000 5%),
repeating-linear-gradient(90deg, #000 0%, transparent 0.75%, transparent 4.25%, #000 5%);
height: 94%;
width: 94%;
}
}
}
@ -76,38 +91,43 @@ div.table__player-area {
width: 60%;
div.table__player-bowl {
background: radial-gradient(farthest-corner at 48% 54%, rgb(30, 5, 0) 0%, rgb(30, 5, 0) 2%, rgb(30, 5, 0) 32%, rgb(0,0,0)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
background: radial-gradient(
farthest-corner at 48% 54%,
rgb(30, 5, 0) 0%, rgb(30, 5, 0) 2%, rgb(30, 5, 0) 32%, rgb(0,0,0)35%, rgb(116,48,17) 48%,
rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%,
rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%
);
border-radius: 50%;
height: 2.75vw;
width: 2.75vw;
height: 100%;
&--white {
margin: auto 75% auto auto;
margin: auto auto auto 75%;
}
&--black {
margin: auto auto auto 75%;
margin: auto 75% auto auto;
}
}
}
div.GameButton__player-data {
background-color: rgba(155,155,155,0.5);
background-color: rgba(255,255,255,0.65);
display: flex;
justify-content: space-between;
margin: 0.5vw;
justify-content: space-around;
max-width: 100%;
&.GameButton__player-data--white {
margin: 0 5vw 0 0.5vw;
margin: 0 5vw 1vw 0.5vw;
}
&.GameButton__player-data--black {
margin: 0 0.5vw 0 5vw;
margin: 1vw 0.5vw 0 5vw;
}
}
.GameButton__link {
background-color: rgba(255, 255, 255, 0.95);
margin: 0 auto;
padding: .5vw;
}

14
play-node-go/src/pages/Room/Room.scss
View file

@ -1,10 +1,15 @@
@import '../../../public/stylesheets/partials/_variables';
div.Room {
align-items: initial;
background: map-get($backgrounds, "game_room");
display: flex;
flex-flow: column nowrap;
height: 100%;
width: 100%;
justify-content: stretch;
align-items: initial;
overflow: scroll;
width: 100%;
height: 100%;
h2 {
justify-self:stretch;
@ -15,9 +20,12 @@ div.Room {
}
div.Room__game-container {
height: 100%;
min-height: 100%;
min-width: 100%;
justify-self: flex-start;
align-self: flex-start;
display: flex;
flex-flow: row wrap;
}
div.Room__message-container {