mirror of
https://github.com/Terncode/pixel.horse.git
synced 2026-09-25 06:05:52 +02:00
Archive commit
This commit is contained in:
Erik McClure
@@ -0,0 +1,63 @@
|
||||
.pony-box(*ngIf="pony")
|
||||
.pony-box-tags
|
||||
.pony-box-tag(*ngIf="special" [ngClass]="specialClass")
|
||||
| {{special}}
|
||||
.pony-box-tag.tag-friend(*ngIf="isFriend(pony)")
|
||||
| friend
|
||||
.pony-box-rect
|
||||
.pony-box-name
|
||||
| {{pony.name}}
|
||||
.pony-box-buttons
|
||||
site-info([site]="pony.site")
|
||||
|
||||
.pony-box-buttons-box
|
||||
.btn-group.btn-group-shadow.dropdown(dropdown (isOpenChange)="removingFriend = false")
|
||||
button.btn.btn-xs.dropdown-toggle(dropdownToggle [ngClass]="ignoredOrHidden ? 'btn-danger' : 'btn-default'")
|
||||
fa-icon([icon]="cogIcon")
|
||||
|
||||
.dropdown-menu(*dropdownMenu)
|
||||
button.dropdown-item((click)="toggleIgnore()")
|
||||
fa-icon.mr-2([icon]="ignoreIcon" [fixedWidth]="true")
|
||||
| {{isIgnored(pony) ? 'Unignore player' : 'Ignore player'}}
|
||||
fa-icon.ml-1(*ngIf="isIgnored(pony)" [icon]="checkIcon")
|
||||
button.dropdown-item((click)="hidePlayer(1)")
|
||||
fa-icon.mr-2([icon]="hideIcon" [fixedWidth]="true")
|
||||
| Hide player #[span.text-muted (24 hours)]
|
||||
button.dropdown-item((click)="hidePlayer(0)")
|
||||
fa-icon.mr-2([icon]="hideIcon" [fixedWidth]="true")
|
||||
| Hide player #[span.text-muted (permanent)]
|
||||
|
||||
.dropdown-divider
|
||||
button.dropdown-item((click)="sendMessageTo()")
|
||||
fa-icon.mr-2([icon]="messageIcon" [fixedWidth]="true")
|
||||
| Send whisper
|
||||
button.dropdown-item(*ngIf="!isFriend(pony)" (click)="addFriend()")
|
||||
fa-icon.mr-2.text-success([icon]="addFriendIcon" [fixedWidth]="true")
|
||||
| Send friend request
|
||||
div(*ngIf="isFriend(pony)" style="position: relative;")
|
||||
button.dropdown-item((click)="removingFriend = true; $event.stopPropagation()")
|
||||
fa-icon.mr-2.text-danger([icon]="removeFriendIcon" [fixedWidth]="true")
|
||||
| Remove from friends
|
||||
.remove-confirmation.px-2.d-flex.justify-content-center(*ngIf="removingFriend")
|
||||
button.btn.btn-sm.btn-outline-success.flex-grow-1((click)="removingFriend = false; $event.stopPropagation()")
|
||||
| Cancel
|
||||
button.btn.btn-sm.btn-outline-danger.flex-grow-1.ml-1((click)="removeFriend()")
|
||||
| Confirm remove
|
||||
|
||||
div(*ngIf="canInviteToSupporterServers")
|
||||
h6.dropdown-header Supporter options
|
||||
button.dropdown-item((click)="inviteToSupporterServers()")
|
||||
fa-icon.mr-2.text-success([icon]="starIcon" [fixedWidth]="true")
|
||||
| Invite to supporter servers
|
||||
fa-icon.ml-1(*ngIf="isInvitedToSupporterServers" [icon]="checkIcon")
|
||||
|
||||
.btn-group.btn-group-shadow(*ngIf="canInviteToParty || canRemoveFromParty || canPromoteToLeader")
|
||||
button.btn.btn-xs.btn-default(*ngIf="canInviteToParty" (click)="inviteToParty()" tooltip="Invite to party")
|
||||
fa-icon([icon]="inviteIcon")
|
||||
button.btn.btn-xs.btn-default(*ngIf="canRemoveFromParty" (click)="removeFromParty()" tooltip="Remove from party")
|
||||
fa-icon([icon]="removeIcon")
|
||||
button.btn.btn-xs.btn-default(*ngIf="canPromoteToLeader" (click)="promoteToLeader()" tooltip="Promote to leader")
|
||||
fa-icon([icon]="leaderIcon")
|
||||
mod-box(*ngIf="isMod" [pony]="pony")
|
||||
|
||||
portrait-box.pony-box-avatar([pony]="paletteInfo")
|
||||
@@ -0,0 +1,113 @@
|
||||
@import '../../../../styles/partials/variables';
|
||||
|
||||
.pony-box {
|
||||
color: #333;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.pony-box-tags {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 50px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.pony-box-tag {
|
||||
background: #777;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
padding: 1px 10px 2px 10px;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
margin-left: 5px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
padding-left: 40px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&.tag-dev {
|
||||
background: $dev;
|
||||
}
|
||||
|
||||
&.tag-mod {
|
||||
background: $mod;
|
||||
}
|
||||
|
||||
&.tag-sup1 {
|
||||
background: $supporter-1;
|
||||
}
|
||||
|
||||
&.tag-sup2 {
|
||||
background: darken($supporter-2, 7%);
|
||||
background: linear-gradient(to bottom, #ffcd99, #ffaa3b 10%, #c77305);
|
||||
color: #3b2f1a;
|
||||
}
|
||||
|
||||
&.tag-sup3 {
|
||||
background: darken($supporter-3, 7%);
|
||||
background: linear-gradient(to bottom, #fffda4, #ffde3b 10%, #fdbb0b);
|
||||
color: #49391c;
|
||||
}
|
||||
|
||||
&.tag-friend {
|
||||
background: $friends-color;
|
||||
}
|
||||
}
|
||||
|
||||
.pony-box-rect {
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 50px;
|
||||
width: 250px;
|
||||
height: 60px;
|
||||
border-top-right-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
padding-left: 58px;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.pony-box-name {
|
||||
font-size: 20px;
|
||||
padding-top: 3px;
|
||||
padding-right: 5px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pony-box-buttons {
|
||||
padding-top: 2px;
|
||||
padding-right: 8px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pony-box-buttons-box {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
left: 48px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pony-box-avatar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.remove-confirmation {
|
||||
background: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { PlayerAction, Pony, EntityPlayerState, Entity } from '../../../common/interfaces';
|
||||
import { getPaletteInfo } from '../../../common/pony';
|
||||
import { Model } from '../../services/model';
|
||||
import { PonyTownGame } from '../../../client/game';
|
||||
import {
|
||||
partyLeaderIcon, faUserPlus, faUserTimes, faCheck, faMicrophoneSlash, faEyeSlash, faStar, faUserMinus,
|
||||
faUserCog, faComment
|
||||
} from '../../../client/icons';
|
||||
import { DAY } from '../../../common/constants';
|
||||
import { isPonyInParty, isPartyLeader } from '../../../client/partyUtils';
|
||||
import { getTag } from '../../../common/tags';
|
||||
import { isIgnored, isHidden, isFriend } from '../../../common/entityUtils';
|
||||
import { setFlag } from '../../../common/utils';
|
||||
|
||||
@Component({
|
||||
selector: 'pony-box',
|
||||
templateUrl: 'pony-box.pug',
|
||||
styleUrls: ['pony-box.scss'],
|
||||
})
|
||||
export class PonyBox {
|
||||
readonly leaderIcon = partyLeaderIcon;
|
||||
readonly inviteIcon = faUserPlus;
|
||||
readonly removeIcon = faUserTimes;
|
||||
readonly cogIcon = faUserCog;
|
||||
readonly checkIcon = faCheck;
|
||||
readonly ignoreIcon = faMicrophoneSlash;
|
||||
readonly hideIcon = faEyeSlash;
|
||||
readonly starIcon = faStar;
|
||||
readonly addFriendIcon = faUserPlus;
|
||||
readonly removeFriendIcon = faUserMinus;
|
||||
readonly messageIcon = faComment;
|
||||
isIgnored = isIgnored;
|
||||
isFriend = isFriend;
|
||||
removingFriend = false;
|
||||
@Input() pony?: Pony;
|
||||
@Output() sendMessage = new EventEmitter<Entity>();
|
||||
constructor(private model: Model, private game: PonyTownGame) {
|
||||
}
|
||||
get ignoredOrHidden() {
|
||||
return this.pony && (isIgnored(this.pony) || isHidden(this.pony));
|
||||
}
|
||||
get isMod() {
|
||||
return this.model.isMod;
|
||||
}
|
||||
get canInviteToParty() {
|
||||
return this.pony && (!this.game.party || (isPartyLeader(this.game) && !isPonyInParty(this.game.party, this.pony, true)));
|
||||
}
|
||||
get canRemoveFromParty() {
|
||||
return this.pony && isPartyLeader(this.game) && isPonyInParty(this.game.party, this.pony, true);
|
||||
}
|
||||
get canPromoteToLeader() {
|
||||
return this.pony && isPartyLeader(this.game) && isPonyInParty(this.game.party, this.pony, false);
|
||||
}
|
||||
get special() {
|
||||
const tag = getTag(this.pony && this.pony.tag);
|
||||
return tag && tag.name;
|
||||
}
|
||||
get specialClass() {
|
||||
const tag = getTag(this.pony && this.pony.tag);
|
||||
return tag && tag.tagClass;
|
||||
}
|
||||
get paletteInfo() {
|
||||
return this.pony && getPaletteInfo(this.pony);
|
||||
}
|
||||
inviteToParty() {
|
||||
this.playerAction(PlayerAction.InviteToParty);
|
||||
}
|
||||
removeFromParty() {
|
||||
this.playerAction(PlayerAction.RemoveFromParty);
|
||||
}
|
||||
promoteToLeader() {
|
||||
this.playerAction(PlayerAction.PromotePartyLeader);
|
||||
}
|
||||
toggleIgnore() {
|
||||
if (this.pony) {
|
||||
const ignored = isIgnored(this.pony);
|
||||
this.playerAction(ignored ? PlayerAction.Unignore : PlayerAction.Ignore);
|
||||
this.pony.playerState = setFlag(this.pony.playerState, EntityPlayerState.Ignored, !ignored);
|
||||
}
|
||||
}
|
||||
hidePlayer(days: number) {
|
||||
this.playerAction(PlayerAction.HidePlayer, days * DAY);
|
||||
}
|
||||
addFriend() {
|
||||
this.playerAction(PlayerAction.AddFriend);
|
||||
}
|
||||
removeFriend() {
|
||||
this.playerAction(PlayerAction.RemoveFriend);
|
||||
}
|
||||
private playerAction(type: PlayerAction, param: any = undefined) {
|
||||
const ponyId = this.pony && this.pony.id;
|
||||
|
||||
if (ponyId) {
|
||||
this.game.send(server => server.playerAction(ponyId, type, param));
|
||||
}
|
||||
}
|
||||
sendMessageTo() {
|
||||
if (this.pony) {
|
||||
this.sendMessage.emit(this.pony);
|
||||
}
|
||||
}
|
||||
// supporter servers
|
||||
get canInviteToSupporterServers() {
|
||||
return false; // DEVELOPMENT; // TODO: check if ignored or hidden
|
||||
}
|
||||
get isInvitedToSupporterServers() {
|
||||
return false;
|
||||
}
|
||||
inviteToSupporterServers() {
|
||||
this.playerAction(PlayerAction.InviteToSupporterServers);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user