pixospritz-core 0.10.1 → 1.0.1

package/src/css/pixos.css

@@ -0,0 +1,372 @@
+/*                                                 *** ----------------------------------------------- **
+**             Calliope - Site Generator   	       **
+** ----------------------------------------------- **
+**  Copyright (c) 2020-2025 - Kyle Derby MacInnis  **
+**                                                 **
+**    Any unauthorized distribution or transfer    **
+**       of this work is strictly prohibited.      **
+**                                                 **
+**               All Rights Reserved.              **
+** ----------------------------------------------- **
+\*                                                 */
+
+:root {
+  --color-bg: #0a0a0f;
+  --color-primary: #00ff88;
+  --color-secondary: #00ccff;
+  --color-accent: #ff0055;
+  --color-border: #2a2a3e;
+  --glow-primary: rgba(0, 255, 136, 0.5);
+  --glow-secondary: rgba(0, 204, 255, 0.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: rgba(10, 10, 15, 0.95);
+  margin: auto;
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
+}
+
+.materialSelector tr {
+  height: 70px;
+}
+
+.materialSelector td {
+  background-position: 0px 0px;
+  cursor: pointer;
+  margin: 0;
+  opacity: 0.5;
+  padding: 0;
+  width: 70px;
+  transition: opacity 0.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: rgba(10, 10, 15, 0.8);
+  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 rgba(0, 0, 0, 0.5);
+}
+
+.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: rgba(10, 10, 15, 0.95);
+  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 rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.5);
+}
+
+.chatbox_text {
+  bottom: 8px;
+  position: absolute;
+  text-shadow: none;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.chatbox_entry {
+  background: rgba(10, 10, 15, 0.95);
+  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 rgba(0, 0, 0, 0.5);
+}
+
+.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 {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.snow {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+
+.rain.back-row {
+  z-index: 1;
+  bottom: 60px;
+  opacity: 0.5;
+}
+
+.snow.back-row {
+  z-index: 1;
+  bottom: 60px;
+  opacity: 0.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 0.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(0vh);
+  }
+
+  75% {
+    transform: translateY(90vh);
+  }
+
+  100% {
+    transform: translateY(90vh);
+  }
+}
+
+@keyframes snow {
+  0% {
+    transform: translateY(0vh);
+  }
+
+  70% {
+    transform: translateY(50vh);
+  }
+
+  85% {
+    transform: translateY(85vh);
+  }
+
+  75% {
+    transform: translateY(75vh);
+  }
+
+  100% {
+    transform: translateY(95vh);
+    transform: translateX(30vw);
+  }
+}
+
+.stem {
+  width: 1px;
+  height: 60%;
+  margin-left: 7px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
+  animation: stem 0.5s linear infinite;
+}
+
+@keyframes stem {
+  0% {
+    opacity: 1;
+  }
+
+  65% {
+    opacity: 1;
+  }
+
+  75% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.splat {
+  width: 15px;
+  height: 10px;
+  border-top: 2px dotted rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  opacity: 1;
+  transform: scale(0);
+  animation: splat 0.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: 0.5;
+    transform: scale(1);
+  }
+
+  100% {
+    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: bold;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.toggle:hover {
+  background-color: rgba(255, 255, 255, 0.25);
+}
+
+.toggle:active {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.toggle.active {
+  background-color: rgba(255, 255, 255, 0.4);
+}
+
+.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/src/engine/actions/animate.js

@@ -0,0 +1,41 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          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 { debug } from '@Engine/utils/debug-logger.js';
+
+// Animate a sprite without moving them
+export default {
+  init: function (length, untilFrame, finish) {
+    debug('Animate', 'initializing animation', { length, untilFrame });
+    this.length = length;
+    this.untilFrame = untilFrame;
+    this.finish = finish;
+  },
+  tick: function (time) {
+    if (!this.loaded) return;
+    // Set facing
+    if (this.facing && this.facing != this.sprite.facing) this.sprite.setFacing(this.facing);
+    // Transition & Move
+    let endTime = this.startTime + this.length;
+    let frac = (time - this.startTime) / this.length;
+    if (time >= endTime) {
+      frac = 1;
+      if (this.finish) this.finish(true);
+    }
+    // Get next frame
+    let newFrame = Math.floor(frac * this.untilFrame);
+    if (newFrame != this.sprite.animFrame) this.sprite.setFrame(newFrame);
+
+    return time >= endTime;
+  }
+};

package/src/engine/actions/changezone.js

@@ -0,0 +1,135 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          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 { Vector, set, lerp } from '@Engine/utils/math/vector.js';
+import { Direction } from '@Engine/utils/enums.js';
+import { debug } from '@Engine/utils/debug-logger.js';
+
+export default {
+  init: async function (fromZoneId, from, toZoneId, to, length) {
+    // When changing zones we fade out of the current zone, load the new zone(s)
+    // and then fade back in. This makes the transition smoother and hides
+    // asset loading. The duration can be tweaked if needed.
+    const engine = this.sprite.zone?.world?.engine;
+    if (engine?.renderManager) {
+      // fade out
+      debug('ChangeZone', 'fading out...');
+      await engine.renderManager.startTransition({ effect: 'cross', direction: 'out', duration: 500 });
+    }
+
+    // When changing zones we load both zones without triggering the default
+    // transition defined in World.loadZone. We handle the fade out/in around
+    // these calls ourselves in this action. Passing `null` as the transition
+    // parameter disables the automatic transition in loadZone.
+    this.fromZone = await this.sprite.zone.world.loadZone(fromZoneId, false, false, null);
+    this.toZone = await this.sprite.zone.world.loadZone(toZoneId, false, false, null);
+    this.from = new Vector(...from);
+    this.to = new Vector(...to);
+    this.facing = Direction.fromOffset([Math.round(to.x - from.x), Math.round(to.y - from.y)]);
+    this.length = length;
+    // Determine if the transition should preserve height (e.g., portals/doors)
+    try {
+      const spritesAtDest = this.toZone ? this.toZone.spriteList.filter((s) => s.pos.x === this.to.x && s.pos.y === this.to.y) : [];
+      this.preserveHeight = spritesAtDest.some((s) => s.preserveHeightOnWalk === true);
+      if (this.preserveHeight && (this.from && (this.from.z === null || this.from.z === undefined))) {
+        const fHx = this.from.x + (this.sprite?.hotspotOffset?.x ?? 0);
+        const fHy = this.from.y + (this.sprite?.hotspotOffset?.y ?? 0);
+        this.from.z = typeof this.fromZone.getHeight === 'function' ? this.fromZone.getHeight(fHx, fHy) : 0;
+        this.preserveHeightSourceZ = this.from.z;
+      }
+    } catch (e) {
+      // ignore and continue
+    }
+    if (this.preserveHeight && this.sprite?.zone?.engine?.debug) {
+      debug('ChangeZone', 'preserveHeight true for transition from', this.from.toArray?.() ?? this.from, 'to', this.to.toArray?.() ?? this.to);
+    }
+    // Compute the z height for from/to so we interpolate vertically across zones
+    try {
+      const fHx = this.from.x + (this.sprite ? this.sprite.hotspotOffset.x : 0);
+      const fHy = this.from.y + (this.sprite ? this.sprite.hotspotOffset.y : 0);
+      const tHx = this.to.x + (this.sprite ? this.sprite.hotspotOffset.x : 0);
+      const tHy = this.to.y + (this.sprite ? this.sprite.hotspotOffset.y : 0);
+      if (this.from && (this.from.z === null || this.from.z === undefined)) this.from.z = typeof this.fromZone.getHeight === 'function' ? this.fromZone.getHeight(fHx, fHy) : 0;
+      if (this.to && (this.to.z === null || this.to.z === undefined)) this.to.z = typeof this.toZone.getHeight === 'function' ? this.toZone.getHeight(tHx, tHy) : 0;
+    } catch (e) {
+      if (this.sprite?.zone?.engine?.debug) console.warn('changezone.init failed to compute z for from/to', e?.message || e);
+    }
+
+    debug('ChangeZone', 'init', { fromZoneId, toZoneId, from, to, length });
+    if (engine?.renderManager) {
+      debug('ChangeZone', 'fading in...');
+      // fade in once the new zones are ready
+      await engine.renderManager.startTransition({ effect: 'cross', direction: 'in', duration: 500 });
+    }
+  },
+  tick: function (time) {
+    if (!this.toZone.loaded || !this.fromZone.loaded) return;
+    // Set facing
+    if (this.facing && this.facing != this.sprite.facing) {
+      this.sprite.facing = this.facing;
+      this.sprite.setFrame(0);
+    }
+    // Time Animation
+    let endTime = this.startTime + this.length;
+    let frac = (time - this.startTime) / this.length;
+    if (time >= endTime) {
+      set(this.to, this.sprite.pos);
+      frac = 1;
+    } else {
+      // Lerp X and Y only, handle Z separately
+      this.sprite.pos.x = this.from.x + frac * (this.to.x - this.from.x);
+      this.sprite.pos.y = this.from.y + frac * (this.to.y - this.from.y);
+      // Calculate height based on current zone and position
+      let hx = this.sprite.pos.x + this.sprite.hotspotOffset.x;
+      let hy = this.sprite.pos.y + this.sprite.hotspotOffset.y;
+      let zLerp = (typeof this.from.z === 'number' && typeof this.to.z === 'number') ? this.from.z + frac * (this.to.z - this.from.z) : null;
+      if (!this.switchRenderZone && !this.fromZone.isInZone(hx, hy)) {
+        this.switchRenderZone = true;
+      }
+      if (this.preserveHeight) {
+        this.sprite.pos.z = this.preserveHeightSourceZ ?? this.sprite.pos.z;
+        if (this.sprite.zone.engine?.debug && !this.__preserveLog) {
+          this.__preserveLog = true;
+          debug('ChangeZone', 'preserveHeight applied for sprite', this.sprite.id, 'sourceZ=', this.preserveHeightSourceZ);
+        }
+      } else {
+        const zZone = (this.switchRenderZone ? this.toZone : this.fromZone).getHeight(hx, hy);
+        if (zLerp !== null) {
+          this.sprite.pos.z = zLerp;
+        } else {
+          this.sprite.pos.z = zZone;
+        }
+        if (this.sprite.zone.engine?.debug && this.__tickLogCount < 3) {
+          if (!this.__tickLogCount) this.__tickLogCount = 0;
+          this.__tickLogCount++;
+          debug('ChangeZone', 'tick sprite', this.sprite.id, 'frac=', frac.toFixed(2), 'hx,hy=', hx.toFixed(2), hy.toFixed(2), 'zLerp=', zLerp?.toFixed(2), 'zZone=', zZone?.toFixed(2), 'pos.z=', this.sprite.pos.z.toFixed(2));
+        }
+      }
+    }
+    // New Frame
+    let newFrame = Math.floor(frac * 4);
+    if (newFrame != this.sprite.animFrame) this.sprite.setFrame(newFrame);
+    // Move into the new zone
+    if (!this.sprite.zone.isInZone(this.sprite.pos.x, this.sprite.pos.y)) {
+      this.fromZone.removeSprite(this.sprite.id);
+      // Defer until aftertick to stop the sprite being ticked twice
+      this.sprite.zone.world.runAfterTick(
+        function () {
+          this.toZone.addSprite(this.sprite);
+        }.bind(this)
+      );
+    }
+
+    return time >= endTime;
+  },
+};

package/src/engine/actions/chat.js

@@ -0,0 +1,109 @@
+/*                                                 *\
+** ----------------------------------------------- **
+**          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.              **
+** ----------------------------------------------- **
+\*                                                 */
+
+/**
+ * @fileoverview Chat action for Pixos game engine.
+ * Handles dialogue input and display for sprites.
+ */
+
+/**
+ * @typedef {object} ChatOptions
+ * @property {boolean} [autoclose=false] - Whether to auto-close the chat after a time.
+ * @property {number} [endTime] - Timestamp when to auto-close.
+ */
+
+/**
+ * Chat action object for handling dialogue interactions.
+ */
+export default {
+  /**
+   * Initializes the chat action.
+   * @param {string} prompt - The initial prompt text.
+   * @param {boolean} [scrolling=true] - Whether the text scrolls.
+   * @param {ChatOptions} [options={}] - Additional options.
+   */
+  init: function (prompt, scrolling = true, options = {}) {
+    /** @type {import('../core/index.js').default} */
+    this.engine = this.sprite.engine;
+    /** @type {string} */
+    this.text = '';
+    /** @type {string} */
+    this.prompt = prompt;
+    /** @type {boolean} */
+    this.scrolling = scrolling;
+    /** @type {number} */
+    this.line = 0;
+    /** @type {ChatOptions} */
+    this.options = options;
+    /** @type {boolean} */
+    this.completed = false;
+    /** @type {number} */
+    this.lastKey = new Date().getTime();
+  },
+
+  /**
+   * Updates and scrolls the chat.
+   * @param {number} time - The current time.
+   * @returns {boolean} True if the chat is completed.
+   */
+  tick: function (time) {
+    if (!this.loaded) return false;
+    if (this.options && this.options.autoclose) {
+      this.endTime = this.endTime ? this.endTime : this.options.endTime ?? new Date().getTime() + 10000;
+      if (time > this.endTime) {
+        this.completed = true;
+      }
+    }
+    this.checkInput(time);
+    this.textbox = this.engine.hud.scrollText(this.prompt + this.text, this.scrolling, this.options);
+    return this.completed;
+  },
+
+  /**
+   * Handles keyboard input for the chat.
+   * @param {number} time - The current time.
+   */
+  checkInput: function (time) {
+    if (time > this.lastKey + 100) {
+      let skipChar = false;
+      switch (this.engine.keyboard.lastPressedCode()) {
+        case 'Escape':
+          this.completed = true;
+          skipChar = true;
+          break;
+        case 'Backspace':
+          let arr = this.text.split('');
+          arr.pop();
+          this.text = arr.join('');
+          this.lastKey = time;
+          skipChar = true;
+          break;
+        case 'Enter':
+          this.sprite.setGreeting(this.text);
+          if (this.sprite.speech.clearHud) this.sprite.speech.clearHud();
+          this.speechbox = this.sprite.speech.scrollText(this.text);
+          this.sprite.speech.loadImage();
+          this.completed = true;
+          skipChar = true;
+          break;
+      }
+      if (!skipChar) {
+        let char = this.engine.keyboard.lastPressedKey();
+        if (char) {
+          this.lastKey = time;
+          this.text += '' + char;
+        }
+      }
+    }
+  },
+};