Skip to content

Commit

Permalink
merge to main branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bill-the-dev
Bill-the-dev committed Feb 10, 2022
1 parent 293c94f commit 6734a5a
Show file tree
Hide file tree
Showing 2 changed files with 1,983 additions and 7 deletions.
347 changes: 342 additions & 5 deletions dist/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,344 @@
*{margin:0px;padding:0}#container{width:100%;height:100%}#game{width:100%;height:100%;display:grid;grid-template-columns:repeat(5, 1fr);grid-template-rows:.25fr 1fr 2fr 1fr .25fr}header{border-bottom:2px solid #000;margin-bottom:50px;border-style:double}.title{font-family:"Nanum Brush Script",cursive;font-size:5rem;font-weight:bold;text-align:center;margin:1rem,0,1rem,0}#board-container{display:flex;justify-content:center;align-items:center;grid-column:2/4;grid-row:3/4}#board{display:grid;grid-template-columns:repeat(5, 1fr);box-sizing:border-box;padding:0px;border-radius:6px;box-shadow:0px,3px,18px,rgba(0,0,0,.5)}.opponent-row{grid-column:2/4;grid-row:2/3;display:flex;align-items:center;justify-content:center;margin:5px}.on-deck-row{grid-column:4;grid-row:3/4;display:flex;align-items:center;justify-content:left;margin:5px}.player-row{grid-column:2/4;grid-row:4;display:flex;align-items:flex-start;justify-content:center;margin:5px}.square.inactive{border:.5px solid #3a3a3a;display:flex;background:#dbe6f6;background:radial-gradient(circle, #DBE6F6 1%, #bdc3c7 100%);min-width:40px;min-height:40px;border-radius:3px;justify-content:center;align-items:center;box-shadow:0px,3px,18px,rgba(0,0,0,.5)}.square.active{border:.5px solid #3a3a3a;display:flex;background:#7eeb8e;background:radial-gradient(circle, #DBE6F6 1%, #9fe98c 100%);min-width:40px;min-height:40px;border-radius:3px;justify-content:center;align-items:center;box-shadow:0px,3px,18px,rgba(0,0,0,.5);cursor:pointer}body{background-image:linear-gradient(to bottom right, #faf4eb 0%, #f8f9f5 100%);margin:1px}.modal__howTo{height:100%;width:100%;display:flex;position:fixed;background-color:rgba(0,0,0,.6);margin:0 auto;visibility:hidden;justify-content:center;align-items:center}.modal{display:flex;background-color:#fff;height:100%;width:60%;padding:1em}.modal__fill{font-family:"Nanum Brush Script",cursive;font-size:1.5em;color:#302f2f}.modal__fill-active{visibility:visible;z-index:3}
.move-card{width:90px;height:75px;perspective:1000px;transition:transform 1s;transform-style:preserve-3d;cursor:pointer;position:relative;border-radius:4px;margin:2px}.front,.back{height:100%;width:100%;display:flex;justify-content:center;align-items:center;border-radius:4px;position:absolute}.front{z-index:2;backface-visibility:hidden;font-family:"Comforter",cursive;font-size:1.5rem}.player-row .move-card .front{background-image:linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%);color:#fff}.opponent-row .move-card .front{background-image:linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%);color:#fff}.on-deck-row .move-card .front{background-image:linear-gradient(to top, #0099f7, #f11712);color:#fff}.back{background-image:linear-gradient(to bottom, #e4e4ca 80%, #c4c4c0 110%);z-index:1;transform:rotateX(180deg)}#back4 .grid-graphic,#back5 .grid-graphic{transform:rotate(180deg)}.grid-graphic{pointer-events:none}.back.is_inverted{transform:rotate(180deg)}.move-card.is_flipped{transform:rotateX(180deg)}.move-card .back.active-card{border:1px solid #faf337cb;box-shadow:0px 3px 18px 3px rgba(249,242,45,.845)}.move-card .back.inactive-card{box-shadow:0px 3px 18px 3px rgba(0,0,0,.25)}
#pawn{box-shadow:0px 3px 18px 3px rgba(0,0,0,.2);cursor:pointer}.blue-student-piece.inactive-pawn{width:20px;height:20px;border-radius:50%;background-image:linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%)}.blue-master-piece.inactive-pawn{width:25px;height:25px;background-image:linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%)}.red-student-piece.inactive-pawn{width:20px;height:20px;border-radius:50%;background-image:linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%)}.red-master-piece.inactive-pawn{width:25px;height:25px;background-image:linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%)}.red-master-piece.active-pawn,.blue-master-piece.active-pawn{width:25px;height:25px;background-image:linear-gradient(to bottom left, #f8f5d7 10%, #faf437 100%);transform:scale(1.2)}.red-student-piece.active-pawn,.blue-student-piece.active-pawn{width:20px;height:20px;border-radius:50%;background-image:linear-gradient(to bottom left, #f8f5d7 10%, #faf437 100%);transform:scale(1.2)}
.menu-container{font-family:"Nanum Brush Script",cursive;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;grid-column:1/2;grid-row:3;border-radius:2px;margin-top:4px;margin-bottom:4px;margin:2px;box-shadow:0px 3px 18px 3px rgba(0,0,0,.2)}.menu{border-radius:2px;box-shadow:0px 3px 18px 3px rgba(0,0,0,.2);width:95%;align-self:flex-start;margin-top:10px;text-align:center;cursor:pointer}
/*!*******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.css ***!
\*******************************************************************************************************************************************/
* {
margin: 0px;
padding: 0;
}

