mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:20:45 +00:00
add news button for update release notes
This commit is contained in:
evan
@@ -0,0 +1,93 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
version="1.1"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 100 100"
|
||||
enable-background="new 0 0 100 100"
|
||||
xml:space="preserve"
|
||||
id="svg7"
|
||||
sodipodi:docname="megaphone.svg"
|
||||
width="100"
|
||||
height="100"
|
||||
inkscape:version="1.4 (e7c3feb1, 2024-10-09)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><defs
|
||||
id="defs7"><clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath7"><rect
|
||||
style="fill:#000000;fill-opacity:0.428571"
|
||||
id="rect8"
|
||||
width="124.09856"
|
||||
height="112.68029"
|
||||
x="-13.822115"
|
||||
y="-9.0144234" /></clipPath><clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath8"><rect
|
||||
style="fill:#000000;fill-opacity:0.428571"
|
||||
id="rect9"
|
||||
width="124.09856"
|
||||
height="112.68029"
|
||||
x="-13.822115"
|
||||
y="-9.0144234" /></clipPath><clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath9"><rect
|
||||
style="fill:#000000;fill-opacity:0.428571"
|
||||
id="rect10"
|
||||
width="124.09856"
|
||||
height="112.68029"
|
||||
x="-13.822115"
|
||||
y="-9.0144234" /></clipPath></defs><sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:zoom="9.4130054"
|
||||
inkscape:cx="49.61221"
|
||||
inkscape:cy="40.529032"
|
||||
inkscape:window-width="1712"
|
||||
inkscape:window-height="1040"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="39"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="svg7" /><g
|
||||
id="g6"
|
||||
clip-path="url(#clipPath9)"><g
|
||||
id="g5"><g
|
||||
id="g4"><path
|
||||
d="M 70.697,39.701 C 67.79,27.673 62.101,14.727 56.481,14.727 c -0.278,0 -0.556,0.033 -0.823,0.097 -1.225,0.296 -2.2,1.229 -2.916,2.744 -0.076,0.06 -0.159,0.106 -0.222,0.186 -3.146,4.022 -14.412,17.306 -27.265,20.412 l -9.82,2.534 c -0.039,0.009 -0.077,0.021 -0.115,0.033 -3.009,0.827 -5.549,2.72 -7.184,5.362 -1.71,2.766 -2.23,6.034 -1.463,9.205 0.767,3.17 2.722,5.841 5.506,7.52 2.771,1.672 6.048,2.169 9.225,1.402 L 23.44,63.73 c 0,0 10e-4,0 0.002,0 h 0.001 l 2.449,-0.592 8.126,16.697 c 1.058,2.172 3.24,3.438 5.509,3.438 0.897,0 1.808,-0.197 2.667,-0.615 3.031,-1.477 4.297,-5.144 2.821,-8.176 l -6.57,-13.5 c 11.731,-0.099 23.711,5.353 26.449,6.681 0.98,0.73 1.973,1.135 2.964,1.135 0.278,0 0.556,-0.033 0.823,-0.098 2.594,-0.627 4.085,-4.076 4.312,-9.975 0.204,-5.297 -0.611,-12.053 -2.296,-19.024 z M 20.792,61.695 C 18.287,62.302 15.704,61.91 13.521,60.593 11.337,59.276 9.801,57.178 9.2,54.688 8.598,52.198 9.005,49.63 10.348,47.46 11.671,45.319 13.754,43.8 16.22,43.179 l 0.866,-0.21 4.481,18.538 z M 41.056,80.32 c -1.742,0.848 -3.853,0.12 -4.7,-1.623 l -2.949,-6.059 6.409,-2.895 2.861,5.878 c 0.849,1.742 0.121,3.85 -1.621,4.699 z m -2.378,-12.916 -6.409,2.895 -3.789,-7.786 3.01,-0.728 c 1.351,-0.326 2.733,-0.541 4.129,-0.667 z m -7.8,-8.146 -6.784,1.639 -4.481,-18.539 6.255,-1.515 c 10.808,-2.612 20.417,-11.869 25.586,-17.701 -0.046,0.531 -0.084,1.079 -0.107,1.657 -0.107,2.758 0.069,5.917 0.495,9.291 0.006,0.048 -0.006,0.094 0.005,0.143 0.004,0.016 0.016,0.027 0.02,0.043 0.392,3.051 0.984,6.273 1.776,9.548 0.776,3.211 1.752,6.486 2.87,9.564 0.006,0.061 -0.008,0.119 0.007,0.18 0.043,0.177 0.127,0.328 0.23,0.465 1.283,3.438 2.746,6.592 4.308,9.1 C 54.066,60.36 41.753,56.628 30.878,59.258 Z M 54.622,35.237 c 1.959,0.539 4.284,3.213 5.269,7.284 0.977,4.046 0.149,7.465 -1.333,8.859 -0.85,-2.446 -1.662,-5.163 -2.388,-8.168 -0.659,-2.726 -1.173,-5.407 -1.548,-7.975 z m 15.774,23.388 c -0.189,4.871 -1.304,7.301 -2.326,7.548 -0.068,0.017 -0.138,0.024 -0.212,0.024 -0.23,0 -0.486,-0.071 -0.764,-0.208 -0.109,-0.137 -0.245,-0.255 -0.41,-0.341 -0.054,-0.028 -0.194,-0.101 -0.404,-0.205 -1.881,-1.551 -4.42,-5.476 -6.779,-11.51 2.93,-1.8 4.207,-6.688 2.917,-12.024 -1.297,-5.364 -4.683,-9.147 -8.139,-9.372 -0.3,-2.763 -0.423,-5.352 -0.335,-7.639 0.188,-4.871 1.303,-7.3 2.325,-7.547 0.068,-0.017 0.138,-0.024 0.212,-0.024 2.507,0 8.112,8.185 11.689,22.985 1.631,6.745 2.421,13.248 2.226,18.313 z"
|
||||
id="path1" /><path
|
||||
d="m 80.626,38.899 c -0.574,-0.012 -1.091,-0.407 -1.234,-0.991 -0.171,-0.697 0.256,-1.401 0.953,-1.572 l 8.494,-2.084 c 0.696,-0.172 1.401,0.256 1.572,0.953 0.171,0.697 -0.256,1.401 -0.953,1.572 l -8.494,2.084 c -0.113,0.028 -0.227,0.041 -0.338,0.038 z"
|
||||
id="path2" /><path
|
||||
d="m 74.191,24.693 c -0.348,-0.015 -0.689,-0.17 -0.933,-0.456 -0.466,-0.547 -0.399,-1.368 0.148,-1.833 l 7.659,-6.514 c 0.546,-0.464 1.368,-0.399 1.832,0.148 0.466,0.547 0.399,1.368 -0.148,1.833 l -7.659,6.514 c -0.26,0.222 -0.582,0.322 -0.899,0.308 z"
|
||||
id="path3" /><path
|
||||
d="m 92.061,56.782 c -0.171,0.029 -0.351,0.025 -0.532,-0.02 l -9.416,-2.326 c -0.698,-0.172 -1.122,-0.877 -0.95,-1.573 0.17,-0.697 0.873,-1.126 1.573,-0.95 l 9.416,2.326 c 0.698,0.172 1.122,0.877 0.95,1.573 -0.126,0.517 -0.547,0.885 -1.041,0.97 z"
|
||||
id="path4" /></g></g></g><text
|
||||
x="0"
|
||||
y="115"
|
||||
fill="#000000"
|
||||
font-size="5px"
|
||||
font-weight="bold"
|
||||
font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"
|
||||
id="text6"
|
||||
clip-path="url(#clipPath8)">Created by Jacopo Bonacci</text><text
|
||||
x="0"
|
||||
y="120"
|
||||
fill="#000000"
|
||||
font-size="5px"
|
||||
font-weight="bold"
|
||||
font-family="'Helvetica Neue', Helvetica, Arial-Unicode, Arial, Sans-serif"
|
||||
id="text7"
|
||||
clip-path="url(#clipPath7)">from the Noun Project</text><path
|
||||
style="fill:#800000;fill-opacity:0.428571;stroke-width:0.300481"
|
||||
d=""
|
||||
id="path10" /><path
|
||||
style="fill:#800000;fill-opacity:0.428571;stroke-width:0.300481"
|
||||
d=""
|
||||
id="path11" /></svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -19,6 +19,7 @@ import { JoinPrivateLobbyModal } from "./JoinPrivateLobbyModal";
|
||||
import "./LangSelector";
|
||||
import { LangSelector } from "./LangSelector";
|
||||
import { LanguageModal } from "./LanguageModal";
|
||||
import { NewsModal } from "./NewsModal";
|
||||
import "./PublicLobby";
|
||||
import { PublicLobby } from "./PublicLobby";
|
||||
import { SinglePlayerModal } from "./SinglePlayerModal";
|
||||
@@ -26,6 +27,8 @@ import { UserSettingModal } from "./UserSettingModal";
|
||||
import "./UsernameInput";
|
||||
import { UsernameInput } from "./UsernameInput";
|
||||
import { generateCryptoRandomUUID } from "./Utils";
|
||||
import "./components/NewsButton";
|
||||
import { NewsButton } from "./components/NewsButton";
|
||||
import "./components/baseComponents/Button";
|
||||
import { OButton } from "./components/baseComponents/Button";
|
||||
import "./components/baseComponents/Modal";
|
||||
@@ -57,6 +60,23 @@ class Client {
|
||||
constructor() {}
|
||||
|
||||
initialize(): void {
|
||||
const newsModal = document.querySelector("news-modal") as NewsModal;
|
||||
if (!newsModal) {
|
||||
consolex.warn("News modal element not found");
|
||||
} else {
|
||||
consolex.log("News modal element found");
|
||||
}
|
||||
newsModal instanceof NewsModal;
|
||||
const newsButton = document.querySelector("news-button") as NewsButton;
|
||||
if (!newsButton) {
|
||||
consolex.warn("News button element not found");
|
||||
} else {
|
||||
consolex.log("News button element found");
|
||||
}
|
||||
|
||||
// Comment out to show news button.
|
||||
newsButton.hidden = true;
|
||||
|
||||
const langSelector = document.querySelector(
|
||||
"lang-selector",
|
||||
) as LangSelector;
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { LitElement, css, html } from "lit";
|
||||
import { customElement, query } from "lit/decorators.js";
|
||||
import { translateText } from "../client/Utils";
|
||||
import "./components/baseComponents/Button";
|
||||
import "./components/baseComponents/Modal";
|
||||
|
||||
@customElement("news-modal")
|
||||
export class NewsModal extends LitElement {
|
||||
@query("o-modal") private modalEl!: HTMLElement & {
|
||||
open: () => void;
|
||||
close: () => void;
|
||||
};
|
||||
|
||||
static styles = css`
|
||||
.news-container {
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
color: #ddd;
|
||||
line-height: 1.5;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<o-modal title=${translateText("news.title")}>
|
||||
<div class="options-layout">
|
||||
<div class="options-section">
|
||||
<div class="news-container">
|
||||
<div class="news-content">INSERT NEWS HERE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<o-button
|
||||
title=${translateText("common.close")}
|
||||
@click=${this.close}
|
||||
blockDesktop
|
||||
></o-button>
|
||||
</o-modal>
|
||||
`;
|
||||
}
|
||||
|
||||
public open() {
|
||||
this.requestUpdate();
|
||||
this.modalEl?.open();
|
||||
}
|
||||
|
||||
private close() {
|
||||
this.modalEl?.close();
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this; // light DOM
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import { LitElement, css, html } from "lit";
|
||||
import { customElement, property } from "lit/decorators.js";
|
||||
import megaphone from "../../../resources/images/Megaphone.svg";
|
||||
import { NewsModal } from "../NewsModal";
|
||||
import { translateText } from "../Utils";
|
||||
|
||||
@customElement("news-button")
|
||||
export class NewsButton extends LitElement {
|
||||
@property({ type: Boolean })
|
||||
hidden = false;
|
||||
|
||||
static styles = css`
|
||||
.news-button {
|
||||
opacity: 0.75;
|
||||
transition: opacity 0.2s ease;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.news-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.news-button img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: block;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
`;
|
||||
|
||||
private handleClick() {
|
||||
const newsModal = document.querySelector("news-modal") as NewsModal;
|
||||
if (newsModal) {
|
||||
newsModal.open();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="text-center mb-0.5 ${this.hidden ? "hidden" : ""}">
|
||||
<button class="news-button" @click=${this.handleClick}>
|
||||
<img src="${megaphone}" alt=${translateText("news.title")} />
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
@@ -230,6 +230,7 @@
|
||||
<div class="container__row">
|
||||
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
|
||||
<username-input class="w-full"></username-input>
|
||||
<news-button class="mt-3"></news-button>
|
||||
</div>
|
||||
<div></div>
|
||||
<div>
|
||||
@@ -382,6 +383,7 @@
|
||||
<chat-modal></chat-modal>
|
||||
<user-setting></user-setting>
|
||||
<multi-tab-modal></multi-tab-modal>
|
||||
<news-modal></news-modal>
|
||||
<div
|
||||
id="language-modal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center"
|
||||
|
||||
Reference in New Issue
Block a user