fruta 0.0.1

package/src/core/game/scene.js

@@ -0,0 +1,29 @@
+/**
+ * @description
+   This is the scene file, where the canvases are created
+   and properties are assigned to them.
+ */
+import { consoleStyle } from '../utils/logStyle'
+
+export default class Scene {
+  constructor(config) {
+    this.config = config
+  }
+
+  createScene = () => {
+    /**
+     * @TODO
+     * Refactoring the code
+     * Implement more configurations for the canvas
+     */
+    const canvas = document.createElement('canvas')
+    canvas.setAttribute('id', this.config.id)
+
+    canvas.width = this.config.w
+    canvas.height = this.config.h
+
+    document.body.appendChild(canvas)
+
+    consoleStyle("LET'S DO IT BABY!")
+  }
+}

package/src/core/game/tick.js

@@ -0,0 +1,42 @@
+/**
+ * @description
+  The Tick class will be responsible for keeping track of the game time. 
+  It will also have a specific method for rendering, which can be used to
+  render elements in real-time.
+
+  To accomplish this, we will use callbacks so that the user can choose which 
+  things will be updated and which ones will not be updated.
+
+  (This is still subject to discussion.)
+ */
+
+export default class Tick {
+  constructor() {
+    this.tick = 0
+    this.lastFrameTick = Date.now()
+    this.updateCallback = null
+    this.run()
+  }
+
+  run = () => {
+    const newTime = Date.now()
+    this.tick = this.tick += (newTime - this.lastFrameTick) / 1000
+    this.lastFrameTick = newTime
+
+    this.onRenderFunctionality()
+
+    requestAnimationFrame(this.run)
+  }
+
+  /* Setters/Getters  */
+  OnRender = (callback) => {
+    this.updateCallback = callback
+  }
+
+  /* functionalities here */
+  onRenderFunctionality = () => {
+    if (typeof this.updateCallback === 'function') {
+      this.updateCallback(this.tick)
+    }
+  }
+}

package/src/core/utils/logStyle.js

@@ -0,0 +1,8 @@
+const consoleStyle = (message) => {
+  const style =
+    'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) , 15px 15px 0 rgb(2,135,206) , 18px 18px 0 rgb(4,77,145) , 21px 21px 0 rgb(42,21,113)'
+
+  return console.log(`%c${message}`, style)
+}
+
+export { consoleStyle }

package/webpack.config.js

@@ -0,0 +1,47 @@
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const isProduction = process.env.NODE_ENV == 'production'
+
+const config = {
+  entry: './src/core/fruta.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devServer: {
+    open: true,
+    host: 'localhost',
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+    }),
+
+    // Add your plugins here
+    // Learn more about plugins from https://webpack.js.org/configuration/plugins/
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/i,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
+        type: 'asset',
+      },
+
+      // Add your rules for custom modules here
+      // Learn more about loaders from https://webpack.js.org/loaders/
+    ],
+  },
+}
+
+module.exports = () => {
+  if (isProduction) {
+    config.mode = 'production'
+  } else {
+    config.mode = 'development'
+  }
+  return config
+}