scripty.sol

scripty.sol is a gas-efficient HTML builder tuned for stitching large JS based together.
!scripty.sol

$3

scripty.sol allows you to build HTML files that embed JS that are stored on-chain. Some benefits of using scripty.sol:
- Gas efficient. It utilises DynamicBuffer to save huge amount of gas while assembling scripts together.
- You can use already deployed storage solutions.
- You can build modular JS based HTML files directly on-chain.
- Supports custom HTML tags and inline contents.

$3

- Art Blocks
- Alba

$3

- CryptoCoaster
- the metro
- GOLD
- Terraform Navigator
- Panopticon

Installation

Contracts and verified scripts(JS) are published through npm:
``javascript
npm install scripty.sol --save-dev
`

Example

The example below generates a simple HTML with fullsize canvas element and a script element that draws a rectangle on the canvas:
`solidity
// Create head tags
HTMLTag[] memory headTags = new HTMLTag[](1);
headTags[0].tagOpen = "";

// Create body tags
HTMLTag[] memory bodyTags = new HTMLTag[](2);
bodyTags[0].tagOpen = '';
bodyTags[0].tagClose = "";

bodyTags[1].tagContent = 'const canvas=document.getElementById("myCanvas"),ctx=canvas.getContext("2d");ctx.beginPath(),ctx.rect(20,20,150,100),ctx.stroke();';
bodyTags[1].tagType = HTMLTagType.script;

// Create HTML request with head and body tags
HTMLRequest memory headTags;
htmlRequest.headTags = headTags;
htmlRequest.bodyTags = bodyTags;

// Get full HTML string
string memory htmlString = IScriptyBuilderV2(
scriptyBuilderAddress
).getHTMLString(htmlRequest);
`

#### HTML file output:
`html









`

Deployed Contracts

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

$3

- ScriptyStorageV2 - 0xbD11994aABB55Da86DC246EBB17C1Be0af5b7699
- ScriptyBuilderV2 - 0xD7587F110E08F4D120A231bA97d3B577A81Df022
- ETHFSV2FileStorage - 0x8FAA1AAb9DA8c75917C43Fb24fDdb513edDC3245

Live Examples

#### Stacked 3D Objects Shapes - NFT1 NFT2

Both NFTs assemble PNG compressed base 64 encoded three.js with an uncompressed demo scene. First NFT creates some 3D cubes. Second NFT gets the first NFT scene on-chain and adds spheres.

#### p5js from EthFS FileStore V2
Assembles base64 encoded p5.js that's stored in ethfs's FileStore contract with a demo scene. Metadata and animation URL are both base64 encoded.

#### p5js from EthFS FileStore V2 - URL Safe
Assembles base64 encoded p5.js that's stored in ethfs's FileStore contract with a demo scene. Metadata and animation URL are both URL encoded.

#### Random Shapes
Assembles multiple uncompressed scripts that draw shapes on same element with a controller script that is created in NFT contract. This controller script passes some chain parameters to canvas scene.

#### Cube3D - GZIP Compressed - BASE64 Encoded
Assembles GZIP compressed Base64 encoded three.js with a demo scene. Metadata and animation URL are both base64 encoded.

#### Cube3D - GZIP Compressed - URL Safe
Assembles GZIP compressed base64 encoded three.js with a demo scene. Metadata and animation URL are both URL encoded.

#### Cube3D - PNG Compressed - URL Safe
Assembles PNG compressed base64 encoded three.js with a demo scene. Metadata and animation URL are both URL encoded.

#### Cube3D - PNG Compressed - URL Safe with custom wrap
Assembles PNG compressed base64 encoded three.js with a demo scene. Metadata and animation URL are both URL encoded. It uses custom script wraps.

#### ThreeJS Module - GZIP Compressed - URL Safe with custom wrap

Assembles GZIP compressed base64 encoded modular three.js` with a demo scene. Metadata and animation URL are both URL encoded. It uses custom script wraps. This is the most complex of all the examples. It demonstrates how to:
- dynamically inject data into your javascript code
- load gzipped javascript modules in the desired order, using gzipped es-module-shim for full browser support
- embed custom javascript
- make it all URL safe

Authors

- int.art / @0xthedude
- @xtremetom

Acknowledgments

- EthFS - @frolic
- DynamicBuffer - @cxkoda