Merge pull request #199 from SimonStnn/dev

1.10.0 update

README.md

@@ -18,20 +18,20 @@ The new rising trend (literally) that changes the browser game completely.
 
 Pop-a-loon is a browser extension that adds balloons to every website you visit. The balloons rise up the page and can be popped by clicking on them. See the [installation](#installation) instructions to get started with the extension.
 
-![Screenshot-1](./docs/images/Screenshot-1.png)
+![Screenshot-1](./docs/images/Screenshot-1-1280x800.png)
 
 > Balloons rise up the page on every website you visit. Click on them to pop them and earn points!
-> Pop balloons by clicking on them. The more balloons you pop, the higher your score!
-
-![Screenshot-2](./docs/images/Screenshot-2.png)
-
+>
 > View your score and the number of balloons popped in the extension popup.
 
-![Screenshot-3](./docs/images/Screenshot-3.png)
+![Screenshot-2](./docs/images/Screenshot-2-1280x800.png)
 
-> See your position in the leaderboard and compete with others to get the highest score!
 > Pop as many balloons as you can to earn points and climb the leaderboard!
-> _Leaderboard from 27/04/2024_
+> _Leaderboard from 16/05/2024_
+
+![Screenshot-3](./docs/images/Screenshot-3-1280x800.png)
+
+> Customize your experience in the extension settings.
 
 ## Table of Contents
 

manifest.chrome.json

@@ -1,13 +1 @@
-{
-  "action": {
-    "default_icon": {
-      "16": "./resources/icons/icon-16.png",
-      "24": "./resources/icons/icon-24.png",
-      "32": "./resources/icons/icon-32.png",
-      "48": "./resources/icons/icon-48.png",
-      "128": "./resources/icons/icon-128.png"
-    },
-    "default_title": "Pop-a-loon",
-    "default_popup": "./popup.html"
-  }
-}
+{}

manifest.firefox.json

@@ -1,27 +1,10 @@
 {
-  "manifest_version": 2,
-  "browser_action": {
-    "default_icon": {
-      "16": "./resources/icons/icon-16.png",
-      "24": "./resources/icons/icon-24.png",
-      "32": "./resources/icons/icon-32.png",
-      "48": "./resources/icons/icon-48.png",
-      "128": "./resources/icons/icon-128.png"
-    },
-    "default_title": "Pop-a-loon",
-    "default_popup": "./popup.html"
-  },
   "background": {
-    "scripts": [
-      "./background.js"
-    ]
+    "scripts": ["./background.js"]
   },
   "browser_specific_settings": {
     "gecko": {
       "id": "pop-a-loon@pop-a-loon"
     }
-  },
-  "web_accessible_resources": [
-    "resources/*"
-  ]
-}
+  }
+}

manifest.json

@@ -2,20 +2,26 @@
   "manifest_version": 3,
   "name": "Pop-a-loon",
   "description": "The new rising trend (literally) that changes the browser game completely.",
-  "permissions": ["storage", "alarms", "idle"],
+  "permissions": ["storage", "alarms", "idle", "scripting"],
+  "host_permissions": ["https://*/*", "http://*/*"],
   "icons": {
     "16": "./resources/icons/icon-16.png",
     "24": "./resources/icons/icon-24.png",
     "32": "./resources/icons/icon-32.png",
     "48": "./resources/icons/icon-48.png",
     "128": "./resources/icons/icon-128.png"
   },
