Archive commit

src/ts/components/shared/swap-box/swap-box.pug

@@ -0,0 +1,7 @@
+.dropdown(#dropdown="ag-dropdown" dropdown (isOpenChange)="toggleSwapDropdown()" [hookToCanvas]="true" style="padding-bottom: 5px")
+	button.game-button.dropdown-toggle.no-arrow(dropdownToggle title="Swap")
+		fa-icon([icon]="swapIcon" [fixedWidth]="true")
+		fa-icon.timer-icon([icon]="timerIcon" [style.display]="timeout ? 'block' : 'none'")
+	.dropdown-menu.dropdown-menu-right(*dropdownMenu)
+		portrait-box([hidden]="!previewInfo" [pony]="previewInfo" size="medium" style="position: absolute; top: 5px; left: -80px;")
+		character-list((selectCharacter)="swapPony($event)" (close)="dropdown.close()" (previewCharacter)="preview($event)" [inGame]="true")

src/ts/components/shared/swap-box/swap-box.scss

@@ -0,0 +1,7 @@
+.timer-icon {
+	position: absolute;
+	top: 15px;
+	right: 3px;
+	font-size: 14px;
+	color: #ffcc55;
+}

src/ts/components/shared/swap-box/swap-box.ts

@@ -0,0 +1,43 @@
+import { Component, NgZone, ViewChild } from '@angular/core';
+import { PonyTownGame } from '../../../client/game';
+import { PonyObject, Action } from '../../../common/interfaces';
+import { Dropdown } from '../directives/dropdown';
+import { faClock, faExchangeAlt } from '../../../client/icons';
+import { toPalette, mockPaletteManager } from '../../../common/ponyInfo';
+import { Model } from '../../services/model';
+// import { SWAP_TIMEOUT, SECOND } from '../../../common/constants';
+
+@Component({
+	selector: 'swap-box',
+	templateUrl: 'swap-box.pug',
+	styleUrls: ['swap-box.scss'],
+})
+export class SwapBox {
+	readonly swapIcon = faExchangeAlt;
+	readonly timerIcon = faClock;
+	previewInfo: any;
+	@ViewChild('dropdown', { static: true }) dropdown!: Dropdown;
+	timeout = false;
+	constructor(private game: PonyTownGame, private zone: NgZone, private model: Model) {
+	}
+	toggleSwapDropdown() {
+		this.zone.run(() => setTimeout(() => { }, 10));
+	}
+	swapPony(pony: PonyObject) {
+		this.game.send(server => server.actionParam(Action.SwapCharacter, pony.id));
+		setTimeout(() => {
+			this.dropdown && this.dropdown.close();
+			pony.lastUsed = (new Date()).toISOString();
+			this.model.sortPonies();
+		});
+
+		// if (!this.timeout) {
+		// 	this.timeout = true;
+		// 	setTimeout(() => this.timeout = false, SWAP_TIMEOUT + SECOND);
+		// }
+	}
+	preview(pony: PonyObject | undefined) {
+		const info = pony && pony.ponyInfo;
+		this.previewInfo = info && toPalette(info, mockPaletteManager);
+	}
+}