From a9025aca8fc85ae9eb9d28bb5342eedcfcfd59d0 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Sat, 11 Apr 2020 21:39:09 -0700 Subject: [PATCH] style small Room button --- packages/play-node-go/public/reset.css | 4 + .../stylesheets/partials/_variables.scss | 14 +- .../src/components/Button/Room/Room.js | 57 ++++- .../src/components/Button/Room/Room.scss | 230 +++++++++++++++++- 4 files changed, 295 insertions(+), 10 deletions(-) diff --git a/packages/play-node-go/public/reset.css b/packages/play-node-go/public/reset.css index ed11813..82c1626 100644 --- a/packages/play-node-go/public/reset.css +++ b/packages/play-node-go/public/reset.css @@ -1,3 +1,7 @@ +a { + color: unset; +} + /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) diff --git a/packages/play-node-go/public/stylesheets/partials/_variables.scss b/packages/play-node-go/public/stylesheets/partials/_variables.scss index 281b82b..9e8e1d6 100644 --- a/packages/play-node-go/public/stylesheets/partials/_variables.scss +++ b/packages/play-node-go/public/stylesheets/partials/_variables.scss @@ -28,4 +28,16 @@ $colors: ( $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 +); + +/* Game Room Components */ +$small-room: ( + "roof": linear-gradient(rgb(69, 36, 19), rgb(31, 22, 18)), + "body": rgb(174, 169, 120), + "door": radial-gradient(15vh 20vh at top left, #662413,#992413 15%, #cc3423), + "door-handle": radial-gradient(circle at 40% 30%, rgb(247, 235, 183), rgb(213, 222, 41) 30%, rgb(121, 108, 7)), + "window-x": linear-gradient(rgba(67, 149, 159, 0.4), rgba(196, 249, 255, 0.4) 50%, rgba(67, 149, 159, 0.4) 50%, rgba(196, 249, 255, 0.4)), + "window-y": linear-gradient(to right, rgba(67, 149, 159, 0.5), rgba(196, 249, 255, 0.5) 50%, rgba(67, 149, 159, 0.5) 50%, rgba(196, 249, 255, 0.5)), + "frame": rgb(69, 36, 19), + "sign": rgb(188, 127, 95) +); \ No newline at end of file diff --git a/packages/play-node-go/src/components/Button/Room/Room.js b/packages/play-node-go/src/components/Button/Room/Room.js index 82e27ce..97992c3 100644 --- a/packages/play-node-go/src/components/Button/Room/Room.js +++ b/packages/play-node-go/src/components/Button/Room/Room.js @@ -2,12 +2,61 @@ import React from 'react'; import { Link } from 'react-router-dom'; import './Room.scss'; -const RoomButton = (props) => { - const roomData = props.room; +const RoomButton = ({room}) => { + const smallRoom = ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ) + return (
-

{roomData.name}

- Join Room +

+ Join {room.name} +

+

+ ? +

+ {smallRoom}
); } diff --git a/packages/play-node-go/src/components/Button/Room/Room.scss b/packages/play-node-go/src/components/Button/Room/Room.scss index b48b2ee..708156d 100644 --- a/packages/play-node-go/src/components/Button/Room/Room.scss +++ b/packages/play-node-go/src/components/Button/Room/Room.scss @@ -1,9 +1,229 @@ -div.RoomButton { - display: block; - padding: 1vw; +@import '../../../../public/stylesheets/partials/mixins'; +@import '../../../../public/stylesheets/partials/variables'; - .RoomButton__room-name { - text-transform: capitalize; +div.RoomButton { + display: grid; + height: 20vh; + padding: 1vw; + width: 20vh; + grid-template-columns: [left] 1fr [right]; + grid-template-rows: [top] 1fr [middle] 4fr [bottom]; + + .RoomButton__room-link { + align-self: self-end; + grid-area: top/left/middle/right; + // margin: 0 auto; + @include gameViewLabel; + // text-transform: capitalize; + max-width: fit-content; + z-index: 1; + + &--info { + justify-self: end; + } } + div.small-room { + grid-area: top/left/bottom/right; + height: 100%; + width: 100%; + // background-color: #f00; + display: grid; + grid-template-rows: [sky-start] 4vh [roof-start] 5vh [body-start] 1fr [body-end]; + + .small-room__roof { + display: grid; + grid-row: roof-start / body-start; + height: 100%; + max-width: 20vh; + grid-template-columns: [left] 10vh [middle] 10vh [right]; + grid-template-rows: 1fr; + + .small-room__roof-top { + height: 0.7vh; + width: 12vh; + position: relative; + top: 3vh; + background: map-get($small-room, "roof"); + grid-row: 1 / 2; + box-shadow: 0 0.35vh 0.75vh map-get($colors, "home"); + + &--left { + grid-column: left / middle; + transform: rotate(-26deg); + left: -1.2vh; + } + + &--right { + grid-column: middle / right; + transform: rotate(26deg); + left: -0.8vh; + } + } + + &--left { + border-right: map-get($small-room, "body") solid 10vh; + border-top: map-get($colors, "home") solid 5vh; + height: 0; + grid-column: left / middle; + } + &--right { + border-left: map-get($small-room, "body") solid 10vh; + border-top: map-get($colors, "home") solid 5vh; + height: 0; + grid-column: middle / right; + } + } + + .small-room__body { + grid-row: body-start / body-end; + background-color: map-get($small-room, "body"); + width: 80%; + justify-self: center; + display: grid; + grid-template-rows: 1fr 1vh 5fr 0.75vh; + grid-template-columns: 0.5vh 1vh 2fr 1vh 3fr 1vh 2fr 1vh 0.5vh; + grid-template-areas: + "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" + "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" + "trim-left gap-left window--left gap-mid-left door gap-mid-right window--right gap-right trim-right" + "trim-left trim--bottom-left trim--bottom-left trim--bottom-left door trim--bottom-right trim--bottom-right trim--bottom-right trim-right"; + } + + .small-room__trim { + width: 100%; + height: 100%; + background-color: map-get($small-room, "frame"); + + &--left { + grid-area: trim-left; + justify-self: start; + } + + &--right { + grid-area: trim-right; + justify-self: end; + } + + &--bottom-left { + grid-area: trim--bottom-left; + } + + &--bottom-right { + grid-area: trim--bottom-right; + } + } + + .small-room__sign { + grid-area: top-mid; + background-color: map-get($small-room, "sign"); + width: 2vh; + height: 2vh; + display: grid; + padding: 0.1vh; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + gap: 0.1vh; + justify-self: center; + + .small-room__sign__stone { + border-radius: 100%; + + &--white { + background-color: #FFF; + } + + &--black { + background-color: #000; + } + } + } + + .small-room__window { + align-self: center; + height: 60%; + width: 100%; + background: map-get($small-room, "window-x"), map-get($small-room, "window-y"); + display: grid; + grid-template-rows: 1fr 5fr 1fr 5fr 1fr; + grid-template-columns: 1fr 5fr 1fr 5fr 1fr; + + &--left { + grid-area: window--left; + } + &--right { + grid-area: window--right; + } + + .small-room__window-frame { + background-color: map-get($small-room, "frame"); + width: 100%; + height: 100%; + + &--top { + grid-area: 1/1/2/6; + } + + &--center { + grid-area: 3/1/4/6; + } + + &--bottom { + grid-area: 5/1/6/6; + } + + &--left { + grid-area: 1/1/6/2; + } + + &--middle { + grid-area: 1/3/6/4; + } + + &--right { + grid-area: 1/5/6/6; + } + } + } + + .small-room__door { + grid-area: door; + background: map-get($small-room, "door"); + width: 100%; + height: 100%; + display: grid; + grid-template-columns: 0.5vh 1fr 0.5vh; + grid-template-rows: 0.5vh 1fr; + + .small-room__door-handle { + height: 0.75vh; + width: 0.75vh; + border-radius: 50%; + background: map-get($small-room, "door-handle"); + grid-area: 2/2/3/3; + align-self: center; + justify-self: end; + margin: 0.5vh 0.5vh 0 0; + box-shadow: 0.1vh 0.25vh 0.4vh rgba(30, 30, 30, 0.7); + } + + .small-room__door-frame { + background-color: map-get($small-room, "frame"); + height: 100%; + width: 100%; + + &--top { + grid-area: 1/1/2/3; + } + + &--left { + grid-area: 1/1/3/2; + } + + &--left { + grid-area: 1/3/3/4; + } + } + } + } } \ No newline at end of file