diff --git a/resources/images/helpModal/ally.png b/resources/images/helpModal/ally.png new file mode 100644 index 000000000..ff728553c Binary files /dev/null and b/resources/images/helpModal/ally.png differ diff --git a/resources/images/helpModal/controlPanel.png b/resources/images/helpModal/controlPanel.png new file mode 100644 index 000000000..271ea8577 Binary files /dev/null and b/resources/images/helpModal/controlPanel.png differ diff --git a/resources/images/helpModal/infoMenu.png b/resources/images/helpModal/infoMenu.png new file mode 100644 index 000000000..87590c730 Binary files /dev/null and b/resources/images/helpModal/infoMenu.png differ diff --git a/resources/images/helpModal/infoMenuAlly.png b/resources/images/helpModal/infoMenuAlly.png new file mode 100644 index 000000000..77f5e041c Binary files /dev/null and b/resources/images/helpModal/infoMenuAlly.png differ diff --git a/resources/images/helpModal/leaderboard.png b/resources/images/helpModal/leaderboard.png new file mode 100644 index 000000000..f0c239b8c Binary files /dev/null and b/resources/images/helpModal/leaderboard.png differ diff --git a/resources/images/helpModal/number1.png b/resources/images/helpModal/number1.png new file mode 100644 index 000000000..940469fe6 Binary files /dev/null and b/resources/images/helpModal/number1.png differ diff --git a/resources/images/helpModal/options.png b/resources/images/helpModal/options.png new file mode 100644 index 000000000..cb0fcc7d0 Binary files /dev/null and b/resources/images/helpModal/options.png differ diff --git a/resources/images/helpModal/radialMenu.png b/resources/images/helpModal/radialMenu.png new file mode 100644 index 000000000..f74623239 Binary files /dev/null and b/resources/images/helpModal/radialMenu.png differ diff --git a/resources/images/helpModal/traitor.png b/resources/images/helpModal/traitor.png new file mode 100644 index 000000000..a445529ea Binary files /dev/null and b/resources/images/helpModal/traitor.png differ diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts new file mode 100644 index 000000000..e27552a81 --- /dev/null +++ b/src/client/HelpModal.ts @@ -0,0 +1,447 @@ +import { LitElement, html, css } from "lit"; +import { customElement, property, state } from "lit/decorators.js"; +import "./components/Difficulties"; +import "./components/Maps"; + +@customElement("help-modal") +export class HelpModal extends LitElement { + @state() private isModalOpen = false; + + // Added #helpModal infront of everything to prevent leaks of css in other elements outside this one + private styles = css` + #helpModal.modal-overlay { + display: none; + position: fixed; + z-index: 1000; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + overflow-y: auto; + display: flex; + align-items: center; + justify-content: center; + } + + #helpModal .modal-content { + background-color: rgb(35 35 35 / 0.8); + -webkit-backdrop-filter: blur(12px); + backdrop-filter: blur(12px); + color: white; + padding: 20px; + border-radius: 8px; + width: 80%; + max-width: 1280px; + max-height: 80vh; + overflow-y: auto; + box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); + border: 1px solid rgba(255, 255, 255, 0.2); + backdrop-filter: blur(8px); + position: relative; + } + + #helpModal .title { + font-size: 28px; + color: #fff; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + padding: 0 0 0 20px; + } + + #helpModal .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; + } + + #helpModal .close:hover, + #helpModal .close:focus { + color: white; + text-decoration: none; + cursor: pointer; + } + + #helpModal table { + border-collapse: collapse; + } + + #helpModal table, + #helpModal table th, + #helpModal table td { + border: 1px solid rgb(255 255 255 / 0.2); + } + + #helpModal table th, + #helpModal table td { + padding: 8px 16px; + } + + #helpModal table td:first-of-type { + text-align: center; + } + + #helpModal .icon { + background-color: white; + width: 32px; + height: 32px; + } + + #helpModal .city-icon { + -webkit-mask: url(/images/CityIconWhite.svg) no-repeat center / cover; + mask: url(/images/CityIconWhite.svg) no-repeat center / cover; + } + + #helpModal .defense-post-icon { + -webkit-mask: url(/images/ShieldIconWhite.svg) no-repeat center / cover; + mask: url(/images/ShieldIconWhite.svg) no-repeat center / cover; + } + + #helpModal .port-icon { + -webkit-mask: url(/images/PortIcon.svg) no-repeat center / cover; + mask: url(/images/PortIcon.svg) no-repeat center / cover; + } + + #helpModal .warship-icon { + -webkit-mask: url(/images/BattleshipIconWhite.svg) no-repeat center / + cover; + mask: url(/images/BattleshipIconWhite.svg) no-repeat center / cover; + } + + #helpModal .missile-silo-icon { + -webkit-mask: url(/images/MissileSiloIconWhite.svg) no-repeat center / + cover; + mask: url(/images/MissileSiloIconWhite.svg) no-repeat center / cover; + } + + #helpModal .atom-bomb-icon { + -webkit-mask: url(/images/NukeIconWhite.svg) no-repeat center / cover; + mask: url(/images/NukeIconWhite.svg) no-repeat center / cover; + } + + #helpModal .hydrogen-bomb-icon { + -webkit-mask: url(/images/MushroomCloudIconWhite.svg) no-repeat center / + cover; + mask: url(/images/MushroomCloudIconWhite.svg) no-repeat center / cover; + } + + #helpModal .mirv-icon { + -webkit-mask: url(/images/MIRVIcon.svg) no-repeat center / cover; + mask: url(/images/MIRVIcon.svg) no-repeat center / cover; + } + + #helpModal .target-icon { + -webkit-mask: url(/images/TargetIcon.svg) no-repeat center / cover; + mask: url(/images/TargetIcon.svg) no-repeat center / cover; + } + + #helpModal .alliance-icon { + -webkit-mask: url(/images/AllianceIconWhite.svg) no-repeat center / cover; + mask: url(/images/AllianceIconWhite.svg) no-repeat center / cover; + } + + #helpModal .emoji-icon { + -webkit-mask: url(/images/EmojiIconWhite.svg) no-repeat center / cover; + mask: url(/images/EmojiIconWhite.svg) no-repeat center / cover; + } + + #helpModal .betray-icon { + -webkit-mask: url(/images/TraitorIconWhite.svg) no-repeat center / cover; + mask: url(/images/TraitorIconWhite.svg) no-repeat center / cover; + } + + #helpModal .donate-icon { + -webkit-mask: url(/images/DonateIconWhite.svg) no-repeat center / cover; + mask: url(/images/DonateIconWhite.svg) no-repeat center / cover; + } + + #helpModal .build-icon { + -webkit-mask: url(/images/BuildIconWhite.svg) no-repeat center / cover; + mask: url(/images/BuildIconWhite.svg) no-repeat center / cover; + } + + #helpModal .info-icon { + -webkit-mask: url(/images/InfoIcon.svg) no-repeat center / cover; + mask: url(/images/InfoIcon.svg) no-repeat center / cover; + } + + #helpModal .boat-icon { + -webkit-mask: url(/images/BoatIcon.svg) no-repeat center / cover; + mask: url(/images/BoatIcon.svg) no-repeat center / cover; + } + + #helpModal .cancel-icon { + -webkit-mask: url(/images/XIcon.svg) no-repeat center / cover; + mask: url(/images/XIcon.svg) no-repeat center / cover; + } + `; + + createRenderRoot() { + // Disable shadow DOM to allow Tailwind classes to work + return this; + } + + render() { + return html` + + + `; + } + + public open() { + this.isModalOpen = true; + } + + public close() { + this.isModalOpen = false; + } +} diff --git a/src/client/Main.ts b/src/client/Main.ts index 35f5a444d..ca9405d8c 100644 --- a/src/client/Main.ts +++ b/src/client/Main.ts @@ -17,6 +17,7 @@ import { PublicLobby } from "./PublicLobby"; import { UserSettings } from "../core/game/UserSettings"; import "./DarkModeButton"; import { DarkModeButton } from "./DarkModeButton"; +import { HelpModal } from "./HelpModal"; import { GameType } from "../core/game/Game"; class Client { @@ -79,6 +80,12 @@ class Client { } }); + const hlpModal = document.querySelector("help-modal") as HelpModal; + hlpModal instanceof HelpModal; + document.getElementById("help-button").addEventListener("click", () => { + hlpModal.open(); + }); + const hostModal = document.querySelector( "host-lobby-modal", ) as HostPrivateLobbyModal; diff --git a/src/client/index.html b/src/client/index.html index 19488442c..611a46dce 100644 --- a/src/client/index.html +++ b/src/client/index.html @@ -209,6 +209,17 @@ Single Player + +
+ +
@@ -229,6 +240,7 @@ +