src/app/app-routing.module.ts

@@ -1,13 +1,9 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SlideComponent } from './slide/slide.component';
-import { InitComponent} from './init/init.component';
 
 
-const routes: Routes = [
+const routes: Routes = [];
-  { path: ':name', component: SlideComponent },
-  { path: '', component: InitComponent }
-];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

src/app/app.component.html

@@ -1,7 +1,3 @@
-<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
+<app-navigation></app-navigation>
-  <router-outlet #o="outlet"></router-outlet>
+<router-outlet></router-outlet>
-</div>
+<app-slide></app-slide>
-
-
-<!-- <router-outlet></router-outlet> -->
-<!-- <app-slide></app-slide> -->

src/app/app.component.ts

@@ -1,30 +1,10 @@
 import { Component } from '@angular/core';
 
-import {
-  transition,
-  trigger,
-  query,
-  style,
-  animate,
-  group,
-  animateChild
-} from '@angular/animations';
-
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
-  animations: [
-    trigger('myAnimation', [
-      transition('* <=> *', [
-        query (':enter', [style({opacity:0})], {optional:true}),
-        query(':leave',[style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],{ optional: true }),
-        query(':enter',[style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],{ optional: true })
-      ])
-    ])
-  ],
 })
-
 export class AppComponent {
   title = 'beire-frontend';
 }

src/app/app.module.ts

@@ -1,30 +1,22 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { SlideComponent } from './slide/slide.component';
-
+import { NavigationComponent } from './navigation/navigation.component';
-import { ClientService } from './client.service';
-import { InitComponent } from './init/init.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SlideComponent,
-    InitComponent
+    NavigationComponent
   ],
   imports: [
     BrowserModule,
-    BrowserAnimationsModule,
+    AppRoutingModule
-    AppRoutingModule,
-    HttpClientModule
-  ],
-  providers: [
-    ClientService
   ],
+  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/client.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ClientService } from './client.service';
-
-describe('ClientService', () => {
-  let service: ClientService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(ClientService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/client.service.ts

@@ -1,31 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient,HttpResponse } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import {environment} from '../environments/environment';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ClientService {
-
-  apiUrl:string
-
-  constructor(private http: HttpClient) {
-    this.apiUrl = environment.uriAPI
-  }
-
-  getItems(query:any=""): Observable<any> {
-    return this.http.get<any>(
-      this.apiUrl+'/items/index.json',{
-        params:query
-      }
-    )
-  }
-
-  getItem(name:string) : Observable<any> {
-    return this.http.get<any>(
-      this.apiUrl+'/items/'+name+'/index.json', {}
-    )
-  }
-
-}

src/app/init/init.component.html

@@ -1,5 +0,0 @@
-<div class="slide">
-  <div class="element">
-    <div class="round-button" title="Pulsa para iniciar" routerLink="home"></div>
-  </div>
-</div>

src/app/init/init.component.scss

@@ -1,36 +0,0 @@
-div.slide {
-  color:#fff;
-  width:100vw;
-  height:100vh;
-  background-size:cover;
-  background-color:#f90;
-  background-blend-mode: luminosity;
-  display:flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  overflow:hidden;
-  cursor:crosshair;
-}
-
-div.element {
-  width:50vw;
-  margin:auto;
-  text-align:center;
-}
-
-div.round-button {
-  cursor:pointer;
-  margin:auto;
-  font-size:2em;
-  border:5px solid #fff;
-  color:#fff;
-  border-radius:100%;
-  width:10vw;
-  height:10vw;
-  transition:1s;
-}
-
-div.round-button:hover {
-  background:#fff;
-}

src/app/init/init.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-init',
-  templateUrl: './init.component.html',
-  styleUrls: ['./init.component.scss']
-})
-export class InitComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/navigation/navigation.component.html

@@ -0,0 +1,6 @@
+<div class="controls">
+  <div class="left control"><div class="arrow"><img src="/assets/img/left.svg"/></div></div>
+  <div class="right control"><div class="arrow"><img src="/assets/img/right.svg"/></div></div>
+  <div class="top control"><div class="arrow"><img src="/assets/img/top.svg"/></div></div>
+  <div class="bottom control"><div class="arrow"><img src="/assets/img/down.svg"/></div></div>
+</div>

src/app/navigation/navigation.component.scss

@@ -0,0 +1,9 @@
+div.controls{
+  div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
+  div.left { top:0;left:0;height:100vh; }
+  div.right { top:0;right:0;height:100vh; }
+  div.top { top:0;left:0;width:100vw; }
+  div.bottom { bottom:0;left:0;width:100vw; }
+}
+
+div.arrow { cursor:crosshair;}

