Add gradient and layout work. Inital flip mechanics failed.

Bill-the-dev · Feb 5, 2022 · 50647cb · 50647cb
1 parent 65c86ef
commit 50647cb
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 36 deletions.
diff --git a/assets/hypnotize.png b/assets/hypnotize.png
diff --git a/assets/sayagata-400px.png b/assets/sayagata-400px.png
diff --git a/dist/main.css b/dist/main.css
@@ -2,7 +2,7 @@
   !*** 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: 0;
+  margin: 0px;
   padding: 0;
 }
 
@@ -16,18 +16,19 @@
   height: 100%;
   display: grid;
   grid-template-columns: 1fr 0.5fr 1fr;
-  grid-template-rows: 1fr 3fr 1fr;
+  grid-template-rows: 1fr 2fr 1fr;
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */
 }
 
 header {
   border-bottom: 2px solid black;
   margin-bottom: 50px;
+  border-style: double;
 }
 
 .title {
-  font-family: "Comforter", cursive;
+  font-family: "Nanum Brush Script", cursive;
   font-size: 5rem;
   font-weight: bold;
   text-align: center;
@@ -72,31 +73,46 @@ header {
   /* five equal 'fractioned' tracks */
   box-sizing: border-box;
   /* board within container */
-  padding: 20px;
+  padding: 0px;
+  border: 2px solid black;
+  border-radius: 6px;
+  box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.2);
 }
 
 /* em dependent on parent?, rem */
 .square {
-  border: 1px solid black;
+  border: 1px double black;
   display: flex;
-  background-color: burlywood;
+  /* background-color: rgb(172, 123, 59); */
+  background: #e8d090;
+  background: radial-gradient(circle, rgba(233, 193, 83, 0.953) 1%, #d79844 100%);
   min-width: 40px;
   min-height: 40px;
+  border-radius: 3px;
+  /* opacity: 0; */
 }
 
 body {
-  background-color: lightgray;
+  background: #ecbe46;
+  background: radial-gradient(circle, rgba(236, 190, 70, 0.9416141457) 6%, #f1e3c4 79%);
+  /* background-color: #EEEE; */
+  /* background-image: linear-gradient( 90deg, #eeb154 10%, #FAD7A1 100%); */
+  /* background-image: url('assets/sayagata-400px.png');
+  background-repeat: repeat;
+  background-size: 400px 400px; */
+  margin: 1px;
 }
 
+/* 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 {
-  min-width: 80px;
-  min-height: 50px;
-  background-color: #e9d0af;
-  border-radius: 5px;
-  margin: 1rem;
+  min-width: 60px;
+  min-height: 70px;
+  height: 100%;
+  perspective: 1000px;
 }
-
-/* 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/index.scss ***!
   \*************************************************************************************************************************************/

diff --git a/dist/main.js b/dist/main.js
@@ -16,7 +16,7 @@
   \**********************/
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles/index.css */ \"./src/styles/index.css\");\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {}); // document.addEventListener(\"DOMContentLoaded\", () => {\n//   debugger;\n//   const game = new Game();\n//   const rootEl = document.querySelector(\".ttt\");\n//   new View(game, rootEl);\n// });//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXguanMuanMiLCJtYXBwaW5ncyI6Ijs7QUFBQTtBQUVBQSxRQUFRLENBQUNDLGdCQUFULENBQTBCLGtCQUExQixFQUE4QyxZQUFNLENBRW5ELENBRkQsR0FRQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9vbml0YW1hX2pzLy4vc3JjL2luZGV4LmpzP2I2MzUiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFwiLi9zdHlsZXMvaW5kZXguY3NzXCJcblxuZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcIkRPTUNvbnRlbnRMb2FkZWRcIiwgKCkgPT4ge1xuXG59KTtcblxuXG5cblxuXG4vLyBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKFwiRE9NQ29udGVudExvYWRlZFwiLCAoKSA9PiB7XG4vLyAgIGRlYnVnZ2VyO1xuLy8gICBjb25zdCBnYW1lID0gbmV3IEdhbWUoKTtcbi8vICAgY29uc3Qgcm9vdEVsID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcihcIi50dHRcIik7XG4vLyAgIG5ldyBWaWV3KGdhbWUsIHJvb3RFbCk7XG4vLyB9KTsiXSwibmFtZXMiOlsiZG9jdW1lbnQiLCJhZGRFdmVudExpc3RlbmVyIl0sInNvdXJjZVJvb3QiOiIifQ==\n//# sourceURL=webpack-internal:///./src/index.js\n");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _styles_index_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./styles/index.css */ \"./src/styles/index.css\");\n/* harmony import */ var _styles_cards_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./styles/cards.css */ \"./src/styles/cards.css\");\n\n\ndocument.addEventListener(\"DOMContentLoaded\", function () {}); // const card = document.querySelector('.card__inner');\n// card.addEventListener('click', function () {\n//   card.classList.toggle('is-flipped');\n// });\n// document.addEventListener(\"DOMContentLoaded\", () => {\n//   debugger;\n//   const game = new Game();\n//   const rootEl = document.querySelector(\".ttt\");\n//   new View(game, rootEl);\n// });//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvaW5kZXguanMuanMiLCJtYXBwaW5ncyI6Ijs7O0FBQUE7QUFDQTtBQUVBQSxRQUFRLENBQUNDLGdCQUFULENBQTBCLGtCQUExQixFQUE4QyxZQUFNLENBSW5ELENBSkQsR0FNQTtBQUVBO0FBQ0E7QUFDQTtBQUlBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSIsInNvdXJjZXMiOlsid2VicGFjazovL29uaXRhbWFfanMvLi9zcmMvaW5kZXguanM/YjYzNSJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgXCIuL3N0eWxlcy9pbmRleC5jc3NcIlxuaW1wb3J0IFwiLi9zdHlsZXMvY2FyZHMuY3NzXCJcblxuZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcIkRPTUNvbnRlbnRMb2FkZWRcIiwgKCkgPT4ge1xuICBcblxuXG59KTtcblxuLy8gY29uc3QgY2FyZCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5jYXJkX19pbm5lcicpO1xuXG4vLyBjYXJkLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgZnVuY3Rpb24gKCkge1xuLy8gICBjYXJkLmNsYXNzTGlzdC50b2dnbGUoJ2lzLWZsaXBwZWQnKTtcbi8vIH0pO1xuXG5cblxuLy8gZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcihcIkRPTUNvbnRlbnRMb2FkZWRcIiwgKCkgPT4ge1xuLy8gICBkZWJ1Z2dlcjtcbi8vICAgY29uc3QgZ2FtZSA9IG5ldyBHYW1lKCk7XG4vLyAgIGNvbnN0IHJvb3RFbCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoXCIudHR0XCIpO1xuLy8gICBuZXcgVmlldyhnYW1lLCByb290RWwpO1xuLy8gfSk7Il0sIm5hbWVzIjpbImRvY3VtZW50IiwiYWRkRXZlbnRMaXN0ZW5lciJdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/index.js\n");
 
 /***/ }),
 
