mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-07-03 12:32:46 +00:00
Poddster
90cb238b25
## Description: I found the old emoji table hard to use in the heat of combat, so I: 1. Reordered it, focusing on putting the arrows in a logical orientation, and each other emoji in some kind of cohesive group. 2. Replace a duplicated 😭 with 👑, useful for telling the idiots attacking you to instead attack the crown, otherwise you'd both dead. 3. Added ⚓⛵🏡🛡️🎯 as I thought they would be useful for mocking/hinting to other payers about ports/warships/cities/defence posts, despite making the table one line longer. The target was mainly added to put something in the middle of the new arrow keypad-layout. 4. Replaced ❌🤙 with 🐔🤌. I feel 👍👎 already does what ❌ does, so remove it to make space for something else: another insult (🐔). I've never seen 'call me' (🤙) used in-game, or even know what it means in the context of the game. But chef's kiss 🤌 is meme-worthy and fun to send to other players. old:  new:  See #399 I've given this a try and I find it much easier to locate and send the kind of emoji I want. The only real oddity are the hearts being all the way down there. But they weren't even together last time, so it's still an improvement. ## Please complete the following: - [✅] I have added screenshots for all UI updates - [✅] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced - [✅] I understand that submitting code with bugs that could have been caught through manual testing blocks releases and new features for all contributors ## Please put your Discord username so you can be contacted if a bug or regression is found: `poddster` aka `Pod#7003` in the old system
139 lines
3.3 KiB
TypeScript
139 lines
3.3 KiB
TypeScript
import { LitElement, css, html } 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;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.emoji-button {
|
|
font-size: 32px;
|
|
/* Slightly smaller font size for mobile */
|
|
width: 60px;
|
|
/* Smaller width for mobile */
|
|
height: 60px;
|
|
/* Smaller height for mobile */
|
|
margin: 5px;
|
|
/* Smaller margin for mobile */
|
|
}
|
|
}
|
|
|
|
@media (max-width: 400px) {
|
|
.emoji-button {
|
|
font-size: 28px;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 3px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
@state()
|
|
private _hidden = true;
|
|
|
|
private 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(oneEmojiClicked: (emoji: string) => void) {
|
|
this.onEmojiClicked = oneEmojiClicked;
|
|
this._hidden = false;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
get isVisible() {
|
|
return !this._hidden;
|
|
}
|
|
}
|