refactor import/export bug, bug persists

dist/main.css

@@ -1,160 +1,3 @@
-/*!*******************************************************************************************************************************************!*\
-  !*** 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: 1fr 0.5fr 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: "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/3;
-  grid-row: 2/3;
-}
-
-#card-opp-container {
-  grid-column: 2/3;
-  grid-row: 1/2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-#card-deck-container {
-  grid-column: 3;
-  grid-row: 2/3;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-}
-
-#card-player-container {
-  grid-column: 2/3;
-  grid-row: 3;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-}
-
-#board {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  /* five equal 'fractioned' tracks */
-  box-sizing: border-box;
-  /* board within container */
-  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 double black;
-  display: flex;
-  /* background-color: rgb(172, 123, 59); */
-  background: #e8d090;
-  background: radial-gradient(circle, rgba(233, 193, 83, 0.953) 1%, #daa054 100%);
-  min-width: 40px;
-  min-height: 40px;
-  border-radius: 3px;
-  /* opacity: 0; */
-}
-
-body {
-  background: #ecbe46;
-  background: radial-gradient(circle, rgba(170, 168, 161, 0.942) 6%, #f1ece1 90%);
-  /* 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: 75px;
-  min-height: 75px;
-  height: 100%;
-  perspective: 1000px;
-  transition: transform 1s;
-  transform-style: preserve-3d;
-  cursor: pointer;
-  position: relative;
-  margin: 2px;
-}
-
-.front,
-.back {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid black;
-  border-radius: 4px;
-  position: absolute;
-}
-
-.front {
-  /* background: rgb(218, 195, 137); */
-  z-index: 2;
-  backface-visibility: hidden;
-  font-family: "Nanum Brush Script", cursive;
-  font-size: 18px;
-  background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
-}
-
-.back {
-  background: #EEEE;
-  z-index: 1;
-  transform: rotateX(180deg);
-}
-
-/* FLIP LOGIC HERE */
-.move-card:hover {
-  transform: rotateX(180deg);
-}
-
-/* 
-.move-card.is_flipped {
-  transform: rotateX(180deg);
-} */
 /*!*************************************************************************************************************************************!*\
   !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/index.scss ***!
   \*************************************************************************************************************************************/

notes_bugs.md

@@ -82,11 +82,38 @@ View
 - [clear] nvm 14 and 15 not compatible with M1 macs.  nvm 16 works.  
 
 
-
+2/5 
+- grid layout for the board made progress, but realized it populated in a seemingly random order.  I used HTML to build, considering starting to separate game logic and view portions.  
+- Grid logic is flawed as well, going to try to populate a different way
+- The 
 
 
 // let onefour = document.querySelector("[data-square='[1, 4]']")
 
 // let card1 = document.querySelector("[data-card-back='5']")
 
-// card1.innerHTML = tiger
+// card1.innerHTML = tiger
+
+2/7
+
+Here come's a long one: 
+
+I am having import / export problems and cant find the issue.  Hopefully more eyes will spot the error.  
+
+I want `Board` to export to `Game`.  
+- `Board` methods all work fine independently (create Board instance, fill board, access and reassign, validPos, etc.)
+- Not able to create board within `Game` class.
+
+What I've tried:
+- Pulled out all of the styling and html to test just the logic interaction (see built in terminal), `Board` class works as expected.
+- Commented out all other import/export (including styling file just in case) except for the following:
+  index.js: `import Game from "./scripts/game.js";` 
+  game.js: `import Board from "./board.js";` and `export default class Game {`
+  board.js: `export default class Board {`
+
+- Format attempts include 
+    - `export default Board;` placed at top and bottom of class page, inside and outside class definition, instead of the `export default class Board {` format
+    - import with and without `.js` at the end 
+
+- See screenshots for more context.
+

src/index.js

@@ -1,28 +1,28 @@
-import "./styles/index.css"
-import "./styles/cards.css"
-import Board from "./scripts/board";
-
-function addGlobalEventListener(type, selector, callback) {
-  document.addEventListener(type, e => {
-    if (e.target.matches(selector)) callback(e)
-  })
-}
-
-
-function createGrid() {
-  const gameBoard = document.getElementById("board");
-
-  for (let i = 0; i < 5; i++) {
-    for (let j = 0; j < 5; j++) {
-      let square = document.createElement("div");
-      square.classList.add("square");
-      square.setAttribute("id", [i, j]);
-      // gameBoard.appendChild(square);
-    }   
-  }
-}
-
-createGrid();
+// import "./styles/index.css"
+// import "./styles/cards.css"
+import {Game} from "./scripts/game.js";
+
+// function addGlobalEventListener(type, selector, callback) {
+//   document.addEventListener(type, e => {
+//     if (e.target.matches(selector)) callback(e)
+//   })
+// }
+
+
+// function createGrid() {
+//   const gameBoard = document.getElementById("board");
+
+//   for (let i = 0; i < 5; i++) {
+//     for (let j = 0; j < 5; j++) {
+//       let square = document.createElement("div");
+//       square.classList.add("square");
+//       square.setAttribute("id", [i, j]);
+//       // gameBoard.appendChild(square);
+//     }   
+//   }
+// }
+
+// createGrid();
 
 //   gameOver() {
 

src/scripts/board.js

@@ -1,5 +1,7 @@
+// export default Board;  // placed at bottom doesn't work
 
-class Board {
+// export default 
+export class Board {
   constructor() {
     this.grid = [];
     for (let i = 0; i < 5; i++) {
@@ -27,31 +29,47 @@ class Board {
   }
 
   isEmpty(pos) {
-    if (!Board.validPos(pos)) {
+    if (!this.validPos(pos)) {
       throw new Error('That position is not valid');
     }
     return (this.grid[pos[0], pos[1]] === null);  // t or f
   }
 
+  sayHi() {
+    console.log('hiiiiii')
+  }
+
 
 
 }
+
+// export default Board; 
+
 //confirmed by printing below with fill: let col = [`[${i},${j}]`];
-let board1 = new Board();
-
-// this.grid[1][1] = 'hello' // assign
-console.log(board1.grid);
-console.log(board1.grid[0][0]);
-console.log(board1.grid[4][4]);
-console.log(board1.grid[1][3]);
-if (validPos([1, 1])) {
-  console.log('valid!');  //valid
-} else {
-  console.log('invalid!');
-}
-this.grid.getPiece([1, 1]);
+// let board1 = new Board();
+
+// // assignment works!
+// board1.grid[1][1] = 'hello' // assign
+// console.log(board1.grid);
+// console.log(board1.grid[0][0]);
+
+
+// //validPos() works!
+//  if (board1.validPos([1, 1])) {
+//   console.log('valid!');  //valid
+// } else {
+//   console.log('invalid!');
+// }
+
+// // getPiece() works!
+// console.log(board1.getPiece([1, 1]));
+
+// // isEmpty() works!
+// console.log(board1.isEmpty([1, 1]));
+
+
+
 
-// export default Board;
 
 
 // Board should appear: 

src/scripts/card.js

@@ -1,5 +1,5 @@
 
-class Card {
+export default class Card {
   constructor(){
 
   }
@@ -27,4 +27,3 @@ const cobra = [[0, -1], [1, 1], [-1, 1]];               // cobra
 
 // const allCards = [tiger, dragon, frog, rabbit, crab, elephant, goose, rooster, monkey, mantis, horse, ox, crane, boar, eel, cobra]
 
-export default Card;

src/scripts/deck.js

@@ -1,6 +1,6 @@
 import Card from './card.js';
 
-class Deck {
+export default class Deck {
   constructor() {
     this.moveCards = Card.allCards;
     this.currentCards = [];
@@ -31,7 +31,7 @@ class Deck {
   // shuffle and card.pop() ?
   // Game obj should be in charge of getting the card and giving it to the player 
 
-export default Deck;
+
 
 
 

src/scripts/game.js

@@ -1,8 +1,9 @@
-import Player from './player';
-import Deck from './deck';
-import Board from './board';
+// import Player from './player.js';
+// import Deck from './deck.js';
+import {Board} from "./board.js";
 
-class Game {
+// export default 
+export class Game {
   constructor() {
     this.activeGame = false;
     this.currentPlayerIdx = 0;  // to aid with dealing cards
@@ -34,8 +35,11 @@ class Game {
     this.activeGame = true;
   }
 }
+// export default Game; 
 
-export default Game;
+
+// let game1 = new Game();
+// console.log(game1)
 
 
 // consider adding a KEY:value list of variables like pawn, master, or player