alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-20 15:20:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use vue, migrate emoji table to vue

Browse Source
This commit is contained in:
evanpelle
2024-10-11 17:47:35 -07:00
parent 0904125b69
commit d85370dc19
16 changed files with 234 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/EventsDisplay.ts
+1 -1
View File
@@ -263,7 +263,7 @@ export class EventsDisplay implements Layer {
this.events[index] = event;
}
render(): void { }
renderLayer(): void { }
renderTable(): void {
if (this.events.length === 0) {
src/client/graphics/layers/Layer.ts
+1 -1
View File
@@ -3,6 +3,6 @@ import {TransformHandler} from "../TransformHandler"
export interface Layer {
init()
tick()
render(context: CanvasRenderingContext2D)
renderLayer(context: CanvasRenderingContext2D)
shouldTransform(): boolean
}
src/client/graphics/layers/NameLayer.ts
+1 -1
View File
@@ -100,7 +100,7 @@ export class NameLayer implements Layer {
}
}
public render(mainContex: CanvasRenderingContext2D) {
public renderLayer(mainContex: CanvasRenderingContext2D) {
const [upperLeft, bottomRight] = this.transformHandler.screenBoundingRect()
for (const render of this.renders) {
render.isVisible = this.isVisible(render, upperLeft, bottomRight)
src/client/graphics/layers/TerrainLayer.ts
+1 -1
View File
@@ -41,7 +41,7 @@ export class TerrainLayer implements Layer {
})
}
render(context: CanvasRenderingContext2D) {
renderLayer(context: CanvasRenderingContext2D) {
context.drawImage(
this.canvas,
-this.game.width() / 2,
src/client/graphics/layers/TerritoryLayer.ts
+1 -1
View File
@@ -50,7 +50,7 @@ export class TerritoryLayer implements Layer {
})
}
render(context: CanvasRenderingContext2D) {
renderLayer(context: CanvasRenderingContext2D) {
this.renderTerritory()
this.context.putImageData(this.imageData, 0, 0);
context.drawImage(
src/client/graphics/layers/UILayer.ts
+1 -1
View File
@@ -30,7 +30,7 @@ export class UILayer implements Layer {
}
render(context: CanvasRenderingContext2D) {
renderLayer(context: CanvasRenderingContext2D) {
if (!this.game.inSpawnPhase()) {
return
}
src/client/graphics/layers/radial/EmojiTable.ts
+107
View File
@@ -0,0 +1,107 @@
import {LitElement, html, css} from 'lit';
import {customElement, state} from 'lit/decorators.js';
const emojiTable: string[][] = [
["😀", "😱", "🤩", "🎯", "🥺"],
["🪦", "👏", "🥉", "🥈", "🥇"],
["🤙", "🥰", "😇", "😊", "🔥"],
["💪", "🥳", "💀", "😭", "🤦‍♂️"],
["😎", "👎", "👍", "🥱", "💔"],
["❤️", "💰", "🤝", "🛡️", "💥"],
["🆘", "🕊️", "➡️", "⬅️", "↙️"],
["↖️", "↗️", "⬆️", "↘️", "⬇️"]
];
@customElement('emoji-table')
export class EmojiTable extends LitElement {
static styles = css`
:host {
display: block;
}
.emoji-table {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background-color: #1E1E1E;
padding: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border-radius: 10px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 95vw;
max-height: 95vh;
overflow-y: auto;
}
.emoji-row {
display: flex;
justify-content: center;
width: 100%;
}
.emoji-button {
font-size: 60px;
width: 80px;
height: 80px;
border: 1px solid #333;
background-color: #2C2C2C;
color: white;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
margin: 8px;
}
.emoji-button:hover {
background-color: #3A3A3A;
transform: scale(1.1);
}
.emoji-button:active {
background-color: #4A4A4A;
transform: scale(0.95);
}
.hidden {
display: none !important;
}
`;
@state()
private _hidden = true;
public onEmojiClicked: (emoji: string) => void = () => { }
render() {
return html`
<div class="emoji-table ${this._hidden ? 'hidden' : ''}">
${emojiTable.map(row => html`
<div class="emoji-row">
${row.map(emoji => html`
<button class="emoji-button" @click=${() => this.onEmojiClicked(emoji)}>
${emoji}
</button>
`)}
</div>
`)}
</div>
`;
}
hideTable() {
this._hidden = true;
this.requestUpdate();
}
showTable() {
this._hidden = false;
this.requestUpdate();
}
get isVisible() {
return !this._hidden;
}
}
src/client/graphics/layers/RadialMenu.ts → src/client/graphics/layers/radial/RadialMenu.ts
+26 -65
View File
@@ -1,21 +1,21 @@
import {EventBus} from "../../../core/EventBus";
import {AllPlayers, Cell, Game, Player} from "../../../core/game/Game";
import {ClientID} from "../../../core/Schemas";
import {and, bfs, dist, manhattanDist, manhattanDistWrapped, sourceDstOceanShore} from "../../../core/Util";
import {ContextMenuEvent, MouseUpEvent} from "../../InputHandler";
import {SendAllianceRequestIntentEvent, SendAttackIntentEvent, SendBoatAttackIntentEvent, SendBreakAllianceIntentEvent, SendDonateIntentEvent, SendEmojiIntentEvent, SendSpawnIntentEvent, SendTargetPlayerIntentEvent} from "../../Transport";
import {TransformHandler} from "../TransformHandler";
import {Layer} from "./Layer";
import {EventBus} from "../../../../core/EventBus";
import {AllPlayers, Cell, Game, Player} from "../../../../core/game/Game";
import {ClientID} from "../../../../core/Schemas";
import {and, bfs, dist, manhattanDist, manhattanDistWrapped, sourceDstOceanShore} from "../../../../core/Util";
import {ContextMenuEvent, MouseUpEvent} from "../../../InputHandler";
import {SendAllianceRequestIntentEvent, SendAttackIntentEvent, SendBoatAttackIntentEvent, SendBreakAllianceIntentEvent, SendDonateIntentEvent, SendEmojiIntentEvent, SendSpawnIntentEvent, SendTargetPlayerIntentEvent} from "../../../Transport";
import {TransformHandler} from "../../TransformHandler";
import {Layer} from "../Layer";
import * as d3 from 'd3';
import traitorIcon from '../../../../resources/images/TraitorIconWhite.png';
import allianceIcon from '../../../../resources/images/AllianceIconWhite.png';
import boatIcon from '../../../../resources/images/BoatIconWhite.png';
import swordIcon from '../../../../resources/images/SwordIconWhite.png';
import targetIcon from '../../../../resources/images/TargetIconWhite.png';
import emojiIcon from '../../../../resources/images/EmojiIconWhite.png';
import disabledIcon from '../../../../resources/images/DisabledIcon.png';
import donateIcon from '../../../../resources/images/DonateIconWhite.png';
import {MessageType} from "./EventsDisplay";
import traitorIcon from '../../../../../resources/images/TraitorIconWhite.png';
import allianceIcon from '../../../../../resources/images/AllianceIconWhite.png';
import boatIcon from '../../../../../resources/images/BoatIconWhite.png';
import swordIcon from '../../../../../resources/images/SwordIconWhite.png';
import targetIcon from '../../../../../resources/images/TargetIconWhite.png';
import emojiIcon from '../../../../../resources/images/EmojiIconWhite.png';
import disabledIcon from '../../../../../resources/images/DisabledIcon.png';
import donateIcon from '../../../../../resources/images/DonateIconWhite.png';
import {EmojiTable} from "./EmojiTable";
enum Slot {
@@ -45,12 +45,12 @@ export class RadialMenu implements Layer {
private isCenterButtonEnabled = false
constructor(
private eventBus: EventBus,
private game: Game,
private transformHandler: TransformHandler,
private clientID: ClientID,
private emojiTable: EmojiTable
) { }
init() {
@@ -59,49 +59,6 @@ export class RadialMenu implements Layer {
this.createMenuElement();
}
private hideEmojiTable(): void {
const emojiTable: HTMLTableElement | null = document.getElementById('uniqueEmojiTable') as HTMLTableElement | null;
if (emojiTable instanceof HTMLTableElement) {
if (!emojiTable.classList.contains('hidden')) {
emojiTable.classList.add('hidden');
}
} else {
console.error('Emoji table not found');
}
}
private showEmojiTable(recipient: Player | typeof AllPlayers): void {
const emojiTable: HTMLTableElement | null = document.getElementById('uniqueEmojiTable') as HTMLTableElement | null;
if (emojiTable instanceof HTMLTableElement) {
emojiTable.classList.remove('hidden');
} else {
console.error('Emoji table not found');
}
this.setupEmojiButtons(recipient)
}
private setupEmojiButtons(recipient: Player | typeof AllPlayers) {
let emojiTable = document.getElementById('uniqueEmojiTable');
if (emojiTable) {
// Remove existing listeners
emojiTable.replaceWith(emojiTable.cloneNode(true));
emojiTable = document.getElementById('uniqueEmojiTable');
emojiTable.addEventListener('click', (event) => {
const emojiElement = event.target as HTMLElement;
if (emojiElement.classList.contains('emoji-button')) {
const emoji = emojiElement.textContent;
this.hideEmojiTable()
this.eventBus.emit(new SendEmojiIntentEvent(recipient, emoji))
}
});
} else {
console.error('Emoji table not found');
}
}
private createMenuElement() {
this.menuElement = d3.select(document.body)
.append('div')
@@ -227,7 +184,7 @@ export class RadialMenu implements Layer {
// Update logic if needed
}
render(context: CanvasRenderingContext2D) {
renderLayer(context: CanvasRenderingContext2D) {
// No need to render anything on the canvas
}
@@ -272,7 +229,11 @@ export class RadialMenu implements Layer {
const target = tile.owner() == myPlayer ? AllPlayers : (tile.owner() as Player)
if (myPlayer.canSendEmoji(target)) {
this.activateMenuElement(Slot.Emoji, "#ebe250", emojiIcon, () => {
this.showEmojiTable(target)
this.emojiTable.onEmojiClicked = (emoji: string) => {
this.emojiTable.hideTable()
this.eventBus.emit(new SendEmojiIntentEvent(target, emoji))
}
this.emojiTable.showTable()
})
}
}
@@ -387,7 +348,7 @@ export class RadialMenu implements Layer {
private onPointerUp(event: MouseUpEvent) {
this.hideRadialMenu()
this.hideEmojiTable()
this.emojiTable.hideTable()
}
private showRadialMenu(x: number, y: number) {
@@ -467,4 +428,4 @@ export class RadialMenu implements Layer {
.attr('fill', enabled ? 'white' : '#cccccc');
}, 25);
}
}
}