src/app/navigation/navigation.component.spec.ts

@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { InitComponent } from './init.component';
+import { NavigationComponent } from './navigation.component';
 
-describe('InitComponent', () => {
+describe('NavigationComponent', () => {
-  let component: InitComponent;
+  let component: NavigationComponent;
-  let fixture: ComponentFixture<InitComponent>;
+  let fixture: ComponentFixture<NavigationComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ InitComponent ]
+      declarations: [ NavigationComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(InitComponent);
+    fixture = TestBed.createComponent(NavigationComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/navigation/navigation.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/slide/slide.component.html

@@ -1,14 +1,7 @@
-<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
+<div class="slide" (mouseenter)="onKeydown($event)" (click)="onKeydown($event)">
   <div class="content">
-    <div class="element big-title" [innerHTML]="slide.title"></div>
+    <div class="element big-title">Beire</div>
-    <div class="element second-title" [innerHTML]="slide.content"></div>
+    <div class="element second-title">Mar de tierra</div>
-    <div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
+    <div class="element logo"><img style="padding-top:30px;max-width:100px;" src="/assets/img/landarte_logo.png"/></div>
   </div>
 </div>
-
-<div class="controls" *ngIf="slide">
-  <div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
-  <div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
-  <div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
-  <div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
-</div>

src/app/slide/slide.component.scss

@@ -2,6 +2,7 @@ div.slide {
   color:#fff;
   width:100vw;
   height:100vh;
+  background-image:url("/assets/img/output.gif");
   background-size:cover;
   background-color:#f90;
   background-blend-mode: luminosity;
@@ -9,7 +10,6 @@ div.slide {
   justify-content: center;
   align-items: center;
   text-align: center;
-  overflow:crosshair;
 }
 
 div.element {
@@ -28,21 +28,3 @@ div.second-title {
   font-size:3rem;
   font-family:"Reenie Beanie",serif;
 }
-
-/* controls */
-div.controls{
-  div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
-  div.left { top:0;left:0;height:100vh; }
-  div.right { top:0;right:0;height:100vh; }
-  div.top { top:0;left:0;width:100vw; }
-  div.bottom { bottom:0;left:0;width:100vw; }
-}
-
-div.arrow {
-  cursor:pointer;
-  min-width:75px;
-  min-height:75px;
-  align-items: center;
-  align-content: center;
-  text-align: center;
-}

src/app/slide/slide.component.ts

@@ -1,11 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { ClientService } from '../client.service';
-import { Observable } from 'rxjs';
-import {environment} from '../../environments/environment';
-import { ActivatedRoute, Router } from '@angular/router';
-
-
-
 
 @Component({
   selector: 'app-slide',
@@ -14,58 +7,13 @@ import { ActivatedRoute, Router } from '@angular/router';
 })
 export class SlideComponent implements OnInit {
 
-  slide: any;
+  constructor() { }
-
-  constructor(
-    private clientService:ClientService,
-    private route: ActivatedRoute,
-    private router: Router,
-  ) {}
 
   ngOnInit(): void {
-    document.addEventListener('keydown', (e) => { this.onKeydown(e) });
-    //document.addEventListener('keydown', (e) => { console.log(e)})
-
-    this.route.params.subscribe(
-      params => {
-        if (params.name) {
-          this.clientService.getItem(params.name).subscribe(
-            (r) => { this.slide = r.data;}
-          )
-        }
-      }
-    )
-
   }
 
-  getFeaturedImage(): string {
+  onKeydown(event) {
-    return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
+    console.log(event)
   }
 
-  onKeydown(e) {
-    //e.code
-    //ArrowLeft
-    //ArrowRight
-    //ArrowUp
-    //ArrowDown
-    console.log(e)
-    switch (e.code) {
-      case "ArrowLeft" :
-        this.left(e);
-        break;
-      case "ArrowRight" :
-        this.right(e);
-        break;
-      case "ArrowUp" :
-        this.up(e); break;
-      case "ArrowDown" :
-        this.down(e); break;
-    }
-  }
-
-  left(e) { this.router.navigate(['/', this.slide.o]);}
-  right(e) { this.router.navigate(['/', this.slide.e]); }
-  up(e) { this.router.navigate(['/', this.slide.n]); }
-  down(e) { this.router.navigate(['/', this.slide.s]); }
-
 }

src/environments/environment.ts

@@ -3,8 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
+  production: false
-  uriAPI: "https://public.audio-lab.org/beireapi/"
 };
 
 /*