https://github.com/wisehackermonkey/p5.popup

p5.js simple popup library used for displaying instructions for sketches
https://github.com/wisehackermonkey/p5.popup

Last synced: 2 days ago
JSON representation

p5.js simple popup library used for displaying instructions for sketches

• Host: GitHub
• URL: https://github.com/wisehackermonkey/p5.popup
• Owner: wisehackermonkey
• License: mit
• Created: 2020-06-30T02:05:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-21T03:53:18.000Z (over 2 years ago)
• Last Synced: 2024-11-10T12:44:07.383Z (2 months ago)
• Language: JavaScript
• Homepage: https://wisehackermonkey.github.io/p5.popup/
• Size: 209 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# p5.popup.js

#### p5.js simple popup library used for displaying instructions for sketches

![auto update docs version, minify and publish to npm](https://github.com/wisehackermonkey/p5.popup/workflows/auto%20update%20docs%20version,%20minify%20and%20publish%20to%20npm/badge.svg)

[![Python](https://img.shields.io/badge/P5.js-Enabled-pink.svg)](https://shields.io/)[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)[![](https://data.jsdelivr.com/v1/package/npm/p5.popup/badge)](https://www.jsdelivr.com/package/npm/p5.popup)

```

by oran collins

github.com/wisehackermonkey

[email protected]

20200629

```

![](popupjs_v2.gif)

![](./popupjs_v1.gif)

# Live Example

# [P5.js live editor](https://editor.p5js.org/wisemonkey/present/RJWfLmQBP)

# [P5.js live editable version](https://editor.p5js.org/wisemonkey/present/RJWfLmQBP)

#

# CDN Example

## CDN links

+ https://cdn.jsdelivr.net/npm/p5.popup  

+ https://unpkg.com/p5.popup

## How to use CDN links

### Add one of the following two CDN options to your p5.js sketches html file 

#### Replace X.X.X with the latest version number

```text

  

    

    

```

```html

    

    OR

    

```

```text

	  

    

    

  

  

    

  

```

# Brain storm

## inital idea

```

p5.js popup for instructions on how to play game, mobile and desktop  friendly

```

### add: one liner

### example

```javascript

instructions("arrows to move, goal is to get the blocks")

TODO not implemented

//have templates for common input types

instructions([ARROWS,MOUSE],"e key breaks the walls")

```

### example v2

```javascript

popup("arrows to move, goal is to get the blocks", )

//have templates for common input types

popup([ARROWS,MOUSE],"e key breaks the walls", )

```

# publish npm package

```bash

npm version patch

npm publish

```

# how to publish local tag 

## [Sharing Tags](https://git-scm.com/book/en/v2/Git-Basics-Tagging)

```

git push origin v0.0.4

```

# TODO

- github action minifiy

- auto lint

- todo add popupMode(BOTTOM)

- add default messages like ARROWS, and MOUSE etc

# Links

- [replace-in-file (npm) used in build script ](https://www.npmjs.com/package/replace-in-file)