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

stormworks-screen-api

v0.1.4

Published

JS implementation of the Stormworks screen API

Downloads

5

Readme

stormworks-screen-api

Canvas-based JS/Typescript implementation of the Stormworks LUA screen API.

This library can be used to test and emulate controller designs outside of the game, as seen in Stormdev.

Getting started

Install the package:

With npm:

$ npm i --save stormworks-screen-api

With yarn:

$ yarn add stormworks-screen-api

Create an API instance

You can allow the API to create a canvas instance internally:

const stormworksScreenApi = screenApi();

// Retrieve the canvas element, e.g to include it in the DOM:
const canvasElement = stormworksScreenApi.getCanvasElement();

Or create your own canvas and provide it as an argument:

const myCanvasElement = document.getElementById('my-canvas');

if (!myCanvasElement) {
  throw new Error('Failed to find canvas element');
}

const stormworksScreenApi = screenApi({
  canvas: myCanvasElement,
});

The screen API methods are isolated under the screen property, which makes it easy to pass to an emulator context:

const stormworksScreenApi = screenApi();

const screen = stormworksScreenApi.screen;

screen.setColor(255, 0, 0, 255);
screen.drawLine(0, 0, 10, 10);
screen.drawRectF(10, 10, screen.getWidth() / 2, screen.getHeight() / 2);

Compatibility

This library aims to be as accurate as possible compared to the in-game implementation, however, no guarantees are made. If a decision needs to be made between accuracy and practicality, practicality will always win.

drawMap

Note that currently drawMap and map-related methods are not fully implemented - calls to these methods will succeed without rendering anything to the canvas.

Additional options:

The screenApi method accepts a series of optional properties, which can be used to further configure how the API works, and how it renders elements onto the canvas.

All top-level properties are optional:

const stormworksScreenApi = screenApi({
  // Provide a Canvas element; if not provided, one will be created internally
  canvas: myCanvasElement,

  // If a canvas element is not provided, these dimensions will be used to create a new canvas:
  dimensions: {
    width: 480,
    height: 320,
  },

  // Override the values returned by `getWidth` and `getHeight`, can be used for emulation trickery:
  reportDimensions: {
    width: 64,
    height: 64,
  },

  // Settings used while rendering onto the canvas. Default values are shown here:
  drawSettings: {
    lineWidth: 1.4,
    fontSize: 5,
    fontFamily: "'Screen Mono', 'Lucida Console', Monaco, monospace",
    fontCharDimensions: {
      width: 4,
      height: 5,
    },
    defaultColor: [255, 255, 255, 255] as Color,
    circle: {
      lineSegmentIntervalsByRadius: [0, 20, 28],
      lineSegmentIntervals: [8, 12, 16],
    },
    map: {
      grass: [255, 255, 255, 255],
      land: [255, 255, 255, 255],
      ocean: [255, 255, 255, 255],
      sand: [255, 255, 255, 255],
      shallows: [255, 255, 255, 255],
      snow: [255, 255, 255, 255],
    },
  },
});

Developing

A kitchen-sink is provided to visually inspect changes during development:

$ yarn dev

This will launch your primary browser on a page with a canvas element. You can use your developer console to test out the API locally, through the provided exported api at window.S, e.g:

const screen = window.S.screen;

screen.drawText(1, 1, 'Hello!');

Stuff

Contributions are welcome! Please open tickets or - ideally - pull requests with your suggestions.