Iniciada la pag de animes

.editorconfig

@@ -6,4 +6,7 @@ indent_size = 4
 indent_size = 2
 
 [*.coffee]
+indent_size = 2
+
+[*.sass]
 indent_size = 2

src/components/Anime/Anime.vue

@@ -0,0 +1,46 @@
+<template lang="pug">
+  div.texto1
+    div(v-if="estadoAnime === 0") Cargando...
+    div(v-if="estadoAnime === -1") Error. Anime no encontrado
+    div(v-if="estadoAnime === 1")
+      div.titulo {{ anime.titulo }} -> {{ anime.anime_ID }}
+      p.
+        Advertencia. Página en construcción. Los links pueden estar errados. Para usar la versión estable,
+        visita <a href="https://pseudosubs.com">https://pseudosubs.com</a>
+      panel-de-descarga(:animeid="anime.anime_ID" :color="anime.color")
+      //
+</template>
+
+<script lang="coffee">
+  import panelDescarga from "./panel-descarga.vue"
+
+  export default
+    name: "Anime"
+    components:
+      'panel-de-descarga': panelDescarga
+    data: ->
+      anime: {}
+      # -1 no encontrado, 0 cargando y 1 encontrado
+      estadoAnime: 0
+    created: ->
+      _ = this
+      animes = @$store.state.animes
+      resultado = -1
+      for anime in animes
+        if anime.link is "/Anime/" + @$route.params.nombre
+          _.anime = anime
+          resultado = 1
+          break
+      @estadoAnime = resultado
+      if resultado is 1
+        @$store.commit "cambiarTxtAdicionalAnime", "#{anime.titulo}"
+      else
+        @$store.commit "cambiarTxtAdicionalAnime", "?"
+
+    #
+
+</script>
+
+<style scoped lang="sass">
+
+</style>

