Merge pull request #45 from Fasguy/dev

v1.3.1

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "toolbox",
-	"version": "1.3.0",
+	"version": "1.3.1",
 	"type": "commonjs",
 	"scripts": {
 		"ng": "ng",
@@ -15,22 +15,22 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/common": "^15.1.0",
-		"@angular/compiler": "^15.1.0",
-		"@angular/core": "^15.1.0",
-		"@angular/platform-browser": "^15.1.0",
-		"@angular/platform-browser-dynamic": "^15.1.0",
-		"@angular/router": "^15.1.0",
+		"@angular/common": "^16.1.4",
+		"@angular/compiler": "^16.1.4",
+		"@angular/core": "^16.1.4",
+		"@angular/platform-browser": "^16.1.4",
+		"@angular/platform-browser-dynamic": "^16.1.4",
+		"@angular/router": "^16.1.4",
 		"comlink": "^4.3.1",
 		"fflate": "^0.7.3",
 		"rxjs": "~7.5.0",
 		"serialize-error": "^11.0.0",
-		"zone.js": "~0.11.4"
+		"zone.js": "~0.13.0"
 	},
 	"devDependencies": {
-		"@angular-devkit/build-angular": "^15.1.1",
-		"@angular/cli": "^15.1.1",
-		"@angular/compiler-cli": "^15.1.0",
+		"@angular-devkit/build-angular": "^16.1.4",
+		"@angular/cli": "^16.1.4",
+		"@angular/compiler-cli": "^16.1.4",
 		"ts-node": "^10.8.2",
 		"tslib": "^2.4.0",
 		"typescript": "~4.9.4"

projects/toolbox-main/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { MusicAreaComponent } from './common/elements/music-area/music-area.comp
 import { PanoramaComponent } from "./common/elements/panorama/panorama.component";
 import { SelectionComponent } from "./common/elements/selection/selection.component";
 import { SubSectionComponent } from "./common/elements/sub-section/sub-section.component";
+import { TooltipComponent } from './common/elements/tooltip/tooltip.component';
 import { VersionSelectorViewComponent } from "./common/views/version-selector/version-selector.component";
 import { WindowComponent } from "./common/views/window/window.component";
 import { ChangelogComponent } from "./common/views/windows/changelog/changelog.component";
@@ -46,6 +47,9 @@ import { LocalInterceptor } from "./common/interceptors/local/local.interceptor"
 import { FilterPipe } from "./common/pipes/filter/filter.pipe";
 import { ReversePipe } from "./common/pipes/reverse/reverse.pipe";
 
+//Directives
+import { HoldEventDirective } from './common/directives/hold-event/hold-event.directive';
+
 @NgModule({
 	declarations: [
 		AppComponent,
@@ -77,7 +81,9 @@ import { ReversePipe } from "./common/pipes/reverse/reverse.pipe";
 		CraftingRecipeRandomizerInstructionsComponent,
 		CraftingRecipeRandomizerFAQComponent,
 		PresetWarningComponent,
-		MusicAreaComponent
+		MusicAreaComponent,
+		HoldEventDirective,
+		TooltipComponent
 	],
 	imports: [
 		BrowserModule,

projects/toolbox-main/src/app/common/directives/hold-event/hold-event.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+
+@Directive({
+	selector: '[holdEvent]'
+})
+export class HoldEventDirective {
+	private _holdInterval: any;
+
+	@Output()
+	protected hold = new EventEmitter();
+
+	@HostListener('pointerdown')
+	private onPointerDown() {
+		this._holdInterval = setInterval(() => {
+			this.hold.emit();
+		}, 16);
+	}
+
+	@HostListener('pointerup')
+	private onPointerUp() {
+		clearInterval(this._holdInterval);
+	}
+}

projects/toolbox-main/src/app/common/elements/footer/footer.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="footer-links">
 	<button *ngFor="let item of items" (click)="item.click()">{{item.text}}</button>
 </div>
 <div class="final-notes">

projects/toolbox-main/src/app/common/elements/footer/footer.component.scss

@@ -24,6 +24,14 @@ button {
 	}
 }
 
+.footer-links {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: center;
+}
+
 .final-notes {
 	text-align: center;
 }

projects/toolbox-main/src/app/common/elements/header/header.component.html

@@ -1,4 +1,14 @@
 <p>Fasguy's Minecraft Toolbox v{{version}}</p>
-<div class="tool-selection-container">
-	<a *ngFor="let route of routes | filter: filterTitledRoutes" [routerLink]="route.path" routerLinkActive="is-active">{{route!.data!["title"]}}</a>
+<div class="overflow-helper">
+	<div class="overflow-container" #overflowContainer (wheel)="onWheel($event, overflowContainer)">
+		<div class="tool-selection-container">
+			<div class="outer-border" *ngFor="let route of routes | filter: filterTitledRoutes">
+				<a class="route" [routerLink]="route.path" routerLinkActive="is-active"><span class="route-title">{{route!.data!["title"]}}</span></a>
+			</div>
+		</div>
+	</div>
+	<div class="controls">
+		<button class="scroll left" holdEvent (hold)="scrollAlong(-50)"></button>
+		<button class="scroll right" holdEvent (hold)="scrollAlong(50)"></button>
+	</div>
 </div>

projects/toolbox-main/src/app/common/elements/header/header.component.scss

@@ -2,21 +2,165 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 10px 5px;
+	padding-top: 10px;
 	background:
 		linear-gradient(#000000B0, transparent),
 		url("../../../../style/images/spruce_planks.png") repeat 0 0 / 3em 3em;
+	background-blend-mode: multiply;
+	background-color: rgb(126, 126, 126);
+	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
 
 	&>div {
-		margin: 5px 0;
+		margin-top: 5px;
 	}
 }
 
-a {
-	margin: 0 5px;
+.overflow-helper {
+	position: relative;
+	width: 100%;
+
+	.controls {
+		display: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 44px;
+		pointer-events: none;
+
+		.scroll {
+			pointer-events: all;
+			position: absolute;
+			top: 0;
+			width: 44px;
+			height: 44px;
+			z-index: 1;
+			border: none;
+
+			&.left {
+				left: 0;
+				background:
+					url("../../../../style/sprites/arrows.png") no-repeat 75% 0 / 300%,
+					linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent);
+			}
+
+			&.right {
+				right: 0;
+				background:
+					url("../../../../style/sprites/arrows.png") no-repeat 0 0 / 300%,
+					linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent);
+			}
+
+			&:hover {
+				background-position-y: 75%;
+			}
+		}
+	}
+}
+
+.overflow-container {
+	position: relative;
+	width: 100%;
+	padding: 0 44px;
+	box-sizing: border-box;
+	overflow-x: auto;
+	overflow-y: hidden;
+
+	scrollbar-width: none;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&.overflowing~.controls {
+		display: block;
+	}
+}
+
+.tool-selection-container {
+	display: flex;
+	align-items: flex-end;
+	width: min-content;
+	margin: auto;
+}
+
+.outer-border {
+	border: 2px solid black;
+	border-bottom: none;
 }
 
-.is-active {
-	color: #f3ed25;
-	border-color: #f3ed25;
+.route {
+	position: relative;
+	box-sizing: border-box;
+	white-space: nowrap;
+	display: table-cell;
+	vertical-align: middle;
+	width: 261px;
+	min-width: 261px;
+	max-width: 261px;
+	height: 34px;
+	border: 2px solid rgba(255, 255, 255, 0.1);
+	border-bottom: none;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	text-align: center;
+	box-shadow: none;
+	padding: 0 5px;
+
+	.route-title {
+		transition: 1s;
+		min-width: 100%;
+	}
+
+	&:hover {
+		border-color: #fff;
+		text-overflow: unset;
+
+		.route-title {
+			display: inline-block;
+			animation: move-text 5s infinite;
+		}
+
+		&::before {
+			content: "";
+			box-sizing: border-box;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			border-bottom: 2px solid #fff;
+			z-index: 1;
+		}
+	}
+
+	&.is-active {
+		height: 42px;
+		border-color: #fff;
+		border-bottom: none;
+		backdrop-filter: brightness(2);
+
+		.route-title {
+			display: inline-block;
+			animation: move-text 5s infinite;
+		}
+
+		&::before {
+			display: none;
+		}
+	}
+}
+
+@keyframes move-text {
+
+	0%,
+	75%,
+	100% {
+		transform: translateX(0);
+	}
+
+	25%,
+	50% {
+		transform: translateX(calc(247px - 100%));
+	}
 }

projects/toolbox-main/src/app/common/elements/header/header.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from "@angular/core";
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from "@angular/core";
 import { Route, Router, Routes } from "@angular/router";
 
 @Component({
@@ -8,6 +8,9 @@ import { Route, Router, Routes } from "@angular/router";
 	changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class HeaderComponent implements AfterViewInit {
+	@ViewChild('overflowContainer')
+	private _overflowContainer!: ElementRef<HTMLElement>;
+
 	protected routes: Routes = [];
 
 	@Input()
@@ -22,9 +25,25 @@ export class HeaderComponent implements AfterViewInit {
 
 	public ngAfterViewInit(): void {
 		this._changeDetector.detach();
+
+		const observer = new ResizeObserver(entries => {
+			const element = entries[0].target;
+			element.classList.toggle("overflowing", element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth);
+		});
+
+		observer.observe(this._overflowContainer.nativeElement);
 	}
 
 	protected filterTitledRoutes(t: Route): boolean {
 		return t.data?.["title"] != null;
 	}
+
+	protected scrollAlong(units: number): void {
+		this._overflowContainer.nativeElement.scrollLeft += units;
+	}
+
+	protected onWheel(e: WheelEvent, target: HTMLElement) {
+		e.preventDefault();
+		target.scrollLeft += e.deltaY;
+	}
 }

projects/toolbox-main/src/app/common/elements/music-area/music-area.component.ts

@@ -18,9 +18,11 @@ export class MusicAreaComponent implements AfterViewInit, OnDestroy {
 	public constructor(
 		private _netRequest: NetRequestService
 	) {
-		this._audio.onended = this._audio.onpause = () => {
+		this._audio.onpause = () => {
 			this.playingAudio = undefined;
 		}
+
+		this._audio.onended = this.jukeboxClick.bind(this);
 	}
 
 	public async ngAfterViewInit(): Promise<void> {

projects/toolbox-main/src/app/common/elements/selection/selection.component.scss

@@ -87,7 +87,7 @@
 
 	&.collapsed {
 		max-height: 50px;
-		overflow-y: hidden;
+		overflow: hidden;
 		-webkit-mask-image: linear-gradient(to bottom, black, transparent);
 		mask-image: linear-gradient(to bottom, black, transparent);