pixospritz-core 0.10.1 → 1.0.1

package/dist/style.css

@@ -0,0 +1 @@
+:root{--color-bg: #0a0a0f;--color-primary: #00ff88;--color-secondary: #00ccff;--color-accent: #ff0055;--color-border: #2a2a3e;--glow-primary: rgba(0, 255, 136, .5);--glow-secondary: rgba(0, 204, 255, .5)}.pixos{font-family:"Press Start 2P",Courier New,monospace;font-size:16px;width:100%;text-shadow:#000 2px 2px 0px;position:relative;align-items:center;align-content:center}.renderSurface{height:100%;left:0;position:absolute;top:0;width:100%}.materialSelector{background:#0a0a0ff2;margin:auto;position:relative;border:2px solid var(--color-border);border-radius:4px;box-shadow:0 0 20px #000c}.materialSelector tr{height:70px}.materialSelector td{background-position:0px 0px;cursor:pointer;margin:0;opacity:.5;padding:0;width:70px;transition:opacity .2s}.materialSelector td:hover{opacity:1;box-shadow:0 0 10px var(--glow-primary)}.nickname{color:var(--color-primary);cursor:default;left:42%;position:absolute;top:40%;width:300px;text-shadow:0 0 10px var(--glow-primary)}.nickname input{background:#0a0a0fcc;border-bottom:2px solid var(--color-primary);border:1px solid var(--color-border);border-radius:4px;color:var(--color-primary);font-family:"Press Start 2P",Courier New,monospace;font-size:16px;outline:none;width:100%;padding:8px;box-shadow:0 0 10px #00000080}.nickname input:focus{border-color:var(--color-primary);box-shadow:0 0 15px var(--glow-primary)}.joininfo{color:var(--color-primary);cursor:default;font-size:16px;position:absolute;text-align:center;top:42%;width:99%;text-shadow:0 0 10px var(--glow-primary)}.chatbox{background:#0a0a0ff2;border:2px solid var(--color-border);border-radius:8px;bottom:55px;color:var(--color-primary);cursor:default;height:195px;left:20px;overflow:hidden;padding:10px;position:absolute;width:600px;box-shadow:0 0 20px #000c,inset 0 0 10px #00000080}.chatbox_text{bottom:8px;position:absolute;text-shadow:none;font-size:12px;line-height:1.6}.chatbox_entry{background:#0a0a0ff2;border:2px solid var(--color-border);border-radius:4px;bottom:18px;color:var(--color-primary);font-family:"Press Start 2P",Courier New,monospace;font-size:12px;height:30px;left:20px;outline:none;padding:8px 10px;position:absolute;width:610px;box-shadow:0 0 10px #00000080}.chatbox_entry:focus{border-color:var(--color-primary);box-shadow:0 0 15px var(--glow-primary)}html{height:100%}.pixos-body{height:100%;margin:0;overflow:hidden;background:linear-gradient(to bottom,#202020,#111119)}.rain,.snow{position:absolute;left:0;width:100%;height:100%;z-index:2}.rain.back-row{z-index:1;bottom:60px;opacity:.5}.snow.back-row{z-index:1;bottom:60px;opacity:.8}body.back-row-toggle .rain.back-row .snow.back-row{display:block}.drop{position:absolute;bottom:100%;width:15px;height:120px;pointer-events:none;animation:drop .5s linear infinite}.flake{position:absolute;bottom:100%;width:24px;height:24px;pointer-events:none;animation:snow 2.5s linear infinite}@keyframes drop{0%{transform:translateY(0)}75%{transform:translateY(90vh)}to{transform:translateY(90vh)}}@keyframes snow{0%{transform:translateY(0)}70%{transform:translateY(50vh)}85%{transform:translateY(85vh)}75%{transform:translateY(75vh)}to{transform:translateY(95vh);transform:translate(30vw)}}.stem{width:1px;height:60%;margin-left:7px;background:linear-gradient(to bottom,#fff0,#ffffff40);animation:stem .5s linear infinite}@keyframes stem{0%{opacity:1}65%{opacity:1}75%{opacity:0}to{opacity:0}}.splat{width:15px;height:10px;border-top:2px dotted rgba(255,255,255,.5);border-radius:50%;opacity:1;transform:scale(0);animation:splat .5s linear infinite}body.splat-toggle .splat{display:block}@keyframes splat{0%{opacity:1;transform:scale(0)}80%{opacity:1;transform:scale(0)}90%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}.toggles{position:absolute;top:0;left:0;z-index:3}.toggle{position:absolute;left:20px;width:50px;height:50px;line-height:51px;box-sizing:border-box;text-align:center;font-family:sans-serif;font-size:10px;font-weight:700;background-color:#fff3;color:#00000080;border-radius:50%;cursor:pointer;transition:background-color .3s}.toggle:hover{background-color:#ffffff40}.toggle:active{background-color:#ffffff4d}.toggle.active{background-color:#fff6}.splat-toggle{top:20px}.back-row-toggle{top:90px;line-height:12px;padding-top:14px}.single-toggle{top:160px}body.single-toggle .drop{display:none}body.single-toggle .drop:nth-child(10){display:block}

package/package.json

@@ -1,33 +1,36 @@
 {
   "name": "pixospritz-core",
-  "version": "0.10.1",
-  "description": "Pixos is a mini interactive spritz avatar plugin for calliope static site generator for generating pixospritz'.",
+  "version": "1.0.1",
+  "description": "PixoSpritz Core Engine - WebGL-based game engine",
+  "type": "module",
   "main": "dist/bundle.js",
+  "module": "dist/bundle.js",
+  "exports": {
+    ".": "./dist/bundle.js",
+    "./engine/*": "./src/engine/*",
+    "./components/*": "./src/components/*",
+    "./spritz/*": "./src/spritz/*"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf build",
-    "compile": "yarn clean && cross-env NODE_ENV=production babel pixospritz/src --out-dir build --copy-files --ignore __tests__,spec.js,test.js,stories.js,__snapshots__",
-    "webpack": "npx webpack",
-    "lint": "cd pixoscript && yarn typecheck",
-    "lint:editor": "cd editor && yarn lint",
-    "lint:player": "cd player && yarn lint",
-    "start:player": "cd player && yarn start",
-    "start:editor": "cd editor && yarn start",
-    "start:server": "node server/v2/main.js",
-    "start:server:legacy": "node server/v1/main.js"
+    "clean": "rimraf dist build",
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "files": [
     "dist",
+    "src",
     "README.md"
   ],
   "keywords": [
-    "calliope",
-    "pixos",
-    "html5",
-    "game",
-    "react",
+    "pixospritz",
+    "game-engine",
     "webgl",
-    "canvas"
+    "canvas",
+    "react"
   ],
   "homepage": "https://pixospritz.com",
   "repository": {
@@ -35,42 +38,38 @@
     "type": "git"
   },
   "author": "Kyle Derby MacInnis",
-  "license": "Attribution-NonCommercial-ShareAlike 4.0 International",
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.0",
-    "@babel/node": "^7.17.10",
-    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.17.12",
-    "@babel/register": "^7.17.7",
-    "babel-plugin-macros": "^3.1.0",
-    "babel-register": "^6.26.0",
-    "buffer": "^6.0.3",
-    "cross-env": "^7.0.3",
-    "react-recollect": "^5.2.3",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.9.0"
-  },
+  "license": "CC-BY-NC-SA-4.0",
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "react-recollect": "^5.2.3"
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "babel-loader": "^8.2.5",
-    "css-loader": "^6.7.1",
     "dexie": "^3.2.0",
     "file-saver": "^2.0.5",
     "gl-transition": "^1.13.0",
     "jszip": "^3.7.1",
-    "luaparse": "^0.3.1",
-    "pixoscript": "^1.0.1",
+    "pixoscript": "*",
+    "pixospritz-math": "*",
     "printj": "^1.3.1",
     "prop-types": "^15.7.2",
     "realtime-bpm-analyzer": "^2.1.6",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@babel/preset-react": "^7.17.12",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "babel-loader": "^8.2.5",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "identity-obj-proxy": "^3.0.0",
+    "rimraf": "^5.0.0",
     "style-loader": "^3.3.1",
-    "uuid": "^13.0.0",
-    "ws": "^8.18.3"
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2"
   }
 }