src/components/Anime/panel-descarga.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <div class="panel" v-if="datosCorrectos">
+      <div class="panel__titulo" :style="'background-color: ' + color">
+        Descarga aquí.<br>
+        <div class="panel__titulo__variantes">
+          <template v-for="(opcion, indice) in datos">
+            <div class="panel__titulo__variantes__variante hoverable"
+                 :style="indice === '1'? `background-color: ${opcion.color}` : ''"
+                 v-on:click="cambiarDescripcionDescarga(indice)" :color-min="opcion.color"
+                 :id="`opcion${indice}`">
+              {{ opcion.formato }} {{ opcion.res }}<br>{{ opcion.servidor }}
+            </div>
+          </template>
+        </div>
+      </div>
+      <div class="panel__descripcion background__panel-descarga">
+
+        <template v-for="(opcion, indice) in datos">
+          <div :id="`tarjeta${indice}`" :style="indice !== '1'? 'display: none' : ''">
+            <div class="panel__descripcion__titulo" :style="'color: ' + balancearColor">
+              Links<br>
+            </div>
+            Todos los links se abren en una pestaña nueva.<br>
+            <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
+              <br>
+              Episodio {{ num }} ->
+              <a :href="ep.link" target="_blank" :style="'color: ' + balancearColor"
+                 @mousedown.stop="incrementarContador(ep.ep_ID, $event)">
+                  {{ ep.peso }}
+              </a>
+            </span>
+          </div>
+        </template>
+
+      </div>
+    </div>
+    <div v-else>
+      Recuperando los eps del servidor...
+    </div>
+  </div>
+</template>
+
+<script>
+  import YAML from "yaml"
+  const esModoOscuro = false;
+
+  export default {
+    name: "panelDeDescarga",
+    data: function () {
+      return {
+        posActual: '1',
+        datos: {},
+        datosCorrectos: false,
+        mostrarSpinnerParaCargaDeEps: true
+      }
+    },
+    props: {
+      animeid: {
+        type: Number,
+        required: true
+      },
+      color: {
+        type: String,
+        required: true
+      }
+    },
+    computed: {
+      balancearColor () {
+        const color = this.color;
+
+        const R = parseInt(color.substring(1,3), 16);
+        const G = parseInt(color.substring(3,5), 16);
+        const B = parseInt(color.substring(5,7), 16);
+
+        const limiteOscuridad = 60;
+        if (esModoOscuro && R<limiteOscuridad && G<limiteOscuridad && B<limiteOscuridad ) {
+          return `#${(255-R).toString(16)}${(255-G).toString(16)}${(255-B).toString(16)}`;
+        } else {
+          return color;
+        }
+
+      }
+    },
+    methods: {
+      cambiarDescripcionDescarga(idDestino) {
+        const quitarClase = (nombre, nombreClase) => {
+          const posInicial = nombre.indexOf(nombreClase);
+          if (posInicial !== -1)
+            return nombre.substring(0, posInicial-1);
+          else
+            return nombre
+        };
+
+        const elemAnterior = document.getElementById(`tarjeta${this.posActual}`);
+        const elemNuevo = document.getElementById(`tarjeta${idDestino}`);
+
+        const opcionAnterior = document.getElementById(`opcion${this.posActual}`);
+        const opcionNueva = document.getElementById(`opcion${idDestino}`);
+
+        if (elemNuevo && elemAnterior && opcionAnterior && opcionNueva) {
+          this.posActual = idDestino;
+
+          elemAnterior.style.display = "none";
+          opcionAnterior.style.backgroundColor = "transparent";
+          opcionAnterior.className = quitarClase(opcionNueva.className, "panel__titulo__variantes__variante--activa");
+
+          elemNuevo.style.display = "block";
+          opcionNueva.style.backgroundColor = opcionNueva.getAttribute("color-min");
+          opcionNueva.className += " panel__titulo__variantes__variante--activa";
+
+        } else {
+          console.log("Woah, elemNuevo && elemAnterior && opcionAnterior && opcionNueva no se cumple...\n" +
+            elemNuevo + " " + elemAnterior + " " + opcionAnterior + " " + opcionNueva);
+        }
+      },
+      incrementarContador(ep_ID, evento) {
+
+        const xhr = new XMLHttpRequest();
+        xhr.open("PUT", "/links");
+        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+        xhr.onload = () => {
+          console.log(xhr.responseText);
+        };
+        xhr.send(`ep_ID=${ ep_ID }`);
+
+      }
+    },
+    created () {
+      const xhr = new XMLHttpRequest();
+      const vm = this;
+
+      xhr.open("POST","https://pseudosubs.com/links");
+      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+      xhr.onload = () => {
+        try {
+          const data = YAML.parse(xhr.responseText);
+          if (data.opciones) {
+            vm.datos = data["opciones"];
+            vm.datosCorrectos = true;
+          } else {
+            vm.mostrarSpinnerParaCargaDeEps = false;
+            console.log("Error al recibir los eps del anime. resp:\n" + xhr.responseText);
+          }
+        } catch (e) {
+          vm.mostrarSpinnerParaCargaDeEps = false;
+          console.log("Error al recibir los eps del anime:\n" + e + "\n" + xhr.responseText);
+        }
+
+
+      };
+      console.log("Este es el query: " + `animeID=${ this.animeid }`);
+      xhr.send(`animeID=${ this.animeid }`);
+    }
+  }
+</script>
+
+<style scoped lang="sass">
+
+  .icono-pequeno
+    font-size: 15px
+    padding: 0 5px
+    cursor: default
+
+  .panel__titulo
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: xx-large
+      weight: bold
+    color: white
+    text-align: center
+
+  .panel__titulo__variantes
+    text-align: left
+
+  .panel__titulo__variantes__variante
+    padding: 10px 40px
+    user-select: none
+    cursor: pointer
+    display: inline-block
+    text-align: center
+    font:
+      size: large
+      weight: normal
+
+  .panel__titulo__variantes__variante--activa
+    font-weight: bold
+    text-decoration: underline
+
+  .panel__descripcion
+    padding: 25px 15px
+  // background-color: #f2f2f2
+
+  .panel__descripcion__titulo
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: x-large
+      weight: bold
+
+  .panel__descripcion__link
+    a
+      font-weight: bold
+
+  .panel
+    border-radius: 3px
+</style>

src/components/AnimeList/anime.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+  div.anime
+    div.cont.fondo1.tarjeta
+      router-link.titulo.texto1(:to="anime.link") {{ anime.titulo }}
+      br
+      router-link(:to="anime.link")
+        img.imagen(:src="anime.imgUrl")
+  //
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "anime"
+    props:
+      anime:
+        type: Object
+        required: true
+    #
+
+</script>
+
+<style scoped lang="sass">
+  @import "../../assets/sass/variables"
+
+  .anime
+    width: 50%
+    float: left
+    padding: 20px
+
+  .cont
+    @extend %bordeRedondo-std
+    padding: 20px
+    height: 500px
+
+  .titulo
+    display: inline-block
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: xx-large
+    padding-bottom: 20px
+    text-decoration: none
+
+  .imagen
+    height: 400px
+
+  //
+</style>

