Merge branch 'master' of github.com:aresnik11/set-game-frontend

index.css

@@ -33,13 +33,6 @@
   grid-gap: 10px;
   text-align: center;
 }
-/* 
-.options {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 10px;
-  text-align: center;
-} */
 
 .ui.statistic {
   display: block;
@@ -56,6 +49,8 @@
   border-color: black;
   text-align: center;
   border-radius: 15px;
+  margin: auto;
+  width: 95%
 }
 
 .card:hover {
@@ -141,6 +136,7 @@
 .shapes img {
   padding-left: 5px;
   padding-right: 5px;
+  width: 23%;
 }
 
 .shapes {

index.js

@@ -182,6 +182,7 @@ function startTimer() {
 //listens for clicks on the board
 board.addEventListener("click", function(e) {
     if (e.target.closest('.card')) {
+
         //if it already was selected, remove the border so it is no longer selected
         if (e.target.closest('.card').classList.contains("selected")) {
             removeSelected(e.target.closest('.card'))
@@ -400,11 +401,15 @@ options.addEventListener("click", function(e) {
         clearInterval(timer)
         e.target.dataset.action = "play"
         e.target.innerHTML = "<i class='play icon'></i>Play"
+        board.classList.remove("fadein")
+        board.classList.add("fadeout")
     }
     else if (e.target.dataset.action === "play") {
         startTimer()
         e.target.dataset.action = "pause"
         e.target.innerHTML = "<i class='pause icon'></i>Pause"
+        board.classList.remove("fadeout")
+        board.classList.add("fadein")
     }
 })