carrousel arreglado

Author: andrecupa

backend/gamelink/src/main/resources/application.properties

@@ -10,7 +10,7 @@ spring.mustache.suffix=.html
 
 spring.datasource.url=jdbc:postgresql://localhost:5432/gamelink
 spring.datasource.username=postgres
-spring.datasource.password=Juanluis-123
+spring.datasource.password=Nekowa10
 spring.jpa.hibernate.ddl-auto=create-drop
 
 logging.level.org.springframework.security=DEBUG

backend/gamelink/target/classes/application.properties

@@ -10,7 +10,7 @@ spring.mustache.suffix=.html
 
 spring.datasource.url=jdbc:postgresql://localhost:5432/gamelink
 spring.datasource.username=postgres
-spring.datasource.password=Juanluis-123
+spring.datasource.password=Nekowa10
 spring.jpa.hibernate.ddl-auto=create-drop
 
 logging.level.org.springframework.security=DEBUG

frontend/angular.json

@@ -27,6 +27,7 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.css"
             ],
             "scripts": []

frontend/package-lock.json

@@ -15,9 +15,12 @@
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",
     "@angular/forms": "~13.3.0",
+    "@angular/localize": "~13.3.0",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.1.1",
+    "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -37,4 +40,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}

frontend/package.json

@@ -1,10 +1,6 @@
-<!--AQUÍ NO HACE FALTA LA ETIQUETA HEAD, YA ESTÁ EN EL INDEX.HTML,
-    O LA QUITAMOS DEL INDEX O LA QUITAMOS DE AQUÍ-->
-<!--head></head-->
 
 <navBar></navBar>
 
-<!--tampoco hace falta <home></home>, porque ya el router-outlet ya lo muestra-->
 
 <router-outlet></router-outlet>
 

frontend/src/app/app.component.html

@@ -5,6 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import {RouterModule} from '@angular/router';
 import { routing } from './app.routing';
 
+
 import { AppComponent } from './app.component';
 import { LoginComponent } from './components/login/login.component';
 import { HeadComponent } from './components/head/head.component';
@@ -17,14 +18,16 @@ import { HomeComponent } from './components/home/home.component';
 import { UserProfile } from './components/user/userProfile.component';
 import { VideogameCardComponent } from './components/videogame/videogame-card.component';
 import { VideogameCatalogComponent } from './components/videogame/videogame-catalog.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { CarouselComponent } from './components/carousel/carousel.component';
 
 
 
 
 
 @NgModule({
-  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent],
-  imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule],
+  declarations: [AppComponent, LoginComponent, HeadComponent, NewsComponent, NavBarComponent, FooterComponent, NewsTemplateComponent,VideogameCatalogComponent, ShowNewsComponent, HomeComponent, UserProfile,VideogameCardComponent, CarouselComponent],
+  imports: [BrowserModule, FormsModule, HttpClientModule, routing, FormsModule,RouterModule, NgbModule],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

frontend/src/app/app.module.ts

@@ -0,0 +1,29 @@
+<ngb-carousel>
+    <ng-template ngbSlide>
+        <div class="picsum-img-wrapper">
+            <img [src]="images[0]" alt="Random first slide">
+        </div>
+        <div class="carousel-caption">
+            <h3>Lost Ark</h3>
+            <p>Adentrate a un mundo de fantasia con tus amigos y lucha por la paz de Arkadia</p>
+        </div>
+    </ng-template>
+    <ng-template ngbSlide>
+        <div class="picsum-img-wrapper">
+            <img [src]="images[1]" alt="Random second slide">
+        </div>
+        <div class="carousel-caption">
+            <h3>Archeage 2</h3>
+            <p>Si te gustó Archeage, este es tu juego</p>
+        </div>
+    </ng-template>
+    <ng-template ngbSlide>
+        <div class="picsum-img-wrapper">
+            <img [src]="images[2]" alt="Random third slide">
+        </div>
+        <div class="carousel-caption">
+            <h3>Leyendas Pokemon Arceus</h3>
+            <p>Pokemon + mundo abierto, no hay nada más que decir.</p>
+        </div>
+    </ng-template>
+</ngb-carousel>

frontend/src/app/components/carousel/carousel.component.css

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-carousel',
+  templateUrl: './carousel.component.html',
+  styleUrls: ['./carousel.component.css']
+})
+export class CarouselComponent implements OnInit {
+
+  images = ["assets/images/lostark.jpg", "assets/images/archeAge.jpg", "assets/images/pokemonArceus.jpg"]
+
+  constructor(private _config : NgbCarouselConfig) { }
+
+  ngOnInit(): void {
+  }
+
+}