src/components/AnimeList/lista-animes.vue

@@ -0,0 +1,24 @@
+<template lang="pug">
+  div.animes
+    anime-item(v-for="anime in $store.state.animes" :anime="anime")
+    //
+</template>
+
+<script lang="coffee">
+  import animeItem from "./anime.vue"
+
+  export default
+    name: "lista-animes"
+    components:
+      'anime-item': animeItem
+    created: ->
+      @$store.commit "cambiarTxtAdicionalAnime", "Comprimido sin perder 1 solo pixel."
+    #
+</script>
+
+<style scoped lang="sass">
+  .animes::after
+    content: ""
+    display: table
+    clear: both
+</style>

src/components/Inicio/animes-novelas.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+  div.texto1.fondo1.main
+    router-link(to="/Anime")
+      span.anime.tarjeta
+        div.titulo.texto1 Anime
+        div.titulo__descr.texto1 Ligero/MP4/MKV 720p/1080p 24fps/60fps
+    router-link(to="/Novelas")
+      span.novelas.tarjeta
+        div.titulo.texto1 Novelas
+        div.titulo__descr.texto1 Redistribuyendo legalmente lo ilegal.
+    //
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "animes-novelas"
+
+</script>
+
+<style scoped lang="sass">
+  .main
+    margin: 50px 0
+
+  .anime, .novelas
+    width: 50%
+    display: inline-block
+    padding: 20px
+
+  .titulo
+    font:
+      family: "Product Sans", Muli, "Open Sans", sans-serif
+      size: 3rem
+      weight: bold
+
+  .titulo__descr
+    opacity: 0.5
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: x-large
+
+  //
+</style>

src/components/Inicio/ultimos-animes.vue

@@ -4,9 +4,11 @@
       div.fondo_1(:style="'background-color: ' + anime.color")
       div.fondo_texto(:class="'fondo_texto--' + $store.state.modoColor")
       div.cont
-        div.titulo {{ anime.titulo }}
+        router-link(:to="anime.link")
+          div.titulo {{ anime.titulo }}
 
-        img.imagen.tarjeta(:src="anime.imgUrl")
+        router-link(:to="anime.link")
+          img.imagen.tarjeta(:src="anime.imgUrl")
         div.animeCont
           div.descr {{ anime.descripcion }}
           br
@@ -148,6 +150,8 @@
   .cont
     padding: 10px 40px
     z-index: 4
+    a
+      text-decoration: none
 
   .imagen
     @extend %bordeRedondo-std

src/components/barra-lateral.vue

@@ -39,7 +39,7 @@
             :src="modoSiguiente === 'oscuro'? '/img/github.svg': '/img/githubOsc.svg' ")
         br.mostrarEnTablet
 
-        router-link(to="/")
+        router-link(to="/cuenta")
           span.ocultarEnTablet Ajustes
           i.material-icons.texto2.mostrarEnTablet settings
 
@@ -96,7 +96,6 @@
             ""
         this.elemHtmlModoOscuro.innerHTML = resultado
 
-      # // Todo: Almacenar el estado de la barra lateral en localStorage
       ocultarBarraLateral: ->
         estadoActual = @$store.state.barraLateralOculta
         console.log "Anuma v: #{estadoActual}"

src/router.coffee

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Inicio from './views/Inicio.vue'
 import Comparar from "./views/Comparar.vue"
+import Usuario from "./views/Usuario.vue"
+import AnimeList from "./views/AnimeList.vue"
+import listaAnimes from "./components/AnimeList/lista-animes.vue"
+import Anime from "./components/Anime/Anime.vue"
+import Error404 from "./views/Error404.vue"
 
 Vue.use Router
 
@@ -16,6 +21,25 @@ export default new Router
     path: "/comparar"
     name: "Comparar"
     component: Comparar
+  ,
+    path: "/Anime"
+    component: AnimeList
+    children: [
+      path: ":nombre"
+      component: Anime
+    ,
+      path: ""
+      name: "Anime"
+      component: listaAnimes
+    ]
+  ,
+    path: "/cuenta"
+    name: "Usuario"
+    component: Usuario
+  ,
+    path: "*"
+    name: "404"
+    component: Error404
   ]
   scrollBehavior: (to, from, savedPosition) ->
     x: 0

src/store.coffee

