From bd5c1a868cb666d7ff1d07b6abf62db303f9b4f9 Mon Sep 17 00:00:00 2001 From: David Knights Date: Mon, 16 Oct 2023 17:29:52 +0100 Subject: [PATCH] Initial commit of cre8bitJS gh website --- .github/README.md | 90 ------- .github/cre8bitjs.gif | Bin 7239 -> 0 bytes .npmignore | 8 - LICENSE | 21 -- README.md | 78 ------ cre8bit.js => cre8bit-reflection.js | 125 ++++++++- cre8bit.min.js | 1 + examples/index.html | 188 +++++++++++++ examples/script.js | 17 ++ examples/styles.css | 116 ++++++++ images/cre8bit-logo.png | Bin 0 -> 156 bytes images/favicon.png | Bin 0 -> 146 bytes images/menu-icon.png | Bin 0 -> 108 bytes images/x-cre8bit-logo.png | Bin 0 -> 166 bytes images/x-favicon.svg | 1 + images/y-cre8bit-logo.png | Bin 0 -> 120 bytes index.html | 127 +++++++++ logo.png | Bin 177 -> 0 bytes nav.js | 2 + package-lock.json | 5 - package.json | 24 -- playground/index.html | 131 +++++++++ playground/script.js | 140 ++++++++++ playground/style.css | 256 ++++++++++++++++++ script.js | 26 ++ styles.css | 404 ++++++++++++++++++++++++++++ 26 files changed, 1520 insertions(+), 240 deletions(-) delete mode 100644 .github/README.md delete mode 100644 .github/cre8bitjs.gif delete mode 100644 .npmignore delete mode 100644 LICENSE delete mode 100644 README.md rename cre8bit.js => cre8bit-reflection.js (70%) create mode 100644 cre8bit.min.js create mode 100644 examples/index.html create mode 100644 examples/script.js create mode 100644 examples/styles.css create mode 100644 images/cre8bit-logo.png create mode 100644 images/favicon.png create mode 100644 images/menu-icon.png create mode 100644 images/x-cre8bit-logo.png create mode 100644 images/x-favicon.svg create mode 100644 images/y-cre8bit-logo.png create mode 100644 index.html delete mode 100644 logo.png create mode 100644 nav.js delete mode 100644 package-lock.json delete mode 100644 package.json create mode 100644 playground/index.html create mode 100644 playground/script.js create mode 100644 playground/style.css create mode 100644 script.js create mode 100644 styles.css diff --git a/.github/README.md b/.github/README.md deleted file mode 100644 index 07c1fa9..0000000 --- a/.github/README.md +++ /dev/null @@ -1,90 +0,0 @@ -# ![Cre8bit logo](/logo.png) Cre8bitJS -![8bit Space Invader, Ufo, Pacman and Ghost](/.github/cre8bitjs.gif) - -Cre8bitJS is a lightweight Javascript library that adds 8bit style retro video game characters to your web page as svgs. These are created dynamically allowing for customisation. - -[![npm version](https://badge.fury.io/js/cre8bitjs.svg)](https://badge.fury.io/js/cre8bitjs) -![GitHub](https://img.shields.io/github/license/daveknights/cre8bit) -![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/daveknights/cre8bit) - -## Setup -Via npm for use with a bundler. -``` -$ npm install cre8bitjs --save -``` -```javascript -import cre8bit from 'cre8bitjs'; -``` -**Or** - -Download and include the [unminified](https://github.com/daveknights/cre8bit/blob/main/Cre8bit.js) or [minified](https://github.com/daveknights/cre8bit-minified/blob/main/cre8bit.min.js)* version in your project (or scripts folder) and specify the path. -```javascript -import cre8bit from "./cre8bit.js"; // "./cre8bit.min.js"; (For the minified version) -``` -And set your own javascript file to `type="module"`. - -_* At the time of writing, a minifier that could handle private properties & methods could not be found, -so a [custom node minifying script](https://gist.github.com/daveknights/7e6124184c5d49f8498d6fa91fb21181) was created, shaving nearly 40% (5kb) off the unminified version._ -## Usage -```javascript -// The most basic usage of the library -new cre8bit().create('space invader'); -``` -### Examples -```javascript -// Create an svg with custom options -new cre8bit().create('pacman', {size: 12, parentClass: 'container'}); - -// Some helper methods are available if you need to modify the svg after creation -const pacman = new cre8bit().create('pacman'); -pacman.setSize(20); -// Methods can be chained -pacman - .setColour('#f9eb06') - .setFlip(true); - -// Animation option available for certain characters -const ghost = new cre8bit().create('ghost', {animate: true}); -// Cancel animation -ghost.stop(); -``` -### Character names -Pass one as the first argument to the **create** method. -- `'space invader'` -- `'ufo'` -- `'pacman'` -- `'ghost'` -- `'poke ball'` -- `'mario'` -- `'mushroom'` -- `'kirby'` -### Options -Optional object passed as the second argument to the **create** method. - -`(string) colour` - Any valid CSS colour name or hex value e.g: `red` or `#c8b`. Characters have a default colour. - -`(number) size` - Up to a maximum size of **70**. The default is `5`. - -`(boolean) flip` - The default is **false**. - -`(boolean) animate` - Only available currently with **space invader**, **pacman** & **ghost**. - -`(string) parentClass` - Use this to add the svg to an existing DOM element by providing the class name. If none is provided they are added to the document body. - -`(string) wrapperClass` - Use this to wrap the svg in a div with the class name provided. - -`(boolean) outline` - Add an outline to all paths of a character. Useful if there is not enough contrast between the character colour and your page background, or the character (parts of the character) are the same colour as your page. - -### Helper methods -`setColour(string)` - Any valid CSS colour name or hex value e.g: `red` or `#c8b`. Characters have a default colour. - -`setSize(number)` - Up to a maximum size of **70**. The default is `5`. - -`setFlip(boolean)` - The default is **false**. - -`stop()` - Stop a currently animating character. -## In action -See some [examples](https://daveknights.github.io/cre8bit-examples/) of the library in use. - -Try out the library in the [Cre8bitJS Playground](https://daveknights.github.io/cre8bit-playground/). - diff --git a/.github/cre8bitjs.gif b/.github/cre8bitjs.gif deleted file mode 100644 index d553d081767c0b30d85a304cbfdd9be44b5dda72..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7239 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 X>vPY&(O57t74#ZTO__EJ`^Ekr6Ql*! diff --git a/.npmignore b/.npmignore deleted file mode 100644 index ddba3f4..0000000 --- a/.npmignore +++ /dev/null @@ -1,8 +0,0 @@ -cre8bit.min.js -testing/ -minifier/ -.gitignore -cre8bit.min.js -cre8bitjs.gif -logo.png -.github \ No newline at end of file diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 2788f09..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2023 daveknights - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 75196e3..0000000 --- a/README.md +++ /dev/null @@ -1,78 +0,0 @@ -# Cre8bitJS - -Cre8bitJS is a lightweight Javascript library that adds 8bit style retro video game characters to your web page as svgs. These are created dynamically allowing for customisation. - -**Note:** This library is a Javascript class containing private fields and methods which may not work with your chosen minifier. For a minified* version of the library, install [cre8bit-minified](https://www.npmjs.com/package/cre8bitjs-minified). -## Setup -Via npm for use with a bundler. -``` -$ npm install cre8bitjs --save -``` -```javascript -import cre8bit from 'cre8bitjs'; -``` -## Usage -```javascript -// The most basic usage of the library -new cre8bit().create('space invader'); -``` -### Examples -```javascript -// Create an svg with custom options -new cre8bit().create('pacman', {size: 12, parentClass: 'container'}); - -// Some helper methods are available if you need to modify the svg after creation -const pacman = new cre8bit().create('pacman'); -pacman.setSize(20); -// Methods can be chained -pacman - .setColour('#f9eb06') - .setFlip(true); - -// Animation option available for certain characters -const ghost = new cre8bit().create('ghost', {animate: true}); -// Cancel animation -ghost.stop(); -``` -### Character names -Pass one as the first argument to the **create** method. -- `'space invader'` -- `'ufo'` -- `'pacman'` -- `'ghost'` -- `'poke ball'` -- `'mario'` -- `'mushroom'` -- `'kirby'` -### Options -Optional object passed as the second argument to the **create** method. - -`(string) colour` - Any valid CSS colour name or hex value e.g: `red` or `#c8b`. Characters have a default colour. - -`(number) size` - Up to a maximum size of **70**. The default is `5`. - -`(boolean) flip` - The default is **false**. - -`(boolean) animate` - Only available currently with **space invader**, **pacman** & **ghost**. - -`(string) parentClass` - Use this to add the svg to an existing DOM element by providing the class name. If none is provided they are added to the document body. - -`(string) wrapperClass` - Use this to wrap the svg in a div with the class name provided. - -`(boolean) outline` - Add an outline to all paths of a character. Useful if there is not enough contrast between the character colour and your page background, or the character (parts of the character) are the same colour as your page. - -### Helper methods -`setColour(string)` - Any valid CSS colour name or hex value e.g: `red` or `#c8b`. Characters have a default colour. - -`setSize(number)` - Up to a maximum size of **70**. The default is `5`. - -`setFlip(boolean)` - The default is **false**. - -`stop()` - Stop a currently animating character. -## In action -See some [examples](https://daveknights.github.io/cre8bit-examples/) of the library in use. - -Try out the library in the [Cre8bitJS Playground](https://daveknights.github.io/cre8bit-playground/). - -_* At the time of writing, a minifier that could handle private properties & methods could not be found, -so a [custom node minifying script](https://gist.github.com/daveknights/7e6124184c5d49f8498d6fa91fb21181) was created, shaving nearly 40% (5kb) off the unminified version._ diff --git a/cre8bit.js b/cre8bit-reflection.js similarity index 70% rename from cre8bit.js rename to cre8bit-reflection.js index 0aa99cc..32ec29d 100644 --- a/cre8bit.js +++ b/cre8bit-reflection.js @@ -8,8 +8,9 @@ export default class Cre8bit { #container = 'body'; #colour = '#333'; #size = 5; - #flip = false; + #flip = null; #outlineWidth = 0; + #reflection = false; #characters = { pacman: { @@ -75,6 +76,30 @@ export default class Cre8bit { [5,9],[5,8],[2,8],[2,7],[1,7],[1,6],[0,6]]] } }, + pikachu: { + rows: 19, + columns: 17, + colour: 'yellow', + points: [[[4,1],[5,1],[5,2],[5,4],[6,4],[6,5],[8,5],[8,4],[10,4],[10,8],[11,8],[11,10],[12,10],[12,11],[10,11],[10,12],[12,12], + [12,13],[11,13],[11,14],[12,14],[12,16],[11,16],[11,17],[10,17],[10,18],[11,18],[11,19],[8,19],[8,18],[9,18],[9,17], + [6,17],[6,16],[4,16],[4,15],[3,15],[3,16],[2,16],[2,15],[3,15],[3,13],[1,13],[1,12],[2,12],[2,10],[1,10],[1,9],[0,9], + [0,8],[1,8],[1,5],[2,5],[2,4],[3,4],[3,2],[4,2]], + [[15,0],[16,0],[16,1],[17,1],[17,3],[16,3],[16,4],[15,4],[15,5],[14,5],[14,6],[15,6],[15,8],[13,8],[13,6],[12,6], + [12,4],[13,4],[13,2],[14,2],[14,1],[15,1]]], + extraPoints: { + black: [[[4,0],[5,0],[5,1],[4,1]], + [[10,3],[12,3],[12,4],[11,4],[11,5],[10,5]], + [[0,7],[1,7],[1,8],[0,8]], + [[5,8],[6,8],[6,10],[4,10],[4,9],[5,9]], + [[8,13],[9,13],[9,14],[8,14],[8,15],[9,15],[9,16],[8,16],[8,15],[7,15],[7,14],[8,14]]], + white: [[[0,6],[1,6],[1,7],[0,7]], + [[4,8],[5,8],[5,9],[4,9]]], + red: [[[6,10],[8,10],[8,11],[7,11],[7,12],[6,12]]], + sienna: [[[13,8],[14,8],[14,9],[13,9],[13,10],[12,10],[12,9],[13,9]], + [[10,11],[12,11],[12,12],[10,12]], + [[11,13],[12,13],[12,14],[11,14]]] + } + }, mushroom: { rows: 14, columns: 14, @@ -237,15 +262,75 @@ export default class Cre8bit { } } + if (this.#reflection) { + const reflection = newGroup.cloneNode(true); + const rNewDefs = this.#createSvgElement(this.#svgns, 'defs'); + const rNewMask = this.#createSvgElement(this.#svgns, 'mask'); + const rRect = this.#createSvgElement(this.#svgns, 'rect'); + const rlinearGrad = this.#createSvgElement(this.#svgns, 'linearGradient'); + const rStopStart = this.#createSvgElement(this.#svgns, 'stop'); + const rStopEnd = this.#createSvgElement(this.#svgns, 'stop'); + + rNewMask.setAttribute('id', `${this.#id}-ref-mask`); + rRect.setAttribute('x', 0); + rRect.setAttribute('y', 0); + rRect.setAttribute('width', (this.#size * charPath.columns) + (this.#outlineWidth * 2)); + rRect.setAttribute('height', (this.#size * charPath.rows) + (this.#outlineWidth * 2)); + rRect.setAttribute('fill', `url(#${this.#id}-grad-mask)`); + + rlinearGrad.setAttribute('id', `${this.#id}-grad-mask`); + rlinearGrad.setAttribute('x1', '0'); + rlinearGrad.setAttribute('x2', '0'); + rlinearGrad.setAttribute('y1', '0'); + rlinearGrad.setAttribute('y2', '1'); + + rStopStart.setAttribute('offset', '0'); + rStopStart.setAttribute('stop-color', 'white'); + rStopEnd.setAttribute('offset', '1'); + rStopEnd.setAttribute('stop-color', 'white'); + + let translateVal = `0,-${((this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)) * 2}`; + let scaleVal = '1,-1'; + let startVal = '0'; + let endVal = '0.3'; + + if (this.#flip) { + // if (this.#flip === 'horizontally') { + translateVal = `-${((this.#characterPath().columns * this.#size) + (this.#outlineWidth * 2))},-${((this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)) * 2}`; + scaleVal = '-1,-1'; + // } else { + // translateVal = `0,${(this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)}`; + // scaleVal = '1,1'; + // startVal = '0.3'; + // endVal = '0'; + // } + } + + rStopStart.setAttribute('stop-opacity', startVal); + rStopEnd.setAttribute('stop-opacity', endVal); + + reflection.setAttribute('transform', `scale(${scaleVal}) translate(${translateVal})`); + reflection.setAttribute('mask', `url(#${this.#id}-ref-mask)`); + + rNewMask.appendChild(rRect); + rlinearGrad.appendChild(rStopStart); + rlinearGrad.appendChild(rStopEnd); + rNewDefs.appendChild(rlinearGrad); + rNewDefs.appendChild(rNewMask); + svg.appendChild(rNewDefs); + svg.appendChild(reflection); + } + return svg; } #editSVG() { const charPath = this.#characterPath(); const svgEdit = document.getElementById(this.#id); + const editMultiplyer = this.#reflection ? 2 : 1; svgEdit.innerHTML = ''; svgEdit.setAttributeNS(null, 'width', `${(charPath.columns * this.#size) + (this.#outlineWidth * 2)}`); - svgEdit.setAttributeNS(null, 'height', `${(charPath.rows * this.#size) + (this.#outlineWidth * 2)}`); + svgEdit.setAttributeNS(null, 'height', `${((charPath.rows * this.#size) + (this.#outlineWidth * 2)) * editMultiplyer}`); this.#makeSVG(svgEdit, charPath); @@ -305,23 +390,33 @@ export default class Cre8bit { return this; } /** - * @param {boolean} shouldFlip + * @param {string} direction - horizontally | vertically */ - setFlip(shouldFlip) { - if (shouldFlip) { - document.getElementById(this.#id).querySelector('g').setAttribute('transform', `scale(-1, 1) translate(-${(this.#characterPath().columns * this.#size) + (this.#outlineWidth * 2)}, 0)`); - } else { - document.getElementById(this.#id).querySelector('g').removeAttribute('transform'); - } - - this.#flip = shouldFlip; + setFlip(direction) { + // if (direction) { + // if (direction === 'horizontally') { + // this.#flip = direction; + document.getElementById(this.#id).querySelector('g').setAttribute('transform', `scale(-1, 1) translate(-${(this.#characterPath().columns * this.#size) + (this.#outlineWidth * 2)}, 0)`); + if (this.#reflection) { + document.getElementById(this.#id).querySelector('g:last-of-type').setAttribute('transform', `scale(-1,-1) translate(-${(this.#characterPath().columns * this.#size) + (this.#outlineWidth * 2)}, -${((this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)) * 2})`); + } + // } else if ((direction === 'vertically')) { + // // this.#flip = direction; + // document.getElementById(this.#id).querySelector('g').setAttribute('transform', `scale(1, -1) translate(0, -${(this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)})`); + // if (this.#reflection) { + // document.getElementById(this.#id).querySelector('g:last-of-type').setAttribute('transform', `scale(1,1) translate(0, ${(this.#characterPath().rows * this.#size) + (this.#outlineWidth * 2)})`); + // } + // } else { + // console.log('Only horizontally or vertically allowed'); + // } + // } return this; } /** * @param {string} character - character - * @param {object} [options] - Optional string colour, number size, boolean flip, boolean animate, string parentClass, string wrapperClass, boolean outline + * @param {object} [options] - Optional string colour, number size, string flip, boolean animate, string parentClass, string wrapperClass, boolean outline */ create(character, options) { this.#characterName = character.toLowerCase(); @@ -336,14 +431,16 @@ export default class Cre8bit { svgElem.classList.add('cre8bit', this.#characterName.replace(' ', '-')); if (options) { + options.flip && (this.#flip = options.flip); options.parentClass && (this.#parentClass = options.parentClass); options.colour && this.setColour(options.colour, true); options.size && this.setSize(options.size, true); options.outline && (this.#outlineWidth = 0.5); + options.reflection && (this.#reflection = true); } - + const multiplyer = options && options.reflection ? 2 : 1; svgElem.setAttributeNS(null, 'width', `${(newCharPath.columns * this.#size) + (this.#outlineWidth * 2)}`); - svgElem.setAttributeNS(null, 'height', `${(newCharPath.rows * this.#size) + (this.#outlineWidth * 2)}`); + svgElem.setAttributeNS(null, 'height', `${((newCharPath.rows * this.#size) + (this.#outlineWidth * 2)) * multiplyer}`); shape = this.#makeSVG(svgElem, newCharPath); diff --git a/cre8bit.min.js b/cre8bit.min.js new file mode 100644 index 0000000..10ca483 --- /dev/null +++ b/cre8bit.min.js @@ -0,0 +1 @@ +export default class Cre8bit{#uV='http://www.w3.org/2000/svg';#nV=null;#pV='';#rV=false;#iV=0;#vV='body';#aV='#333';#tV=5;#eV=false;#jV=0;#sV={pacman:{rows:13,columns:12,colour:'yellow',points:[[[4,0],[9,0],[9,1],[11,1],[11,2],[12,2],[12,4],[10,4],[10,5],[7,5],[7,6],[4,6],[4,7],[7,7],[7,8],[10,8],[10,9],[12,9],[12,11],[11,11],[11,12],[9,12],[9,13],[4,13],[4,12],[2,12],[2,11],[1,11],[1,9],[0,9],[0,4],[1,4],[1,2],[2,2],[2,1],[4,1]]],animatePoints:[[[4,0],[8,0],[8,1],[10,1],[10,2],[11,2],[11,4],[12,4],[12,9],[11,9],[11,11],[10,11],[10,12],[8,12],[8,13],[4,13],[4,12],[2,12],[2,11],[1,11],[1,9],[0,9],[0,4],[1,4],[1,2],[2,2],[2,1],[4,1]]]},ghost:{rows:14,columns:14,colour:'cyan',points:[[[5,0],[9,0],[9,1],[11,1],[11,2],[12,2],[12,3],[13,3],[13,6],[14,6],[14,13],[13,13],[13,14],[11,14],[11,13],[10,13],[10,12],[9,12],[9,13],[8,13],[8,14],[6,14],[6,13],[5,13],[5,12],[4,12],[4,13],[3,13],[3,14],[1,14],[1,13],[0,13],[0,6],[1,6],[1,3],[2,3],[2,2],[3,2],[3,1],[5,1]]],animatePoints:[[[5,0],[9,0],[9,1],[11,1],[11,2],[12,2],[12,3],[13,3],[13,6],[14,6],[14,14],[13,14],[13,13],[12,13],[12,12],[11,12],[11,13],[10,13],[10,14],[8,14],[8,12],[6,12],[6,14],[4,14],[4,13],[3,13],[3,12],[2,12],[2,13],[1,13],[1,14],[0,14],[0,6],[1,6],[1,3],[2,3],[2,2],[3,2],[3,1],[5,1]]],extraPoints:{white:[[[4,3],[6,3],[6,4],[7,4],[7,5],[5,5],[5,7],[6,7],[6,8],[4,8],[4,7],[3,7],[3,4],[4,4]],[[10,3],[12,3],[12,4],[13,4],[13,5],[11,5],[11,7],[12,7],[12,8],[10,8],[10,7],[9,7],[9,4],[10,4]]],blue:[[[5,5],[7,5],[7,7],[5,7]],[[11,5],[13,5],[13,7],[11,7]]]}},spaceInvader:{rows:8,columns:11,colour:'lime',points:[[[2,0],[3,0],[3,1],[4,1],[4,2],[7,2],[7,1],[8,1],[8,0],[9,0],[9,1],[8,1],[8,2],[9,2],[9,3],[10,3],[10,4],[11,4],[11,7],[10,7],[10,5],[9,5],[9,7],[8,7],[8,8],[6,8],[6,7],[8,7],[8,6],[3,6],[3,7],[5,7],[5,8],[3,8,],[3,7],[2,7],[2,5],[1,5],[1,7],[0,7],[0,4],[1,4],[1,3],[2,3],[2,2],[3,2],[3,1],[2,1]]],animatePoints:[[[2,0],[3,0],[3,1],[4,1],[4,2],[7,2],[7,1],[8,1],[8,0],[9,0],[9,1],[8,1],[8,2],[9,2],[9,3],[10,3],[10,1],[11,1],[11,5],[10,5],[10,6],[9,6],[9,7],[10,7],[10,8],[9,8],[9,7],[8,7],[8,6],[3,6],[3,7],[2,7],[2,8],[1,8],[1,7],[2,7],[2,6],[1,6],[1,5],[0,5],[0,1],[1,1],[1,3],[2,3],[2,2],[3,2],[3,1],[2,1]]],mask:[[3,3],[7,3]]},ufo:{rows:7,columns:16,colour:'red',points:[[[5,0],[11,0],[11,1],[13,1],[13,2],[14,2],[14,3],[15,3],[15,4],[16,4],[16,5],[14,5],[14,6],[13,6],[13,7],[12,7],[12,6],[11,6],[11,5],[9,5],[9,6],[7,6],[7,5],[5,5],[5,6],[4,6],[4,7],[3,7],[3,6],[2,6],[2,5],[0,5],[0,4],[1,4],[1,3],[2,3],[2,2],[3,2],[3,1],[5,1]]],mask:[[3,3],[6,3],[9,3],[12,3]]},pokeBall:{rows:12,columns:13,colour:'red',points:[[[4,0],[9,0],[9,1],[11,1],[11,2],[12,2],[12,4],[13,4],[13,5],[12,5],[12,6],[11,6],[11,7],[9,7],[9,6],[8,6],[8,5],[5,5],[5,6],[4,6],[4,7],[2,7],[2,6],[1,6],[1,5],[0,5],[0,4],[1,4],[1,2],[2,2],[2,1],[4,1]]],extraPoints:{white:[[[0,6],[1,6],[1,7],[2,7],[2,8],[5,8],[5,6],[8,6],[8,8],[11,8],[11,7],[12,7],[12,6],[13,6],[13,8],[12,8],[12,10],[11,10],[11,11],[9,11],[9,12],[4,12],[4,11],[2,11],[2,10],[1,10],[1,8],[0,8]]],black:[[[0,5],[1,5],[1,6],[2,6],[2,7],[4,7],[4,6],[5,6],[5,5],[8,5],[8,6],[9,6],[9,7],[11,7],[11,6],[12,6],[12,5],[13,5],[13,6],[12,6],[12,7],[11,7],[11,8],[8,8],[8,6],[5,6],[5,8],[8,8],[8,9],[5,9],[5,8],[2,8],[2,7],[1,7],[1,6],[0,6]]]}},mushroom:{rows:14,columns:14,colour:'red',points:[[[6,0],[8,0],[8,2],[9,2],[9,3],[11,3],[11,2],[12,2],[12,4],[11,4],[11,7],[12,7],[12,8],[14,8],[14,10],[12,10],[12,9],[9,9],[9,8],[10,8],[10,5],[9,5],[9,4],[5,4],[5,5],[4,5],[4,8],[5,8],[5,9],[2,9],[2,10],[0,10],[0,8],[2,8],[2,7],[3,7],[3,4],[2,4],[2,2],[3,2],[3,3],[5,3],[5,2],[6,2]]],extraPoints:{white:[[[0,5],[1,5],[1,3],[2,3],[2,4],[3,4],[3,7],[2,7],[2,8],[0,8]],[[5,0],[6,0],[6,2],[5,2],[5,3],[3,3],[3,1],[5,1]],[[8,0],[9,0],[9,1],[11,1],[11,3],[9,3],[9,2],[8,2]],[[12,3],[13,3],[13,5],[14,5],[14,8],[12,8],[12,7],[11,7],[11,4],[12,4]],[[5,4],[9,4],[9,5],[10,5],[10,8],[9,8],[9,9],[5,9],[5,8],[4,8],[4,5],[5,5]],[[3,10],[11,10],[11,11],[12,11],[12,13],[11,13],[11,14],[3,14],[3,13],[2,13],[2,11],[3,11]]],black:[[[2,9],[12,9],[12,11],[11,11],[11,10],[9,10],[9,12],[8,12],[8,10],[6,10],[6,12],[5,12],[5,10],[3,10],[3,11],[2,11]]]}},mario:{rows:16,columns:12,colour:'red',points:[[[3,0],[8,0],[8,1],[11,1],[11,2],[2,2],[2,1],[3,1]],[[2,7],[4,7],[4,10],[3,10],[3,11],[2,11],[2,10],[0,10],[0,9],[1,9],[1,8],[2,8],[2,7]],[[5,7],[7,7],[7,9],[5,9]],[[8,7],[10,7],[10,8],[11,8],[11,9],[12,9],[12,10],[10,10],[10,11],[9,11],[9,10],[8,10]]],extraPoints:{brown:[[[2,2],[5,2],[5,3],[4,3],[4,4],[5,4],[5,5],[3,5],[3,3],[2,3]],[[1,3],[2,3],[2,5],[3,5],[3,6],[2,6],[2,5],[1,5]],[[1,14],[4,14],[4,16],[0,16],[0,15],[1,15]],[[8,14],[11,14],[11,15],[12,15],[12,16],[8,16]]],black:[[[7,2],[8,2],[8,4],[9,4],[9,5],[11,5],[11,6],[7,6],[7,5],[8,5],[8,4],[7,4]]],bisque:[[[2,3],[3,3],[3,5],[5,5],[5,4],[4,4],[4,3],[5,3],[5,2],[7,2],[7,4],[8,4],[8,2],[9,2],[9,3],[11,3],[11,4],[12,4],[12,5],[9,5],[9,4],[8,4],[8,5],[7,5],[7,6],[9,6],[9,7],[3,7],[3,5],[2,5]],[[0,10],[2,10],[2,11],[3,11],[3,12],[2,12],[2,13],[0,13]],[[10,10],[12,10],[12,13],[10,13],[10,12],[9,12],[9,11],[10,11]]],blue:[[[4,7],[5,7],[5,9],[7,9],[7,7],[8,7],[8,10],[7,10],[7,11],[8,11],[8,10],[9,10],[9,12],[10,12],[10,14],[7,14],[7,13],[5,13],[5,14],[2,14],[2,12],[3,12],[3,10],[4,10],[4,11],[5,11],[5,10],[4,10]]],yellow:[[[4,10],[5,10],[5,11],[4,11]],[[7,10],[8,10],[8,11],[7,11]]]}},kirby:{rows:14,columns:14,colour:'pink',points:[[[1,0],[3,0],[3,1],[2,1],[2,2],[3,2],[3,1],[4,1],[4,0],[9,0],[9,1],[11,1],[11,2],[12,2],[12,4],[13,4],[13,5],[14,5],[14,8],[11,8],[11,9],[10,9],[10,10],[9,10],[9,12],[8,12],[8,13],[5,13],[5,12],[3,12],[3,11],[2,11],[2,10],[1,10],[1,7],[0,7],[0,1],[1,1]]],extraPoints:{crimson:[[[1,12],[3,12],[3,13],[5,13],[5,14],[0,14],[0,13],[1,13]],[[11,9],[14,9],[14,12],[13,12],[13,13],[12,13],[12,14],[10,14],[10,13],[9,13],[9,12],[10,12],[10,10],[11,10]],[[3,5],[5,5],[5,6],[3,6]],[[8,5],[10,5],[10,6],[8,6]]],black:[[[5,2],[6,2],[6,5],[5,5]],[[7,2],[8,2],[8,5],[7,5]],[[6,6],[7,6],[7,8],[6,8]]]}},};constructor(){this.#nV=`c8b-${Math.floor(Math.random()*Math.floor(Math.random()*Date.now()))}`}#fF(){let uL=this.#pV;switch(uL){case 'space invader':return this.#sV['spaceInvader'];case 'poke ball':return this.#sV['pokeBall'];default:if(uL in this.#sV){return this.#sV[uL]} else{console.log('Character not available')}break}}#uF(points){let nL='';for(const [i,[x,y]] of points.entries()){if(i===0){continue}nL += `L ${(x*this.#tV) + this.#jV} ${(y*this.#tV) + this.#jV} `}nL += 'z';return nL}#nF(name,tag){return document.createElementNS(name,tag)}#cF(svg,rC){const cC=this.#nF(this.#uV,'g');const oC=this.#rV===false?rC.points:rC.animatePoints;let lL=null;cC.setAttribute('fill',this.#aV);if(this.#jV===0.5){cC.setAttribute('stroke','black');cC.setAttribute('stroke-width',this.#jV)}if(rC.mask){const nC=this.#nF(this.#uV,'defs');const sC=this.#nF(this.#uV,'mask');const tC=this.#nF(this.#uV,'rect');sC.setAttribute('id',`${this.#nV}-mask`);tC.setAttribute('x',0);tC.setAttribute('y',0);tC.setAttribute('width',(this.#tV*rC.columns) +(this.#jV*2));tC.setAttribute('height',(this.#tV*rC.rows) +(this.#jV*2));tC.setAttribute('fill','white');sC.appendChild(tC);for(const [x,y] of rC.mask.values()){const vC=this.#nF(this.#uV,'rect');vC.setAttribute('x',(x*this.#tV) + this.#jV);vC.setAttribute('y',(y*this.#tV) + this.#jV);vC.setAttribute('width',this.#tV);vC.setAttribute('height',this.#tV);vC.setAttribute('fill','black');sC.appendChild(vC)}nC.appendChild(sC);svg.appendChild(nC)}svg.appendChild(cC);for(const points of oC){lL=this.#nF(this.#uV,'path');lL.setAttribute('d',`M ${(points[0][0]*this.#tV) + this.#jV} ${(points[0][1]*this.#tV) + this.#jV} ${this.#uF(points)}`);cC.appendChild(lL)}rC.mask&&lL.setAttribute('mask',`url(#${this.#nV}-mask)`);if(rC.extraPoints){for(const [colour,pointsArrays] of Object.entries(rC.extraPoints)){for(const points of pointsArrays){const aC=this.#nF(this.#uV,'path');aC.setAttribute('d',`M ${(points[0][0]*this.#tV) + this.#jV} ${(points[0][1]*this.#tV) + this.#jV} ${this.#uF(points)}`);aC.setAttribute('fill',colour);cC.appendChild(aC)}}}return svg}#sF(){const rC=this.#fF();const lC=document.getElementById(this.#nV);lC.innerHTML='';lC.setAttributeNS(null,'width', `${(rC.columns*this.#tV) +(this.#jV*2)}`);lC.setAttributeNS(null,'height', `${(rC.rows*this.#tV) +(this.#jV*2)}`);this.#cF(lC,rC);this.#eV&&this.setFlip(this.#eV)}#yF(){this.#iV=setInterval(()=>{this.#rV=!this.#rV;this.#sF()},500)}stop(){if(this.#iV){clearInterval(this.#iV)}}set #parentClass(className){this.#vV=`.${className}`}setColour(colour,option){if(CSS.supports('color',colour)){this.#aV=colour;!option&&this.#sF()} else{console.log(`${colour} is not a valid CSS colour`)}return this}setSize(size,option){if(typeof size==='number'){if(size>71){console.log(`Max size is 70,${size} was provided`);size=70}this.#tV=size;!option&&this.#sF()} else{console.log(`${size} is not a number type`)}return this}setFlip(shouldFlip){if(shouldFlip){document.getElementById(this.#nV).querySelector('g').setAttribute('transform',`scale(-1, 1) translate(-${(this.#fF().columns*this.#tV) +(this.#jV*2)}, 0)`)} else{document.getElementById(this.#nV).querySelector('g').removeAttribute('transform')}this.#eV=shouldFlip;return this}create(character,options){this.#pV=character.toLowerCase();const iC=this.#fF();const eC=this.#nF(this.#uV,'svg');let eL=null;let tL=null;this.#aV=iC.colour;eC.id=this.#nV;eC.classList.add('cre8bit',this.#pV.replace(' ', '-'));if(options){options.parentClass&&(this.#parentClass=options.parentClass);options.colour&&this.setColour(options.colour,true);options.size&&this.setSize(options.size,true);options.outline&&(this.#jV=0.5)}eC.setAttributeNS(null,'width', `${(iC.columns*this.#tV) +(this.#jV*2)}`);eC.setAttributeNS(null,'height', `${(iC.rows*this.#tV) +(this.#jV*2)}`);eL=this.#cF(eC,iC);if(options&&options.wrapperClass){tL=document.createElement('div');tL.className=options.wrapperClass;tL.appendChild(eL)} else{tL=eL}document.querySelector(this.#vV).appendChild(tL);if(options){options.flip&&this.setFlip(options.flip);if(options.animate){this.#rV=true;this.#yF()}}return this}} \ No newline at end of file diff --git a/examples/index.html b/examples/index.html new file mode 100644 index 0000000..506f532 --- /dev/null +++ b/examples/index.html @@ -0,0 +1,188 @@ + + + + + + Examples | Cre8bitJS + + + + + + + + + + + +
+

