Archive commit

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

@@ -0,0 +1,6 @@
+.party-box([class.pending]="member.pending" [class.offline]="member.offline" (window:resize)="true")
+	portrait-box.cursor-pointer([pony]="paletteInfo" size="small" (click)="click()")
+	.party-box-icon.party-box-leader.pointer-none(*ngIf="member.leader" title="Party leader")
+		fa-icon([icon]="leaderIcon" size="xs")
+	.party-box-icon.party-box-offline.pointer-none(*ngIf="member.offline" title="Offline")
+		fa-icon([icon]="offlineIcon" size="sm")

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

@@ -0,0 +1,33 @@
+.party-box {
+	margin-bottom: 10px;
+	position: relative;
+
+	&.pending {
+		opacity: 0.5;
+	}
+
+	&.offline {
+		opacity: 0.7;
+		filter: grayscale(100%);
+	}
+}
+
+.party-box-icon {
+	position: absolute;
+	text-shadow: 0 0 5px #000;
+	font-size: 18px;
+	
+	> fa-icon {
+		filter: drop-shadow(0 0 5px #000);
+	}
+}
+
+.party-box-leader {
+	left: -5px;
+	top: -14px;
+}
+
+.party-box-offline {
+	left: -2px;
+	bottom: -8px;
+}

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

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { PartyMember } from '../../../common/interfaces';
+import { PonyTownGame } from '../../../client/game';
+import { partyLeaderIcon, offlineIcon } from '../../../client/icons';
+import { getPaletteInfo } from '../../../common/pony';
+
+@Component({
+	selector: 'party-box',
+	templateUrl: 'party-box.pug',
+	styleUrls: ['party-box.scss'],
+})
+export class PartyBox {
+	readonly leaderIcon = partyLeaderIcon;
+	readonly offlineIcon = offlineIcon;
+	@Input() member!: PartyMember;
+	constructor(private game: PonyTownGame) {
+	}
+	get paletteInfo() {
+		return this.member.pony && getPaletteInfo(this.member.pony);
+	}
+	click() {
+		this.game.select(this.member.pony);
+	}
+}