Added ESLint and CI Workflow

.github/pull_request_template.md

@@ -6,7 +6,8 @@ Please include a concise summary of the change and any relevant details.
 
 ## PR Checklist
 
-- [ ] My submission follows the guidelines in [Contribution.md](/Contribution.md).
+- [ ] My submission follows the guidelines in [Contribution.md](https://github.com/DhanushNehru/breakout-game/blob/main/Contribution.md).
+- [ ] I have tested `npm run lint` locally.
 - [ ] All new and existing tests pass.
 - [ ] The description of changes is clear and concise.
 - [ ] I have documented any necessary changes to the codebase.

.github/workflows/lint.yml

@@ -0,0 +1,27 @@
+name: Lint Code
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Run Lint
+        run: npm run lint

README.md

@@ -47,6 +47,9 @@ You can use Gitpod in the cloud [![Gitpod Ready-to-Code](https://img.shields.io/
 ## Controls
 - Move mouse to control the paddle, or use 'A'and the left arrow key or 'D' and the right arrow key for left and right movement respectively.
 
+## Linting Status
+![Linting Status](https://github.com/DhanushNehru/breakout-game/actions/workflows/lint.yml/badge.svg)
+
 
 Created with <img src="https://user-images.githubusercontent.com/32013268/193729561-194dea3a-0255-406e-9329-ad5000f1f361.png" height="50px">
 

eslint.config.mjs

@@ -0,0 +1,8 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+];

package.json

@@ -0,0 +1,11 @@
+{
+  "scripts": {
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "eslint": "^8.57.1",
+    "globals": "^15.11.0"
+  }
+}

script.js

@@ -1,3 +1,5 @@
+import { utilsColor } from './utils/utilsColor.js';
+
 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 
@@ -73,9 +75,9 @@ sizeSlider.addEventListener("input", () => {
 
 changeBrickColumnCountAndOffsetLeft()
 let bricks = [];
-for (c=0; c<brickColumnCount; c++) {
+for (let c=0; c<brickColumnCount; c++) {
     bricks[c] = [];
-    for (r=0; r<brickRowCount; r++) {
+    for (let r=0; r<brickRowCount; r++) {
         bricks[c][r] = {x: 0, y:0, status: 1, lives: getRandomArbitrary(1,5,true)};
     }
 }
@@ -90,8 +92,8 @@ function changeBrickColumnCountAndOffsetLeft(){
 }
 
 function drawBricks() {
-    for(c=0; c<brickColumnCount; c++) {
-        for(r=0; r<brickRowCount; r++) {
+    for(let c=0; c<brickColumnCount; c++) {
+        for(let r=0; r<brickRowCount; r++) {
             if(bricks[c][r].status == 1) {
                 let brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
                 let brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
@@ -130,11 +132,11 @@ function drawPaddle() {
 }
 
 function collisionDetection() {
-    for(c=0; c<brickColumnCount; c++){
-        for(r=0; r<brickRowCount; r++){
+    for(let c=0; c<brickColumnCount; c++){
+        for(let r=0; r<brickRowCount; r++){
             let b = bricks[c][r];
             if(b.status  == 1) {
-                sideCollision =false
+                let sideCollision =false
                 if(x+ballRadius > b.x && x-ballRadius < b.x+brickWidth && y+ballRadius > b.y && y-ballRadius < b.y+brickHeight) {
                     if(y > b.y && y < b.y+brickHeight){
                         if(x < b.x || x > b.x+brickWidth){

utils/utilsColor.js

@@ -29,4 +29,6 @@ function useColor(modeColor, X, Y){
         return arrayColor[Y]
 
     return arrayColor[0]
-}
+}
+
+export { utilsColor }