mirror of
https://github.com/Terncode/pixel.horse.git
synced 2026-09-25 22:25:53 +02:00
Archive commit
This commit is contained in:
Erik McClure
@@ -0,0 +1,138 @@
|
||||
.d-flex
|
||||
button.game-button.px-2((click)="toggleEditor()")
|
||||
fa-icon([icon]="editIcon")
|
||||
|
||||
.d-flex.align-items-start.pl-2.pt-1(*ngIf="hasEditor")
|
||||
.dropdown-menu.p-0(*ngIf="hasSelectedEntities" style="display: block; width: 500px; position: absolute; top: 36px; left: 0;")
|
||||
.px-2
|
||||
//- name
|
||||
div
|
||||
.row.form-group.mb-2
|
||||
label.col-12.col-form-label
|
||||
.float-right
|
||||
button.btn.btn-xs.btn-dark.ml-1((click)="showEntitiesInfo()" title="Show info")
|
||||
| info
|
||||
button.btn.btn-xs.btn-danger.ml-1((click)="deleteEntities()" title="Delete entities")
|
||||
fa-icon([icon]="deleteIcon")
|
||||
| {{entityName}}
|
||||
|
||||
//- position
|
||||
div(*ngIf="singleEntity")
|
||||
.row.form-group.mb-2
|
||||
label.col-4.col-form-label
|
||||
| position
|
||||
label.col-1.col-form-label
|
||||
| x
|
||||
.col-3
|
||||
input.form-control([(ngModel)]="entityX" type="number")
|
||||
label.col-1.col-form-label
|
||||
| y
|
||||
.col-3
|
||||
input.form-control([(ngModel)]="entityY" type="number")
|
||||
|
||||
//- light
|
||||
div(*ngIf="isLightEntity")
|
||||
.row.form-group.mb-2
|
||||
label.col-5.col-form-label
|
||||
| light color
|
||||
.col-7
|
||||
color-picker([(color)]="entityLightColor")
|
||||
.row.form-group.mb-2
|
||||
label.col-5.col-form-label
|
||||
| light scale ({{entityLightScale | number:'0.1-1'}})
|
||||
.col-7.py-2
|
||||
slider-bar([(value)]="entityLightScale" [min]="0" [max]="3")
|
||||
|
||||
//- light sprite
|
||||
div(*ngIf="isLightSpriteEntity")
|
||||
.row.form-group.mb-2
|
||||
label.col-5.col-form-label
|
||||
| light sprite color
|
||||
.col-7
|
||||
color-picker([(color)]="entityLightSpriteColor")
|
||||
.row.form-group.mb-2
|
||||
label.col-4.col-form-label
|
||||
| light sprite
|
||||
label.col-1.col-form-label
|
||||
| x
|
||||
.col-3
|
||||
input.form-control([(ngModel)]="entityLightSpriteX" type="number")
|
||||
label.col-1.col-form-label
|
||||
| y
|
||||
.col-3
|
||||
input.form-control([(ngModel)]="entityLightSpriteY" type="number")
|
||||
|
||||
.input-group.input-group-sm
|
||||
input.form-control([(ngModel)]="editorEntity" placeholder="entity")
|
||||
.input-group-append(dropdown)
|
||||
button.btn.btn-default.dropdown-toggle(dropdownToggle)
|
||||
.dropdown-menu(*dropdownMenu style="max-height: 90vh; column-width: 100px; font-size: 10px;")
|
||||
a.dropdown-item(*ngFor="let e of editorEntities" (click)="editorEntity = e")
|
||||
| {{e}}
|
||||
|
||||
.dropdown.ml-1(dropdown)
|
||||
button.btn.btn-sm.btn-default.dropdown-toggle(dropdownToggle)
|
||||
fa-icon([icon]="cogIcon")
|
||||
.dropdown-menu(*dropdownMenu)
|
||||
a.dropdown-item((click)="clearLocalStorage()")
|
||||
| Clear local storage
|
||||
a.dropdown-item((click)="editorClear()" title="Remove all placed entities")
|
||||
| Clear all entities
|
||||
a.dropdown-item((click)="listEntities()" title="List all placed entities in console")
|
||||
| List entities
|
||||
div(*ngIf="dev")
|
||||
h6.dropdown-header Show (numpad 4)
|
||||
a.dropdown-item(*ngFor="let field of showFields" (click)="toggleShow(field); $event.stopPropagation()")
|
||||
fa-icon.mr-1([icon]="isShow(field) ? checkIcon : emptyIcon" [fixedWidth]="true")
|
||||
| {{field}}
|
||||
|
||||
button.btn.btn-sm.btn-default.ml-1(
|
||||
[btnHighlight]="selectingEntities" (click)="toggleSelecting()" title="Select entities")
|
||||
fa-icon([icon]="selectIcon")
|
||||
|
||||
.dropdown.ml-1(dropdown)
|
||||
button.btn.btn-sm.btn-default.dropdown-toggle(dropdownToggle)
|
||||
| tile: {{tiles[editorTile + 1]}}
|
||||
.dropdown-menu(*dropdownMenu)
|
||||
a.dropdown-item(*ngFor="let t of tiles; let i = index" (click)="editorTile = i - 1")
|
||||
| {{t}}
|
||||
|
||||
.dropdown.ml-1(dropdown)
|
||||
button.btn.btn-sm.btn-default.dropdown-toggle(dropdownToggle)
|
||||
| brush: {{editor.brushSize}}
|
||||
.dropdown-menu(*dropdownMenu)
|
||||
a.dropdown-item((click)="editor.brushSize = 1") 1
|
||||
a.dropdown-item((click)="editor.brushSize = 2") 2
|
||||
a.dropdown-item((click)="editor.brushSize = 3") 3
|
||||
a.dropdown-item((click)="editor.brushSize = 4") 4
|
||||
a.dropdown-item((click)="editor.brushSize = 5") 5
|
||||
a.dropdown-item((click)="editor.brushSize = 6") 6
|
||||
|
||||
.dropdown.ml-1(dropdown [autoClose]="false")
|
||||
button.btn.btn-sm.btn-default.dropdown-toggle(dropdownToggle)
|
||||
| global
|
||||
.dropdown-menu(*dropdownMenu style="width: 400px")
|
||||
button(style="display: block; width: 0; height: 0;")
|
||||
.px-2
|
||||
.row.form-group
|
||||
label.col-5.col-form-label.d-flex.justify-content-between
|
||||
| light color
|
||||
custom-checkbox([(checked)]="editor.customLight")
|
||||
.col-7
|
||||
color-picker([(color)]="editor.lightColor" [isDisabled]="!editor.customLight")
|
||||
.row.form-group.mb-0
|
||||
label.col-5.col-form-label shadow opacity ({{shadowOpacity}})
|
||||
.col-7.py-2
|
||||
slider-bar([(value)]="shadowOpacity" [min]="0" [max]="255")
|
||||
|
||||
.dropdown.ml-1(dropdown)
|
||||
button.btn.btn-sm.btn-default.dropdown-toggle(dropdownToggle)
|
||||
| engine
|
||||
.dropdown-menu(*dropdownMenu)
|
||||
a.dropdown-item(*ngFor="let e of engines" (click)="setEngine(e)" [class.active]="isActiveEngine(e)")
|
||||
| {{e.name}}
|
||||
|
||||
.btn.btn-sm.btn-default.disabled.ml-1(*ngIf="hasElevation")
|
||||
| elevation: {{editorElevation}}
|
||||
.btn.btn-sm.btn-default.disabled.ml-1(*ngIf="hasElevation")
|
||||
| special: {{editorSpecial}}
|
||||
@@ -0,0 +1,205 @@
|
||||
import { Component, NgZone } from '@angular/core';
|
||||
import { uniq } from 'lodash';
|
||||
import { faEdit, faCog, faDrawPolygon, faTrash, emptyIcon, faCheck } from '../../../client/icons';
|
||||
import { PonyTownGame, engines } from '../../../client/game';
|
||||
import { StorageService } from '../../services/storageService';
|
||||
import { Model, getEntityNameFromType, getEntityNames } from '../../services/model';
|
||||
import { getAlpha, withAlpha, colorToHexRGB, parseColor } from '../../../common/color';
|
||||
import { BLACK } from '../../../common/colors';
|
||||
import { Entity, Engine, EngineInfo, DebugFlags, tileTypeNames } from '../../../common/interfaces';
|
||||
|
||||
@Component({
|
||||
selector: 'editor-box',
|
||||
templateUrl: 'editor-box.pug',
|
||||
})
|
||||
export class EditorBox {
|
||||
readonly dev = DEVELOPMENT;
|
||||
readonly cogIcon = faCog;
|
||||
readonly editIcon = faEdit;
|
||||
readonly selectIcon = faDrawPolygon;
|
||||
readonly deleteIcon = faTrash;
|
||||
readonly checkIcon = faCheck;
|
||||
readonly emptyIcon = emptyIcon;
|
||||
readonly tiles = ['---', ...tileTypeNames];
|
||||
readonly engines = engines;
|
||||
readonly editorEntities: string[];
|
||||
readonly showFields: (keyof DebugFlags)[] = ['id', 'bounds', 'collider', 'cover', 'interact', 'trigger'];
|
||||
private showEditor = false;
|
||||
constructor(
|
||||
public model: Model,
|
||||
private game: PonyTownGame,
|
||||
private storage: StorageService,
|
||||
private zone: NgZone,
|
||||
) {
|
||||
this.game.editor.type = this.storage.getItem('editor-entity') || 'rock';
|
||||
this.showEditor = this.storage.getBoolean('show-editor');
|
||||
this.editorEntities = getEntityNames().slice().sort();
|
||||
}
|
||||
get editor() {
|
||||
return this.game.editor;
|
||||
}
|
||||
get hasElevation() {
|
||||
return this.game.engine === Engine.LayeredTiles;
|
||||
}
|
||||
get editorElevation() {
|
||||
return this.game.editor.elevation;
|
||||
}
|
||||
get editorSpecial() {
|
||||
return this.game.editor.special;
|
||||
}
|
||||
get editorEntity() {
|
||||
return this.game.editor.type;
|
||||
}
|
||||
set editorEntity(value: string) {
|
||||
this.game.editor.type = value;
|
||||
this.storage.setItem('editor-entity', value);
|
||||
}
|
||||
get editorTile() {
|
||||
return this.game.editor.tile;
|
||||
}
|
||||
set editorTile(value: number) {
|
||||
this.game.editor.tile = value;
|
||||
}
|
||||
get hasEditor() {
|
||||
return this.model.isMod && this.showEditor;
|
||||
}
|
||||
get oneEntity() {
|
||||
return this.editor.selectedEntities[0];
|
||||
}
|
||||
get singleEntity() {
|
||||
return this.editor.selectedEntities.length === 1;
|
||||
}
|
||||
get hasSelectedEntities() {
|
||||
return this.editor.selectedEntities.length > 0;
|
||||
}
|
||||
get isLightEntity() {
|
||||
return this.editor.selectedEntities.some(e => !!e.drawLight);
|
||||
}
|
||||
get isLightSpriteEntity() {
|
||||
return this.editor.selectedEntities.some(e => !!e.drawLightSprite);
|
||||
}
|
||||
get selectingEntities() {
|
||||
return this.game.editor.selectingEntities;
|
||||
}
|
||||
set selectingEntities(value) {
|
||||
this.game.editor.selectingEntities = value;
|
||||
}
|
||||
get shadowOpacity() {
|
||||
return getAlpha(this.game.shadowColor);
|
||||
}
|
||||
set shadowOpacity(value) {
|
||||
this.game.shadowColor = withAlpha(this.game.shadowColor, value);
|
||||
}
|
||||
private getEntityName(type: number) {
|
||||
return getEntityNameFromType(type);
|
||||
}
|
||||
private getEntityValue<T>(map: (entity: Entity) => T) {
|
||||
const entity = this.editor.selectedEntities[0] as any;
|
||||
return map(entity);
|
||||
}
|
||||
get entityName() {
|
||||
const entities = this.editor.selectedEntities;
|
||||
const types = entities.map(e => e.type);
|
||||
const names = uniq(types).map(type => this.getEntityName(type)).join(', ');
|
||||
return types.length === 1 ? `${names} [${entities[0].id}]` : names;
|
||||
}
|
||||
get entityLightColor() {
|
||||
return colorToHexRGB(this.getEntityValue(e => e && e.lightColor || BLACK));
|
||||
}
|
||||
set entityLightColor(value) {
|
||||
this.editor.selectedEntities.forEach(e => e.lightColor = parseColor(value));
|
||||
}
|
||||
get entityLightSpriteColor() {
|
||||
const entity = this.editor.selectedEntities[0];
|
||||
return colorToHexRGB(entity && entity.lightSpriteColor || BLACK);
|
||||
}
|
||||
set entityLightSpriteColor(value) {
|
||||
this.editor.selectedEntities.forEach(e => e.lightSpriteColor = parseColor(value));
|
||||
}
|
||||
get entityLightSpriteX() {
|
||||
const entity = this.editor.selectedEntities[0];
|
||||
return entity && entity.lightSpriteX || 0;
|
||||
}
|
||||
set entityLightSpriteX(value) {
|
||||
console.log('set x', value, this.editor.selectedEntities);
|
||||
this.editor.selectedEntities.forEach(e => e.lightSpriteX = value);
|
||||
}
|
||||
get entityLightSpriteY() {
|
||||
const entity = this.editor.selectedEntities[0];
|
||||
return entity && entity.lightSpriteY || 0;
|
||||
}
|
||||
set entityLightSpriteY(value) {
|
||||
this.editor.selectedEntities.forEach(e => e.lightSpriteY = value);
|
||||
}
|
||||
get entityLightScale() {
|
||||
return this.editor.selectedEntities.length ? this.editor.selectedEntities[0].lightScaleAdjust : 1;
|
||||
}
|
||||
set entityLightScale(value) {
|
||||
this.editor.selectedEntities.forEach(e => e.lightScaleAdjust = value);
|
||||
}
|
||||
get entityX() {
|
||||
return this.oneEntity.x;
|
||||
}
|
||||
set entityX(value) {
|
||||
this.oneEntity.x = value;
|
||||
const { id, x, y } = this.oneEntity;
|
||||
this.game.send(server => server.editorAction({
|
||||
type: 'move',
|
||||
entities: [{ id, x, y }],
|
||||
}));
|
||||
}
|
||||
get entityY() {
|
||||
return this.oneEntity.y;
|
||||
}
|
||||
set entityY(value) {
|
||||
this.oneEntity.y = value;
|
||||
const { id, x, y } = this.oneEntity;
|
||||
this.game.send(server => server.editorAction({
|
||||
type: 'move',
|
||||
entities: [{ id, x, y }],
|
||||
}));
|
||||
}
|
||||
editorClear() {
|
||||
this.game.send(server => server.editorAction({ type: 'clear' }));
|
||||
}
|
||||
clearLocalStorage() {
|
||||
this.storage.clear();
|
||||
}
|
||||
setEngine(engine: EngineInfo) {
|
||||
this.game.engine = engine.engine;
|
||||
}
|
||||
isActiveEngine(engine: EngineInfo) {
|
||||
return this.game.engine === engine.engine;
|
||||
}
|
||||
toggleEditor() {
|
||||
this.zone.run(() => {
|
||||
this.showEditor = !this.showEditor;
|
||||
this.storage.setBoolean('show-editor', this.showEditor);
|
||||
});
|
||||
}
|
||||
toggleSelecting() {
|
||||
this.selectingEntities = !this.selectingEntities;
|
||||
|
||||
if (!this.selectingEntities) {
|
||||
this.editor.selectedEntities.length = 0;
|
||||
}
|
||||
}
|
||||
listEntities() {
|
||||
this.game.send(server => server.editorAction({ type: 'list' }));
|
||||
}
|
||||
deleteEntities() {
|
||||
const entities = this.editor.selectedEntities.map(e => e.id);
|
||||
this.game.send(server => server.editorAction({ type: 'remove', entities }));
|
||||
this.editor.selectedEntities.length = 0;
|
||||
}
|
||||
showEntitiesInfo() {
|
||||
console.log(this.editor.selectedEntities);
|
||||
}
|
||||
toggleShow(field: keyof DebugFlags) {
|
||||
(this.game.debug as any)[field] = !this.isShow(field);
|
||||
this.game.saveDebug();
|
||||
}
|
||||
isShow(field: keyof DebugFlags) {
|
||||
return !!this.game.debug[field];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user