#container {
width: 100%;
height: 100%;
}

#game {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(5, 1fr);
/* grid-template-columns: 0.5fr 1fr 0.5fr 1fr 1fr; */
grid-template-rows: 0.25fr 1fr 2fr 1fr 0.25fr;
/* grid-auto-rows: minmax(100px, auto); */
/* flex-direction: column; */
}

header {
border-bottom: 2px solid black;
margin-bottom: 50px;
border-style: double;
}

.title {
font-family: "Nanum Brush Script", cursive;
font-size: 5rem;
font-weight: bold;
text-align: center;
margin: 1rem, 0, 1rem, 0;
}

#board-container {
display: flex;
justify-content: center;
align-items: center;
grid-column: 2/4;
grid-row: 3/4;
}

#board {
display: grid;
grid-template-columns: repeat(5, 1fr);
/* five equal 'fractioned' tracks */
box-sizing: border-box;
/*within container */
padding: 0px;
/* border: 2px solid black; */
border-radius: 6px;
box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.5);
}

.opponent-row {
grid-column: 2/4;
grid-row: 2/3;
display: flex;
align-items: center;
justify-content: center;
margin: 5px;
}

.on-deck-row {
grid-column: 4;
grid-row: 3/4;
display: flex;
align-items: center;
justify-content: left;
margin: 5px;
}

.player-row {
grid-column: 2/4;
grid-row: 4;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 5px;
}

/* [data-card="1"] {
flex: 1;
}
[data-card="2"] {
flex: 1;
} */
/* em dependent on parent?, rem */
.square.inactive {
border: 0.5px solid #3a3a3a;
display: flex;
/* background-color: rgb(172, 123, 59); */
background: #DBE6F6;
background: radial-gradient(circle, #DBE6F6 1%, #bdc3c7 100%);
min-width: 40px;
min-height: 40px;
border-radius: 3px;
justify-content: center;
align-items: center;
box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.5);
/* opacity: 0; */
}

.square.active {
border: 0.5px solid #3a3a3a;
display: flex;
/* background-color: rgb(172, 123, 59); */
background: #7eeb8e;
background: radial-gradient(circle, #DBE6F6 1%, #9fe98c 100%);
min-width: 40px;
min-height: 40px;
border-radius: 3px;
justify-content: center;
align-items: center;
box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.5);
cursor: pointer;
/* opacity: 0; */
}

