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

style small Room button

Browse source
This commit is contained in:
sorrelbri 2020-04-11 21:39:09 -07:00
parent 0368325199
commit a9025aca8f
4 changed files with 295 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/play-node-go/public/reset.css
View file

@ -1,3 +1,7 @@
a {
color: unset;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

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

@ -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%),
)
);
/* 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)
);

57
packages/play-node-go/src/components/Button/Room/Room.js
View file

@ -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 = (
<div className="small-room">
<div className="small-room__roof">
<div className="small-room__roof-top small-room__roof-top--left"></div>
<div className="small-room__roof--left"></div>
<div className="small-room__roof-top small-room__roof-top--right"></div>
<div className="small-room__roof--right"></div>
</div>
<div className="small-room__body">
<div className="small-room__trim small-room__trim--left"></div>
<div className="small-room__sign">
<div className="small-room__sign__stone small-room__sign__stone--black"></div>
<div className="small-room__sign__stone small-room__sign__stone--white"></div>
<div className="small-room__sign__stone small-room__sign__stone--white"></div>
<div className="small-room__sign__stone small-room__sign__stone--black"></div>
</div>
<div className="small-room__window small-room__window--left">
<div className="small-room__window-frame small-room__window-frame--top"></div>
<div className="small-room__window-frame small-room__window-frame--left"></div>
<div className="small-room__window-frame small-room__window-frame--middle"></div>
<div className="small-room__window-frame small-room__window-frame--center"></div>
<div className="small-room__window-frame small-room__window-frame--right"></div>
<div className="small-room__window-frame small-room__window-frame--bottom"></div>
</div>
<div className="small-room__door">
<div className="small-room__door-frame small-room__door-frame--top"></div>
<div className="small-room__door-frame small-room__door-frame--left"></div>
<div className="small-room__door-handle"></div>
<div className="small-room__door-frame small-room__door-frame--right"></div>
</div>
<div className="small-room__window small-room__window--right">
<div className="small-room__window-frame small-room__window-frame--top"></div>
<div className="small-room__window-frame small-room__window-frame--left"></div>
<div className="small-room__window-frame small-room__window-frame--middle"></div>
<div className="small-room__window-frame small-room__window-frame--center"></div>
<div className="small-room__window-frame small-room__window-frame--right"></div>
<div className="small-room__window-frame small-room__window-frame--bottom"></div>
</div>
<div className="small-room__trim small-room__trim--bottom-left"></div>
<div className="small-room__trim small-room__trim--right"></div>
<div className="small-room__trim small-room__trim--bottom-right"></div>
</div>
</div>
)
return (
<div className="RoomButton" data-testid="RoomButton">
<h4 className="RoomButton__room-name">{roomData.name}</h4>
<Link to={`/rooms/${roomData.id}`}>Join Room</Link>
<h4 className="RoomButton__room-link RoomButton__room-link--action">
<Link to={`/rooms/${room.id}`}>Join {room.name}</Link>
</h4>
<h4 className="RoomButton__room-link RoomButton__room-link--info">
?
</h4>
{smallRoom}
</div>
);
}

230
packages/play-node-go/src/components/Button/Room/Room.scss
View file

@ -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;
}
}
}
}
}