mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-08-18 09:14:09 +00:00
build: migrate build system to Vite and test runner to Vitest & Remove depracated husky usage (#2703)
- Replace Webpack with Vite for faster client bundling and HMR. - Migrate tests from Jest to Vitest and update configuration. - Update Web Worker instantiation to standard ESM syntax. - Implement Env utility in `src/core` for safe, hybrid environment variable access (Vite vs Node). - Refactor configuration loaders to remove direct `process.env` dependencies in shared code. - Update TypeScript environment definitions and project scripts for the new toolchain. - Remove the [depracated usage of the husky](https://github.com/typicode/husky/releases/tag/v9.0.1). ## Description: migrate build system to Vite and test runner to Vitest & Remove depracated husky usage ## Please complete the following: - [X] I have added screenshots for all UI updates - [X] I process any text displayed to the user through translateText() and I've added it to the en.json file - [ ] I have added relevant tests to the test directory - [X] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: wraith4081 --------- Co-authored-by: evanpelle <evanpelle@gmail.com>
This commit is contained in:
Wraith
+513
@@ -0,0 +1,513 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-full" translate="no">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<title>OpenFront (ALPHA)</title>
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="icon" type="image/x-icon" href="/images/Favicon.svg" />
|
||||
|
||||
<!-- SEO -->
|
||||
<link rel="canonical" href="https://openfront.io/" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Conquer the world in this multiplayer battle royale! Expand your nation, eliminate opponents, and dominate the map in this fast-paced IO game."
|
||||
/>
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:url" content="https://openfront.io/" />
|
||||
<meta property="og:title" content="OpenFront - Battle Royale" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Conquer the world in this multiplayer battle royale! Expand your nation, eliminate opponents, and dominate the map in this fast-paced IO game."
|
||||
/>
|
||||
<meta
|
||||
property="og:image"
|
||||
content="https://openfront.io/images/GameplayScreenshot.png"
|
||||
/>
|
||||
<meta property="og:type" content="game" />
|
||||
|
||||
<!-- Critical CSS to prevent FOUC -->
|
||||
<style>
|
||||
.preload * {
|
||||
-webkit-transition: none !important;
|
||||
-moz-transition: none !important;
|
||||
-ms-transition: none !important;
|
||||
-o-transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
html.preload {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
content: "";
|
||||
background-image: url("/images/EuropeBackgroundBlurred.webp");
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-image::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba(139, 26, 26, 0.5),
|
||||
rgba(255, 255, 255, 0.5),
|
||||
rgba(39, 174, 96, 0.5)
|
||||
);
|
||||
}
|
||||
|
||||
.dark .bg-image {
|
||||
filter: brightness(0.4) saturate(0.3) contrast(1.2);
|
||||
}
|
||||
|
||||
/* display:none if child has class parent-hidden since we can't use shadow DOM in Lit due to Tailwind */
|
||||
.component-hideable:has(> .parent-hidden) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.snow {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 1050;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
position: absolute;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
pointer-events: none;
|
||||
animation-name: snowflake-fall;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 10s; /* Adjust duration to taste */
|
||||
z-index: 9999; /* Increased z-index for visibility */
|
||||
opacity: 0.8; /* Default opacity */
|
||||
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5)); /* Subtle glow */
|
||||
}
|
||||
|
||||
@keyframes snowflake-fall {
|
||||
from {
|
||||
transform: translateY(-100%) rotate(0deg); /* Start off-screen */
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(105vh) rotate(360deg); /* Fall completely out of view */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Immediate execution to prevent FOUC -->
|
||||
<script>
|
||||
document.documentElement.className = "preload";
|
||||
</script>
|
||||
|
||||
<!-- CrazyGames SDK -->
|
||||
<script
|
||||
src="https://sdk.crazygames.com/crazygames-sdk-v3.js"
|
||||
async
|
||||
></script>
|
||||
|
||||
<!-- Cloudflare Turnstile -->
|
||||
<script
|
||||
src="https://challenges.cloudflare.com/turnstile/v0/api.js"
|
||||
async
|
||||
defer
|
||||
></script>
|
||||
|
||||
<!-- Publift/Fuse ads -->
|
||||
<script
|
||||
async
|
||||
src="https://cdn.fuseplatform.net/publift/tags/2/4121/fuse.js"
|
||||
></script>
|
||||
|
||||
<script>
|
||||
window.googletag = window.googletag || { cmd: [] };
|
||||
googletag.cmd.push(function () {
|
||||
googletag.pubads().set("page_url", "http://openfront.io ");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Analytics -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=AW-16702609763"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag("js", new Date());
|
||||
gtag("config", "AW-16702609763");
|
||||
</script>
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=G-WQGQQ8RDN4"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
|
||||
gtag("config", "G-WQGQQ8RDN4");
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
|
||||
>
|
||||
<div class="snow"></div>
|
||||
<header class="l-header">
|
||||
<div class="l-header__content">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1364 259"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="currentColor"
|
||||
class="l-header__logo"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="logo-gradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop offset="0%" style="stop-color: #e53935" />
|
||||
<!-- Vibrant Red -->
|
||||
<stop offset="100%" style="stop-color: #388e3c" />
|
||||
<!-- Deep Green -->
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
d="M0,174V51h15.24v-17.14h16.81v-16.98h16.96V0h1266v17.23h17.13v16.81h16.98v16.96h14.88v123h-15.13v17.08h-17.08v17.08h-16.9v17.04H324.9v16.86h-16.9v16.95h-102v-17.12h-17.07v-17.05H48.73v-17.05h-16.89v-16.89H14.94v-16.89H0ZM1297.95,17.35H65.9v16.7h-17.08v17.08h-14.5v123.08h14.85v16.9h17.08v17.08h139.9v17.08h17.08v16.36h67.9v-16.72h17.08v-17.07h989.88v-17.07h17.08v-16.9h14.44V50.8h-14.75v-17.08h-16.9v-16.37Z"
|
||||
/>
|
||||
<path
|
||||
d="M189.1,154.78v17.07h-16.9v16.75h-51.07v-16.42h-16.9v-17.07h-16.97v-84.88h16.63v-17.07h16.9v-16.84h51.07v16.5h17.07v17.07h16.7v84.89h-16.54ZM137.87,53.1v17.15h-16.6v84.86h16.97v16.61h16.89v-16.97h16.6v-84.86h-16.97v-16.79h-16.89Z"
|
||||
/>
|
||||
<path
|
||||
d="M273.91,104.06v-16.73h50.92v16.45h16.85v68.05h-16.44v17.06h-50.96v16.88h16.4v16.96h-67.28v-16.61h16.33v-101.86h-16.38v-16.98h33.4v16.63c6.12,0,11.72,0,17.31,0,0,22.56,0,45.13,0,67.75h33.59v-67.61h-33.73Z"
|
||||
/>
|
||||
<path
|
||||
d="M631.12,188.64v-16.36h16.53V53.2h-16.25v-16.86h118.33v33.29h-16.65v-16.36h-50.72v50.44h33.36v-16.35h16.99v50.25h-16.6v-16.33h-33.73v50.65h16.37v16.72h-67.63Z"
|
||||
/>
|
||||
<path
|
||||
d="M596.78,103.8v84.94h-33.54v-84.39h-34.03v84.25h-33.85v-101.29h84.5v16.49h16.93Z"
|
||||
/>
|
||||
<path
|
||||
d="M1107.12,188.71v-84.34h-34.03v84.37h-33.7v-101.41h84.42v16.41h16.86v84.96h-33.54Z"
|
||||
/>
|
||||
<path
|
||||
d="M988.1,171.78v16.87h-67.88v-16.38h-16.87v-68.06h16.38v-16.87h68.06v16.38h16.87v68.06h-16.55ZM970.78,104.35h-33.39v67.38h33.39v-67.38Z"
|
||||
/>
|
||||
<path
|
||||
d="M460.77,155.38v16.49h-16.58v16.83h-68.05v-16.5h-16.83v-68.05h16.49v-16.83h68.05v16.49h16.83v34.06h-67.31v33.82h33.47v-16.31h33.92ZM393.39,104.18v16.56h33.3v-16.56h-33.3Z"
|
||||
/>
|
||||
<path
|
||||
d="M1209.13,172h-16.9v-67.9h-16.96v-16.9h16.68v-17.08h16.9v-16.82h16.9v33.58h50.98v16.91h-50.4v67.96h16.48v-16.43h50.95v16.54h-16.55v16.76h-68.08v-16.6Z"
|
||||
/>
|
||||
<path
|
||||
d="M834.91,120.94v16.96h-16.65v33.88h16.41v16.96h-67.29v-16.63h16.34v-67.87h-16.4v-16.97h50.42v33.81h17.3l-.14-.14Z"
|
||||
/>
|
||||
<path
|
||||
d="M835.05,121.08v-33.75h33.76v16.43h16.85v33.96h-33.43v-16.79c-6.13,0-11.73,0-17.32,0,0,0,.14.14.14.14Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div id="game-version" class="l-header__highlightText text-center">
|
||||
Loading version...
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="bg-image"></div>
|
||||
<div
|
||||
id="turnstile-container"
|
||||
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99999]"
|
||||
></div>
|
||||
<gutter-ads></gutter-ads>
|
||||
|
||||
<!-- Main container with responsive padding -->
|
||||
<main class="flex justify-center flex-grow">
|
||||
<div class="container pt-12">
|
||||
<token-login class="w-[20%] md:w-[15%]"></token-login>
|
||||
|
||||
<div class="container__row">
|
||||
<flag-input class="w-[20%] md:w-[20%]"></flag-input>
|
||||
<territory-patterns-modal class="w-[20%] md:w-[15%]">
|
||||
<button
|
||||
id="territory-patterns-input-preview-button"
|
||||
class="w-full border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)] justify-center"
|
||||
title="Pick a pattern!"
|
||||
></button>
|
||||
</territory-patterns-modal>
|
||||
<username-input class="relative w-full"></username-input>
|
||||
<news-button class="w-[20%] component-hideable"></news-button>
|
||||
</div>
|
||||
<div></div>
|
||||
<div>
|
||||
<public-lobby class="block"></public-lobby>
|
||||
</div>
|
||||
<div>
|
||||
<matchmaking-button class="w-[20%] md:w-[15%]"></matchmaking-button>
|
||||
</div>
|
||||
<div class="container__row container__row--equal">
|
||||
<o-button
|
||||
id="host-lobby-button"
|
||||
title="Create Lobby"
|
||||
translationKey="main.create_lobby"
|
||||
block
|
||||
secondary
|
||||
></o-button>
|
||||
<o-button
|
||||
id="join-private-lobby-button"
|
||||
title="Join Lobby"
|
||||
translationKey="main.join_lobby"
|
||||
block
|
||||
secondary
|
||||
></o-button>
|
||||
<!-- <o-button
|
||||
id="chat-button"
|
||||
title="Chat Test"
|
||||
block
|
||||
secondary
|
||||
></o-button> -->
|
||||
</div>
|
||||
|
||||
<o-button
|
||||
id="single-player"
|
||||
title="Single Player"
|
||||
translationKey="main.single_player"
|
||||
block
|
||||
></o-button>
|
||||
|
||||
<o-button
|
||||
id="help-button"
|
||||
title="Instructions"
|
||||
translationKey="main.instructions"
|
||||
block
|
||||
secondary
|
||||
></o-button>
|
||||
<div class="container__row">
|
||||
<lang-selector class="w-full"></lang-selector>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- User Setting -->
|
||||
<button
|
||||
id="settings-button"
|
||||
title="Settings"
|
||||
class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
|
||||
style="width: 80px; height: 80px; background-color: var(--primaryColor)"
|
||||
>
|
||||
<img
|
||||
src="/images/SettingIconWhite.svg"
|
||||
alt="Settings"
|
||||
style="width: 72px; height: 72px"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<!-- Game components -->
|
||||
<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
|
||||
<ul></ul>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<div id="radialMenu" class="radial-menu"></div>
|
||||
<div class="flex gap-2 fixed right-[10px] top-[10px] z-50 flex-col">
|
||||
<player-info-overlay></player-info-overlay>
|
||||
</div>
|
||||
<div
|
||||
class="fixed bottom-[30px] sm:bottom-auto sm:top-[20px] z-50 mx-auto max-w-max inset-x-0 items-center"
|
||||
>
|
||||
<heads-up-message></heads-up-message>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px]"
|
||||
style="position: fixed; pointer-events: none"
|
||||
>
|
||||
<div
|
||||
class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end"
|
||||
style="pointer-events: none"
|
||||
>
|
||||
<chat-display></chat-display>
|
||||
<events-display></events-display>
|
||||
</div>
|
||||
<div>
|
||||
<control-panel></control-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer section -->
|
||||
<footer
|
||||
class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-[var(--boxBackgroundColor)] backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-[860px] flex-1"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start flex-shrink-0"
|
||||
>
|
||||
<a
|
||||
href="https://openfront.wiki/Main_Page"
|
||||
data-i18n="main.wiki"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
|
||||
target="_blank"
|
||||
>
|
||||
Wiki
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://www.reddit.com/r/Openfront/"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
<span data-i18n="main.reddit"> Reddit </span>
|
||||
</a>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://discord.gg/jRpxXvG42t"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
|
||||
>
|
||||
<span data-i18n="main.join_discord"> Discord </span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex justify-center text-white/70 flex-shrink-0">
|
||||
<a
|
||||
href="https://github.com/openfrontio/OpenFrontIO"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out inline-flex items-center gap-2 whitespace-nowrap"
|
||||
target="_blank"
|
||||
>
|
||||
© OpenFront™ and Contributors
|
||||
<img
|
||||
src="/icons/github-mark-white.svg"
|
||||
alt="GitHub"
|
||||
width="20"
|
||||
height="20"
|
||||
class="ml-2"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end flex-shrink-0"
|
||||
>
|
||||
<a
|
||||
href="/privacy-policy.html"
|
||||
data-i18n="main.privacy_policy"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
|
||||
target="_blank"
|
||||
>
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a
|
||||
href="/terms-of-service.html"
|
||||
data-i18n="main.terms_of_service"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out whitespace-nowrap"
|
||||
target="_blank"
|
||||
>
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<account-button></account-button>
|
||||
<!-- Game modals and overlays -->
|
||||
<single-player-modal></single-player-modal>
|
||||
<host-lobby-modal></host-lobby-modal>
|
||||
<join-private-lobby-modal></join-private-lobby-modal>
|
||||
<emoji-table></emoji-table>
|
||||
<build-menu></build-menu>
|
||||
<win-modal></win-modal>
|
||||
<game-starting-modal></game-starting-modal>
|
||||
<game-top-bar></game-top-bar>
|
||||
<unit-display></unit-display>
|
||||
<div class="flex flex-col items-end fixed top-4 right-4 z-[1000] gap-2">
|
||||
<game-right-sidebar></game-right-sidebar>
|
||||
<replay-panel></replay-panel>
|
||||
</div>
|
||||
<settings-modal></settings-modal>
|
||||
<player-panel></player-panel>
|
||||
<spawn-timer></spawn-timer>
|
||||
<help-modal></help-modal>
|
||||
<game-info-modal></game-info-modal>
|
||||
<dark-mode-button></dark-mode-button>
|
||||
<stats-button></stats-button>
|
||||
<alert-frame></alert-frame>
|
||||
<chat-modal></chat-modal>
|
||||
<user-setting></user-setting>
|
||||
<multi-tab-modal></multi-tab-modal>
|
||||
<game-left-sidebar></game-left-sidebar>
|
||||
<flag-input-modal></flag-input-modal>
|
||||
<performance-overlay></performance-overlay>
|
||||
<div
|
||||
id="language-modal"
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-96 max-w-full">
|
||||
<h2 class="text-xl font-semibold mb-4">Select Language</h2>
|
||||
<div
|
||||
id="language-list"
|
||||
class="space-y-2 max-h-80 overflow-y-auto"
|
||||
></div>
|
||||
<button
|
||||
class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded"
|
||||
onclick="
|
||||
document.getElementById('language-modal').classList.add('hidden')
|
||||
"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Remove preload class after everything is loaded
|
||||
window.addEventListener("load", function () {
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove("preload");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Analytics -->
|
||||
<script
|
||||
defer
|
||||
src="https://static.cloudflareinsights.com/beacon.min.js"
|
||||
data-cf-beacon='{"token": "03d93e6fefb349c28ee69b408fa25a13"}'
|
||||
></script>
|
||||
<script type="module" src="/src/client/Main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user