package/src/components/WebGLView.jsx

@@ -0,0 +1,318 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          Calliope - Pixos Game Engine   	       **
+** ----------------------------------------------- **
+**  Copyright (c) 2020-2025 - Kyle Derby MacInnis  **
+**                                                 **
+**    Any unauthorized distribution or transfer    **
+**       of this work is strictly prohibited.      **
+**                                                 **
+**               All Rights Reserved.              **
+** ----------------------------------------------- **
+\*                                                 */
+
+import React, { useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import glEngine from '@Engine/core/index.js';
+import { minecraftia } from '@Engine/core/hud/index.js';
+//
+const WebGLView = ({ width, height, SpritzProvider, class: string, zipData }) => {
+  // Canvas
+  const ref = useRef();
+  const hudRef = useRef();
+  const gamepadRef = useRef();
+  const fileRef = useRef();
+  const mmRef = useRef();
+
+  // keyboard & touch - use wrapper functions to guard against uninitialized engine
+  const onKeyEvent = (e) => {
+    try {
+      if (SpritzProvider && SpritzProvider.onKeyEvent) SpritzProvider.onKeyEvent(e);
+    } catch (err) {
+      // swallow until engine initialized
+    }
+  };
+
+  /**
+   * Handles touch/mouse events with proper coordinate transformation.
+   * The canvas element may be scaled via CSS to fit the viewport, but its
+   * internal resolution (width/height attributes) can differ from the display
+   * size (getBoundingClientRect). This function computes the correct canvas
+   * coordinates by accounting for the scale difference and any offset.
+   */
+  const onTouchEvent = (e) => {
+    try {
+      const canvas = hudRef.current;
+      if (!canvas) {
+        if (SpritzProvider && SpritzProvider.onTouchEvent) SpritzProvider.onTouchEvent(e);
+        return;
+      }
+
+      const rect = canvas.getBoundingClientRect();
+
+      // Handle both mouse and touch events
+      let clientX, clientY;
+      if (e.touches && e.touches.length > 0) {
+        clientX = e.touches[0].clientX;
+        clientY = e.touches[0].clientY;
+      } else if (e.changedTouches && e.changedTouches.length > 0) {
+        clientX = e.changedTouches[0].clientX;
+        clientY = e.changedTouches[0].clientY;
+      } else {
+        clientX = e.clientX;
+        clientY = e.clientY;
+      }
+
+      // Calculate scale factors between internal canvas size and displayed size
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+
+      // Calculate position relative to canvas with proper scaling
+      const canvasX = (clientX - rect.left) * scaleX;
+      const canvasY = (clientY - rect.top) * scaleY;
+
+      // Create adjusted event with canvas-relative coordinates
+      const adjustedEvent = {
+        ...e,
+        type: e.type,
+        clientX: clientX,
+        clientY: clientY,
+        // Pre-computed canvas coordinates for the engine
+        canvasX: canvasX,
+        canvasY: canvasY,
+        pageX: canvasX + rect.left,
+        pageY: canvasY + rect.top,
+        _canvasRect: rect,
+        _scaleX: scaleX,
+        _scaleY: scaleY
+      };
+
+      if (SpritzProvider && SpritzProvider.onTouchEvent) {
+        SpritzProvider.onTouchEvent(adjustedEvent);
+      }
+    } catch (err) {
+      console.warn('onTouchEvent error:', err);
+    }
+  };
+
+  let engine = null;
+
+  // Resize
+  const [screenSize, getDimension] = useState({
+    dynamicWidth: window.innerWidth,
+    dynamicHeight: window.innerHeight,
+  });
+
+  // window dimensions
+  const setDimension = () => {
+    getDimension({
+      dynamicWidth: window.innerWidth,
+      dynamicHeight: window.innerHeight,
+    });
+  };
+
+  // load fonts
+  async function loadFonts() {
+    await minecraftia.load();
+    document.fonts.add(minecraftia);
+  }
+
+  function stopTouchScrolling(canvas) {
+    // Prevent scrolling when touching the canvas
+    document.body.addEventListener(
+      'touchstart',
+      function (e) {
+        if (e.target == canvas) {
+          e.preventDefault();
+        }
+      },
+      { passive: false }
+    );
+    document.body.addEventListener(
+      'touchend',
+      function (e) {
+        if (e.target == canvas) {
+          e.preventDefault();
+        }
+      },
+      { passive: false }
+    );
+    document.body.addEventListener(
+      'touchmove',
+      function (e) {
+        if (e.target == canvas) {
+          e.preventDefault();
+        }
+      },
+      { passive: false }
+    );
+  }
+
+  useEffect(async () => {
+    // handle resize
+    window.addEventListener('resize', setDimension);
+
+    // setup canvases
+    const canvas = ref.current;
+    const hud = hudRef.current;
+    const mipmap = mmRef.current;
+    const gamepad = gamepadRef.current;
+    const fileUpload = fileRef.current;
+
+    // Webgl Engine
+    engine = new glEngine(canvas, hud, mipmap, gamepad, fileUpload, width, height);
+
+    // load fonts
+    await loadFonts();
+
+    // Initialize Spritz
+    await engine.init(SpritzProvider);
+
+    // Create ResizeObserver for proper canvas resize handling
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          if (entry.target === canvas || entry.target === hud) {
+            // Notify engine of resize
+            if (engine && engine.handleResize) {
+              engine.handleResize();
+            }
+          }
+        }
+      });
+      resizeObserver.observe(canvas);
+      resizeObserver.observe(hud);
+    }
+
+    // render loop
+    engine.render();
+
+    // cleanup
+    return () => {
+      stopTouchScrolling(canvas);
+      stopTouchScrolling(gamepad);
+      stopTouchScrolling(hud);
+      window.removeEventListener('resize', setDimension);
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+      engine.close();
+    };
+  }, [SpritzProvider]);
+
+  let wrapperHeight = (screenSize.dynamicWidth * 3) / 4 > 1080 ? 1080 : screenSize.dynamicHeight;
+  let canvasHeight = (screenSize.dynamicWidth * 3) / 4 > 1080 ? wrapperHeight : wrapperHeight - 200;
+  let canvasWidth = screenSize.dynamicWidth > 1920 ? 1920 : screenSize.dynamicWidth;
+  let showGamepad = screenSize.dynamicWidth <= 900;
+  let gamepadHeight = 200;
+
+  return (
+    <div style={{ marginLeft: 'auto', marginRight: 'auto' }}>
+      <div
+        style={{
+          position: 'relative',
+          padding: 'none',
+          background: 'var(--color-bg, #0a0a0f)',
+          height: canvasHeight + 'px',
+          width: canvasWidth + 'px',
+        }}
+        onKeyDownCapture={(e) => onKeyEvent(e.nativeEvent)}
+        onKeyUpCapture={(e) => onKeyEvent(e.nativeEvent)}
+        tabIndex={0}
+      >
+        {/* Game */}
+        <div>
+          {/* // WEBGL - For 3D Rendering */}
+          <canvas
+            style={{
+              position: 'absolute',
+              zIndex: 1,
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+            }}
+            ref={ref}
+            width={canvasWidth}
+            height={canvasHeight}
+            className={string}
+          />
+          {/* HUD - For Dialogue / Menus / Overlays */}
+          <canvas
+            style={{
+              position: 'absolute',
+              zIndex: 2,
+              top: 0,
+              left: 0,
+              background: 'none',
+              width: '100%',
+              height: '100%',
+              touchAction: 'none', // Prevent browser gestures
+              cursor: 'pointer',
+            }}
+            ref={hudRef}
+            width={canvasWidth}
+            height={canvasHeight}
+            className={string}
+            onMouseUp={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onMouseDown={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onMouseMove={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onClick={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onTouchStart={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onTouchEnd={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onTouchMove={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+            onTouchCancel={(e) => { e.stopPropagation(); onTouchEvent(e.nativeEvent); }}
+          />
+          {/* MIPMAP - For Sprite Text / Speech / Titles */}
+          <canvas style={{ display: 'none' }} ref={mmRef} width={256} height={256} />
+        </div>
+      </div>
+      {/* Gamepad - For controls on Mobile Only - Positioned BELOW game canvas */}
+      <div style={{
+        width: canvasWidth + 'px',
+        height: showGamepad ? gamepadHeight + 'px' : '1px',
+        marginTop: showGamepad ? '10px' : '0px',
+        position: 'relative',
+        overflow: 'hidden',
+      }}>
+        <canvas
+          style={{
+            position: 'absolute',
+            zIndex: 5,
+            top: 0,
+            left: 0,
+            background: 'none',
+            width: '100%',
+            height: '100%',
+            display: showGamepad ? 'block' : 'none',
+          }}
+          ref={gamepadRef}
+          width={canvasWidth}
+          height={gamepadHeight}
+          className={string}
+          onMouseUp={(e) => onTouchEvent(e.nativeEvent)}
+          onMouseDown={(e) => onTouchEvent(e.nativeEvent)}
+          onMouseMove={(e) => onTouchEvent(e.nativeEvent)}
+          onTouchMoveCapture={(e) => onTouchEvent(e.nativeEvent)}
+          onTouchCancelCapture={(e) => onTouchEvent(e.nativeEvent)}
+          onTouchStartCapture={(e) => onTouchEvent(e.nativeEvent)}
+          onTouchEndCapture={(e) => onTouchEvent(e.nativeEvent)}
+        />
+      </div>
+      <div>
+        <input type="file" ref={fileRef} src={zipData ?? null} hidden />
+      </div>
+    </div>
+  );
+};
+
+WebGLView.propTypes = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  SpritzProvider: PropTypes.object.isRequired,
+  class: PropTypes.string.isRequired,
+};
+
+export default WebGLView;