fruta 0.0.4 → 0.1.0

package/src/core/create/shapeCreatorMixin.js

@@ -1,656 +0,0 @@
-/**
- * @description - This file will be the mixin for all the shape and yeah, it includes images.
- * Maybe you're wonder why we are taking everything about Shapes Creation from Canvas Doc and
- * why no just take the doc and do it by youself.
- *
- * The main reason is because I want to create a nested shape creation and a suggar syntax
- * for new devs.
- *
- * But please, feel free to improve it :).
- */
-
-export const shapesCreatorMixin = {
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle
-   * @description property of the Canvas 2D API specifies the color, gradient,
-   * or pattern to use inside shapes. The default style is #000 (black
-   *
-   * @param {Color} style - CanvasGradient | CanvasPattern
-   *
-   * @example - "red" | rgb(25,25,25)
-   *
-   * @return ShapeCreator class
-   */
-  fillStyleShape(style) {
-    this.context.fillStyle = style
-    return this
-  },
-
-  /**
-   * @alert
-   * I think we should separe this methods, but I'm no pretty sure
-   *
-   * @param {Array<numbers>} fill - create a rectangle by x, y, width, height
-   * @param {Array<numbers>} stroke  draw a stroke rectangle x, y, width, height
-   * @param {Array<numbers>} clear - erases the pixels in a rectangular area by setting them to transparent black. side by x, y, width, height
-   *
-   * @return ShapeCreator class
-   */
-  drawRectShape(
-    clear = [0, 0, 0, 0],
-    fill = [0, 0, 0, 0],
-    stroke = [0, 0, 0, 0]
-  ) {
-    this.context.clearRect(...clear)
-    this.context.fillRect(...fill)
-    this.context.strokeRect(...stroke)
-
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect
-   * @description method of the Canvas 2D API adds a rounded rectangle to the current path.
-   *
-   * @param {*} x - x-axis coordinate of the rectangle's starting point, in pixels.
-   * @param {*} y - y-axis coordinate of the rectangle's starting point, in pixels.
-   * @param {*} width - rectangle's width. Positive values are to the right, and negative to the left.
-   * @param {*} height - rectangle's height. Positive values are down, and negative are up.
-   * @param {Array<number>} radius position by index in array Ex. top-left | top-right | bottom-right | bottom-left
-   *
-   * @return ShapeCreator class
-   */
-  roundRectShape(x, y, width, height, radius) {
-    this.context.roundRect(x, y, width, height, radius)
-    return this
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath
-   * @description method of the Canvas 2D API starts a new path by emptying the list of
-   * sub-paths. Call this method when you want to create a new path.
-   *
-   * @return ShapeCreator class
-   */
-  startShape() {
-    this.context.beginPath()
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke
-   * @description  method of the Canvas 2D API strokes (outlines) the current or given
-   * path with the current stroke style
-   *
-   * @param {Path2D} path - A Path2D path to fill.
-   *
-   * @return ShapeCreator class
-   */
-  strokeShape(...path) {
-    this.context.stroke(...path)
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/moveTo
-   * @description  method of the Canvas 2D API begins a new sub-path
-   * at the point specified by the given (x, y) coordinates
-   *
-   * @param {number} x - new horizontal draw position
-   * @param {number} y - new vertical draw position
-   *
-   * @return ShapeCreator class
-   */
-  moveTo(x, y) {
-    this.context.moveTo(x, y)
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo
-   * @description method lineTo(), part of the Canvas 2D API,
-   * adds a straight line to the current sub-path by connecting
-   * the sub-path's last point to the specified (x, y) coordinates
-   *
-   * @param {number} x  horizontal line position
-   * @param {number} y  vertical line position
-   *
-   * @return ShapeCreator class
-   */
-  lineTo(x, y) {
-    this.context.lineTo(x, y)
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill
-   * @description - method of the Canvas 2D API fills the current or given path with the current
-   *
-   * @param {string} region algorithm by which to determine if a point is inside or outside the filling region. Possible values:
-   * nonzero | evenodd.
-   *
-   * @return ShapeCreator class
-   */
-  fillShape(...param) {
-    this.context.fill(...param)
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc
-   * @description method of the Canvas 2D API adds a circular arc to the current sub-path.
-   *
-   * @param {number} x - horizontal line position
-   * @param {number} y - vertical line position
-   * @param {number} radius - arc radius
-   * @param {number} startAngle - starting point of the angle.
-   * @param {number} endAngle - ending point of the angle.
-   * @param {boolean} counterclockwise - flip draw angle
-   *
-   * @return ShapeCreator class
-   */
-  arcShape(x, y, radius, startAngle, endAngle, counterclockwise) {
-    this.context.arc(x, y, radius, startAngle, endAngle, counterclockwise)
-    return this
-  },
-  /**
-   * @alert
-   * This can we broke in Firefox
-   *
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/quadraticCurveTo
-   * @description  method of the Canvas 2D API adds a quadratic
-   * Bézier curve to the current sub-path. It requires two points:
-   * the first one is a control point and the second one is the end point.
-   * The starting point is the latest point in the current path,
-   * which can be changed using moveTo() before creating the quadratic
-   * Bézier curve.
-   *
-   * @param {number} cpx - x-axis coordinate of the control point
-   * @param {number} cpy - y-axis coordinate of the control point
-   * @param {number} x - x-axis coordinate of the end point
-   * @param {number} y - y-axis coordinate of the end point
-   *
-   * @return ShapeCreator class
-   */
-  quadraticCurveTo(cpx, cpy, x, y) {
-    this.context.quadraticCurveTo(cpx, cpy, x, y)
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/bezierCurveTo
-   * @description method of the Canvas 2D API adds a cubic Bézier
-   * curve to the current sub-path. It requires three points: the
-   * first two are control points and the third one is the end point.
-   * The starting point is the latest point in the current path,
-   * which can be changed using moveTo() before creating the Bézier curve
-   *
-   * @param {*} cp1x - x-axis coordinate of the first control point
-   * @param {*} cp1y - y-axis coordinate of the first control point
-   * @param {*} cp2x - x-axis coordinate of the second control point
-   * @param {*} cp2y - y-axis coordinate of the second control point
-   * @param {*} x - x-axis coordinate of the end point
-   * @param {*} y - y-axis coordinate of the end point
-   *
-   * @return ShapeCreator class
-   */
-  bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
-    this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-    return this
-  },
-
-  // All the code below need test
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arcTo
-   * @description  method of the Canvas 2D API adds a circular arc to the current sub-path,
-   * using the given control points and radius. The arc is automatically connected to the
-   * path's latest point with a straight line, if necessary for the specified parameters
-   *
-   * @param {number} x1 x-axis coordinate of the first control point
-   * @param {number} y1 y-axis coordinate of the first control point
-   * @param {number} x2 x-axis coordinate of the second control point
-   * @param {number} y2 y-axis coordinate of the second control point
-   * @param {number} radius arc's radius. Must be non-negative
-   *
-   * @return ShapeCreator class
-   */
-  arcTo(x1, y1, x2, y2, radius) {
-    this.context.arcTo(x1, y1, x2, y2, radius)
-    return this
-  },
-
-  /**
-   * @todo - I think we can improve this - we need to figure out how to
-   *
-   * @description The Path2D() constructor returns a newly instantiated Path2D object,
-   * optionally with another path as an argument (creates a copy), or optionally with
-   * a string consisting of SVG path data.
-   *
-   * @param  {...any} args (new Path2D, domMatrix)
-   *
-   * @return Path2D Class
-   */
-  path2DShape(...args) {
-    return new Path2D(...args)
-  },
-
-  /**
-   * @todo - I think we can improve this - we need to figure out how to
-   *
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrix
-   * @description The DOMMatrix interface represents 4×4 matrices, suitable for 2D and 3D operations
-   * including rotation and translation. It is a mutable version of the DOMMatrixReadOnly interface.
-   *
-   * @return DOMMatrix Class
-   */
-  domMatrixShape() {
-    return new DOMMatrix()
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/Path2D/addPath
-   * @description  method of the Canvas 2D API adds one Path2D object to another Path2D object.
-   *
-   * @param {*} callerPath  path used to call addPatch
-   * @param  {...any} args  config Path and domMatrix
-   *
-   * @return Path2D class
-   */
-  addPathShape(callerPath, ...args) {
-    return callerPath.addPath(...args)
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/ellipse
-   * @description method of the Canvas 2D API adds an elliptical arc to the current sub-path.
-   *
-   * @param {number} x  horizontal position
-   * @param {number} y  vertical position
-   * @param {number} radiusX  ellipse's major-axis radius. Must be non-negative
-   * @param {number} radiusY  ellipse's minor-axis radius. Must be non-negative
-   * @param {number} rotation  rotation of the ellipse, expressed in radians
-   * @param {number} startAngle  eccentric angle at which the ellipse starts, measured clockwise from
-   * the positive x-axis and expressed in radians
-   * @param {number} endAngle  same ↑
-   * @param {number} counterclockwise An optional boolean value which, if true, draws the ellipse counterclockwise
-   * (anticlockwise). The default value is false (clockwise)
-   *
-   * @example - (100, 100, 50, 75, Math.PI / 4, 0, 2 * Math.PI)
-   *
-   * @return ShapeCreator class
-   */
-  ellipseShape(
-    x,
-    y,
-    radiusX,
-    radiusY,
-    rotation,
-    startAngle,
-    endAngle,
-    counterclockwise
-  ) {
-    this.context.ellipse(
-      x,
-      y,
-      radiusX,
-      radiusY,
-      rotation,
-      startAngle,
-      endAngle,
-      counterclockwise
-    )
-
-    return this
-  },
-  /**
-   * @message You can use addColorStop here
-   *
-   * @doc https://www.w3schools.com/tags/canvas_addcolorstop.asp
-   * @description Define a gradient from black to white and use it to fill a rectangle:
-   *
-   * @param  {...number} rgba red,green,blue,alpha colors
-   *
-   * @example (r,g,b,a) -> (255,255,255,1)
-   *
-   * @return createLinearGradient
-   */
-  createLinearGradient(...rgba) {
-    return this.context.createLinearGradient(...rgba)
-  },
-
-  /**
-   * @message You can use addColorStop here
-   *
-   * @doc https://www.w3schools.com/tags/canvas_createradialgradient.asp
-   * @description Define a radial gradient
-   *
-   * @param  {...number} position
-   *
-   * @example (x0, y0, r0, x1, y1, r1a) -> (75, 50, 5, 90, 60, 100)
-   *
-   * @return createRadialGradient
-   */
-  createRadialGradient(...position) {
-    return this.context.createRadialGradient(...position)
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_addcolorstop.asp
-   * @description Define a gradient from black to white and use it to fill a rectangle:
-   *
-   * @param {createLinearGradient} gradient
-   * @param {Array<{color: string<color>}} stops
-   *
-   * @example (gradient, {color:"red"})
-   *
-   * @return ShapeCreator Class
-   */
-  addColorStop(gradient, stops) {
-    for (let i = 0; i < stops.length; i++) {
-      const element = stops[i]
-      gradient.addColorStop(i, element.color)
-    }
-
-    return this
-  },
-
-  /**
-   * @doc  https://www.w3schools.com/tags/canvas_createpattern.asp
-   * @description create a patter by an image
-   *
-   * @param {Image} img new Image() class
-   * @param {*} repeatType type of repetition
-   *
-   * @example (new Image(), repeat | repeat-x | repeat-y | no-repeat)
-   *
-   * @retunr ShapeCreator Class
-   */
-  createPattern(img, repeatType = 'repeat') {
-    this.context.createPattern(img, repeatType)
-
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_linecap.asp
-   * @description Draw a line with rounded end caps
-   *
-   * @param {string} style line style
-   *
-   * @example butt|round|square
-   *
-   * @return ShapeCreator Class
-   */
-  lineCapShape(style) {
-    this.context.lineCap = style
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_linejoin.asp
-   * @description Create a rounded corner where the two lines meet
-   *
-   * @param {string} style line style
-   *
-   * @example bevel|round|miter
-   *
-   * @return ShapeCreator Class
-   */
-  lineJoinShape(style) {
-    this.context.lineJoin = style
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth
-   * @description property of the Canvas 2D API sets the thickness of lines
-   *
-   * @param {number} width - define the thickness of lines
-   *
-   * @retun ShapeCreator class
-   */
-  lineWidthShape(width) {
-    this.context.lineWidth = width
-
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_miterlimit.asp
-   * @description Draw lines with the maximum miter length of 5
-   *
-   * @param {number} limit define the limit
-   *
-   * @retun ShapeCreator class
-   */
-  miterLimitShape(limit) {
-    this.context.miterLimit = limit
-
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_shadowblur.asp
-   * @description Draw a red rectangle with a black shadow, with blur level of 20
-   *
-   * @param {number} size define the blur size
-   *
-   * @retun ShapeCreator class
-   */
-  shadowBlurOfShape(size) {
-    this.context.shadowBlur = size
-
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_shadowcolor.asp
-   * @description Draw a red rectangle with a black shadow:
-   *
-   * @param {string} style shadow color
-   *
-   * @return ShapeCreator class
-   */
-  shadowColorOfShape(style) {
-    this.context.shadowColor = style
-
-    return this
-  },
-
-  shadowOffSetXY(x, y) {
-    this.context.shadowOffsetX = x
-    this.context.shadowOffsetX = y
-
-    return this
-  },
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle
-   * @description property of the Canvas 2D API specifies the color, gradient, or pattern
-   * to use for the strokes (outlines) around shapes. The default is #000 (black)
-   *
-   *  @param {Color | CanvasGradient | CanvasPattern} style - property to specify color,
-   * gradient or pattern
-   *
-   * @return ShapeCreator class
-   */
-  strokeStyle(style) {
-    this.context.strokeStyle = style
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_scale.asp
-   * @description change the size of shape
-   *
-   * @param {number} x horizontal scale
-   * @param {number} y vertical scale
-   *
-   * @return ShapeCreator class
-   */
-  scaleShape(x, y) {
-    this.context.scale(x, y)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_rotate.asp
-   * @description Rotate the rectangle
-   *
-   * @param {number} angle the angle to rotate
-   *
-   * @return ShapeCreator class
-   */
-  rotateShape(angle) {
-    this.context.rotate(angle)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_translate.asp
-   * @description change the position of shape
-   *
-   * @param {number} x horizontal trasnform
-   * @param {number} y vertical trasnform
-   *
-   * @return ShapeCreator class
-   */
-  translateShape(x, y) {
-    this.context.translate(x, y)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_transform.asp
-   * @description method scales, rotates, moves, and skews the context
-   *
-   * @param {Array<number[posA, posB, posC, posD, posE, posF]>} pos
-   *
-   * @return ShapeCreator class
-   */
-  transformShape(...dots) {
-    this.context.transform(...dots)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_transform.asp
-   * @description method scales, rotates, moves, and skews the context
-   *
-   * @param {Array<number[posA, posB, posC, posD, posE, posF]>} pos
-   *
-   * @return ShapeCreator Class
-   */
-  setTransformShape(x, y) {
-    this.context.setTransform(x, y)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_globalalpha.asp
-   * @description change the global alpha
-   *
-   * @param {number} alpha change the global alpha
-   *
-   * @return ShapeCreator Class
-   */
-  globalAlpha(alpha) {
-    this.context.globalAlpha(alpha)
-    return this
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
-   * @description property sets or returns how a source are drawn over a destination.
-   *
-   * @param {string} composition
-   *
-   * @example source-over | source-atop | source-in | source-out | destination-over |
-   * destination-atop | destination-in | destination-out | lighter | copy | xor
-   *
-   * @return globalCompositeOperation() method
-   */
-  globalCompositeOperation(composition) {
-    return (this.context.globalCompositeOperation = composition)
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clip
-   * @description method of the Canvas 2D API turns the current or given path into the
-   * current clipping region.
-   *
-   * @return clip
-   */
-  clipShape() {
-    return this.context.clip()
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/shadowColor
-   * @description property of the Canvas 2D API specifies the color of shadows.
-   *
-   * @param {<Color>} color
-   *
-   * @return  ShapeCreator Class
-   */
-  shadowColor(color) {
-    this.context.shadowColor = color
-    return this
-  },
-}
-
-export const imageCreatorMixin = {
-  /**
-   * @param { src: string, img: [sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight] } config
-   * Configuration could be long or short, but right now we are showing as example the long
-   * way. You could try adding just: dx, dy, dWidth, dHeight or dx, dy (for the img property)
-   *
-   * @example - {src: imgPath, img: [sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight]}
-   *
-   * @return ShapeCreator Class
-   */
-  createImage(config) {
-    const img = new Image()
-    img.src = config.src
-    this.context.drawImage(img, ...config.img)
-
-    return this
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createImageData
-   * @description method of the Canvas 2D API creates a new, blank ImageData object with the
-   * specified dimensions. All of the pixels in the new object are transparent black
-   *
-   * @param  {object<width | height | settings | ImageData>} imgConfig
-   *
-   * @example width | height | settings -> object{colorSpace} or existing ImageData
-   *
-   * @return createImageData method
-   */
-  createImageData(...imgConfig) {
-    return this.context.createImageData(...imgConfig)
-  },
-
-  /**
-   * @doc https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
-   * @description method getImageData() of the Canvas 2D API returns an ImageData object
-   * representing the underlying pixel data for a specified portion of the canvas.
-   *
-   * @param  {object<sx | xy | sw | sh | setting>} imgConfig
-   *
-   * @example sx | sy | sw | sh or settings -> object<colorSpace>
-   *
-   * @return ShapeCreator Class
-   */
-  getImgData(...imgConfig) {
-    return this.context.getImageData(...imgConfig)
-  },
-
-  /**
-   * @doc https://www.w3schools.com/tags/canvas_putimagedata.asp
-   * @description  method puts the image data (from a specified ImageData object) back onto the canvas
-   *
-   * @param {object<imgData> } imgData The ImageData object to put on the context.
-   * @param  {...} pos xPos and yPos
-   *
-   * @example {imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight}
-   * @return ShapeCreator Class
-   */
-  putImageData(imgData, ...pos) {
-    this.context.putImageData(imgData, ...pos)
-
-    return this
-  },
-}

package/src/core/fruta.js

@@ -1,22 +0,0 @@
-import Game from './game/game'
-import ShapeCreator from './create/_shapeCreator.js'
-import FrontCreator from './create/_fontCreator'
-import SaveRestore from './create/_saveOrRestore'
-
-/**
- * @param {object<config>} initConfig
- *
- * @example Game | ShapeCreator | FontCreator | SaveRestore
- * @return Methods
- */
-const Fruta = (initConfig) => {
-  const { id } = initConfig.scene
-  return {
-    Game: new Game(initConfig),
-    ShapeCreator: new ShapeCreator(id),
-    FontCreator: new FrontCreator(id),
-    SaveRestore: new SaveRestore(id),
-  }
-}
-
-export default Fruta

package/src/core/game/game.js

@@ -1,30 +0,0 @@
-/**
- * @description
- * Game State Machine, where magic happens.
- *
- * @author
- * Jhornan Colina (karttofer)
- */
-
-import Scene from './scene'
-import Tick from './tick'
-
-class Game {
-  constructor(config) {
-    this.scene = config.scene
-    this.tick = new Tick()
-
-    this.afterMount()
-  }
-
-  afterMount() {
-    /**
-     * @TODO
-     * Create a callback to allow user to add functionalities
-     * after scene is created
-     */
-    new Scene(this.scene).createScene()
-  }
-}
-
-export default Game