From 2c4b4bd174a326d3fdf002d24a76e7efd5df7b98 Mon Sep 17 00:00:00 2001 From: Ayush Saini <36878972+imayushsaini@users.noreply.github.com> Date: Sat, 15 Jul 2023 02:42:23 +0530 Subject: [PATCH] added gallery --- src/app/app-routing.module.ts | 9 ++ src/app/pages/gallery/gallery.component.html | 23 +++++ src/app/pages/gallery/gallery.component.scss | 85 +++++++++++++++++++ src/app/pages/gallery/gallery.component.ts | 84 ++++++++++++++++++ src/app/pages/gallery/image_map.ts | 2 + src/app/shared/nav-bar/nav-bar.component.html | 38 ++++----- 6 files changed, 221 insertions(+), 20 deletions(-) create mode 100644 src/app/pages/gallery/gallery.component.html create mode 100644 src/app/pages/gallery/gallery.component.scss create mode 100644 src/app/pages/gallery/gallery.component.ts create mode 100644 src/app/pages/gallery/image_map.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 05f016c..33951cc 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -80,6 +80,15 @@ const routes: Routes = [ description:"Support US !", ogUrl:'https://bombsquad-community.web.app/support' } + },{ + path:'gallery', + loadChildren:() => import ('./pages/gallery/gallery.component').then(m => m.GalleryModule), + + data:{ + title:'Gallery | BobmSquad', + description:"Amazing Picture Collection of Bombsquad", + ogUrl:'https://bombsquad-community.web.app/gallery' + } }, {path:'**',redirectTo:'home'} ]; diff --git a/src/app/pages/gallery/gallery.component.html b/src/app/pages/gallery/gallery.component.html new file mode 100644 index 0000000..ed1a802 --- /dev/null +++ b/src/app/pages/gallery/gallery.component.html @@ -0,0 +1,23 @@ +
+

BombSquad Gallery