Cre8bitJS examples

+
+
+
+

Default

+
+
+
+

JS Code Required

+
+

// The most basic usage creating a character with the default values.

+ 
+new cre8bit().create('space invader');
+
+
+
+

Options

+
+
+
+

JS Code Required

+
+

// Customise with some options.

+ 
+new cre8bit().create('space invader', {
+    size: 12,
+    colour: 'slateblue'
+});
+
+
+
+

Helper methods

+
+
+
+

JS Code Required

+
+

// Using helper methods after creation.

+ 
+const ufo = new cre8bit().create('ufo');
+ufo.setSize(12).setColour('#ff6461');
+
+
+
+
+

Animate

+
+
+
+

JS Code Required

+
+

// Animate option available on some characters

+ 
+new cre8bit().create('space invader', {
+    size: 12,
+    colour: '#333',
+    animate: true
+});
+
+
+
+

Outline

+
+
+
+

JS Code Required

+
+

// Outline option useful when character is same colour as background

+ 
+new cre8bit().create('poke ball', {
+    size: 12,
+    outline: true
+});
+
+
+
+

Wrapper

+
+
+
+

JS Code Required

+
+

// Add a wrapping div with the class name provided for you to apply your own styles.

+ 
+- CSS file -
+.svg-wrapper {
+    background: black;
+    padding: 30px;
+    width: fit-content;
+}
+
+- JS file -
+new cre8bit().create('pacman', {
+    size: 9,
+    wrapperClass: 'svg-wrapper'
+});
+
+
+
+

