Add Links & Barcodes and Joystick

src/lib/extensions.js

@@ -80,23 +80,22 @@ export default [
         creator: "Steve0Greatness",
         isGitHub: true, 
     },
-
     {
         name: "Dictation",
         description: "Convert your voice into text. (not supported in all browsers)",
         code: "pooiod/Dictation.js",
         banner: "pooiod/Dictation.svg",
         creator: "pooiod7",
     },
-        {
+    {
         name: "Doodle Recognition",
         description: "A implementation of Google's Quick Draw image vision model",
         code: "TheShovel/doodlerec.js",
         banner: "TheShovel/thumbnail-doodlerec.avif",
         creator: "TheShovel",
         isGitHub: true,
     },
-            {
+    {
         name: "Stylus",
         description: "Get the pressure and tilt of a stylus or graphic tablet",
         code: "sourdoggy/stylus extension.js",
@@ -152,31 +151,6 @@ export default [
         banner: "dumzdev/removebgbanner.svg",
         creator: "dumzdev",
     },
-    /*{
-        name: "PenguinAI",
-        description: "Talk to AI! Use Models like DALL-E-3, GPT, LLama, Claude, and more!",
-        code: "MubiLop/penguingpt.js",
-        banner: "MubiLop/penguingpt.avif",
-        creator: "cicerorph",
-        creatorAlias: "MubiLop",
-        isGitHub: true,
-        unstable: true,
-        documentation: "PenguinAI",
-        unstableReason: "AI models can generate unintended or inappropriate output.\nSome AI models may also become temporarily inaccessible.\n\nUse at your own risk.",
-    },*/
-/*
-    {
-        name: "Block AI",
-        description: "An AI powered chat bot to help you code in your projects.",
-        code: "TheShovel/blockAI.js",
-        banner: "TheShovel/thumbnail-blockAI.avif",
-        creator: "TheShovel",
-        creatorAlias: "TheShovel",
-        isGitHub: true,
-        unstable: true,
-        unstableReason: "The AI model can generate inaccurate output and broken syntax!",
-    },
-*/
     {
         name: "PenguinHook",
         description: "Send Webhook requests, that can be Discord or any type of webhook.",
@@ -556,14 +530,15 @@ export default [
         isGitHub: true,
         creatorAlias: "gaimerI17",
     },
-    /* these extensions are completely dead as of now
     {
-        name: "Online Captcha",
-        description: "Protect your project with simple, easy to use captcha implementation. Fully client-side, bypass-proof captcha solution!",
-        code: "NotHouse/OnlineCaptcha.js",
-        banner: "NotHouse/OnlineCaptcha-banner.avif",
-        creator: "enderhacker",
+        name: "Links & Barcodes",
+        description: "Blocks to open web links and generate scannable QR codes on the stage.",
+        code: "codemaster/links-and-barcodes.js",
+        banner: "codemaster/links-and-barcodes.png",
+        creator: "moosanaeempc-lgtm",
+        creatorAlias: "codemaster",
         isGitHub: true,
+        isUnsandboxed: true,
     },
     {
         name: "Better Storage",
@@ -579,13 +554,21 @@ export default [
         banner: "Gen1x/mw-placeholder.avif",
         creator: "G1nX",
     },
-    */
     {
         name: "Smoke Detector",
         description: "Plays a beep every 30 seconds.",
         code: "electricfuzzball_pm/firealarm.js",
         banner: "electricfuzzball_pm/firealarm.svg",
-        creator: "ElectricFuzzball_PM" //hey look thats me!!
-        //Pluey has been implemented.
+        creator: "ElectricFuzzball_PM",
+    },
+    {
+    name: "Joystick",
+    description: "Instead of making a joystick just upload the extension and make your games mobile friendly in seconds.",
+    code: "codemaster/joystick.js",
+    banner: "codemaster/joystick.png",
+    creator: "SuperCodes_",
+    creatorAlias: "codemaster",
+    isGitHub: true,
+    isUnsandboxed: true,
     },
 ];

static/extensions/codemaster/joystick.js

@@ -0,0 +1,227 @@
+(function(Scratch) {
+  'use strict';
+
+  class StageJoystick {
+    constructor() {
+      this.container = null;
+      this.base = null;
+      this.stick = null;
+      this.xMove = 0;
+      this.yMove = 0;
+      this.isVisible = false;
+      this.scratchX = -100; 
+      this.scratchY = -100;
+      this.scratchSize = 100;
+      this.baseAlpha = 0; 
+      this.stickAlpha = 0;
+
+      this._injectJoystick();
+
+      // Safety check: Wait for the Scratch VM to be fully loaded
+      if (Scratch.vm && Scratch.vm.runtime) {
+        this._setupListeners(Scratch.vm.runtime);
+      } else {
+        const checkVM = setInterval(() => {
+          if (Scratch.vm && Scratch.vm.runtime) {
+            this._setupListeners(Scratch.vm.runtime);
+            clearInterval(checkVM);
+          }
+        }, 100);
+      }
+    }
+
+    getInfo() {
+      return {
+        id: 'codemasterJoystick',
+        name: 'Joystick',
+        isUnsandboxed: true, // Required to touch the Stage HTML
+        color1: '#3366ff',
+        blocks: [
+          { opcode: 'showJoystick', blockType: Scratch.BlockType.COMMAND, text: 'show joystick' },
+          { opcode: 'hideJoystick', blockType: Scratch.BlockType.COMMAND, text: 'hide joystick' },
+          {
+            opcode: 'setPos',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick x [X] y [Y]',
+            arguments: {
+              X: { type: Scratch.ArgumentType.NUMBER, defaultValue: -100 },
+              Y: { type: Scratch.ArgumentType.NUMBER, defaultValue: -100 }
+            }
+          },
+          {
+            opcode: 'setSize',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick size to [SIZE]',
+            arguments: {
+              SIZE: { type: Scratch.ArgumentType.NUMBER, defaultValue: 100 }
+            }
+          },
+          {
+            opcode: 'setBaseColor',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick base color to [COLOR]',
+            arguments: {
+              COLOR: { type: Scratch.ArgumentType.COLOR, defaultValue: '#888888' }
+            }
+          },
+          {
+            opcode: 'setBaseOpacity',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick base transparency level to [OPACITY]',
+            arguments: {
+              OPACITY: { type: Scratch.ArgumentType.NUMBER, defaultValue: 0 }
+            }
+          },
+          {
+            opcode: 'setStickColor',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick stick color to [COLOR]',
+            arguments: {
+              COLOR: { type: Scratch.ArgumentType.COLOR, defaultValue: '#ffffff' }
+            }
+          },
+          {
+            opcode: 'setStickOpacity',
+            blockType: Scratch.BlockType.COMMAND,
+            text: 'set joystick stick transparency level to [OPACITY]',
+            arguments: {
+              OPACITY: { type: Scratch.ArgumentType.NUMBER, defaultValue: 0 }
+            }
+          },
+          { opcode: 'getX', blockType: Scratch.BlockType.REPORTER, text: 'joystick x movement' },
+          { opcode: 'getY', blockType: Scratch.BlockType.REPORTER, text: 'joystick y movement' }
+        ]
+      };
+    }
+
+    _setupListeners(runtime) {
+      runtime.on('PROJECT_START', () => this.hideJoystick());
+      runtime.on('PROJECT_STOP_ALL', () => this.hideJoystick());
+
+      const updateLoop = () => {
+        this._updateVisuals();
+        requestAnimationFrame(updateLoop);
+      };
+      requestAnimationFrame(updateLoop);
+    }
+
+    _updateVisuals() {
+      if (!this.container) return;
+      const stageWrapper = document.querySelector('[class*="stage_stage-wrapper"]') || 
+                           document.querySelector('[class*="stage_stage-canvas-overlay"]');
+      const isGuiOverlay = !!document.querySelector('[class*="modal_modal-overlay"]');
+
+      if (!stageWrapper || isGuiOverlay || !this.isVisible) {
+        this.container.style.display = 'none';
+        return;
+      }
+
+      if (this.container.parentElement !== stageWrapper) {
+        stageWrapper.appendChild(this.container);
+      }
+
+      const rect = stageWrapper.getBoundingClientRect();
+      if (rect.width === 0 || rect.height === 0) return;
+
+      const scale = rect.width / 480; 
+      const halfSize = this.scratchSize / 2;
+      const clampedX = Math.max(-240 + halfSize, Math.min(240 - halfSize, this.scratchX));
+      const clampedY = Math.max(-180 + halfSize, Math.min(180 - halfSize, this.scratchY));
+
+      const percentX = ((clampedX + 240) / 480) * 100;
+      const percentY = ((180 - clampedY) / 360) * 100;
+
+      const pixelSize = this.scratchSize * scale;
+      this.container.style.display = 'block';
+
+      Object.assign(this.container.style, {
+        position: 'absolute',
+        width: `${pixelSize}px`,
+        height: `${pixelSize}px`,
+        left: `calc(${percentX}% - ${pixelSize / 2}px)`,
+        top: `calc(${percentY}% - ${pixelSize / 2}px)`,
+        zIndex: '1000'
+      });
+
+      if (this.base) this.base.style.opacity = 1 - this.baseAlpha;
+      if (this.stick) this.stick.style.opacity = 1 - this.stickAlpha;
+    }
+
+    _injectJoystick() {
+      this.container = document.createElement('div');
+      this.container.style.touchAction = 'none';
+
+      this.base = document.createElement('div');
+      Object.assign(this.base.style, {
+        width: '100%', height: '100%', borderRadius: '50%',
+        backgroundColor: '#888888', position: 'absolute',
+        boxSizing: 'border-box', border: '2px solid rgba(0,0,0,0.1)',
+        top: '0', left: '0'
+      });
+
+      this.stick = document.createElement('div');
+      Object.assign(this.stick.style, {
+        width: '40%', height: '40%', borderRadius: '50%',
+        backgroundColor: '#ffffff', position: 'absolute',
+        top: '30%', left: '30%', pointerEvents: 'none',
+        boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
+        zIndex: '1001'
+      });
+
+      this.container.appendChild(this.base);
+      this.container.appendChild(this.stick);
+
+      const handleMove = (e) => {
+        const bRect = this.base.getBoundingClientRect();
+        const cX = bRect.left + bRect.width / 2;
+        const cY = bRect.top + bRect.height / 2;
+        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+        const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+
+        let dx = clientX - cX;
+        let dy = clientY - cY;
+        const maxDist = bRect.width / 2;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+
+        if (dist > maxDist) {
+          dx *= maxDist / dist;
+          dy *= maxDist / dist;
+        }
+
+        this.stick.style.transform = `translate(${dx}px, ${dy}px)`;
+        this.xMove = (dx / maxDist) * 100;
+        this.yMove = (dy / maxDist) * -100;
+      };
+
+      this.container.addEventListener('pointerdown', (e) => {
+        this.container.setPointerCapture(e.pointerId);
+        const onMove = (me) => handleMove(me);
+        const onUp = () => {
+          window.removeEventListener('pointermove', onMove);
+          window.removeEventListener('pointerup', onUp);
+          this.stick.style.transform = 'translate(0,0)';
+          this.xMove = 0; 
+          this.yMove = 0;
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+      });
+    }
+
+    showJoystick() { this.isVisible = true; }
+    hideJoystick() { this.isVisible = false; }
+    setPos(args) {
+      this.scratchX = Number(args.X);
+      this.scratchY = Number(args.Y);
+    }
+    setSize(args) { this.scratchSize = Number(args.SIZE); }
+    setBaseColor(args) { if(this.base) this.base.style.backgroundColor = args.COLOR; }
+    setStickColor(args) { if(this.stick) this.stick.style.backgroundColor = args.COLOR; }
+    setBaseOpacity(args) { this.baseAlpha = Math.max(0, Math.min(100, Number(args.OPACITY))) / 100; }
+    setStickOpacity(args) { this.stickAlpha = Math.max(0, Math.min(100, Number(args.OPACITY))) / 100; }
+    getX() { return Math.round(this.xMove); }
+    getY() { return Math.round(this.yMove); }
+  }
+
+  Scratch.extensions.register(new StageJoystick());
+})(Scratch);