@@ -19,6 +19,7 @@ export default new Vuex.Store
 
     modoColor: localStorage?.getItem "modoColor" ? "claro"
 
+    txtAdicionalAnime: "Comprimido sin perder 1 solo pixel."
 
   mutations:
     cambiarBarraLateral: (state) ->
@@ -32,4 +33,7 @@ export default new Vuex.Store
     cambiarModoColor: (state, color) ->
       state.modoColor = color
 
+    cambiarTxtAdicionalAnime: (state, txt) ->
+      state.txtAdicionalAnime = txt
+
   actions: {}

src/views/AnimeList.vue

@@ -0,0 +1,45 @@
+<template lang="pug">
+  div.texto1
+    div.tarjeta.fondo1.tituloC
+      router-link.titulo.texto1(to="/Anime") Animes
+      br
+      div.titulo__descr {{ $store.state.txtAdicionalAnime }}
+    router-view
+  //
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "AnimeList"
+    #
+
+</script>
+
+<style scoped lang="sass">
+
+  .tituloC
+    padding: 50px
+
+    .titulo
+      font:
+        family: "Product Sans", Muli, "Open Sans", sans-serif
+        size: 4rem
+        weight: bold
+      text-decoration: none
+
+    .titulo__descr
+      opacity: 0.5
+      font:
+        family: Muli, "Open Sans", sans-serif
+        size: x-large
+
+
+  .animes::after
+    content: ""
+    display: table
+    clear: both
+
+  //
+
+</style>

src/views/Error404.vue

@@ -0,0 +1,14 @@
+<template lang="pug">
+  div.texto1 Error 404. Esta página no existe (aun).
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "Error404"
+
+</script>
+
+<style scoped lang="sass">
+
+</style>

src/views/Inicio.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
   div.inicio
     ultimos-eps
+    animes-novelas
+    br
     caracteristicas
     y-notaras-la-diferencia
     //
@@ -11,6 +13,7 @@
   import ultimosEps from "../components/Inicio/ultimos-animes.vue"
   import caracteristicas from "../components/Inicio/caracteristicas.vue"
   import yNotarasLaDiferencia from "../components/Inicio/y-notaras-la-diferencia.vue"
+  import animesNovelas from "../components/Inicio/animes-novelas.vue"
 
   export default
     name: "Inicio"
@@ -18,7 +21,8 @@
       caracteristicas: caracteristicas
       'y-notaras-la-diferencia': yNotarasLaDiferencia
       'ultimos-eps': ultimosEps
-
+      'animes-novelas': animesNovelas
+    #
 
 </script>
 

src/views/Usuario.vue

@@ -0,0 +1,80 @@
+<template lang="pug">
+  div.texto1
+    div.tarjeta.fondo1.tituloC
+      div.titulo Ajustes
+      div.titulo__descr Configura la página a tu gusto.
+    br
+    div.row
+      div.usuario
+        div.usuario__cont.tarjeta.fondo1
+          div.usuario__titulo Mis Datos
+          br
+          img.usuario__img
+          br
+          div.usuario__nombre Nombre:
+          div.usuario__correo Correo:
+          br
+          br
+          div.usuario__info Estos son todos los datos que almacenamos de ti.
+      div.notificaciones
+        div.notificaciones__cont.tarjeta.fondo1 Notificaciones
+    //
+</template>
+
+<script lang="coffee">
+
+  export default
+    name: "Usuario"
+
+</script>
+
+<style scoped lang="sass">
+  @import "../assets/sass/variables"
+
+  .tituloC
+    padding: 50px
+
+    .titulo
+      font:
+        family: "Product Sans", Muli, "Open Sans", sans-serif
+        size: 4rem
+        weight: bold
+
+    .titulo__descr
+      opacity: 0.5
+      font:
+        family: Muli, "Open Sans", sans-serif
+        size: x-large
+
+  .row
+    margin: 0 40px
+    ::after
+      content: ""
+      display: table
+      clear: both
+
+  .usuario, .notificaciones
+    float: left
+
+  .usuario
+    width: 40%
+
+  .usuario__titulo
+    font:
+      family: Muli, "Open Sans", sans-serif
+      size: 2rem
+
+  .usuario__img
+    width: 200px
+    height: 200px
+
+  .notificaciones
+    width: 60%
+
+  .usuario__cont, .notificaciones__cont
+    @extend %bordeRedondo-std
+    padding: 20px
+    margin: 20px
+
+  //
+</style>