Parent

+
+
+
+
+
+

JS Code Required

+
+

// Add to an existing DOM element and use the flip option.

+ 
+- HTML  file -
+<div class="svg-container"></div>
+
+- CSS file -
+.svg-container {
+    align-items: baseline;
+    background: black;
+    display: flex;
+    justify-content: center;
+    padding-block: 30px;
+    width: 100%;
+}
+.svg-container svg + svg {
+    margin-left: 30px;
+}
+
+- JS file -
+new cre8bit().create('pacman', {
+    size: 8,
+    flip: true,
+    parentClass: 'svg-container'
+});
+new cre8bit().create('ghost', {
+    size: 8,
+    flip: true,
+    parentClass: 'svg-container'
+});
+
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/examples/script.js b/examples/script.js new file mode 100644 index 0000000..1527f5a --- /dev/null +++ b/examples/script.js @@ -0,0 +1,17 @@ +import cre8bit from "/cre8bit-reflection.js"; + +new cre8bit().create('space invader', {parentClass: 'basic'}); + +new cre8bit().create('space invader', {size: 12, colour: 'slateblue', parentClass: 'options'}); + +const ufo = new cre8bit().create('ufo', { parentClass: 'helper-methods'}); +ufo.setSize(12).setColour('#ff6461'); + +new cre8bit().create('space invader', {size: 12, colour: '#333', animate: true, parentClass: 'animate'}); + +new cre8bit().create('poke ball', {size: 10, outline: true, parentClass: 'outline'}); + +new cre8bit().create('pacman', {size: 9, wrapperClass: 'my-wrapper', parentClass: 'wrapper'}); + +new cre8bit().create('pacman', {size: 8, flip: 'horizontally', parentClass: 'parent'}); +new cre8bit().create('ghost', {size: 8, flip: 'horizontally', parentClass: 'parent'}); diff --git a/examples/styles.css b/examples/styles.css new file mode 100644 index 0000000..b5e3b90 --- /dev/null +++ b/examples/styles.css @@ -0,0 +1,116 @@ +header { + text-align: center; +} +.examples { + padding-top: 20px; +} +.examples .container { + display: block; + max-width: 1200px; +} +h2 { + font-size: 1.25rem; + margin-bottom: 10px; +} +.row { + margin-bottom: 20px; +} +.example { + align-items: center; + border: solid 1px var(--primary-colour); + justify-content: center; + min-height: 100px; + padding: 15px; +} +.info h3 { + background: var(--light-bg); + border: solid 1px var(--primary-colour); + border-bottom: none; + font-size: 1rem; + font-weight: 500; + padding: 10px; +} +.js-required { + background: var(--dark-bg); + border: solid 1px var(--primary-colour); + color: white; + padding: 15px; +} +.js-required p { + color: var(--light-bg); + line-height: 1.4; + margin-bottom: 1rem; + text-wrap: wrap; + white-space: normal; +} +.css-key { + color: var(--code-green); +} +.css-val { + color: var(--code-yellow); +} +.my-wrapper { + background: black; + padding: 30px; + width: fit-content; +} +.parent { + align-items: baseline; + background: black; + display: flex; + justify-content: center; + padding: 30px 0; + width: 100%; +} +.parent svg + svg { + margin-left: 30px; +} + +@media (min-width: 768px) { + .row { + display: flex; + } + .example { + border-right: none; + width: 48%; + } + .info { + width: 52%; + } + .js-required p { + font-size: 1rem; + } +} +@media (min-width: 960px) { + .examples { + padding-top: 30px; + } + h2 { + font-size: 1.5rem; + } + .example { + width: 50%; + } + .info { + width: 50%; + } +} +@media (max-width: 767px) { + h1 { + font-size: 2.25rem; + } + .example { + border-bottom: none; + } + .js-required p { + font-size: 0.875rem; + } + pre { + font-size: 0.9375rem; + } +} +@media (max-width: 399px) { + pre { + overflow: auto; + } +} \ No newline at end of file diff --git a/images/cre8bit-logo.png b/images/cre8bit-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..9becdb1652a536c370a5b5368bee212f07fd0d60 GIT binary patch literal 156 zcmeAS@N?(olHy`uVBq!ia0vp^H6YBy3?#1=*ysW&&H$ef*Z=?jC;m@KN&J8JG0R(^ zpr5CUV@L(#+bfK02OM}@E^631>4%-IG-Ceph|oKfU%q;hk&s?7GX`_p@((2Q-<%)78&qol`;+ E0PUbW*#H0l literal 0 HcmV?d00001 diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..f9edfffb3109221a52079bc2811de53dd7dce277 GIT binary patch literal 146 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61SBU+%rFB|k)AG&Ar*{k`y1H~IPf@sU!7dQ za{CK=Y7WdTVcg20r~me?R4LFB22WQ%mvv4FO#o02F`57X literal 0 HcmV?d00001 diff --git a/images/menu-icon.png b/images/menu-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..16996f14dc38e0d5542d294aafead03f8a6b9910 GIT binary patch literal 108 zcmeAS@N?(olHy`uVBq!ia0vp^av;pe3?v!<**pYNYymzYuI>dsDT)6Z1%i%&Buaw( zf*Bm1-ADs+L_A#_LpZJ{|M>s^zdYLt<7zv%yhltdu4p!t8} z|K`S&|B3%o5_Kmp%mb?N^mK6yskrs_inb7g0uOWGzdQerz3^deGBVt~?wN1M>Hn)( z7#I>5a!fVv#WFE4oM8ULtLek%%gMl?!2e \ No newline at end of file diff --git a/images/y-cre8bit-logo.png b/images/y-cre8bit-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..b0c3ac5a5c156d90d71d708dbf88449ea236de81 GIT binary patch literal 120 zcmeAS@N?(olHy`uVBq!ia0vp^79h;T3?#3t<7pZGr|CGr2=$1HDw zf?A#~jv*C{$qh{xE?i(xF!k9Hv-&`SW + + + + + Cre8bitJS | 8-bit svg library + + + + + + + + + + +
+
+
+

Cre8bitJS

+

(/kree-ayt-bit jay-es/) The lightweight Javascript library for adding 8-bit style retro video game characters to your page.

+
+
+
+
+
+
+
+

An easy to use api, which can be as simple as passing the name of the character you want to add, using all the default options.

+

As the svgs are created dynamically, you can customise them before and after creation. You can pass an object of options when creating + the svg or use helper methods if you want to modify the svg after it's on your page.

+

See the documentation + for the available charactes, options and methods

+
+
+
+
+
+ + + +
+

script.js

+
+
+
+import cre8bit from 'cre8bitjs';
+new cre8bit().create('ghost');
+new cre8bit().create('ghost', {
+    size: 12,
+    colour: 'pink'
+});
+const blinky = new cre8bit().create('ghost');
+blinky.setSize(10).setColour('red');
+
+
+
+
+
+
+

Changing colours

+
+
+

default

+
+
+

colour: 'green'

+
+
+

Each character has one default colour that can be changed, allowing you to create different versions of the same svg. + Depending on the character, this will change the colour of all the svg or part of it.

+
+
+
+
+

Animating

+
+

animate: true

+
+

Only some of the characters are eligible for the animate option. If you try to use it on a character than doesn't animate, + the svg will switch between visible and unvisible.

+

There is a stop method, to cancel an animating svg after creation.

+

See the docs + for information on which characters you can animate.

+
+
+
+
+

Reflections (Coming soon)

+
+

reflection: true

+
+

Already in development for version 2.1.0, using this option will produce a nice reflection of the svg character + to give you that early mobile and tablet device nostalgia.

+

This is a feature that would be very hard to achieve with CSS alone.

+
+
+
+ + + + + \ No newline at end of file diff --git a/logo.png b/logo.png deleted file mode 100644 index 47b2a959cafad0ad6a04f934280a98de90286140..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 177 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ey!3-oHx~}5|Qk(%kA+GKPKIY$4fV}4hi-mv` zV@Z%-FoVOh8)-mJn5Te0R|y)d zI>7iX`1U%FJFguZ$}ZP4aa8D^cp|o}n?c|I4f74Q*Y36A4a;}&UwXUJYi3xM#uuiy X%UHBKb;~7yHZXX)`njxgN@xNAK!Q4q diff --git a/nav.js b/nav.js new file mode 100644 index 0000000..3c0cd4e --- /dev/null +++ b/nav.js @@ -0,0 +1,2 @@ +document.querySelector('.menu-icon').addEventListener('click', () => document.querySelector('.nav-links').classList.toggle('show')); + diff --git a/package-lock.json b/package-lock.json deleted file mode 100644 index 9a45ebe..0000000 --- a/package-lock.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name": "cre8bitjs", - "version": "2.0.0", - "lockfileVersion": 1 -} diff --git a/package.json b/package.json deleted file mode 100644 index b695419..0000000 --- a/package.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "cre8bitjs", - "version": "2.0.0", - "description": "Add svg retro video game characters to a web page", - "main": "cre8bit.js", - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" - }, - "repository": { - "type": "git", - "url": "https://github.com/daveknights/cre8bit.git" - }, - "keywords": [ - "svg", - "8bit", - "retro games" - ], - "author": "Dave Knights", - "license": "MIT", - "bugs": { - "url": "https://github.com/daveknights/cre8bit/issues" - }, - "homepage": "https://github.com/daveknights/cre8bit#readme" -} diff --git a/playground/index.html b/playground/index.html new file mode 100644 index 0000000..99e84c9 --- /dev/null +++ b/playground/index.html @@ -0,0 +1,131 @@ + + + + + + Playground | Cre8bitJS + + + + + + + + + + + +
+

