Archive commit

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

@@ -0,0 +1,6 @@
+button.action-button(
+	(click)="click()" [class.active]="active" [class.no-shadow]="!shadow" [title]="action && action.title || ''")
+	canvas(#canvas width="29" height="29")
+	.shortcut {{shortcut}}
+	.count(*ngIf="action && action.type === 'item'") {{action.count}}
+	.cover

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

@@ -0,0 +1,95 @@
+@import '../../../../styles/partials/variables';
+
+$button-size: 29px;
+$border-radius: 8px;
+$default-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) !important;
+$hover-box-shadow: 0 0 7px rgba(0, 0, 0, 0.8) !important;
+$pressed-box-shadow: 0 0 7px rgba(0, 0, 0, 1) !important;
+
+:host {
+	display: block;
+	width: $button-size;
+	height: $button-size;
+
+	&.draggable-hover {
+		box-shadow: 0 0 5px 1px white;
+		border-radius: 4px;
+	}
+
+	&.empty {
+		visibility: hidden;
+	}
+}
+
+.action-button {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: rgba(0, 0, 0, 0.3);
+	border-radius: 4px;
+	box-shadow: $default-box-shadow;
+	position: relative;
+	user-select: none;
+
+	&:hover, &:focus:hover {
+		box-shadow: $hover-box-shadow;
+	}
+
+	&:focus {
+		outline: none;
+		box-shadow: $default-box-shadow;
+	}
+
+	&:active, &:hover:active, &:focus:hover:active {
+		box-shadow: $pressed-box-shadow, inset 0 0 0 black;
+
+		> canvas {
+			opacity: 0.8;
+		}
+	}
+
+	&.active {
+		border-color: white;
+	}
+
+	&.no-shadow, &:focus.no-shadow, &:focus:hover.no-shadow {
+		box-shadow: none !important;
+	}
+}
+
+canvas {
+	display: block;
+	border-radius: 4px;
+}
+
+.shortcut {
+	pointer-events: none;
+	position: absolute;
+	top: -4px;
+	right: -2px;
+	font-size: 9px;
+	color: white;
+	font-weight: bold;
+	text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black,
+		0px 0px 1px black, 0px 0px 1px black;
+}
+
+.count {
+	pointer-events: none;
+	position: absolute;
+	bottom: -7px;
+	right: -2px;
+	font-size: 12px;
+	color: white;
+	font-weight: bold;
+	text-shadow: 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black,
+		0px 0px 1px black, 0px 0px 1px black;
+}
+
+.cover {
+	position: absolute;
+	left: -5px;
+	top: -5px;
+	right: -5px;
+	bottom: -5px;
+}

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

@@ -0,0 +1,46 @@
+import { Component, Input, ViewChild, ElementRef, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
+import { ButtonAction } from '../../../common/interfaces';
+import { PonyTownGame, actionButtons } from '../../../client/game';
+import { drawAction } from '../../../client/buttonActions';
+import { removeItem } from '../../../common/utils';
+
+@Component({
+	selector: 'action-button',
+	templateUrl: 'action-button.pug',
+	styleUrls: ['action-button.scss'],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: {
+		'[class.empty]': '!editable && !action',
+	},
+})
+export class ActionButton {
+	@Input() action?: ButtonAction;
+	@Input() editable = false;
+	@Input() active = false;
+	@Input() shadow = true;
+	@Input() shortcut = '';
+	@Output() use = new EventEmitter<ButtonAction>();
+	@ViewChild('canvas', { static: true }) canvas!: ElementRef;
+	dirty = true;
+	private state: any = {};
+	constructor(private game: PonyTownGame) {
+	}
+	ngOnInit() {
+		actionButtons.push(this);
+	}
+	ngOnDestroy() {
+		removeItem(actionButtons, this);
+	}
+	ngOnChanges() {
+		this.dirty = true;
+	}
+	click() {
+		if (this.action) {
+			this.use.emit(this.action);
+		}
+	}
+	draw() {
+		drawAction(this.canvas.nativeElement, this.action, this.state, this.game);
+		this.dirty = false;
+	}
+}