{"id":15729641,"url":"https://github.com/filp/stormworks-screen-api","last_synced_at":"2026-05-05T21:36:31.502Z","repository":{"id":48414415,"uuid":"516890455","full_name":"filp/stormworks-screen-api","owner":"filp","description":"Canvas-based JS/Typescript implementation of the Stormworks LUA screen API.","archived":false,"fork":false,"pushed_at":"2022-07-25T12:08:11.000Z","size":133,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-06T07:45:42.852Z","etag":null,"topics":["api","lua","nodejs","screen","stormworks"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T21:24:29.000Z","updated_at":"2024-08-12T09:17:28.000Z","dependencies_parsed_at":"2022-08-12T19:50:23.255Z","dependency_job_id":null,"html_url":"https://github.com/filp/stormworks-screen-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filp%2Fstormworks-screen-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filp%2Fstormworks-screen-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filp%2Fstormworks-screen-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filp%2Fstormworks-screen-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filp","download_url":"https://codeload.github.com/filp/stormworks-screen-api/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246408035,"owners_count":20772228,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","lua","nodejs","screen","stormworks"],"created_at":"2024-10-03T23:40:22.675Z","updated_at":"2026-05-05T21:36:26.463Z","avatar_url":"https://github.com/filp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# stormworks-screen-api\n\n[![npm version](https://badge.fury.io/js/stormworks-screen-api.svg)](https://badge.fury.io/js/stormworks-screen-api)\n\nCanvas-based JS/Typescript implementation of the [Stormworks](https://store.steampowered.com/app/573090/Stormworks_Build_and_Rescue/) LUA screen API.\n\nThis library can be used to test and emulate controller designs outside of the game, as seen in [Stormdev](https://stormdev.vercel.app/).\n\n## Getting started\n\n**Install the package:**\n\n_With npm:_\n\n```shell\n$ npm i --save stormworks-screen-api\n```\n\n_With yarn:_\n\n```shell\n$ yarn add stormworks-screen-api\n```\n\n**Create an API instance**\n\nYou can allow the API to create a canvas instance internally:\n\n```ts\nconst stormworksScreenApi = screenApi();\n\n// Retrieve the canvas element, e.g to include it in the DOM:\nconst canvasElement = stormworksScreenApi.getCanvasElement();\n```\n\nOr create your own canvas and provide it as an argument:\n\n```ts\nconst myCanvasElement = document.getElementById('my-canvas');\n\nif (!myCanvasElement) {\n  throw new Error('Failed to find canvas element');\n}\n\nconst stormworksScreenApi = screenApi({\n  canvas: myCanvasElement,\n});\n```\n\nThe screen API methods are isolated under the `screen` property, which makes it easy to pass to an emulator context:\n\n```ts\nconst stormworksScreenApi = screenApi();\n\nconst screen = stormworksScreenApi.screen;\n\nscreen.setColor(255, 0, 0, 255);\nscreen.drawLine(0, 0, 10, 10);\nscreen.drawRectF(10, 10, screen.getWidth() / 2, screen.getHeight() / 2);\n```\n\n## Compatibility\n\nThis 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.\n\n### `drawMap`\n\nNote that currently `drawMap` and map-related methods are not fully implemented - calls to these methods will succeed without rendering anything to the canvas.\n\n### scaling\n\nThis library doesn't offer any scaling/zoom support - you're expected to handle that part yourself (or through another package). If you're scaling directly in the browser (using CSS), expect blurryness at anything past 1x.\n\n## Additional options:\n\nThe `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.\n\nAll top-level properties are optional:\n\n```ts\nconst stormworksScreenApi = screenApi({\n  // Provide a Canvas element; if not provided, one will be created internally\n  canvas: myCanvasElement,\n\n  // If a canvas element is not provided, these dimensions will be used to create a new canvas:\n  dimensions: {\n    width: 480,\n    height: 320,\n  },\n\n  // Override the values returned by `getWidth` and `getHeight`, can be used for emulation trickery:\n  reportDimensions: {\n    width: 64,\n    height: 64,\n  },\n\n  // Settings used while rendering onto the canvas. Default values are shown here:\n  drawSettings: {\n    lineWidth: 1.4,\n    fontSize: 5,\n    fontFamily: \"'Screen Mono', 'Lucida Console', Monaco, monospace\",\n    fontCharDimensions: {\n      width: 4,\n      height: 5,\n    },\n    defaultColor: [255, 255, 255, 255] as Color,\n    circle: {\n      lineSegmentIntervalsByRadius: [0, 20, 28],\n      lineSegmentIntervals: [8, 12, 16],\n    },\n    map: {\n      grass: [255, 255, 255, 255],\n      land: [255, 255, 255, 255],\n      ocean: [255, 255, 255, 255],\n      sand: [255, 255, 255, 255],\n      shallows: [255, 255, 255, 255],\n      snow: [255, 255, 255, 255],\n    },\n  },\n});\n```\n\n## Developing\n\nA kitchen-sink is provided to visually inspect changes during development:\n\n```shell\n$ yarn dev\n```\n\nThis 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:\n\n```js\nconst screen = window.S.screen;\n\nscreen.drawText(1, 1, 'Hello!');\n```\n\n## Stuff\n\nContributions are welcome! Please open tickets or - ideally - pull requests with your suggestions.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilp%2Fstormworks-screen-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilp%2Fstormworks-screen-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilp%2Fstormworks-screen-api/lists"}