diff --git a/cre8bit-reflection.js b/cre8bit-reflection.js deleted file mode 100644 index 32ec29d..0000000 --- a/cre8bit-reflection.js +++ /dev/null @@ -1,469 +0,0 @@ -export default class Cre8bit { - #svgns = 'http://www.w3.org/2000/svg'; - #id = null; - #characterName = ''; - #useAnimatePoints = false; - #animateInterval = 0; - // default options - #container = 'body'; - #colour = '#333'; - #size = 5; - #flip = null; - #outlineWidth = 0; - #reflection = false; - - #characters = { - 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]]] - } - }, - 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, - 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.#id = `c8b-${Math.floor(Math.random() * Math.floor(Math.random() * Date.now()))}`; - } - - #characterPath() { - let charName = this.#characterName; - - switch (charName) { - case 'space invader': - return this.#characters['spaceInvader']; - case 'poke ball': - return this.#characters['pokeBall']; - default: - if (charName in this.#characters) { - return this.#characters[charName]; - } else { - console.log('Character not available'); - } - break; - } - } - - #createPath(points) { - let makePath = ''; - for (const [i, [x,y]] of points.entries()) { - if (i === 0) { - continue; - } - makePath += `L ${(x * this.#size) + this.#outlineWidth} ${(y * this.#size) + this.#outlineWidth} `; - } - makePath += 'z'; - - return makePath; - } - - #createSvgElement(name, tag) { - return document.createElementNS(name, tag); - } - - #makeSVG(svg, charPath) { - const newGroup = this.#createSvgElement(this.#svgns, 'g'); - const pathPoints = this.#useAnimatePoints === false ? charPath.points : charPath.animatePoints; - let newPath = null; - - newGroup.setAttribute('fill', this.#colour); - if(this.#outlineWidth === 0.5) { - newGroup.setAttribute('stroke', 'black'); - newGroup.setAttribute('stroke-width', this.#outlineWidth); - } - - if (charPath.mask) { - const newDefs = this.#createSvgElement(this.#svgns, 'defs'); - const newMask = this.#createSvgElement(this.#svgns, 'mask'); - const wholeMask = this.#createSvgElement(this.#svgns, 'rect'); - - newMask.setAttribute('id', `${this.#id}-mask`); - - wholeMask.setAttribute('x', 0); - wholeMask.setAttribute('y', 0); - wholeMask.setAttribute('width', (this.#size * charPath.columns) + (this.#outlineWidth * 2)); - wholeMask.setAttribute('height', (this.#size * charPath.rows) + (this.#outlineWidth * 2)); - wholeMask.setAttribute('fill', 'white'); - - newMask.appendChild(wholeMask); - - for (const [x,y] of charPath.mask.values()) { - const newBlock = this.#createSvgElement(this.#svgns, 'rect'); - newBlock.setAttribute('x', (x * this.#size) + this.#outlineWidth); - newBlock.setAttribute('y', (y * this.#size) + this.#outlineWidth); - newBlock.setAttribute('width', this.#size); - newBlock.setAttribute('height', this.#size); - newBlock.setAttribute('fill', 'black'); - - newMask.appendChild(newBlock); - } - newDefs.appendChild(newMask); - svg.appendChild(newDefs); - } - - svg.appendChild(newGroup); - - for (const points of pathPoints) { - newPath = this.#createSvgElement(this.#svgns, 'path'); - newPath.setAttribute('d', `M ${(points[0][0] * this.#size) + this.#outlineWidth} ${(points[0][1] * this.#size) + this.#outlineWidth} ${this.#createPath(points)}`); - newGroup.appendChild(newPath); - } - - charPath.mask && newPath.setAttribute('mask', `url(#${this.#id}-mask)`); - - if (charPath.extraPoints) { - for (const [colour, pointsArrays] of Object.entries(charPath.extraPoints)) { - for (const points of pointsArrays) { - const extraPath = this.#createSvgElement(this.#svgns, 'path'); - extraPath.setAttribute('d', `M ${(points[0][0] * this.#size) + this.#outlineWidth} ${(points[0][1] * this.#size) + this.#outlineWidth} ${this.#createPath(points)}`); - extraPath.setAttribute('fill', colour); - - newGroup.appendChild(extraPath); - } - } - } - - 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)) * editMultiplyer}`); - - this.#makeSVG(svgEdit, charPath); - - this.#flip && this.setFlip(this.#flip); - } - - #animate() { - this.#animateInterval = setInterval(() => { - this.#useAnimatePoints = !this.#useAnimatePoints; - this.#editSVG(); - }, 500); - } - - stop() { - if (this.#animateInterval) { - clearInterval(this.#animateInterval); - } - } - /** - * @param {string} className - */ - set #parentClass(className) { - this.#container = `.${className}`; - } - /** - * @param {string} colour - * @param {boolean} [option] - */ - setColour(colour, option) { - if (CSS.supports('color', colour)) { - this.#colour = colour; - - !option && this.#editSVG(); - } else { - console.log(`${colour} is not a valid CSS colour`); - } - - return this; - } - /** - * @param {number} size - * @param {boolean} [option] - */ - setSize(size, option) { - if (typeof size === 'number') { - if (size > 71) { - console.log(`Max size is 70, ${size} was provided`); - size = 70; - } - this.#size = size; - - !option && this.#editSVG(); - } else { - console.log(`${size} is not a number type`); - } - - return this; - } - /** - * @param {string} direction - horizontally | vertically - */ - 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, string flip, boolean animate, string parentClass, string wrapperClass, boolean outline - */ - create(character, options) { - this.#characterName = character.toLowerCase(); - const newCharPath = this.#characterPath(); - const svgElem = this.#createSvgElement(this.#svgns, 'svg'); - let shape = null; - let child = null; - - this.#colour = newCharPath.colour; - - svgElem.id = this.#id; - 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)) * multiplyer}`); - - shape = this.#makeSVG(svgElem, newCharPath); - - if (options && options.wrapperClass) { - child = document.createElement('div'); - child.className = options.wrapperClass; - - child.appendChild(shape); - } else { - child = shape; - } - - document.querySelector(this.#container).appendChild(child); - - if (options) { - options.flip && this.setFlip(options.flip); - - if (options.animate) { - this.#useAnimatePoints = true; - this.#animate(); - } - } - - return this; - } -} diff --git a/cre8bit.min.js b/cre8bit.min.js index 10ca483..67f5210 100644 --- a/cre8bit.min.js +++ b/cre8bit.min.js @@ -1 +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 +export default class Cre8bit{#aV='http://www.w3.org/2000/svg';#bV=null;#cV='';#dV=false;#eV=0;#fV='body';#gV='#333';#hV=5;#iV=false;#jV=0;#kV=false;#lV={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.#bV=`c8b-${Math.floor(Math.random()*Math.floor(Math.random()*Date.now()))}`}#aF(){let aL=this.#cV;switch(aL){case 'space invader':return this.#lV['spaceInvader'];case 'poke ball':return this.#lV['pokeBall'];default:if(aL in this.#lV){return this.#lV[aL]} else{console.log('Character not available')}break}}#bF(points){let bL='';for(const [i,[x,y]] of points.entries()){if(i===0){continue}bL += `L ${(x*this.#hV) + this.#jV} ${(y*this.#hV) + this.#jV} `}bL += 'z';return bL}#cF(name,tag){return document.createElementNS(name,tag)}#dF(elem,values){for(const [v1,v2] of values){elem.setAttribute(v1,v2)}}#eF(svg,qC){const aC=this.#cF(this.#aV,'g');const bC=this.#dV===false?qC.points:qC.animatePoints;const cC=this.#jV;const dC=cC*2;let cL=null;this.#dF(aC,[['fill', this.#gV]]);if(cC===0.5){this.#dF(aC,[['stroke', 'black'],['stroke-width', cC]])}if(qC.mask){const eC=this.#cF(this.#aV,'defs');const fC=this.#cF(this.#aV,'mask');const gC=this.#cF(this.#aV,'rect');this.#dF(fC,[['id', `${this.#bV}-mask`]]);this.#dF(gC,[['x', 0],['y', 0],['width',(this.#hV*qC.columns) + dC],['height', (this.#hV*qC.rows) + dC],['fill', 'white']]);fC.appendChild(gC);for(const [x,y] of qC.mask.values()){const hC=this.#cF(this.#aV,'rect');this.#dF(hC,[['x',(x*this.#hV) + cC],['y', (y*this.#hV) + cC],['width', this.#hV],['height', this.#hV],['fill', 'black']]);fC.appendChild(hC)}eC.appendChild(fC);svg.appendChild(eC)}svg.appendChild(aC);for(const points of bC){cL=this.#cF(this.#aV,'path');this.#dF(cL,[['d', `M ${(points[0][0]*this.#hV) + cC} ${(points[0][1]*this.#hV) + cC} ${this.#bF(points)}`]]);aC.appendChild(cL)}qC.mask&&this.#dF(cL,[['mask', `url(#${this.#bV}-mask)`]]);if(qC.extraPoints){for(const [colour,pointsArrays] of Object.entries(qC.extraPoints)){for(const points of pointsArrays){const iC=this.#cF(this.#aV,'path');this.#dF(iC,[['d', `M ${(points[0][0]*this.#hV) + cC} ${(points[0][1]*this.#hV) + cC} ${this.#bF(points)}`],['fill', colour]]);aC.appendChild(iC)}}}if(this.#kV){const jC=aC.cloneNode(true);const kC=this.#cF(this.#aV,'defs');const lC=this.#cF(this.#aV,'mask');const mC=this.#cF(this.#aV,'rect');const nC=this.#cF(this.#aV,'linearGradient');const oC=this.#cF(this.#aV,'stop');const pC=this.#cF(this.#aV,'stop');this.#dF(lC,[['id', `${this.#bV}-ref-mask`]]);this.#dF(mC,[['x', 0],['y', 0],['width',(this.#hV*qC.columns) + dC],['height', (this.#hV*qC.rows) + dC],['fill', `url(#${this.#bV}-grad-mask)`]]);this.#dF(nC,[['id', `${this.#bV}-grad-mask`],['x1', '0'],['x2', '0'],['y1', '0'],['y2', '1']]);this.#dF(oC,[['offset', '0'],['stop-color', 'white']]);this.#dF(pC,[['offset', '1'],['stop-color', 'white']]);let dL=`0,-${((this.#aF().rows*this.#hV) + dC)*2}`;let eL='1,-1';let fL='0';let gL='0.3';if(this.#iV){dL=`-${((this.#aF().columns*this.#hV) + dC)},-${((this.#aF().rows*this.#hV) + dC)*2}`;eL='-1,-1'}this.#dF(oC,[['stop-opacity', fL]]);this.#dF(pC,[['stop-opacity', gL]]);this.#dF(jC,[['transform', `scale(${eL}) translate(${dL})`],['mask', `url(#${this.#bV}-ref-mask)`]]);lC.appendChild(mC);nC.appendChild(oC);nC.appendChild(pC);kC.appendChild(nC);kC.appendChild(lC);svg.appendChild(kC);svg.appendChild(jC)}return svg}#fF(){const qC=this.#aF();const rC=document.getElementById(this.#bV);const sC=this.#kV?2:1;rC.innerHTML='';rC.setAttributeNS(null,'width', `${(qC.columns*this.#hV) +(this.#jV*2)}`);rC.setAttributeNS(null,'height', `${((qC.rows*this.#hV) +(this.#jV*2))*sC}`);this.#eF(rC,qC);this.#iV&&this.setFlip(this.#iV)}#gF(){this.#eV=setInterval(()=>{this.#dV=!this.#dV;this.#fF()},500)}stop(){if(this.#eV){clearInterval(this.#eV)}}set #parentClass(className){this.#fV=`.${className}`}setColour(colour,option){if(CSS.supports('color',colour)){this.#gV=colour;!option&&this.#fF()} 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.#hV=size;!option&&this.#fF()} else{console.log(`${size} is not a number type`)}return this}setFlip(shouldFlip){if(shouldFlip){this.#dF(document.getElementById(this.#bV).querySelector('g'),[['transform', `scale(-1, 1) translate(-${(this.#aF().columns*this.#hV) +(this.#jV*2)}, 0)`]])} else{document.getElementById(this.#bV).querySelector('g').removeAttribute('transform')}if(this.#kV){this.#dF(document.getElementById(this.#bV).querySelector('g:last-of-type'),[['transform', `scale(-1,-1) translate(-${(this.#aF().columns*this.#hV) +(this.#jV*2)}, -${((this.#aF().rows*this.#hV) + (this.#jV*2))*2})`]])}this.#iV=shouldFlip;return this}create(character,options){this.#cV=character.toLowerCase();const tC=this.#aF();const uC=this.#cF(this.#aV,'svg');let hL=null;let iL=null;this.#gV=tC.colour;uC.id=this.#bV;uC.classList.add('cre8bit',this.#cV.replace(' ', '-'));if(options){options.flip&&(this.#iV=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.#jV=0.5);options.reflection&&(this.#kV=true)}const vC=options&&options.reflection?2:1;uC.setAttributeNS(null,'width', `${(tC.columns*this.#hV) +(this.#jV*2)}`);uC.setAttributeNS(null,'height', `${((tC.rows*this.#hV) +(this.#jV*2))*vC}`);hL=this.#eF(uC,tC);if(options&&options.wrapperClass){iL=document.createElement('div');iL.className=options.wrapperClass;iL.appendChild(hL)} else{iL=hL}document.querySelector(this.#fV).appendChild(iL);if(options){options.flip&&this.setFlip(options.flip);if(options.animate){this.#dV=true;this.#gF()}}return this}} \ No newline at end of file diff --git a/script.js b/script.js index f8141c5..e0e1c23 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,4 @@ -import cre8bit from './cre8bit-reflection.js' +import cre8bit from './cre8bit.min.js' const setVersionAndYear = async () => { const res = await fetch('https://api.github.com/repos/daveknights/cre8bit/tags');