fixed action button behaviour

Author: shubhamctech

vanilla-build/css/style.css

@@ -138,7 +138,7 @@ button:hover {
 	color: white;
 	background-color: rgba(211, 211, 211, 0.05);
 	border: 1px solid transparent;
-	border-radius: 10px;
+	border-radius: 8px;
 }
 
 .menu-items {
@@ -148,8 +148,8 @@ button:hover {
 	right: 0;
 
 	background-color: #203139;
-	border-radius: 2px;
-	padding: 10px;
+	border-radius: 8px;
+	padding: 8px;
 }
 
 @media (min-width: 640px) {
@@ -191,7 +191,7 @@ button:hover {
 	align-items: center;
 	gap: 2px;
 
-	border-radius: 10px;
+	border-radius: 8px;
 }
 
 .score p {
@@ -207,7 +207,7 @@ button:hover {
 footer {
 	color: white;
 	font-size: 0.8rem;
-	margin-top: 10vw;
+	margin-top: 16vw;
 }
 
 @media (min-width: 640px) {

vanilla-build/js/app.js

@@ -156,8 +156,6 @@ function init() {
 	const view = new View();
 	const store = new Store(players);
 
-	console.log(store.game);
-
 	view.bindGameResetEvent((event) => {
 		view.closeModal();
 		view.clearMoves();
@@ -173,6 +171,8 @@ function init() {
 	});
 
 	view.bindPlayerMoveEvent((square) => {
+		view.closeMenu();
+
 		const existingMove = store.game.moves.find(
 			(move) => move.squareID === +square.id
 		);

vanilla-build/js/view.js

@@ -52,6 +52,12 @@ export default class View {
 		icon.classList.toggle("fa-chevron-up");
 	}
 
+	closeMenu() {
+		if (!this.$.menuItems.classList.contains("hidden")) {
+			this.#toggleMenu();
+		}
+	}
+
 	handlePlayerMove(squareEl, player) {
 		const icon = document.createElement("i");
 		icon.classList.add("fa-solid", player.iconClass, player.colorClass);