@@ -30,6 +30,16 @@ eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extr
 
 /***/ }),
 
+/***/ "./src/styles/cards.css":
+/*!******************************!*\
+  !*** ./src/styles/cards.css ***!
+  \******************************/
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+eval("__webpack_require__.r(__webpack_exports__);\n// extracted by mini-css-extract-plugin\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9zcmMvc3R5bGVzL2NhcmRzLmNzcy5qcyIsIm1hcHBpbmdzIjoiO0FBQUEiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9vbml0YW1hX2pzLy4vc3JjL3N0eWxlcy9jYXJkcy5jc3M/MDAyOSJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyBleHRyYWN0ZWQgYnkgbWluaS1jc3MtZXh0cmFjdC1wbHVnaW5cbmV4cG9ydCB7fTsiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./src/styles/cards.css\n");
+
+/***/ }),
+
 /***/ "./src/styles/index.css":
 /*!******************************!*\
   !*** ./src/styles/index.css ***!

diff --git a/index.html b/index.html
@@ -6,17 +6,17 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./dist/main.css" />
   <script src="./dist/main.js"></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Comforter&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link
+  href="https://fonts.googleapis.com/css2?family=Comforter&family=Nanum+Brush+Script&family=Long+Cang&family=Roboto:wght@300;400;700&display=swap"
+  rel="stylesheet">
   <title>Onitama JS</title>
 </head>
 <body>
   <div id="container">
     <header>
-      <h1 class="title">Onitama JS</h1>
+      <h1 class="title">Onitama</h1>
     </header>
 
     <nav></nav>

diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,17 @@
 import "./styles/index.css"
+import "./styles/cards.css"
 
 document.addEventListener("DOMContentLoaded", () => {
+
+
 
 });
 
+// const card = document.querySelector('.card__inner');
 
+// card.addEventListener('click', function () {
+//   card.classList.toggle('is-flipped');
+// });
 
 
 

diff --git a/src/scripts/card.js b/src/scripts/card.js
@@ -21,3 +21,5 @@ let eel = [[1, -1], [-1, -1], [0, 1]];                // eel
 let cobra = [[0, -1], [1, 1], [-1, 1]];               // cobra
 
 
+// each card should visualize the grid move and title
+// Visual too small?
diff --git a/src/styles/cards.css b/src/styles/cards.css
@@ -0,0 +1,6 @@
+.move-card {
+  min-width: 60px;
+  min-height: 70px;
+  height: 100%;
+  perspective: 1000px;
+}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,5 +1,6 @@
+
 * {
-  margin: 0;
+  margin: 0px;
   padding: 0;
 }
 
@@ -14,7 +15,7 @@
   height: 100%; 
   display: grid;
   grid-template-columns: 1fr 0.5fr 1fr;
-  grid-template-rows: 1fr 3fr 1fr;
+  grid-template-rows: 1fr 2fr 1fr;
   /* grid-auto-rows: minmax(100px, auto);  */
   /* flex-direction: column; */
 