body {
/* background: rgb(236,190,70);
background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, rgb(241, 236, 225) 90%); */
/* background-color: #EEEE; */
/* background-image: linear-gradient( 90deg, #ECE9E6 10%, #94d0f8 100%); */
background-image: linear-gradient(to bottom right, #faf4eb 0%, #f8f9f5 100%);
/* background-image: url('assets/sayagata-400px.png');
background-repeat: repeat;
background-size: 400px 400px; */
margin: 1px;
}

.modal__howTo {
height: 100%;
width: 100%;
display: flex;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
margin: 0 auto;
visibility: hidden;
justify-content: center;
align-items: center;
}

.modal {
display: flex;
background-color: #FFF;
height: 100%;
width: 60%;
padding: 1em;
}

.modal__fill {
font-family: "Nanum Brush Script", cursive;
font-size: 1.5em;
color: #302f2f;
}

.modal__fill-active {
visibility: visible;
z-index: 3;
}

/* Grid Layout help: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout */
/*!*******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/cards.css ***!
\*******************************************************************************************************************************************/
.move-card {
width: 90px;
height: 75px;
perspective: 1000px;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
border-radius: 4px;
margin: 2px;
}

.front,
.back {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
position: absolute;
}

.front {
z-index: 2;
backface-visibility: hidden;
font-family: "Comforter", cursive;
font-size: 1.5rem;
}

.player-row .move-card .front {
background-image: linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%);
color: #FFF;
}

.opponent-row .move-card .front {
background-image: linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%);
color: #FFF;
}

.on-deck-row .move-card .front {
background-image: linear-gradient(to top, #0099f7, #f11712);
color: #FFF;
}

.back {
background-image: linear-gradient(to bottom, #e4e4ca 80%, #c4c4c0 110%);
z-index: 1;
transform: rotateX(180deg);
}

/* inverts opponent graphic */
#back4 .grid-graphic,
#back5 .grid-graphic {
transform: rotate(180deg);
}

/* click-through */
.grid-graphic {
pointer-events: none;
}

/* Not using? Needs confirm */
.back.is_inverted {
transform: rotate(180deg);
}

/* Flip card on toggle */
.move-card.is_flipped {
transform: rotateX(180deg);
}

/* Highlight card on select */
.move-card .back.active-card {
border: 1px solid #faf337cb;
box-shadow: 0px 3px 18px 3px rgba(249, 242, 45, 0.845);
}

.move-card .back.inactive-card {
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.25);
}
/*!********************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/pieces.css ***!
\********************************************************************************************************************************************/
#pawn {
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

.blue-student-piece.inactive-pawn {
width: 20px;
height: 20px;
border-radius: 50%;
/* border: 1px solid black; */
background-image: linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%);
/* background: blue; */
}

.blue-master-piece.inactive-pawn {
width: 25px;
height: 25px;
/* border: 1px solid black; */
/* background: blue; */
background-image: linear-gradient(to bottom left, #0099f7 10%, #81eff9 100%);
}

.red-student-piece.inactive-pawn {
width: 20px;
height: 20px;
border-radius: 50%;
/* border: 1px solid black; */
/* background: red; */
background-image: linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%);
}

.red-master-piece.inactive-pawn {
width: 25px;
height: 25px;
/* border: 1px solid black; */
background-image: linear-gradient(to bottom left, #f8a7a6 0%, #ce0502 100%);
/* background: red; */
}

.red-master-piece.active-pawn,
.blue-master-piece.active-pawn {
width: 25px;
height: 25px;
background-image: linear-gradient(to bottom left, #f8f5d7 10%, #faf437 100%);
transform: scale(1.2);
}

.red-student-piece.active-pawn,
.blue-student-piece.active-pawn {
width: 20px;
height: 20px;
border-radius: 50%;
background-image: linear-gradient(to bottom left, #f8f5d7 10%, #faf437 100%);
transform: scale(1.2);
}
/*!******************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles/menu.css ***!
\******************************************************************************************************************************************/
.menu-container {
font-family: "Nanum Brush Script", cursive;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
grid-column: 1/2;
grid-row: 3;
/* not moving, why? */
/* position: relative; */
border-radius: 2px;
margin-top: 4px;
margin-bottom: 4px;
margin: 2px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}

.menu {
/* border: 1px solid gray; */
border-radius: 2px;
box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
width: 95%;
align-self: flex-start;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
/*!*************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
\*************************************************************************************************************************************/

/*# sourceMappingURL=main.css.map*/
Loading

0 comments on commit 6734a5a

Please sign in to comment.