Merge pull request #4616 from sau-mili/main

Enhancement of carrom game UI
kunjgit · Jun 20, 2024 · 8d2f8cd · 8d2f8cd
2 parents e48a1ef + 4947595
commit 8d2f8cd
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 12 deletions.
diff --git a/Games/Carrom/carrom.html b/Games/Carrom/carrom.html
@@ -14,7 +14,7 @@
 </head>
 <body style="background-image:url(carrom.jpg)">
 <div class="row" style="margin: 0px;padding: 0px;">
-	<div class="col-md-3">
+	<div class="col-md-3 flexx">
         <div class="jumbotron">
         	<h3><b>Player 1</b></h3>
         	<p><b>Score : <span id="0">0</span></b></p>
@@ -28,12 +28,13 @@ <h3><b>Player 1</b></h3>
   		<canvas id="Carrom" width="720" height="720">Your browser does not support the HTML5 canvas tag.</canvas>
   		<canvas id="Striker" width="720" height="720">Your browser does not support the HTML5 canvas tag.</canvas>
 	</div>
-  	<div class="col-md-3">
+  	<div class="col-md-3 flexx">
   		<div class="jumbotron">
         	<h3><b>Player 2</b></h3>
         	<p><b>Score : <span id="1">0</span></b></p>
   		</div>
-  		<p id="mp">Mouse Positions :</p>
+		<div class="mousepos"><p id="mp">Mouse Positions :</p></div>
+
   	</div>
 </div>
 <script type="text/javascript">

diff --git a/Games/Carrom/css/main.css b/Games/Carrom/css/main.css
@@ -13,14 +13,49 @@ div{
 	padding: 0px;
 }
 #Carrom{
-	background-color: black;
+	background:linear-gradient(black, brown);
 	position: absolute;
+	border-radius: 10px;
 }
 #Striker{
 	position: relative;
 }
 .jumbotron{
-	padding: 0px;
-	margin: 0px;
-	padding-left: 20px;
+	margin: 10px;
+	padding: 10px;
+	border-radius: 10px;
+	border: 2.5px solid rgb(168, 43, 1); 
+	border-style:groove;
+	backdrop-filter: blur(5px);
+	background: linear-gradient(rgba(255, 211, 181, 0.608),rgba(68, 1, 1, 0.577));
+}
+
+.jumbotron h3{
+	text-align: center;
+	color: rgb(255, 255, 255);
+}
+.jumbotron p{
+	color:beige;
+
+}
+.mousepos{
+	margin: 10px;
+	align-items: center;
+	text-align: center;
+	background-color: rgb(252, 237, 187);
+	padding: 10px;
+	border-radius: 10px;
+	font-weight: 600;
+}
+.btn-primary{
+	margin: 10px;
+	background-color: maroon;
+	width: 100px;
+	height: 40px;
+	align-items: center;
+
+}
+.flexx{
+	align-items: center;
+	text-align: center;
 }
diff --git a/Games/Carrom/js/canvasCalls.js b/Games/Carrom/js/canvasCalls.js
@@ -4,10 +4,10 @@ function canvasCalls(){
 	//inner rectangle
 	drawRect(20,20,680,680,'#f3e5ab',ctx);
 	//Corner Circles
-	drawCircle(35,35,22,'black',ctx);
-	drawCircle(685,35,22,'black',ctx);
-	drawCircle(685,685,22,'black',ctx);
-	drawCircle(35,685,22,'black',ctx);
+	drawCircle(35,35,22,'#750E21',ctx);
+	drawCircle(685,35,22,'#750E21',ctx);
+	drawCircle(685,685,22,'#750E21',ctx);
+	drawCircle(35,685,22,'#750E21',ctx);
 	//Central Circles
 	drawCircle(360,360,10,'black',ctx);
 	drawCircleS(360,360,70,ctx);

diff --git a/Games/Carrom/js/main.js b/Games/Carrom/js/main.js
@@ -14,7 +14,7 @@ $(document).ready(function(){
             yCo = event.pageY;
             if(xCo <   players[currPlayer].rb && xCo >  players[currPlayer].lb)
                 coins[0].x = xCo; 
-            $("#mp").html("x-coor : " + xCo +"  y-coor : " + yCo);
+            $("#mp").html("X-coordinate : " + xCo +"  Y-coordinate : " + yCo);
             ctx.clearRect(0,0,720,720);
             drawCoins();
             drawCircle(coins[0].x-390,coins[0].y,12.5,'white',ctx);