Merge pull request #13 from ruben-salgado/develop

Configuración base

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "10"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-proposal-class-properties"]
+}

.gitignore

@@ -68,10 +68,13 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
+# Dotenv environment variables file
 .env
 .env.test
 
+# Backups
+*.bak
+
 # parcel-bundler cache (https://parceljs.org/)
 .cache
 
@@ -102,3 +105,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Files lock
+*-lock*

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "delorean",
+  "version": "1.0.0",
+  "description": "Dubijando a delorean con CSS",
+  "main": "src/app.mjs",
+  "scripts": {
+    "build": "npm run clean && webpack --mode=development --watch",
+    "buildpro": "npm run clean && webpack --mode=production",
+    "start": "webpack-cli serve --mode development",
+    "clean": "rimraf ./dist"
+  },
+  "author": "RSR",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.13.14",
+    "@babel/preset-env": "^7.13.12",
+    "@babel/preset-react": "^7.13.13",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.2.2",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^5.2.0",
+    "dat.gui": "^0.7.7",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "image-webpack-loader": "^7.0.1",
+    "mini-css-extract-plugin": "^1.4.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss-loader": "^5.2.0",
+    "pug": "^3.0.2",
+    "pug-loader": "https://github.com/pugjs/pug-loader/tarball/master",
+    "rimraf": "^3.0.2",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "uglify-js": "^3.13.3",
+    "uglifyjs-webpack-plugin": "^1.1.2",
+    "webpack": "^5.30.0",
+    "webpack-cli": "^4.6.0"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

src/app.mjs

@@ -0,0 +1,43 @@
+"use strict";
+
+import './styles/common.sass';
+
+import * as dat from 'dat.gui';
+
+const CONFIG = {
+  'rotate-x': 0,
+  'rotate-y': 0,
+}
+
+const BOUNDS = {
+  'rotate-x': [-360, 360, 1],
+  'rotate-y': [-360, 360, 1],
+}
+
+const CONTROLLER = new dat.GUI()
+
+const UPDATE = () => {
+  for (const KEY of Object.keys(CONFIG)) {
+    document.documentElement.style.setProperty(`--${KEY}`, CONFIG[KEY])
+  }
+}
+
+const digest = (CONFIG_OBJECT, BOUNDS_OBJECT, FOLDER) => {
+  for (const category in BOUNDS_OBJECT) {
+    if (Array.isArray(BOUNDS_OBJECT[category])) {
+      FOLDER.add(
+        CONFIG_OBJECT,
+        category,
+        BOUNDS_OBJECT[category][0],
+        BOUNDS_OBJECT[category][1],
+        BOUNDS_OBJECT[category][2] ? BOUNDS_OBJECT[category][2] : 1
+      ).onChange(UPDATE)
+    } else {
+      const NEW_FOLDER = FOLDER
+        ? FOLDER.addFolder(category)
+        : GUI.addFolder(category)
+      digest(CONFIG_OBJECT[category], BOUNDS_OBJECT[category], NEW_FOLDER)
+    }
+  }
+}
+digest(CONFIG, BOUNDS, CONTROLLER)

src/styles/common.sass

@@ -0,0 +1,10 @@
+*
+  box-sizing: border-box
+
+html
+  height: 100%
+  display: flex
+
+body
+  background: #f2f2f2
+  margin: auto

src/styles/tools/_colors.sass

@@ -0,0 +1,4 @@
+@charset "utf-8"
+
+@import 'functions'
+@import 'variables'

src/styles/tools/_functions.sass

@@ -0,0 +1,17 @@
+@charset "utf-8"
+
+@use 'sass:map'
+
+
+
+%position
+  position: absolute
+
+%position-content
+  @extend %position
+  content: ""
+
+@function mapGet($map, $list...)
+  @each $key in $list
+    $map: map-get($map, $key)
+  @return $map

src/styles/tools/_mixins.sass

@@ -0,0 +1,34 @@
+@charset "utf-8"
+
+@use 'sass:map'
+
+
+
+@mixin position()
+  position: absolute
+
+@mixin location($top, $left, $width, $height)
+  @extend %position
+  top: $top
+  left: $left
+  height: $height
+  width: $width
+
+@mixin locationTopLeft($top, $left)
+  top: $top
+  left: $left
+
+@mixin locationBottom($bottom, $left, $width, $height)
+  @extend %position
+  bottom: $bottom
+  left: $left
+  height: $height
+  width: $width
+
+@mixin locationColor($top, $left, $width, $height, $color)
+  @include location($top, $left, $width, $height)
+  background: $color
+
+@mixin locationColorCircle($top, $left, $width, $height, $color)
+  @include locationColor($top, $left, $width, $height, $color)
+  border-radius: 50%

src/styles/tools/_variables.sass

@@ -0,0 +1,5 @@
+@charset "utf-8"
+
+// General properties
+$layer: (one: 1, two: 2, three: 3)
+$map: ()

src/template/includes/foot.pug

@@ -0,0 +1 @@
+p © Copyright RSR 2021

src/template/includes/head.pug

@@ -0,0 +1,3 @@
+meta(charset='UTF-8')
+meta(name='viewport' content='width=device-width, initial-scale=1.0')
+title= htmlWebpackPlugin.options.title

src/template/index.pug

@@ -0,0 +1,8 @@
+doctype 5
+
+html(lang="es")
+  head
+    include includes/head.pug
+  body
+    include ../modules/draw.pug
+    include includes/foot.pug

src/tools/_mixins.pug

@@ -0,0 +1,9 @@
+mixin nestedComponents(class_name, elements, sons)
+  each _, i in Array(elements)
+    div(class=`${class_name} ${class_name}--${i+1}`)
+      if sons
+        each son in sons
+          div(class=`${son}`)
+
+mixin components(class_name, elements)
+  +nestedComponents(class_name, elements, null)