Merge pull request #4 from abdullahjamal1/chrome-extension

Chrome extension
abdullahjamal1 · Feb 1, 2024 · 1639a0d · 1639a0d
2 parents 62cdbdc + 6ffac73
commit 1639a0d
Show file tree

Hide file tree

Showing 26 changed files with 1,339 additions and 107,600 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -0,0 +1,38 @@
+name: pages build and deployment
+run-name: ${{ github.actor }} is publishing to GitHub Pages 🚀
+on: [push]
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20.x'
+      - name: Install npm dependencies
+        run: npm install
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v3
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./
+          destination: ./_site
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{steps.deployment.outputs.page_url}}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules
diff --git a/README.md b/README.md
@@ -1,15 +1,25 @@
-# [BATTLESHIP Oasis](https://abdullahjamal1.github.io/battleshipBoardGame/ 
+[BATTLESHIP OASIS BOARD GAME](https://abdullahjamal1.github.io/battleshipBoardGame/) 
 _______________________________________________________________________________________________________
 
-### To play battleship Oasis click [here](https://abdullahjamal1.github.io/battleshipBoardGame/).
-### [snapShots](snapShots/)
-![battleship game](https://github.com/aj941ga/battleshipBoardGame/blob/master/snapShots/battleship-all.png)
+### To play battleship game click [here](https://abdullahjamal1.github.io/battleshipBoardGame/).
+
+Download game as a chrome extension
+[<img src="https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png">](https://chromewebstore.google.com/detail/battleship/ebkjodkggmaecphknjfepmdibcaddjbh)
+
+### [Snapshots](snapShots/)
+![battleship game](https://github.com/abdullahjamal1/battleshipBoardGame/blob/master/snapShots/battleship-all.png)
 
-A board web game in which two players arrange five ships on their maps and then do guess-fire on each
-other's map in alternate turns until either player wins by sinking all the ships. In single-player AI 
-uses probability density map to reduce number of average turns required to win to 17 !
+Battleship Oasis Board Game
+
+An offline battleship board web game in which two players arrange five ships on their maps and then do guess-fire on each other's map in alternate turns until either player wins by sinking all the ships. 
+
+Whats different from other battleship board games ?
+
+* Supports creating island blocks where ships cannot be placed making the game interesting. 
+* A tough to defeat bot, which uses probability density map to reduce number of average turns required to win to 17 ! 
+* Turn on density lens to find how bot plays better under hoods.
 
-Technologies used :- HTML, CSS, JavaScript (object-oriented)
+Technologies used :- HTML, CSS, JavaScript (p5.js)
 _________________________________________________________________________________________________________
  # Features
  * graphical and interactive GUI

diff --git a/index.html b/index.html
@@ -1,48 +1,43 @@
-
 <!DOCTYPE html>
-<html> 
- <head>
-    <title>Battleship Board Game</title> 
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="css/style.css" rel="stylesheet" type="text/css"/>
-    <link rel="manifest" href="/manifest.json">
+<html>
+  <head>
+    <title>Battleship Board Game</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="css/style.css" rel="stylesheet" type="text/css" />
+    <link rel="manifest" href="/manifest.json" />
     <script defer src="/js/app.js"></script>
-</head>
- <body>
-
-
- </body>
-<!-- <h1 id="no-select" style = "text-align:center; color:white;"> BATTLESHIP OASIS </h1> -->
-
-<!-- p5.js library  -->
-<script src="libs/p5.js"></script>
-
- <!-- config file -->
- <script src="js/setup/sketch.js"> </script>
-
- <!-- class files  -->
- <script src="js/classes/networkClass.js"> </script>
- <script src="js/classes/shipClass.js"> </script>
- <script src="js/classes/playerClass.js"> </script>
- <script src="js/classes/botClass.js"> </script>
- <script src="js/classes/buttonClass.js"> </script>
- <script src="js/classes/animationClass.js"> </script>
-
-<script src="js/mapSwap.js"> </script>
-
- <!-- Game state files -->
- <script src="js/states/menuState.js"> </script>
- <script src="js/states/newMapState.js"></script>
- <script src="js/states/singlePlayerState.js"> </script>
- <script src="js/states/multiPlayerOfflineState.js"> </script>
- <script src="js/states/multiPlayerOnlineState.js"> </script>
- <script src="js/states/instructionsState.js"> </script>
- <script src="js/states/creditsState.js"> </script>
- <script src="js/states/statisticsState.js"> </script>
- <script src="js/states/winStateCall.js"> </script>
-
- <!-- main file  -->
- <script src="js/draw.js"> </script>
-
+  </head>
+
+  <body></body>
+  <!-- <h1 id="no-select" style = "text-align:center; color:white;"> BATTLESHIP OASIS </h1> -->
+
+  <!-- p5.js library  -->
+  <script src="node_modules/p5/lib/p5.min.js"></script>
+
+  <!-- config file -->
+  <script src="js/setup/sketch.js"></script>
+
+  <!-- class files  -->
+  <script src="js/classes/networkClass.js"></script>
+  <script src="js/classes/shipClass.js"></script>
+  <script src="js/classes/playerClass.js"></script>
+  <script src="js/classes/botClass.js"></script>
+  <script src="js/classes/buttonClass.js"></script>
+  <script src="js/classes/animationClass.js"></script>
+
+  <script src="js/mapSwap.js"></script>
+
+  <!-- Game state files -->
+  <script src="js/states/menuState.js"></script>
+  <script src="js/states/newMapState.js"></script>
+  <script src="js/states/singlePlayerState.js"></script>
+  <script src="js/states/multiPlayerOfflineState.js"></script>
+  <script src="js/states/multiPlayerOnlineState.js"></script>
+  <script src="js/states/instructionsState.js"></script>
+  <script src="js/states/creditsState.js"></script>
+  <script src="js/states/statisticsState.js"></script>
+  <script src="js/states/winStateCall.js"></script>
+
+  <!-- main file  -->
+  <script src="js/draw.js"></script>
 </html>
-
diff --git a/js/classes/animationClass.js b/js/classes/animationClass.js
@@ -1,8 +1,6 @@
 ////////////////////////////// ANIMATION //////////////////////////////////////////////////////////////
 class animation {
-
     constructor() {
-
         this.submarineX1 = 1300;
         this.submarineY1 = 230;
         this.submarineX2 = -230;
@@ -12,17 +10,14 @@ class animation {
         this.fishY = 0;
     }
     drawPebbles(x, y) {
-
         for (var i = 0; i < 450; i++) {
             var randomX = x + random(0, 1300);
             var randomY = y + random(670, 750);
             fill(random(0, 300), random(0, 200), random(0, 100));
             ellipse(randomX, randomY, 15, 10);
         }
-
     }
     drawFish(centerX, centerY, r, g, b) {
-
         var bodyLength = 72;
         var bodyHeight = 43;
 
@@ -34,35 +29,33 @@ class animation {
         fill(r, g, b);
         var tailWidth = bodyLength / 4;
         var tailHeight = bodyHeight / 2;
-        triangle(centerX - bodyLength / 2, centerY,
-            centerX - bodyLength / 2 - tailWidth, centerY - tailHeight,
-            centerX - bodyLength / 2 - tailWidth, centerY + tailHeight);
+        triangle(
+            centerX - bodyLength / 2,
+            centerY,
+            centerX - bodyLength / 2 - tailWidth,
+            centerY - tailHeight,
+            centerX - bodyLength / 2 - tailWidth,
+            centerY + tailHeight
+        );
         // eye
         fill(33, 33, 33);
         ellipse(centerX + bodyLength / 4, centerY, bodyHeight / 5, bodyHeight / 5);
-
-
-
     }
     submarineGlass(submarine_X, submarine_Y) {
-
         fill(1, 36, 43);
         ellipse(submarine_X + 190, submarine_Y + 37, 45, 45);
         fill(183, 226, 235);
         ellipse(submarine_X + 190, submarine_Y + 37, 35, 35);
     }
     drawFishGroup(x, y) {
-
         this.drawFish(x + 100, y + 100, 100, 167, 100);
         this.drawFish(x + 303, y + 100, 322, 144, 253);
         this.drawFish(x + 164, y + 229, 292, 243, 112);
         this.drawFish(x + 264, y + 303, 155, 118, 253);
         this.drawFish(x + 331, y + 197, 155, 243, 146);
         this.drawFish(x + 65, y + 294, 310, 20, 290);
-
     }
     drawSubmarine(submarine_X, submarine_Y) {
-
         fill(209, 4, 4);
         ellipse(submarine_X + 196, submarine_Y + 36, 105, 70);
         ellipse(submarine_X + 2, submarine_Y + 36, 105, 70);
@@ -79,22 +72,27 @@ class animation {
         this.submarineGlass(submarine_X + -164, submarine_Y + 1);
     }
 
-    showMessage(msg){
+    showMessage(msg, textMessageSize = 40, type = "info") {
+        background(255, 255, 255, 30);
+        // fill(237, 34, 93);
+        if (type === "info") {
+            fill(0, 210, 0, 250);
+        } else if (type === "warn") {
+            fill(180, 0, 0, 250);
+        } else {
+            fill(240, 0, 0, 250);
+        }
 
-        background(255, 255, 255, 60);
-        fill(237, 34, 93);
         strokeWeight(10);
         rect(400, 150, 400, 150, 300);
         fill(255, 255, 255);
-        textFont('Helvetica');
-        textSize(40);
+        textFont("Helvetica");
+        textSize(textMessageSize);
         text(msg, 440, 210, 400, 150);
         strokeWeight(1);
     }
 
     animationPlay() {
-
-
         background(0, 2, 105);
         this.submarineX1 = this.submarineX1 - 1.5;
         this.submarineX2 = this.submarineX2 + 1.5;
@@ -104,13 +102,10 @@ class animation {
         this.drawFishGroup(this.fishX1, this.fishY);
         this.drawFishGroup(this.fishX2, this.fishY);
 
-
         if (this.submarineX1 < -100) {
-
             this.submarineX1 = 1300;
         }
         if (this.submarineX2 > 1300) {
-
             this.submarineX2 = -200;
         }
 
@@ -122,9 +117,8 @@ class animation {
         }
 
         this.drawSubmarine(this.submarineX1, this.submarineY1);
-        this.drawSubmarine(this.submarineX2 , this.submarineY2);
+        this.drawSubmarine(this.submarineX2, this.submarineY2);
 
-      //  this.drawPebbles(4, -200);
+        //  this.drawPebbles(4, -200);
     }
 }
-