modified styles

Author: swift1719

src/board/board.css

@@ -25,11 +25,12 @@
     top:0px;
     position: absolute;
     width: fit-content;
-    outline: 2px solid rgb(134,154,189);
-    background-color: #282c34;
-    margin-left: 148px;
+    border-radius: 8px;
+    border: 8px solid rgb(153, 37, 37);
+    background-color: #282c34d3;
+    margin-left: 130px;
     margin-right: auto;
-    margin-top: 100px;
+    margin-top: 90px;
 }
 
 .row{
@@ -39,16 +40,27 @@
 .cell{
     width: 40px;
     height: 40px;
-    outline: 1px solid rgb(134,154,189);
+    border: 1px dotted rgb(153, 141, 88);
     display:inline-block;
 }
 
 .cell-green{
-    background-color: green;
+    outline: none;
+    background-color:#78ca0dab;
 }
+
 .cell-red{
-    background-color: red;
+    /* background-color: tan; */
+    /* border-radius: 14px; */
+    background-image:url("../assets/apple.png");
+    /* height: 40px;
+    width: 40px; */
+    background-size: contain;
+    /* background-color: red; */
 }
 .cell-purple{
-    background-color: purple;
+    /* background-color: purple; */
+    background-image: url("../assets/frog.png");
+    background-size: contain;
+
 }

src/board/board.js

@@ -13,8 +13,10 @@ import {
 import {useInterval} from '../utils/intervalUtil';
 import './board.css';
 import Aside from './aside';
-import scoreBoardImg from '../assets/borderGolden.png'
-import GreenBoard from '../assets/borderLeaves.png'
+import scoreBoardImg from '../assets/borderGolden.png';
+import appleImg from '../assets/apple.png';
+import GreenBoard from '../assets/borderLeaves.png';
+import frogImg from '../assets/frog.png';
 const BOARD_SIZE=13;
 const PROBABILITY_OF_DIRECTION_REVERSAL_FOOD=0.3;
 
@@ -179,7 +181,11 @@ const Board=()=>{
 
         setFoodCell(nextFoodCell);
         setFoodShouldReverseDirection(nextFoodShouldReverseDirection);
-        setScore(score+1);
+        if(foodShouldReverseDirection){//if food is frog then score double
+            setScore(score+2);
+        }else{
+            setScore(score+1);
+        }
     }
 
     const handleGameOver=()=>{
@@ -224,7 +230,9 @@ const Board=()=>{
                 <p>
                     <span style={{textDecorationLine:"underline"}} >Score </span>
                     <br/>
-                    <span style={{color:""}}><strong>{score}</strong></span>
+                    <img width="100px" height="100px" style={{marginTop:"0px",marginLeft:"-100px"}} src={appleImg} alt="apple.png" />
+                    <span style={{position:"absolute",color:"red",marginTop:"30px",marginLeft:"0px"}}><strong>{score}</strong></span>
+                    <img width="100px" height="100px" style={{marginTop:"0px",marginLeft:"30px",marginRight:"-100px"}} src={frogImg} alt="frog.png" />
                 </p>
             </div>
         </>