Initial version of pl3xmap player facing. Closes #129

This commit is contained in:
James Lyne 2021-12-09 01:13:23 +00:00
parent 670a0a8c4a
commit 5a778828f8
8 changed files with 74 additions and 1 deletions

View File

@ -52,6 +52,7 @@ export default defineComponent({
imageSize: componentSettings.value!.imageSize, imageSize: componentSettings.value!.imageSize,
showHealth: componentSettings.value!.showHealth, showHealth: componentSettings.value!.showHealth,
showArmor: componentSettings.value!.showArmor, showArmor: componentSettings.value!.showArmor,
showYaw: componentSettings.value!.showYaw,
pane: 'players', pane: 'players',
}), }),

2
src/index.d.ts vendored
View File

@ -168,6 +168,7 @@ interface LiveAtlasPlayer {
sort: number; sort: number;
hidden: boolean; hidden: boolean;
location: LiveAtlasLocation; location: LiveAtlasLocation;
yaw?: number;
} }
interface LiveAtlasSortedPlayers extends Array<LiveAtlasPlayer> { interface LiveAtlasSortedPlayers extends Array<LiveAtlasPlayer> {
@ -325,6 +326,7 @@ interface LiveAtlasPlayerMarkerConfig {
imageSize: LiveAtlasPlayerImageSize; imageSize: LiveAtlasPlayerImageSize;
showHealth: boolean; showHealth: boolean;
showArmor: boolean; showArmor: boolean;
showYaw: boolean;
} }
export type LiveAtlasPlayerImageSize = 'none' | 'small' | 'large' | 'body'; export type LiveAtlasPlayerImageSize = 'none' | 'small' | 'large' | 'body';

View File

@ -31,6 +31,7 @@ export interface PlayerIconOptions extends BaseIconOptions {
imageSize: LiveAtlasPlayerImageSize, imageSize: LiveAtlasPlayerImageSize,
showHealth: boolean, showHealth: boolean,
showArmor: boolean, showArmor: boolean,
showYaw: boolean,
} }
export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> { export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
@ -46,6 +47,9 @@ export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
private _playerHealth?: HTMLMeterElement; private _playerHealth?: HTMLMeterElement;
private _playerArmor?: HTMLMeterElement; private _playerArmor?: HTMLMeterElement;
private _playerYaw?: HTMLDivElement;
private _currentYaw = 0;
constructor(player: LiveAtlasPlayer, options: PlayerIconOptions) { constructor(player: LiveAtlasPlayer, options: PlayerIconOptions) {
super(options as LayerOptions); super(options as LayerOptions);
@ -103,6 +107,14 @@ export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
this._playerInfo.appendChild(this._playerArmor); this._playerInfo.appendChild(this._playerArmor);
} }
if (this.options.showYaw) {
this._container.classList.add('player--yaw');
this._playerYaw = document.createElement('div');
this._playerYaw.className = 'player__yaw';
this._container.appendChild(this._playerYaw);
}
this._container.appendChild(this._playerInfo); this._container.appendChild(this._playerInfo);
this.update(); this.update();
@ -140,5 +152,15 @@ export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
this._playerArmor!.hidden = true; this._playerArmor!.hidden = true;
} }
} }
if(this.options.showYaw) {
if(this._player.yaw !== undefined) {
// https://stackoverflow.com/a/53416030
const delta = ((((this._player.yaw - this._currentYaw) % 360) + 540) % 360) - 180;
this._currentYaw = this._currentYaw + delta;
this._playerYaw!.style.setProperty('--player-yaw', `${this._currentYaw}deg`);
}
}
} }
} }

View File

@ -24,6 +24,7 @@ export interface PlayerMarkerOptions extends MarkerOptions {
imageSize: LiveAtlasPlayerImageSize, imageSize: LiveAtlasPlayerImageSize,
showHealth: boolean, showHealth: boolean,
showArmor: boolean, showArmor: boolean,
showYaw: boolean,
compact: boolean, compact: boolean,
} }
@ -42,6 +43,7 @@ export class PlayerMarker extends Marker {
imageSize: options.imageSize, imageSize: options.imageSize,
showHealth: options.showHealth, showHealth: options.showHealth,
showArmor: options.showArmor, showArmor: options.showArmor,
showYaw: options.showYaw,
compact: options.compact, compact: options.compact,
}); });

View File

@ -105,6 +105,7 @@ export default class Pl3xmapMapProvider extends MapProvider {
imageSize: images ? (health && armor ? 'large' : 'small') : 'none', imageSize: images ? (health && armor ? 'large' : 'small') : 'none',
showHealth: health, showHealth: health,
showArmor: armor, showArmor: armor,
showYaw: true,
} }
} else { } else {
worldConfig.components.playerMarkers = undefined; worldConfig.components.playerMarkers = undefined;
@ -440,7 +441,8 @@ export default class Pl3xmapMapProvider extends MapProvider {
y: 0, y: 0,
z: !isNaN(player.z) ? player.z + 0.5 : 0, z: !isNaN(player.z) ? player.z + 0.5 : 0,
world: player.world, world: player.world,
} },
yaw: !isNaN(player.yaw) ? parseFloat(player.yaw) + 180 : 0,
}); });
}); });

View File

@ -110,6 +110,37 @@
background: url(../assets/images/armor.png) repeat-x left center; background: url(../assets/images/armor.png) repeat-x left center;
} }
.player__yaw {
--player-yaw: 0deg;
position: relative;
transform: rotate(var(--player-yaw));
transition: 0.1s transform ease-in;
&, &:after {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-color: transparent transparent var(--background-marker);
border-width: 0 0.7rem 2.0rem 0.7rem;
}
&:after {
content: '';
top: 0.5rem;
left: -0.4rem;
border-width: 0 0.4rem 1.3rem 0.4rem;
border-bottom-color: var(--text-emphasis);
}
@at-root {
.no-animations .marker.marker--player .player__yaw {
transition: none;
}
}
}
&.marker--compact { &.marker--compact {
.marker__label { .marker__label {
background-color: transparent; background-color: transparent;
@ -137,6 +168,16 @@
border-bottom-width: 0.2rem; border-bottom-width: 0.2rem;
} }
} }
&.player--yaw {
&:before {
content: none;
}
.marker__label {
margin-left: 1.8rem;
}
}
} }
.marker__label { .marker__label {

View File

@ -421,6 +421,7 @@ export const mutations: MutationTree<State> & Mutations = {
existing!.uuid = player.uuid; existing!.uuid = player.uuid;
existing!.armor = player.armor; existing!.armor = player.armor;
existing!.location = Object.assign(existing!.location, player.location); existing!.location = Object.assign(existing!.location, player.location);
existing!.yaw = player.yaw;
existing!.hidden = player.hidden; existing!.hidden = player.hidden;
existing!.displayName = player.displayName; existing!.displayName = player.displayName;
existing!.sort = player.sort; existing!.sort = player.sort;
@ -436,6 +437,7 @@ export const mutations: MutationTree<State> & Mutations = {
health: player.health, health: player.health,
armor: player.armor, armor: player.armor,
location: player.location, location: player.location,
yaw: player.yaw,
displayName: player.displayName, displayName: player.displayName,
sort: player.sort, sort: player.sort,
hidden: player.hidden, hidden: player.hidden,

View File

@ -183,6 +183,7 @@ export function buildComponents(response: Configuration): LiveAtlasComponentConf
imageSize, imageSize,
showHealth: component.showplayerhealth || false, showHealth: component.showplayerhealth || false,
showArmor: component.showplayerhealth || false, showArmor: component.showplayerhealth || false,
showYaw: false,
} }
break; break;