style small Room button

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)

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

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 RoomButton = ({room}) => {
-  const roomData = props.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>
+      <h4 className="RoomButton__room-link RoomButton__room-link--action">
-      <Link to={`/rooms/${roomData.id}`}>Join Room</Link>
+        <Link to={`/rooms/${room.id}`}>Join {room.name}</Link>
+      </h4>
+      <h4 className="RoomButton__room-link RoomButton__room-link--info">
+        ?
+      </h4>
+      {smallRoom}
     </div>
   );
 }

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

@@ -1,9 +1,229 @@
+@import '../../../../public/stylesheets/partials/mixins';
+@import '../../../../public/stylesheets/partials/variables';
+
 div.RoomButton {
-  display: block;
+  display: grid;
+  height: 20vh;
   padding: 1vw;
+  width: 20vh;
+  grid-template-columns: [left] 1fr [right];
+  grid-template-rows: [top] 1fr [middle] 4fr [bottom];
 
-  .RoomButton__room-name {
+  .RoomButton__room-link {
-    text-transform: capitalize;
+    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;
+        }
+      }
+    }
+  }
 }