From 0f02cc4cfc9b4a70a95aa846998390f9b245ee93 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Tue, 28 Jan 2020 22:20:56 -0800 Subject: [PATCH] add table styling to game buttons in game room --- .../stylesheets/partials/_variables.scss | 6 +- .../src/components/Button/Game/Game.js | 1 + .../src/components/Button/Game/Game.scss | 66 ++++++++++++------- play-node-go/src/pages/Room/Room.scss | 14 +++- 4 files changed, 60 insertions(+), 27 deletions(-) diff --git a/play-node-go/public/stylesheets/partials/_variables.scss b/play-node-go/public/stylesheets/partials/_variables.scss index 8630947..43f4c62 100644 --- a/play-node-go/public/stylesheets/partials/_variables.scss +++ b/play-node-go/public/stylesheets/partials/_variables.scss @@ -18,4 +18,8 @@ $break-points: ( $colors: ( "error": #aa3333, -); \ No newline at end of file + ); + +$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%), +) \ No newline at end of file diff --git a/play-node-go/src/components/Button/Game/Game.js b/play-node-go/src/components/Button/Game/Game.js index 923f7ea..6c457e9 100644 --- a/play-node-go/src/components/Button/Game/Game.js +++ b/play-node-go/src/components/Button/Game/Game.js @@ -72,6 +72,7 @@ const GameButton = (props) => {
+
diff --git a/play-node-go/src/components/Button/Game/Game.scss b/play-node-go/src/components/Button/Game/Game.scss index bd60edf..b5e73a9 100644 --- a/play-node-go/src/components/Button/Game/Game.scss +++ b/play-node-go/src/components/Button/Game/Game.scss @@ -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; } \ No newline at end of file diff --git a/play-node-go/src/pages/Room/Room.scss b/play-node-go/src/pages/Room/Room.scss index 9733dac..1b73bac 100644 --- a/play-node-go/src/pages/Room/Room.scss +++ b/play-node-go/src/pages/Room/Room.scss @@ -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 {