Archive commit

src/ts/components/shared/action-bar/action-bar.pug

@@ -0,0 +1,19 @@
+.action-bar(
+	[class.has-scroller]="hasScroller" [class.is-mobile]="mobile" [class.is-blurred]="blurred"
+	#scroller (mousewheel)="scroll($event)" (scroll)="true")
+	action-button(
+		*ngFor="let a of actions; let i = index"
+		[class.blur-me]="i < blurCount"
+		[action]="a.action"
+		[active]="a.action && activeAction === a"
+		[editable]="editable"
+		[shortcut]="shortcuts[i] || ''"
+		(use)="use(a.action)"
+		[draggableItem]="a.action"
+		[draggableDisabled]="!editable || !a.action"
+		[draggablePad]="10"
+		(draggableDrag)="drag(i)"
+		(draggableDrop)="drop($event, i)")
+	.action-button-padding
+.scroller-label
+	| scroll using this bar

src/ts/components/shared/action-bar/action-bar.scss

@@ -0,0 +1,72 @@
+@import '../../../../styles/partials/variables';
+
+:host {
+	display: block;
+	pointer-events: none;
+}
+
+.action-bar {
+	overflow: hidden;
+	padding-bottom: 7px;
+	padding-top: 7px;
+	padding-right: 5px;
+	max-width: calc(100vw - 50px);
+	display: flex;
+
+	&.is-mobile {
+		overflow-x: scroll;
+		overflow-y: hidden;	
+		pointer-events: auto;
+	}
+	
+	&.is-blurred > .blur-me {
+		filter: blur(3px);
+	}
+
+	// &.is-blurred:not(.is-mobile) > :nth-child(-n+11) {
+	// 	filter: blur(3px);
+	// }
+
+	// &.is-blurred.is-mobile > :nth-child(-n+9) {
+	// 	filter: blur(3px);
+	// }
+
+	&.has-scroller {
+		padding-top: 25px;
+		min-width: calc(100vw - 50px);
+	}
+}
+
+.action-button-padding {
+	min-width: 1px;
+	width: 1px;
+	height: 1px;
+}
+
+.scroller-label {
+	display: none;
+
+	.has-scroller + & {
+		display: block;
+		background: #111;
+		position: absolute;
+		left: 0;
+		top: 0;
+		right: 0;
+		padding: 1px;
+		margin-top: 5px;
+		text-align: center;
+		color: $text-muted;
+	}
+}
+
+action-button {
+	pointer-events: auto;
+	margin: 3px 6px;
+
+	.is-mobile & {
+		margin-left: 10px;
+		margin-right: 10px;
+		margin-top: 15px;
+	}
+}

src/ts/components/shared/action-bar/action-bar.ts

@@ -0,0 +1,84 @@
+import { Component, Input, ViewChild, ElementRef } from '@angular/core';
+import { ButtonAction } from '../../../common/interfaces';
+import { PonyTownGame } from '../../../client/game';
+import { isMobile } from '../../../client/data';
+import { useAction, serializeActions } from '../../../client/buttonActions';
+import { SettingsService } from '../../services/settingsService';
+import { ACTIONS_LIMIT } from '../../../common/constants';
+import { last } from '../../../common/utils';
+
+@Component({
+	selector: 'action-bar',
+	templateUrl: 'action-bar.pug',
+	styleUrls: ['action-bar.scss'],
+})
+export class ActionBar {
+	@ViewChild('scroller', { static: true }) scroller!: ElementRef;
+	@Input() blurred = false;
+	activeAction: ButtonAction | undefined = undefined;
+	shortcuts = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '='];
+	private _editable = false;
+	constructor(private game: PonyTownGame, private settings: SettingsService) {
+	}
+	@Input() get editable() {
+		return this._editable;
+	}
+	set editable(value) {
+		if (this._editable !== value) {
+			this._editable = value;
+			this.updateFreeSlots();
+
+			if (!value) {
+				this.save();
+			}
+		}
+	}
+	get actions() {
+		return this.game.actions;
+	}
+	get mobile() {
+		return isMobile;
+	}
+	get hasScroller() {
+		return this.editable && isMobile;
+	}
+	get blurCount() {
+		const boxWidth = isMobile ? 50 : 40;
+		const width = 450 + this.scroller.nativeElement.scrollLeft;
+		return Math.floor(width / boxWidth);
+	}
+	use(action: ButtonAction | undefined) {
+		useAction(this.game, action);
+	}
+	drag(index: number) {
+		this.actions[index].action = undefined;
+		this.updateFreeSlots();
+	}
+	drop(action: ButtonAction | undefined, index: number) {
+		this.actions[index].action = action;
+		this.updateFreeSlots();
+	}
+	save() {
+		const settings = { ...this.settings.account, actions: serializeActions(this.actions) };
+		this.settings.saveAccountSettings(settings);
+	}
+	scroll(e: MouseWheelEvent) {
+		if (e.deltaY) {
+			const delta = e.deltaY > 0 ? 1 : -1;
+			this.scroller.nativeElement.scrollLeft += delta * 20;
+		}
+	}
+	private updateFreeSlots() {
+		const actions = this.actions;
+
+		if (this.editable) {
+			while (actions.length < 5 || (last(actions)!.action !== undefined && actions.length < ACTIONS_LIMIT)) {
+				actions.push({ action: undefined });
+			}
+		} else {
+			while (actions.length > 0 && last(actions)!.action === undefined) {
+				actions.pop();
+			}
+		}
+	}
+}