@@ -23,10 +24,11 @@
 header {
   border-bottom: 2px solid black;
   margin-bottom: 50px;
+  border-style: double;
 }
 
 .title {
-  font-family: 'Comforter', cursive;
+  font-family: 'Nanum Brush Script', cursive;
   font-size: 5rem;
   font-weight: bold;
   text-align: center;
@@ -69,32 +71,42 @@ header {
   display: grid;
   grid-template-columns: repeat(5, 1fr); /* five equal 'fractioned' tracks */
   box-sizing: border-box;  /* board within container */
-  padding: 20px;
+  padding: 0px;
+  border: 2px solid black;
+  border-radius: 6px;
+  box-shadow: 0px, 3px, 18px, rgba(0, 0, 0, 0.2);
+
 
 }
 /* em dependent on parent?, rem */
 .square {
-  border: 1px solid black;
+  border: 1px double black;
   display: flex;
-  background-color: burlywood;
+  /* background-color: rgb(172, 123, 59); */
+  background: rgb(232,208,144);
+  background: radial-gradient(circle, rgba(233, 193, 83, 0.953) 1%, rgba(215,152,68,1) 100%);
   min-width: 40px;
   min-height: 40px;
+  border-radius: 3px;
+  /* opacity: 0; */
+
 }
 
 body {
-  background-color: lightgray;
-  ;
+  background: rgb(236,190,70);
+  background: radial-gradient(circle, rgba(236,190,70,0.9416141456582633) 6%, rgba(241,227,196,1) 79%);
+  /* background-color: #EEEE; */
+  /* background-image: linear-gradient( 90deg, #eeb154 10%, #FAD7A1 100%); */
+  /* background-image: url('assets/sayagata-400px.png');
+  background-repeat: repeat;
+  background-size: 400px 400px; */
+
+  margin: 1px;
+
 }
 
 
-.move-card {
-  min-width: 80px;
-  min-height: 50px;
-  background-color: rgb(233, 208, 175);
-  border-radius: 5px;
-  margin:1rem
 
-}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,3 +21,5 @@ let eel = [[1, -1], [-1, -1], [0, 1]]; // eel
		let cobra = [[0, -1], [1, 1], [-1, 1]]; // cobra


		// each card should visualize the grid move and title
		// Visual too small?