npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@super-puzzlescript/puzzlescript

v0.1.0

Published

Compile and run PuzzleScript games

Downloads

51

Readme

PuzzleScript as a JavaScript Module

Compile and run PuzzleScript games through a simple JavaScript API, enabling development in an alternative environment to the PuzzleScript editor.

Consider using this package as part of the Super PuzzleScript development environment.

Usage

Available as a UMD module, it can be imported by a module bundler (e.g. Webpack) or with an HTML <script> element.

With a module bundler

Install the package with npm or yarn:

npm install @super-puzzlescript/puzzlescript

Import and create an instance of the PuzzleScript class and call the compile method with your game code:

import PuzzleScript from 'puzzlescript'
import gameSource from './main.ps'

window.onload = () => {
  const puzzleScript = new PuzzleScript()
  puzzleScript.compile(gameSource)
}

After bundling with your module bundler of choice, add the bundle to a HTML document containing a <canvas> element with ID gameCanvas:

<!doctype html>
<html>
  <head>
    <title>Test Game</title>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>

With a <script> element

Add a <script> element that imports the PuzzleScript module and then instantiate the global PuzzleScript class and call the compile method with your game source code. For example, we can fetch the module from unpkg (replace X.Y.Z in the module URL with the latest version):

<!doctype html>
<html>
  <head>
    <title>Test Game</title>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script src="https://unpkg.com/@super-puzzlescript/[email protected]/dist/umd/puzzlescript.min.js"></script>
    <script>
const gameSource = `
INSERT GAME CODE HERE
`

window.onload = () => {
  const puzzleScript = new PuzzleScript()
  puzzleScript.compile(gameSource)
}
    </script>
  </body>
</html>

Wrapping PuzzleScript

This package wraps the original PuzzleScript source with no modifications. This ensures we don't diverge from PuzzleScript and makes it easier to keep up to date with any PuzzleScript changes.

The downside of this approach is that the PuzzleScript source code has a lot of global state and other implicit dependencies, which makes this package slightly leaky. For example, the level state must be available as a property of the global window object for the PuzzleScript engine to run correctly. Additionally, this also means that the package sadly can't be distributed as an ECMAScript module, which always run in strict mode and therefore cannot expose global state to modules that import them.

Another issue with wrapping PuzzleScript in this way is that it depends a small part of the CodeMirror code editor for compilation, which means we must bundle the entire CodeMirror source code with this package. This increases the package's file size quite dramatically.

It'll certainly be possible to work around these issues, perhaps with additional tricks in this package or by contributing to PuzzleScript itself, but for now the goal is to make something that works even if it's a little less than ideal.