rubik_timer final

Farrius · Aug 30, 2019 · 7193efe · 7193efe
1 parent a99d353
commit 7193efe
Show file tree

Hide file tree

Showing 19 changed files with 528 additions and 0 deletions.
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "rubik_timer",
+  "version": "1.0.0",
+  "private": true,
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js --open",
+    "build": "webpack --config webpack.prod.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
+    "html-loader": "^0.5.5",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "node": "^12.8.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "sass": "^1.22.10",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^1.0.0",
+    "webpack": "^4.39.2",
+    "webpack-cli": "^3.3.7",
+    "webpack-dev-server": "^3.8.0",
+    "webpack-merge": "^4.2.1"
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.4.4",
+    "clean-webpack-plugin": "^3.0.0",
+    "countup.js": "^2.0.4"
+  }
+}
diff --git a/src/img/rubik_escalado_100x100.png b/src/img/rubik_escalado_100x100.png
diff --git a/src/img/rubik_guay.png b/src/img/rubik_guay.png
diff --git a/src/img/rubiks-cube-12-512.png b/src/img/rubiks-cube-12-512.png
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Rubik timer</title>
+  </head>
+
+  <body>
+    <div class="rubik_timer">
+      <header>
+        <img src="../src/img/rubik_escalado_100x100.png" alt="rubik_icon" />
+        <p class="scramble_container">
+          L B' R2 L' U2 F R2 B' F' R2 U' F' F2 R R2 L' R' F2 L2 R F2
+        </p>
+      </header>
+      <main>
+        <div class="times_container">
+          <ul class="ao5_times_list"></ul>
+        </div>
+        <div class="ao5_container">
+          <h1 id="ao5_h1">ao5</h1>
+          <p class="ao5_p">00.00</p>
+        </div>
+        <div class="main_rubik_timer"><p class="timer_p">00.00</p></div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/src/js/elements.js b/src/js/elements.js
@@ -0,0 +1,7 @@
+export const elements = {
+  timerDisplay: document.querySelector(".main_rubik_timer"),
+  todosLiDeListaTiempos: document.querySelectorAll(".ao5_time_element"),
+  listaTiemposDisplay: document.querySelector(".ao5_times_list"),
+  mediaAvgDisplay: document.querySelector(".ao5_p"),
+  scrambleDisplay: document.querySelector(".scramble_container")
+};
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1,69 @@
+import "../styles/style.scss";
+import Timer from "./models/timer";
+import { elements } from "./elements";
+import * as timerView from "./views/timerView";
+import * as tiempoView from "./views/tiemposView";
+import * as avgView from "./views/avgView";
+import * as scrambleView from "./views/scrambleView";
+/* estado de la app */
+const state = {};
+state.listaTiempos = [];
+/* Timer */
+// El timer controller del "keydown" event
+const timerController = () => {
+  try {
+    if (state.tiempo) {
+      stopTimer();
+    }
+  } catch {}
+};
+// Evento que iniciara nuesto Timer
+const startTimer = () => {
+  try {
+    if (event.keyCode === 32) {
+      if (state.tiempo == undefined && state.estado == undefined) {
+        timerView.deleteRenderNumero();
+        state.tiempo = new Timer();
+        state.tiempo.comienzo = state.tiempo.cogerTiempo();
+      } else {
+        delete state.estado;
+      }
+    }
+  } catch {}
+};
+// Evento que para el Timer
+const stopTimer = () => {
+  state.estado = "on";
+  if (event.keyCode !== 32) {
+    delete state.estado;
+  }
+  state.tiempo.final = state.tiempo.cogerTiempo();
+  const tiempoTotal = state.tiempo.final - state.tiempo.comienzo;
+  const tiempoFormateado = timerView.formatearNumero(tiempoTotal);
+  timerView.renderNumero(tiempoFormateado);
+  afegirTiempoState(tiempoFormateado);
+  const inmutableListaTiempos = Array.prototype.slice.call(state.listaTiempos);
+  const mediaAvg = state.tiempo.hacerAvg(inmutableListaTiempos);
+  avgView.renderAvg(mediaAvg);
+  const scramble = state.tiempo.hacerScramble();
+  scrambleView.renderScramble(scramble);
+  delete state.tiempo;
+};
+
+//Añadimos los tiempos del state a la UI y al controller
+const afegirTiempoState = tiempoFormat => {
+  if (state.listaTiempos.length === 5) {
+    state.listaTiempos.pop();
+    tiempoView.deleteLiTiempos();
+    state.listaTiempos.unshift(tiempoFormat);
+    tiempoView.renderLiTiempos(tiempoFormat);
+    return state.listaTiempos;
+  } else {
+    state.listaTiempos.unshift(tiempoFormat);
+    tiempoView.renderLiTiempos(tiempoFormat);
+    return state.listaTiempos;
+  }
+};
+
+window.addEventListener("keyup", startTimer);
+window.addEventListener("keydown", timerController);
diff --git a/src/js/models/timer.js b/src/js/models/timer.js
@@ -0,0 +1,107 @@
+export default class Timer {
+  constructor() {}
+
+  cogerTiempo() {
+    const tiempoActual = new Date();
+    const contar = tiempoActual.getTime();
+
+    return contar;
+  }
+  // Hacemos la media de los tiempos de la lista
+  hacerAvg(listaTiempos) {
+    let media = 0;
+    let arrayTiempos;
+    if (listaTiempos.length === 5) {
+      let masGrande;
+      let masPetit;
+      for (const cur of listaTiempos) {
+        if (masGrande === undefined) {
+          masGrande = parseFloat(cur);
+        }
+        if (masPetit === undefined) {
+          masPetit = parseFloat(cur);
+        } else if (parseFloat(cur) > masGrande) {
+          masGrande = parseFloat(cur);
+        } else if (parseFloat(cur) < masPetit) {
+          masPetit = parseFloat(cur);
+        }
+      }
+      masGrande = `${masGrande}`;
+      masPetit = `${masPetit}`;
+      const masPetitIndex = listaTiempos.indexOf(masPetit);
+      listaTiempos.splice(masPetitIndex, 1);
+      const masGrandeIndex = listaTiempos.indexOf(masGrande);
+      listaTiempos.splice(masGrandeIndex, 1);
+      arrayTiempos = listaTiempos;
+    } else {
+      arrayTiempos = listaTiempos;
+    }
+    for (const i of arrayTiempos) {
+      media += parseFloat(i);
+    }
+    media /= arrayTiempos.length;
+    media = `${media}`;
+    return media;
+  }
+
+  hacerScramble() {
+    const listaAllMoves = [
+      "R",
+      "U",
+      "L",
+      "B",
+      "F",
+      "D",
+      "R'",
+      "U'",
+      "L'",
+      "B'",
+      "F'",
+      "D'",
+      "R2",
+      "U2",
+      "L2",
+      "B2",
+      "F2",
+      "D2"
+    ];
+    let finalScramble = [];
+    let listaSinLastMove = Array.prototype.slice.call(listaAllMoves);
+    for (let i = 0; i < 21; i++) {
+      const randomIndex = Math.floor(Math.random() * listaSinLastMove.length);
+      finalScramble.push(listaSinLastMove[randomIndex]);
+      const firstLetter = listaSinLastMove[randomIndex];
+      let indexLetters = [];
+      const listaOnlyLetters = [];
+      for (const cur of listaAllMoves) {
+        listaOnlyLetters.push(cur[0]);
+      }
+      for (const cur of listaSinLastMove) {
+        if (cur[0] === firstLetter[0]) {
+          for (let i = 0; i < 22; i++) {
+            indexLetters.push(listaOnlyLetters.indexOf(cur[0], i));
+          }
+        }
+      }
+      let indexLettersFormat = [];
+      for (const cur of indexLetters) {
+        if (cur !== -1) {
+          if (indexLettersFormat.includes(cur) === false) {
+            indexLettersFormat.push(cur);
+          }
+        }
+      }
+      listaSinLastMove = Array.prototype.slice.call(listaAllMoves);
+      indexLettersFormat.forEach((cur, index) => {
+        if (index === 0) {
+          listaSinLastMove.splice(cur, 1);
+        } else if (index === 1) {
+          listaSinLastMove.splice(cur - 1, 1);
+        } else if (index === 2) {
+          listaSinLastMove.splice(cur - 2, 1);
+        }
+      });
+    }
+    return finalScramble;
+  }
+}
diff --git a/src/js/views/avgView.js b/src/js/views/avgView.js
@@ -0,0 +1,16 @@
+import { elements } from "../elements";
+
+export const renderAvg = media => {
+  const arrayMedia = media.split(".");
+  const parteEntera = arrayMedia[0];
+  const parteDecimal = arrayMedia[1];
+  if (parteDecimal.length > 2) {
+    const arrayParteDecimal = parteDecimal.split("");
+    const arrayParteDecimalFormat = arrayParteDecimal.slice(0, 2);
+    const parteDecimalFormat = arrayParteDecimalFormat.join("");
+    const numeroFormat = `${parteEntera}.${parteDecimalFormat}`;
+    elements.mediaAvgDisplay.innerHTML = numeroFormat;
+  } else {
+    elements.mediaAvgDisplay.innerHTML = media;
+  }
+};
diff --git a/src/js/views/scrambleView.js b/src/js/views/scrambleView.js
@@ -0,0 +1,9 @@
+import { elements } from "../elements";
+
+export const renderScramble = scramble => {
+  const scrambleFormat = scramble.map(cur => {
+    return `${cur} `;
+  });
+  const scrambleString = scrambleFormat.join("");
+  elements.scrambleDisplay.innerHTML = scrambleString;
+};
diff --git a/src/js/views/tiemposView.js b/src/js/views/tiemposView.js
@@ -0,0 +1,16 @@
+import { elements } from "../elements";
+
+export const renderLiTiempos = liDeTiempos => {
+  const markup = `
+  <li class="ao5_time_element">${liDeTiempos}</li>
+  `;
+  elements.listaTiemposDisplay.insertAdjacentHTML("afterbegin", markup);
+};
+
+export const deleteLiTiempos = () => {
+  for (let i = 0; i < 3; i++) {
+    elements.listaTiemposDisplay.removeChild(
+      elements.listaTiemposDisplay.childNodes[12]
+    );
+  }
+};
diff --git a/src/js/views/timerView.js b/src/js/views/timerView.js
@@ -0,0 +1,38 @@
+import { elements } from "../elements";
+
+export const formatearNumero = numero => {
+  const numeroFormat = numero / 1000;
+  const numeroFormatArray = numeroFormat.toString().split(".");
+  const numeroSinDecimal = numeroFormatArray[0];
+  const numeroDecimal = numeroFormatArray[1];
+  const decimalFormatSinMili = numeroDecimal.slice(0, 2);
+  const decimalFormatArray = decimalFormatSinMili.split("");
+  const decimalFormatArrayConPunto = decimalFormatArray.map((e, index) => {
+    if (index == 0) {
+      return `.${e}`;
+    } else {
+      return e;
+    }
+  });
+  const decimalFormat = decimalFormatArrayConPunto.join("");
+  if (numeroSinDecimal >= 60) {
+    let segundos;
+    let minutos;
+    minutos = `${Math.floor(numeroSinDecimal / 60)}:`;
+    segundos = `${numeroSinDecimal % 60}`;
+    const numeroSinDecimalFormat = `${minutos}${segundos}`;
+    const numeroFinal = `${numeroSinDecimalFormat}${decimalFormat}`;
+    return numeroFinal;
+  } else {
+    const numeroFinal = `${numeroSinDecimal}${decimalFormat}`;
+    return numeroFinal;
+  }
+};
+
+export const renderNumero = numero => {
+  elements.timerDisplay.innerHTML = numero;
+};
+
+export const deleteRenderNumero = () => {
+  elements.timerDisplay.innerHTML = "";
+};
diff --git a/src/styles/scss_styles/_header.scss b/src/styles/scss_styles/_header.scss
@@ -0,0 +1,26 @@
+header {
+  display: flex;
+  max-height: 10vh;
+  width: 100%;
+  align-items: center;
+  text-align: center;
+  font-size: 3rem;
+  p {
+    margin: 0 auto;
+  }
+}
+
+@media screen and (max-width: 1265px) {
+  header {
+    max-height: 25vh;
+    img {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 720px) {
+  header {
+    max-height: 35vh;
+  }
+}