+
+
+ + keyboard_arrow_up +
+
+
+ +
+
+
+ keyboard_arrow_down +
+
+
+
+ + × +
+
+
\ No newline at end of file diff --git a/src/app/pages/gallery/gallery.component.scss b/src/app/pages/gallery/gallery.component.scss new file mode 100644 index 0000000..2c1c6d3 --- /dev/null +++ b/src/app/pages/gallery/gallery.component.scss @@ -0,0 +1,85 @@ +h1 { + color: white; + text-align: center; +} +.gallery-main { + min-height: 80vh; + padding-top: 2rem; +} +.gallery { + display: grid; + min-height: 70vh; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: auto; + grid-gap: 10px; +} + +.gallery-item { + display: flex; + justify-content: center; + align-items: center; +} + +.gallery-item img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + cursor: pointer; +} + +.load-more { + width: 100%; + display: flex; + justify-content: center; +} +mat-icon { + transform: scale(3); + color: white; + margin: 2rem; + cursor: pointer; +} +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + overflow: auto; +} + +.overlay-content { + position: relative; + max-width: 90%; + max-height: 90%; + display: flex; + justify-content: center; + align-items: center; +} +.overlay-content img { + display: block; + max-width: 100%; + max-height: 100%; + margin: 0 auto; +} + +.close-btn { + position: absolute; + top: 10px; + right: 10px; + color: #fff; + font-size: 28px; + background-color: black; + padding: 14px; + cursor: pointer; +} +@media only screen and (max-width: 768px) { + /* For mobile phones: */ + .gallery { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/src/app/pages/gallery/gallery.component.ts b/src/app/pages/gallery/gallery.component.ts new file mode 100644 index 0000000..c0a616d --- /dev/null +++ b/src/app/pages/gallery/gallery.component.ts @@ -0,0 +1,84 @@ +import { Component, NgModule, OnInit } from "@angular/core"; +import { ActivatedRoute, RouterModule, Routes } from "@angular/router"; +import { SEOServiceService } from "src/app/services/seoservice.service"; +import {MatButtonModule} from '@angular/material/button'; +import { HttpClient } from "@angular/common/http"; +import { CommonModule } from "@angular/common"; +import { MatIconModule } from '@angular/material/icon'; +import { images } from './image_map'; +@Component({ + selector: 'app-Gallery', + templateUrl: './gallery.component.html', + styleUrls: ['./gallery.component.scss'] +}) +export class GalleryComponent implements OnInit { + images: { url: string; alt: string; }[] = images; + + currentimages:{ url: string, alt: string }[] = this.images.slice(0, 12); + startPoint = 0; + endPoint = 12; + showOverlay = false; + selectedImage!: { url: string; alt: string; }; + CDN = "https://scintillating-creponne-d386aa.netlify.app"; + constructor(private http: HttpClient, private _seoService: SEOServiceService, private activatedRoute: ActivatedRoute) { } + + ngOnInit(): void { + var rt = this.getChild(this.activatedRoute) + rt.data.subscribe((data: any) => { + this._seoService.updateTitle(data.title); + this._seoService.updateOgUrl(data.ogUrl); + //Updating Description tag dynamically with title + this._seoService.updateDescription(data.description) + }); + } + getChild(activatedRoute: ActivatedRoute):any { + if (activatedRoute.firstChild) { + return this.getChild(activatedRoute.firstChild); + } else { + return activatedRoute; + } + } + scrollUp() { + this.startPoint -= 8; + this.endPoint -= 8; + if (this.startPoint < 0) { + this.startPoint = 0; + this.endPoint = 12; + } + this.currentimages = this.images.slice(this.startPoint, this.endPoint); + } + scrollDown() { + this.startPoint += 8; + this.endPoint += 8; + if (this.endPoint > this.images.length) { + this.endPoint = this.images.length; + this.startPoint = this.endPoint - 12; + } + + this.currentimages = this.images.slice(this.startPoint, this.endPoint); + + } + openOverlay(image: { url: string, alt: string }) { + this.selectedImage = image; + this.showOverlay = true; + } + closeOverlay() { + this.showOverlay = false; + } +} + +const routes: Routes = [{path: '', component: GalleryComponent}]; + +@NgModule({ + imports: [ + CommonModule, + RouterModule.forChild(routes), + MatButtonModule, + MatIconModule + ], + exports: [GalleryComponent], + declarations: [GalleryComponent], + providers: [] +}) +export class GalleryModule { +} diff --git a/src/app/pages/gallery/image_map.ts b/src/app/pages/gallery/image_map.ts new file mode 100644 index 0000000..079535d --- /dev/null +++ b/src/app/pages/gallery/image_map.ts @@ -0,0 +1,2 @@ + +export const images = [{"url": "/construction/IMG_0043.webp", "alt": "IMG_0043.webp"}, {"url": "/construction/IMG_0083.webp", "alt": "IMG_0083.webp"}, {"url": "/construction/IMG_0087.webp", "alt": "IMG_0087.webp"}, {"url": "/construction/IMG_0210.webp", "alt": "IMG_0210.webp"}, {"url": "/construction/IMG_0261.webp", "alt": "IMG_0261.webp"}, {"url": "/construction/IMG_0275.webp", "alt": "IMG_0275.webp"}, {"url": "/construction/IMG_0355.webp", "alt": "IMG_0355.webp"}, {"url": "/construction/IMG_0357.webp", "alt": "IMG_0357.webp"}, {"url": "/construction/IMG_0371.webp", "alt": "IMG_0371.webp"}, {"url": "/construction/IMG_0374.webp", "alt": "IMG_0374.webp"}, {"url": "/construction/IMG_0599.webp", "alt": "IMG_0599.webp"}, {"url": "/construction/IMG_0661.webp", "alt": "IMG_0661.webp"}, {"url": "/construction/IMG_0662.webp", "alt": "IMG_0662.webp"}, {"url": "/construction/IMG_0669.webp", "alt": "IMG_0669.webp"}, {"url": "/construction/IMG_0671.webp", "alt": "IMG_0671.webp"}, {"url": "/construction/IMG_0674.webp", "alt": "IMG_0674.webp"}, {"url": "/construction/IMG_0677.webp", "alt": "IMG_0677.webp"}, {"url": "/construction/IMG_0687.webp", "alt": "IMG_0687.webp"}, {"url": "/construction/IMG_0704.webp", "alt": "IMG_0704.webp"}, {"url": "/construction/IMG_0705.webp", "alt": "IMG_0705.webp"}, {"url": "/construction/IMG_0742.webp", "alt": "IMG_0742.webp"}, {"url": "/construction/IMG_0745.webp", "alt": "IMG_0745.webp"}, {"url": "/construction/IMG_0756.webp", "alt": "IMG_0756.webp"}, {"url": "/construction/IMG_0757.webp", "alt": "IMG_0757.webp"}, {"url": "/construction/IMG_0757202.webp", "alt": "IMG_0757202.webp"}, {"url": "/construction/IMG_0758.webp", "alt": "IMG_0758.webp"}, {"url": "/construction/IMG_0763.webp", "alt": "IMG_0763.webp"}, {"url": "/construction/IMG_0774.webp", "alt": "IMG_0774.webp"}, {"url": "/construction/IMG_0790.webp", "alt": "IMG_0790.webp"}, {"url": "/construction/IMG_0793.webp", "alt": "IMG_0793.webp"}, {"url": "/construction/IMG_0799.webp", "alt": "IMG_0799.webp"}, {"url": "/construction/IMG_0801.webp", "alt": "IMG_0801.webp"}, {"url": "/construction/IMG_0807.webp", "alt": "IMG_0807.webp"}, {"url": "/construction/IMG_0808.webp", "alt": "IMG_0808.webp"}, {"url": "/construction/IMG_0811.webp", "alt": "IMG_0811.webp"}, {"url": "/construction/IMG_0813.webp", "alt": "IMG_0813.webp"}, {"url": "/construction/IMG_0817.webp", "alt": "IMG_0817.webp"}, {"url": "/construction/IMG_0820.webp", "alt": "IMG_0820.webp"}, {"url": "/construction/IMG_0821.webp", "alt": "IMG_0821.webp"}, {"url": "/construction/IMG_0822.webp", "alt": "IMG_0822.webp"}, {"url": "/construction/IMG_0829.webp", "alt": "IMG_0829.webp"}, {"url": "/construction/IMG_0830.webp", "alt": "IMG_0830.webp"}, {"url": "/construction/IMG_0830202.webp", "alt": "IMG_0830202.webp"}, {"url": "/construction/IMG_0832.webp", "alt": "IMG_0832.webp"}, {"url": "/construction/IMG_0834.webp", "alt": "IMG_0834.webp"}, {"url": "/construction/IMG_0835.webp", "alt": "IMG_0835.webp"}, {"url": "/construction/IMG_0837.webp", "alt": "IMG_0837.webp"}, {"url": "/construction/IMG_0839.webp", "alt": "IMG_0839.webp"}, {"url": "/construction/IMG_0840.webp", "alt": "IMG_0840.webp"}, {"url": "/construction/IMG_0845.webp", "alt": "IMG_0845.webp"}, {"url": "/construction/IMG_0846.webp", "alt": "IMG_0846.webp"}, {"url": "/construction/IMG_0850.webp", "alt": "IMG_0850.webp"}, {"url": "/construction/IMG_0851.webp", "alt": "IMG_0851.webp"}, {"url": "/construction/IMG_0856.webp", "alt": "IMG_0856.webp"}, {"url": "/construction/IMG_0857.webp", "alt": "IMG_0857.webp"}, {"url": "/construction/IMG_0876.webp", "alt": "IMG_0876.webp"}, {"url": "/construction/IMG_0887.webp", "alt": "IMG_0887.webp"}, {"url": "/construction/IMG_0888.webp", "alt": "IMG_0888.webp"}, {"url": "/construction/IMG_0889.webp", "alt": "IMG_0889.webp"}, {"url": "/construction/IMG_0890.webp", "alt": "IMG_0890.webp"}, {"url": "/construction/IMG_0890202.webp", "alt": "IMG_0890202.webp"}, {"url": "/construction/IMG_0893.webp", "alt": "IMG_0893.webp"}, {"url": "/construction/IMG_0896.webp", "alt": "IMG_0896.webp"}, {"url": "/construction/IMG_0897.webp", "alt": "IMG_0897.webp"}, {"url": "/construction/IMG_0897202.webp", "alt": "IMG_0897202.webp"}, {"url": "/construction/IMG_0898.webp", "alt": "IMG_0898.webp"}, {"url": "/construction/IMG_0899.webp", "alt": "IMG_0899.webp"}, {"url": "/construction/IMG_0900.webp", "alt": "IMG_0900.webp"}, {"url": "/construction/IMG_0901.webp", "alt": "IMG_0901.webp"}, {"url": "/construction/IMG_0917.webp", "alt": "IMG_0917.webp"}, {"url": "/construction/IMG_0919.webp", "alt": "IMG_0919.webp"}, {"url": "/construction/IMG_0921.webp", "alt": "IMG_0921.webp"}, {"url": "/construction/IMG_0923.webp", "alt": "IMG_0923.webp"}, {"url": "/construction/IMG_0978.webp", "alt": "IMG_0978.webp"}, {"url": "/construction/IMG_1023.webp", "alt": "IMG_1023.webp"}, {"url": "/construction/IMG_1032.webp", "alt": "IMG_1032.webp"}, {"url": "/construction/IMG_1201.webp", "alt": "IMG_1201.webp"}, {"url": "/construction/IMG_1364.webp", "alt": "IMG_1364.webp"}, {"url": "/construction/IMG_1364202.webp", "alt": "IMG_1364202.webp"}, {"url": "/construction/IMG_1366.webp", "alt": "IMG_1366.webp"}, {"url": "/construction/IMG_1366202.webp", "alt": "IMG_1366202.webp"}, {"url": "/construction/IMG_1371.webp", "alt": "IMG_1371.webp"}, {"url": "/construction/IMG_1371202.webp", "alt": "IMG_1371202.webp"}, {"url": "/construction/IMG_1374.webp", "alt": "IMG_1374.webp"}, {"url": "/construction/IMG_1375.webp", "alt": "IMG_1375.webp"}, {"url": "/construction/IMG_1377.webp", "alt": "IMG_1377.webp"}, {"url": "/construction/IMG_1380.webp", "alt": "IMG_1380.webp"}, {"url": "/construction/IMG_1380202.webp", "alt": "IMG_1380202.webp"}, {"url": "/construction/IMG_1381.webp", "alt": "IMG_1381.webp"}, {"url": "/construction/IMG_1382.webp", "alt": "IMG_1382.webp"}, {"url": "/construction/IMG_1383.webp", "alt": "IMG_1383.webp"}, {"url": "/construction/IMG_1384.webp", "alt": "IMG_1384.webp"}, {"url": "/construction/IMG_1393.webp", "alt": "IMG_1393.webp"}, {"url": "/construction/IMG_1395.webp", "alt": "IMG_1395.webp"}, {"url": "/construction/IMG_1397.webp", "alt": "IMG_1397.webp"}, {"url": "/construction/IMG_1401.webp", "alt": "IMG_1401.webp"}, {"url": "/construction/IMG_1403.webp", "alt": "IMG_1403.webp"}, {"url": "/construction/IMG_1408.webp", "alt": "IMG_1408.webp"}, {"url": "/construction/IMG_1408202.webp", "alt": "IMG_1408202.webp"}, {"url": "/construction/IMG_1426.webp", "alt": "IMG_1426.webp"}, {"url": "/construction/IMG_1428.webp", "alt": "IMG_1428.webp"}, {"url": "/construction/IMG_1429.webp", "alt": "IMG_1429.webp"}, {"url": "/construction/IMG_1430.webp", "alt": "IMG_1430.webp"}, {"url": "/construction/IMG_1440.webp", "alt": "IMG_1440.webp"}, {"url": "/construction/IMG_1441.webp", "alt": "IMG_1441.webp"}, {"url": "/construction/IMG_144102.webp", "alt": "IMG_144102.webp"}, {"url": "/construction/IMG_1443.webp", "alt": "IMG_1443.webp"}, {"url": "/construction/IMG_1457.webp", "alt": "IMG_1457.webp"}, {"url": "/construction/IMG_1457202.webp", "alt": "IMG_1457202.webp"}, {"url": "/construction/IMG_1462.webp", "alt": "IMG_1462.webp"}, {"url": "/construction/IMG_1462202.webp", "alt": "IMG_1462202.webp"}, {"url": "/construction/IMG_1472.webp", "alt": "IMG_1472.webp"}, {"url": "/construction/IMG_1472202.webp", "alt": "IMG_1472202.webp"}, {"url": "/construction/IMG_1474.webp", "alt": "IMG_1474.webp"}, {"url": "/construction/IMG_1474202.webp", "alt": "IMG_1474202.webp"}, {"url": "/construction/IMG_1485.webp", "alt": "IMG_1485.webp"}, {"url": "/construction/IMG_1498.webp", "alt": "IMG_1498.webp"}, {"url": "/construction/IMG_1499.webp", "alt": "IMG_1499.webp"}, {"url": "/construction/IMG_1502.webp", "alt": "IMG_1502.webp"}, {"url": "/construction/IMG_1906.webp", "alt": "IMG_1906.webp"}, {"url": "/construction/IMG_1907.webp", "alt": "IMG_1907.webp"}, {"url": "/construction/IMG_1908.webp", "alt": "IMG_1908.webp"}, {"url": "/construction/IMG_1909.webp", "alt": "IMG_1909.webp"}, {"url": "/construction/IMG_1910.webp", "alt": "IMG_1910.webp"}, {"url": "/construction/IMG_1946.webp", "alt": "IMG_1946.webp"}, {"url": "/construction/IMG_1951.webp", "alt": "IMG_1951.webp"}, {"url": "/construction/IMG_1954.webp", "alt": "IMG_1954.webp"}, {"url": "/construction/IMG_1955.webp", "alt": "IMG_1955.webp"}, {"url": "/construction/IMG_1958.webp", "alt": "IMG_1958.webp"}, {"url": "/construction/IMG_1960.webp", "alt": "IMG_1960.webp"}, {"url": "/construction/IMG_1988.webp", "alt": "IMG_1988.webp"}, {"url": "/construction/IMG_2008.webp", "alt": "IMG_2008.webp"}, {"url": "/construction/IMG_2028.webp", "alt": "IMG_2028.webp"}, {"url": "/construction/IMG_2031.webp", "alt": "IMG_2031.webp"}, {"url": "/construction/IMG_2032.webp", "alt": "IMG_2032.webp"}, {"url": "/construction/IMG_2033.webp", "alt": "IMG_2033.webp"}, {"url": "/construction/IMG_2043.webp", "alt": "IMG_2043.webp"}, {"url": "/construction/IMG_2044.webp", "alt": "IMG_2044.webp"}, {"url": "/construction/IMG_2069.webp", "alt": "IMG_2069.webp"}, {"url": "/construction/IMG_2088.webp", "alt": "IMG_2088.webp"}, {"url": "/construction/IMG_2090.webp", "alt": "IMG_2090.webp"}, {"url": "/construction/IMG_2118.webp", "alt": "IMG_2118.webp"}, {"url": "/construction/IMG_2119.webp", "alt": "IMG_2119.webp"}, {"url": "/construction/IMG_2134.webp", "alt": "IMG_2134.webp"}, {"url": "/construction/IMG_2171.webp", "alt": "IMG_2171.webp"}, {"url": "/construction/IMG_2187.webp", "alt": "IMG_2187.webp"}, {"url": "/construction/IMG_2189.webp", "alt": "IMG_2189.webp"},{"url": "/construction/BombSquadBannerAlt.webp", "alt": "BombSquadBannerAlt.webp"}, {"url": "/construction/BombSquadBannerAltChinese.webp", "alt": "BombSquadBannerAltChinese.webp"}, {"url": "/construction/bombsquadBannerChinese.webp", "alt": "bombsquadBannerChinese.webp"}, {"url": "/construction/bombsquadBannerChinese732x480.webp", "alt": "bombsquadBannerChinese732x480.webp"}, {"url": "/construction/bombsquadBanner_732_480.webp", "alt": "bombsquadBanner_732_480.webp"}, {"url": "/construction/BombSquadCharacterOutline.webp", "alt": "BombSquadCharacterOutline.webp"}, {"url": "/construction/BombSquadIcon.webp", "alt": "BombSquadIcon.webp"}, {"url": "/construction/BombSquadIconSquareCorners.webp", "alt": "BombSquadIconSquareCorners.webp"}, {"url": "/construction/BombSquadLogo.webp", "alt": "BombSquadLogo.webp"}, {"url": "/construction/BombSquadLogo2.webp", "alt": "BombSquadLogo2.webp"}, {"url": "/construction/BombSquadLogo24.webp", "alt": "BombSquadLogo24.webp"}, {"url": "/construction/BombSquadLogoBW.webp", "alt": "BombSquadLogoBW.webp"}, {"url": "/construction/BombSquadLogoNoBack.webp", "alt": "BombSquadLogoNoBack.webp"}, {"url": "/construction/BombSquadTitleBW.webp", "alt": "BombSquadTitleBW.webp"}, {"url": "/construction/BombSquadTitleFull.webp", "alt": "BombSquadTitleFull.webp"}, {"url": "/construction/BombSquadTitleFullChinese.webp", "alt": "BombSquadTitleFullChinese.webp"}, {"url": "/construction/ctf.webp", "alt": "ctf.webp"}, {"url": "/construction/football.webp", "alt": "football.webp"}, {"url": "/construction/happyThoughts.webp", "alt": "happyThoughts.webp"}, {"url": "/construction/hockey.webp", "alt": "hockey.webp"}, {"url": "/construction/IconBig.webp", "alt": "IconBig.webp"}, {"url": "/construction/keepaway.webp", "alt": "keepaway.webp"}, {"url": "/construction/levelConstruction3.webp", "alt": "levelConstruction3.webp"}, {"url": "/construction/levelConstruction4.webp", "alt": "levelConstruction4.webp"}, {"url": "/construction/onslaught.webp", "alt": "onslaught.webp"}, {"url": "/construction/promo.webp", "alt": "promo.webp"}, {"url": "/construction/promo_square.webp", "alt": "promo_square.webp"}, {"url": "/construction/race.webp", "alt": "race.webp"}, {"url": "/construction/Runaround.webp", "alt": "Runaround.webp"}, {"url": "/construction/stepRightUp.webp", "alt": "stepRightUp.webp"}] diff --git a/src/app/shared/nav-bar/nav-bar.component.html b/src/app/shared/nav-bar/nav-bar.component.html index 1df9d19..3bc2046 100644 --- a/src/app/shared/nav-bar/nav-bar.component.html +++ b/src/app/shared/nav-bar/nav-bar.component.html @@ -7,8 +7,8 @@
--> - - + - - + @@ -99,37 +94,40 @@ Home
  • - Download + Download
  • - Github + Gallery
  • Mods
  • - Discord + Discord
  • - Servers + Servers
  • - Players + Players
    • -
    - + \ No newline at end of file