Cre8bitJS playground

+
+
+
+
+
+
+ + +
+
+ Choose a character +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+

Flip:

+
+
+ + +
+
+ + +
+
+
+
+

Outline:

+
+
+ + +
+
+ + +
+
+
+
+

Animate:

+
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/playground/script.js b/playground/script.js new file mode 100644 index 0000000..8346b66 --- /dev/null +++ b/playground/script.js @@ -0,0 +1,140 @@ +import cre8bit from "/cre8bit.min.js"; + +const state = { + character: '', + colour: null, + size: 10, + flip: false, + animate: false, + parentClass: 'character-container', + outline: false +}; +const specs = { + 'space invader': {xs: 24, sm: 28, lg: 40, col: '#00ff00', canAnimate: true}, + 'ufo': {xs: 17, sm: 20, lg: 28, col: '#ff0000', canAnimate: false}, + 'pacman': {xs: 20, sm: 22, lg: 34, col: '#ffff00', canAnimate: true}, + 'ghost': {xs: 18, sm: 22, lg: 30, col: '#00ffff', canAnimate: true}, + 'poke ball': {xs: 19, sm: 22, lg: 34, col: '#ff0000', canAnimate: false}, + 'mario': {xs: 16, sm: 20, lg: 28, col: '#ff0000', canAnimate: false}, + 'mushroom': {xs: 18, sm: 22, lg: 30, col: '#ff0000', canAnimate: false}, + 'kirby': {xs: 18, sm: 22, lg: 30, col: '#ffc0cb', canAnimate: false} +} +let optionFields = {}; +let character, characterArea, characterContainer, codeOutput, codeArea; +let codeDefaultText = '
new cre8bit().create(';
+let windowSize = 'sm';
+
+const changeBackground = e => characterArea.style.background = e.target.value;
+
+const setMaxSize = () => size.max = specs[state.character][windowSize];
+
+const createCharacter = (data = state) => {
+    characterContainer.innerHTML = '';
+
+    if (data.size > specs[data.character][windowSize]) {
+        data.size = specs[data.character][windowSize];
+    }
+
+    if (!data.colour) {
+        data.colour = specs[data.character].col;
+        optionFields.colour.value = specs[data.character].col;
+    }
+
+    character = new cre8bit().create(data.character, {colour: data.colour, size: parseInt(data.size), flip: data.flip, animate: data.animate, parentClass: data.parentClass, outline: data.outline});
+};
+
+const showCode = () => {
+    codeOutput.hidden && (codeOutput.hidden = false);
+    codeArea.innerHTML = '';
+
+    const codeText = document.createElement('code');
+    let codeString = `${codeDefaultText}'${state.character}', {
+    colour: '${state.colour}',
+    size: ${state.size}${state.flip ? ',' : ''}`;
+    codeString += state.flip ? `
    flip: ${state.flip}` : '';codeString += state.outline ? ',' : '';
+    codeString += state.outline ? `
    outline: ${state.outline}` : '';codeString += state.animate ? ',' : '';
+    codeString += state.animate ? `
    animate: ${state.animate}` : '';
+    codeString += '
});
'; + codeText.innerHTML = codeString; + + codeArea.appendChild(codeText); +}; + +const updateState = e => { + const target = e.target; + const targetId = target.id; + const targetValue = target.value; + + character && character.stop(); + + if (targetId === 'character') { + if (targetValue === '') { + return; + } + + state.animate = false; + state.outline = false; + document.querySelector('#animate-false').checked = true; + document.querySelector('#outline-false').checked = true; + + if (specs[targetValue].canAnimate) { + document.querySelector('#animate-option').classList.remove('hide'); + } else { + document.querySelector('#animate-option').classList.add('hide'); + } + + if (optionFields.colour.disabled === true) { + Object.values(optionFields).forEach(field => field.disabled = false); + } + + state.colour = null; + state.flip = false; + document.querySelector('#flip-false').checked = true; + } + + switch (true) { + case targetId.startsWith('animate'): + state.animate = targetValue === 'true' ? true : false; + break; + case targetId.startsWith('outline'): + state.outline = targetValue === 'true' ? true : false; + break; + case targetId.startsWith('flip'): + state.flip = targetValue === 'true' ? true : false; + break; + default: + state[targetId] = targetValue; + break; + } + + setMaxSize(); + createCharacter(); + showCode(); +} + +const init = () => { + document.querySelector('#bg-colour').addEventListener('input', changeBackground); + document.querySelector('#character-options').addEventListener('input', updateState); + + const colour = document.querySelector('#colour'); + optionFields.colour = colour; + + const size = document.querySelector('#size'); + optionFields.size = size; + + window.innerWidth < 321 && (windowSize = 'xs'); + + window.innerWidth > 600 && (windowSize = 'lg'); + + optionFields.flipTrue = document.querySelector('#flip-true'); + optionFields.flipFalse = document.querySelector('#flip-false'); + optionFields.outlineTrue = document.querySelector('#outline-true'); + optionFields.outlineFalse = document.querySelector('#outline-false'); + + characterArea = document.querySelector('.character-area'); + characterContainer = document.querySelector('.character-container'); + codeOutput = document.querySelector('.code-output'); + codeArea = document.querySelector('.code-area'); +} + +window.onload = () => init(); \ No newline at end of file diff --git a/playground/style.css b/playground/style.css new file mode 100644 index 0000000..a6d9951 --- /dev/null +++ b/playground/style.css @@ -0,0 +1,256 @@ +:root { + --grey-text: #aaa; + --form-field-border-colour: #888; +} +body.column { + align-items: normal; + min-height: 100vh; +} +header { + text-align: center; +} +.playground { + padding-top: 20px; +} +.playground .container { + display: block; + max-width: 1090px; +} +.character-area { + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + aspect-ratio: 1/1; + background: var(--light-bg); + border: solid 1px var(--primary-colour); + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + margin-bottom: 20px; + position: relative; + width: 100%; +} +.placeholder-text { + color: var(--grey-text); + font-size: 1.5rem; + font-weight: 600; +} +@supports not (aspect-ratio: 1/1) { + .character-area::before { + float: left; + padding-top: 100%; + content: ""; + } + + .character-area::after { + display: block; + content: ""; + clear: both; + } +} +#change-bg { + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + cursor: pointer; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + position: absolute; + right: 10px; + top: 10px; +} +#change-bg label { + color: black; + font-size: 2rem; + line-height: 44px; + pointer-events: none; + position: absolute; + right: 50%; + text-shadow: 1px 0 white; + top: 50%; + -webkit-transform: scale(-1, 1) translate(-50%, -50%); + -ms-transform: scale(-1, 1) translate(-50%, -50%); + transform: scale(-1, 1) translate(-50%, -50%); + user-select: none; + width: auto; +} +#bg-colour { + border-color: black; + border-radius: 4px; + border-width: 1px; + height: 44px; + width: 44px; +} +#bg-colour:focus, +#bg-colour:focus-visible { + outline-color: var(--secondary-colour); +} +.form-field { + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; +} +.form-field + .form-field { + margin-top: 12px; +} +#character-options { + background: var(--light-bg); + border: solid 1px var(--primary-colour); + margin-bottom: 20px; + padding: 10px; +} +#character-options label, +#character-options p { + font-size: 1rem; + font-weight: bold; + min-width: 100px; + width: 100px; +} +select { + border: solid 2px var(--form-field-border-colour); + border-radius: 4px; + color: var(--dark-bg); + font-size: 1rem; + padding-left: 10px; +} +select, +#colour { + height: 40px; +} +select, +#colour, +#size { + width: 100%; +} +select:focus, +select:focus-visible, +#colour:focus, +#colour:focus-visible { + border-color: var(--secondary-colour); + outline: none; +} +#size:focus, +#size:focus-visible, +input[type="radio"]:focus, +input[type="radio"]:focus-visible { + outline-color: var(--secondary-colour); +} +#colour { + border-radius: 4px; + border-width: 2px; + padding: 0 2px; +} +#size { + accent-color: var(--primary-colour); +} +.radio-fields { + background: white; + border: solid 1px var(--form-field-border-colour); + border-radius: 4px; + -webkit-justify-content: space-around; + -ms-justify-content: space-around; + justify-content: space-around; + padding: 11px 0; + width: 100%; +} +#animate-option.hide { + display: none; +} +.radios label { + margin-right: 5px; + min-width: auto; + width: auto; +} +.radios input { + accent-color: var(--primary-colour); + -webkit-transform: scale(1.5); + -ms-transform: scale(1.5); + transform: scale(1.5); +} +.code-output h2 { + background: var(--light-bg); + border: solid 1px var(--primary-colour); + border-bottom: none; + font-size: 1.125rem; + font-weight: 500; + padding: 10px; +} +.code-area { + background: var(--dark-bg); + border: solid 1px var(--primary-colour); + margin-bottom: 20px; + padding: 12px 11px; +} +pre { + color: white; + font-family: 'Source Code Pro', monospace; + line-height: 1.5; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +footer { + margin-top: auto; +} + +@media (min-width: 768px) { + #bg-colour { + width: 50px; + } + .placeholder-text { + font-size: 1.75rem; + } +} +@media (min-width: 1060px) { + .playground { + padding-top: 30px; + } + .row { + display: flex; + } + .character-area { + width: 500px; + } + #character-options { + margin-left: auto; + padding: 24px; + width: 500px; + } + .form-field + .form-field { + margin-top: 24px; + } + .code-output { + margin-top: 10px; + } + .code-output h2 { + padding: 10px 24px; + } + .code-area { + padding: 24px; + } +} +@media (max-width: 1059px) { + .playground .container { + max-width: 560px; + } +} +@media (max-width: 959px) { + .playground .container { + max-width: 540px; + } +} +@media (max-width: 767px) { + h1 { + font-size: 2.25rem; + } + .character-name { + text-wrap: wrap; + white-space: normal; + } +} +@media (max-width: 374px) { + .character-name { + text-wrap: wrap; + white-space: normal; + } +} \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..d6cd995 --- /dev/null +++ b/script.js @@ -0,0 +1,26 @@ +import cre8bit from '/cre8bit-reflection.js' + +const getSize = size => { + switch (true) { + case window.innerWidth > 1099: + return size * 2 + default: + return size; + } + +} + +window.onload = () => { + // Header + new cre8bit().create('ghost', {colour: 'red', size: getSize(3), flip: true, reflection: true, parentClass: 'header-svgs'}); + new cre8bit().create('ghost', {colour: 'pink', size: getSize(4), flip: true, reflection: true, parentClass: 'header-svgs'}); + new cre8bit().create('ghost', {size: getSize(5), flip: true, reflection: true, parentClass: 'header-svgs'}); + new cre8bit().create('ghost', {colour: 'orange', size: getSize(6), flip: true, reflection: true, parentClass: 'header-svgs'}); + // Colour + new cre8bit().create('mario', {size: getSize(4), parentClass: 'mario'}); + new cre8bit().create('mario', {size: getSize(4), colour: 'green', parentClass: 'luigi'}); + // Animating + new cre8bit().create('space invader', {size: getSize(12), animate: true, parentClass: 'animating-svg'}); + // Reflections + new cre8bit().create('ufo', {size: getSize(9), reflection: true, wrapperClass: 'ufo-wrap', parentClass: 'reflection-svg'}); +}; \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..fcc70d4 --- /dev/null +++ b/styles.css @@ -0,0 +1,404 @@ +* { + box-sizing: border-box; + font-family: 'Play', sans-serif; + margin: 0; + padding: 0; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} +:root { + --border: solid 1px #888; + --dark-bg: #222; + --code-blue: #72bfff; + --code-green: #9df982; + --code-purple: #dd66ff; + --code-red: #ff5c5c; + --code-yellow: #ffd000; + --font-colour: #181818; + --light-bg: #eaecef; + --primary-colour: #6461ff; + --secondary-colour: #ff6461; + --tertiary-colour: #61ff64; +} +html, body { + min-height: 100%; +} +html { + background: #ccc; + -webkit-text-size-adjust: 100%; +} +body { + background: white; + color: var(--font-colour); + margin: 0 auto; + max-width: 1920px; +} +.flex { + display: flex; +} +.column { + align-items: center; + flex-direction: column; +} +nav { + background: white; + border-bottom: solid 1px var(--primary-colour); + height: 53px; + max-width: 1920px; + padding: 12px 0 10px; + position: fixed; + width: 100%; + z-index: 1; +} +.logo { + height: 31px; + width: 31px; +} +.nav-links { + align-items: flex-end; + margin-left: auto; + padding-bottom: 10px; +} +ul { + list-style-type: none; +} +.nav-links li:not(:has(span)) { + padding: 0 17px; +} +.nav-links li:has(.btn) { + padding: 0; +} +.nav-links a { + font-size: 1.2rem; + padding: 12px 0; +} +a { + color: var(--primary-colour); + font-weight: bold; + text-decoration: none; +} +a:hover { + color: var(--secondary-colour); +} +a.btn { + background: var(--primary-colour); + color: white; + padding: 12px 20px; +} +a.btn:hover { + background: var(--secondary-colour); +} +header { + padding-bottom: 10px; + padding-top: 75px; +} +header, +footer { + background: var(--dark-bg); + color: white; +} +h1 { + font-size: 3rem; + margin-bottom: 2rem; +} +h2 { + display: block; + font-size: 1.75rem; +} +h2 span { + color: var(--secondary-colour); + font-size: 1.5rem; +} +p { + font-size: 1.125rem; + line-height: 1.25; +} +p + p { + margin-top: 1rem; +} +.half-col { + padding: 0 3px; +} +.container { + display: flex; + margin: 0 auto; + max-width: 1260px; + padding-left: 12px; + padding-right: 12px; + width: 100%; +} +.block-padding { + padding-bottom: 30px; + padding-top: 30px; + padding-block: 30px; +} +.header-text { + text-wrap: balance; +} +.header-svgs svg + svg { + margin-left: 12px; +} +.ide { + background: var(--dark-bg); + border-radius: 5px; + color: white; + overflow: hidden; +} +.title-bar { + align-items: center; + border-bottom: var(--border); + padding: 10px 20px; +} +.controls { + margin-right: 20px; +} +.dot { + background: var(--code-red); + border-radius: 50%; + height: 10px; + width: 10px; +} +.dot + .dot { + margin-left: 10px; +} +.minimise { + background: var(--code-yellow); +} +.fullscreen { + background: var(--code-green); +} +.code-area { + overflow: auto; + padding: 20px; +} +code { + display: block; + font-family: 'Source Code Pro', monospace; + line-height: 1.4; +} +.new { + color: var(--code-purple); +} +.method { + color: var(--code-blue); +} +.string { + color: var(--code-green); +} +.key, .var { + color: var(--code-red); +} +.number, +.boolean { + color: var(--code-yellow); +} +.colours, +.reflections { + background: var(--light-bg); +} +.colours div + div { + margin-left: 50px; +} +article p { + text-align: center; + text-wrap: balance; +} +.colour-svgs, +.animating-svg, +.reflection-svg { + padding: 30px 0 ; +} +.svg-wrapper svg { + order: 1; +} +.svg-wrapper p { + background: white; + border-radius: 5px; + color: var(--dark-bg); + font-size: 1rem; + margin-top: 10px; + min-width: 100px; + order: 2; + padding: 4px 10px; + text-align: center; +} +.animating-svg p { + background: var(--light-bg); +} +.ufo-wrap { + background: var(--dark-bg); + padding: 50px 70px; +} +footer div { + align-items: flex-end; +} +footer p { + font-size: 1rem; +} +.footer-content { + padding-bottom: 30px; + padding-top: 30px; + padding-block: 30px; +} +.footer-links a { + color: var(--tertiary-colour); +} + +@media (min-width: 360px) { + .header-svgs svg + svg { + margin-left: 20px; + } +} +@media (min-width: 768px) { + nav { + height: 85px; + } + .logo { + height: 62px; + width: 62px; + } + .menu-icon { + display: none; + } + .nav-links li + li { + margin-left: 20px; + } + .active { + color: var(--tertiary-colour); + padding: 0 5px; + } + header { + padding-top: 125px; + } + h2 { + font-size: 2.5rem; + } + a.btn { + border-radius: 10px; + padding-bottom: 10px; + padding-top: 10px; + } + .container { + padding-left: 20px; + padding-right: 20px; + } + .header-text { + width: 50%; + } + .header-svgs { + margin-left: auto; + } + .header-svgs svg + svg { + margin-left: 30px; + } + .half-col { + padding-left: 10px; + padding-right: 10px; + width: 50%; + } + .block-padding { + padding-bottom: 50px; + padding-top: 50px; + padding-block: 50px; + } + .colours div + div { + margin-left: 100px; + } + footer img { + margin-right: 20px; + } + .footer-links { + margin-left: auto; + } + .footer-links li + li { + margin-left: 30px; + } +} +@media (min-width: 960px) { + .container { + padding-left: 30px; + padding-right: 30px; + } + .header-text { + width: 40%; + } + .half-col { + padding-left: 30px; + padding-right: 30px; + } + p { + font-size: 1.375rem; + } + .code-area { + padding-left: 40px; + padding-right: 40px; + } +} +@media (min-width: 768px) and (max-width: 959px) { + .nav-links a { + font-size: 1.125rem; + } +} +@media (max-width: 767px) { + .menu-icon { + margin-left: auto; + } + .nav-links { + display: none; + flex-direction: column; + left: 0; + position: absolute; + top: 53px; + width: 100%; + } + .nav-links.show { + display: flex; + } + .nav-links li { + background: white; + width: 100%; + } + .nav-links li:not(:has(.btn)) { + padding-left: 20px; + padding-right: 20px; + } + .nav-links li + li { + border-top: solid 1px var(--primary-colour); + } + .nav-links a { + display: block; + width: 100%; + } + .active { + display: none; + } + header { + padding-left: 12px; + padding-right: 12px; + } + .hero-area, + .intro { + flex-direction: column; + } + .header-svgs { + margin: 0 auto; + } + .header-text, + .half-col:first-child { + margin-bottom: 30px; + } + .footer-content, + .footer-links { + align-items: center; + flex-direction: column; + } + .footer-logo { + margin-bottom: 20px; + } + .footer-links { + margin-top: 20px; + } + .footer-links li +li { + margin-top: 1rem; + } +} \ No newline at end of file