4 zu 3

by Sebastian Kay

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div id="gameboardwrapper" class="d-flex flex-column justify-content-center align-items-center">
	<div id="gameboard" class="row row-cols-4 justify-content-center align-content-center">
		
	</div>
</div>

CSS

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 1% 2.8%;
}

#gameboardwrapper {
  height: 100%;
  width: 100%;
  background: #ff00ffaa;
}
	
#gameboard {
	background: #1f2227;
}

@media (orientation:landscape) {
	
	#gameboard {
		aspect-ratio: 4 / 3;
		height: clamp(30%, 80%, 100%);
	}
	
}

@media (orientation:portrait) {
	
	#gameboard {
		aspect-ratio: 3 / 4;
		width: clamp(30%, 80%, 100%);
	}
	
}
/*
.landscape #gameboard {
	aspect-ratio: 4 / 3;
	height: 80%;
}

.portrait #gameboard {
	/*aspect-ratio: 3 / 4;
	height: auto;
	max-width: 90%;* /
	transform: rotate(90deg);
	width: 80%;
}*/

#gameboard .col {
	margin: 0;
	padding: 0;
}

.col .card-wrapper {
	aspect-ratio: 1 / 1;
	
}

.col .card-container {
	width: 100%;
	height: 100%;
}

JavaScript

let ratio = "landscape";
const gameBoardWrapper = document.getElementById("gameboardwrapper");
const gameBoard = document.getElementById("gameboard");
const difficultyLight = {
  iconsCount: 10,
  rowColumnsLandscape: 5,
  rowColumnsPortrait: 4
};
const difficultyMedium = {
  iconsCount: 12,
  rowColumnsLandscape: 6,
  rowColumnsPortrait: 4
};
const difficultyHard = {
  iconsCount: 14,
  rowColumnsLandscape: 7,
  rowColumnsPortrait: 4
};
let difficulty = difficultyMedium;

function calculateRatio() {
  if (window.innerWidth > window.innerHeight) {
    document.body.className = "landscape";
    ratio = "landscape";
    //gameboard.style.height = "80%";
    //gameboard.style.width = calculateRatio(gameboard.clientHeight) + "px";
  } else {
    document.body.className = "portrait";
    ratio = "portrait";
    //gameboard.style.width = "80%";
    //gameboard.style.height = calculateRatio(gameboard.clientWidth) + "px";
  }

  const allCollumns = gameBoard.querySelectorAll(".col");
  allCollumns.forEach((_) => {
    _.style.width = gameBoard.clientWidth / difficulty.rowColumnsLandscape + "px";
    _.style.height = gameBoard.clientHeight / difficulty.rowColumnsPortrait + "px";
  });
}

function calculateSize() {
  /*if (ratio == "landscape") {
  	_.style.width = gameBoard.clientWidth / difficulty.rowColumnsPortrait + "px";
  	_.style.height = gameBoard.clientHeight / (difficulty.iconsCount / difficulty.rowColumnsPortrait) + "px";
  } 
  
  if (ratio = "portrait") {
  	_.style.height = gameBoard.clientWidth / difficulty.rowColumnsPortrait + "px";
  	_.style.width = gameBoard.clientHeight / (difficulty.iconsCount / difficulty.rowColumnsPortrait) + "px";
  }
  */

}

calculateRatio();
window.addEventListener("resize", calculateRatio);