Merge pull request #7 from marlanperumal/1-make-the-game-screen-look-…

…better Added styling, draft instructions and draft score
marlanperumal · Sep 27, 2024 · d82d7f9 · d82d7f9
2 parents 2b63106 + 9dcba17
commit d82d7f9
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 20 deletions.
diff --git a/app.js b/app.js
@@ -55,28 +55,52 @@ canvas.addEventListener('mouseup', (e) => {
 
 // Function to extend the line beyond the canvas edges
 function extendLine(start, end) {
-    // Calculate the slope and extend to the edges of the canvas
     const slope = (end.y - start.y) / (end.x - start.x);
 
-    // Extend to the left and right edges of the canvas
     const extendedStart = { x: 0, y: start.y - slope * start.x };
     const extendedEnd = { x: canvas.width, y: start.y + slope * (canvas.width - start.x) };
 
     return { extendedStart, extendedEnd };
 }
 
-// Function to draw a line on the canvas
+// Function to draw a line and color the sides on the canvas
 function drawLine(start, end) {
     const { extendedStart, extendedEnd } = extendLine(start, end);
 
-    ctx.strokeStyle = 'red';
+    // Fill the area above the line
+
+    ctx.fillStyle = 'rgba(0, 0, 255, 0.4)'; // Semi-transparent blue
+    ctx.beginPath();
+    ctx.moveTo(extendedStart.x, extendedStart.y);
+    ctx.lineTo(extendedEnd.x, extendedEnd.y);
+    ctx.lineTo(canvas.width, extendedEnd.y);
+    ctx.lineTo(canvas.width, 0);
+    ctx.lineTo(0, 0);
+    ctx.lineTo(0, extendedStart.y);
+    ctx.closePath();
+    ctx.fill();
+
+    // Fill the area below the line
+    ctx.fillStyle = 'rgba(255, 0, 0, 0.4)'; // Semi-transparent red
+    ctx.beginPath();
+    ctx.moveTo(extendedStart.x, extendedStart.y);
+    ctx.lineTo(extendedEnd.x, extendedEnd.y);
+    ctx.lineTo(canvas.width, extendedEnd.y);
+    ctx.lineTo(canvas.width, canvas.height);
+    ctx.lineTo(0, canvas.height);
+    ctx.lineTo(0, extendedStart.y);
+    ctx.closePath();
+    ctx.fill();
+
+    // Draw the line
+    ctx.strokeStyle = 'black';
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.moveTo(extendedStart.x, extendedStart.y);
     ctx.lineTo(extendedEnd.x, extendedEnd.y);
     ctx.stroke();
 }
-
+    
 // Function to calculate the dot split based on the drawn line
 function calculateSplit(start, end) {
     const { extendedStart, extendedEnd } = extendLine(start, end);
@@ -101,7 +125,15 @@ function calculateSplit(start, end) {
     const percentageAbove = (dotsAbove / total) * 100;
     const percentageBelow = (dotsBelow / total) * 100;
 
-    document.getElementById('result').innerText = `Dots Above: ${percentageAbove.toFixed(2)}%, Dots Below: ${percentageBelow.toFixed(2)}%`;
+    // Calculate the score
+    const targetAbove = 80;
+    const targetBelow = 20;
+    const diffAbove = Math.abs(percentageAbove - targetAbove);
+    const diffBelow = Math.abs(percentageBelow - targetBelow);
+    // Scale the score such that an undersplit is penalized as much as an oversplit
+    const score = 100 - (diffAbove + diffBelow) / 2;
+
+    document.getElementById('result').innerText = `Dots Above: ${percentageAbove.toFixed(2)}%, Dots Below: ${percentageBelow.toFixed(2)}%, Score: ${score.toFixed(2)}`;
 }
 
 // Initialize the game

diff --git a/index.html b/index.html
@@ -4,23 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>80/20 Split Game</title>
-    <style>
-        canvas {
-            border: 1px solid black;
-            display: block;
-            margin: 20px auto;
-        }
-        #result {
-            text-align: center;
-            font-size: 18px;
-            margin-top: 20px;
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href="styles.css">
 </head>
 <body>
 
-<canvas id="gameCanvas" width="800" height="600"></canvas>
-<div id="result"></div>
+<h1>80/20: The Game</h1>
+<h3>Instructions</h3>
+<ul>
+    <li>Draw a line on the canvas to split the dots</li>
+    <li>The game will show you the percentage of dots above and below the line</li>
+    <li>Get close to a perfect 80/20 split for a high score</li>
+    <li>Practice your skills for now. The real game starts soon...</li>
+</ul>
+<canvas id="gameCanvas" width="809" height="500"></canvas>
+<div id="result">Dots Above: 00.00%, Dots Below: 00.00%, Score: 00.00</div>
 
 <script src="app.js"></script>
 

diff --git a/styles.css b/styles.css
@@ -0,0 +1,37 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+canvas {
+    border: 2px solid #333;
+    background-color: #fff;
+    margin: 20px auto;
+    cursor: crosshair;
+}
+#result {
+    font-size: 1.2em;
+    color: #333;
+    background-color: #fff;
+    padding: 10px 20px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 20px
+}
+h1 {
+    text-align: center;
+    font-size: 24px;
+    /* margin-top: 20px; */
+}
+h3 {
+    margin-top: 10px;
+}
+ul {
+    margin-top: 5px;
+}