-  "content_scripts": [
-    {
-      "matches": ["https://*/*", "http://*/*"],
-      "js": ["./content.js"]
-    }
-  ],
+  "action": {
+    "default_icon": {
+      "16": "./resources/icons/icon-16.png",
+      "24": "./resources/icons/icon-24.png",
+      "32": "./resources/icons/icon-32.png",
+      "48": "./resources/icons/icon-48.png",
+      "128": "./resources/icons/icon-128.png"
+    },
+    "default_title": "Pop-a-loon",
+    "default_popup": "./popup.html"
+  },
   "web_accessible_resources": [
     {
       "matches": ["https://*/*", "http://*/*"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pop-a-loon",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "The new rising trend (literally) that changes the browser game completely.",
   "private": true,
   "scripts": {
@@ -72,6 +72,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.2.1",
+    "mini-css-extract-plugin": "^2.9.0",
     "mkdirp": "^3.0.1",
     "postcss": "^8.4.33",
     "prettier": "^3.2.5",

src/background/background.ts

@@ -114,15 +114,15 @@ const updateBadgeColors = () => {
     const alarms = await browser.alarms.getAll();
     if (alarms.some((alarm) => alarm.name === 'spawnBalloon'))
       return skipSpawnMessage('Spawn alarm already set');
-    console.log(`Sending spawnBalloon message`);
-
-    // Send the spawnBalloon message
-    const response = await browser.tabs
-      .sendMessage(tab.id, { action: 'spawnBalloon' })
-      .catch((e) => {});
-    if (browser.runtime.lastError) {
-      browser.runtime.lastError;
-    }
+    console.log(`Spawning balloon on tab`, tab.id);
+
+    try {
+      // Execute content script on tab
+      await browser.scripting.executeScript({
+        files: ['spawn-balloon.js'],
+        target: { tabId: tab.id },
+      });
+    } catch (e) {}
     lastSpawn = now;
   };
 

src/balloon.ts

@@ -1,9 +1,6 @@
 import browser from 'webextension-polyfill';
 import storage from '@/storage';
-import { random, sendMessage } from '@utils';
-
-export const balloonContainer = document.createElement('div');
-balloonContainer.id = 'balloon-container';
+import { getBalloonContainer, random, sendMessage } from '@utils';
 
 export const balloonResourceLocation = browser.runtime.getURL(
   'resources/balloons/'
@@ -18,22 +15,36 @@ const buildBalloonElement = (
     size: number;
     positionX: number;
     riseDuration: number;
+    waveDuration: number;
     onAnimationend: () => void;
   }
 ) => {
-  element.classList.add('balloon');
+  const balloon = document.createElement('div');
+  balloon.classList.add('balloon');
 
   // Set the balloon's width and height
-  element.style.width = props.size + 'px';
-  element.style.height = element.style.width;
-  element.style.left = `calc(${props.positionX.toString() + 'vw'} - ${props.size / 2}px)`;
-  element.style.animationDuration = props.riseDuration.toString() + 'ms';
-  element.style.animationTimingFunction = 'linear';
-  element.style.animationFillMode = 'forwards';
-  element.style.animationName = 'rise';
-  element.addEventListener('animationend', props.onAnimationend);
-
-  return element;
+  balloon.style.width = props.size + 'px';
+  balloon.style.height = balloon.style.width;
+  balloon.style.left = `calc(${props.positionX.toString() + 'vw'} - ${props.size / 2}px)`;
+  balloon.style.animationDuration = props.riseDuration.toString() + 'ms';
+  balloon.style.animationTimingFunction = 'linear';
+  balloon.style.animationFillMode = 'forwards';
+  balloon.style.animationName = 'rise';
+  balloon.addEventListener('animationend', props.onAnimationend);
+
+  // Create a second div and apply the swing animation to it
+  const swingElement = document.createElement('div');
+  swingElement.style.animation = `swing ${props.waveDuration}s infinite ease-in-out`;
+  const waveElement = document.createElement('div');
+  waveElement.style.animation = `wave ${props.waveDuration / 2}s infinite ease-in-out alternate`;
+  // Start wave animation at -3/4 of the swing animation (makes sure the wave has started before the balloon comes on screen)
+  waveElement.style.animationDelay = `-${(props.waveDuration * 3) / 4}s`;
+
+  balloon.appendChild(swingElement);
+  swingElement.appendChild(waveElement);
+  waveElement.appendChild(element);
+
+  return balloon;
 };
 
 export default abstract class Balloon {
@@ -46,6 +57,7 @@ export default abstract class Balloon {
 
   public readonly element: HTMLDivElement;
   public readonly riseDurationThreshold: [number, number] = [10000, 15000];
+  public readonly swingDurationThreshold: [number, number] = [2, 4];
 
   public get popSound(): HTMLAudioElement {
     if (!this._popSound.src) {
@@ -62,6 +74,20 @@ export default abstract class Balloon {
     return balloonResourceLocation + this.name + '/pop.mp3';
   }
 
+  public get topElement(): HTMLDivElement {
+    let element = this.element;
+    while (!element.classList.contains('balloon')) {
+      if (
+        !element.parentElement ||
+        !(element.parentElement instanceof HTMLDivElement) ||
+        element.parentElement === getBalloonContainer()
+      )
+        return element;
+      element = element.parentElement;
+    }
+    return element;
+  }
+
   constructor() {
     // Create the balloon element
     this.element = document.createElement('div');
@@ -81,28 +107,30 @@ export default abstract class Balloon {
     return this.element.style.animationName === 'rise';
   }
 
-  public getRandomDuration(
-    duration: [number, number] = this.riseDurationThreshold
-  ): number {
-    return random(duration[0], duration[1]);
-  }
-
   public rise(): void {
     // Load the balloon image
     this.balloonImage.src = this.balloonImageUrl;
     // Build the balloon element
-    buildBalloonElement(this.element, {
+    const balloonElement = buildBalloonElement(this.element, {
       size: random(50, 75),
       positionX: random(5, 95),
-      riseDuration: this.getRandomDuration(),
+      riseDuration: random(
+        this.riseDurationThreshold[0],
+        this.riseDurationThreshold[1]
+      ),
+      waveDuration: random(
+        this.swingDurationThreshold[0],
+        this.swingDurationThreshold[1]
+      ),
       onAnimationend: this.remove.bind(this),
     });
     // Add the balloon to the container
-    balloonContainer.appendChild(this.element);
+    getBalloonContainer().appendChild(balloonElement);
   }
 
   public remove(): void {
-    this.element.remove();
+    // loop until the parent node has 'balloon' class
+    this.topElement.remove();
     this.element.style.animationName = 'none';
   }