alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-30 05:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'openfrontio:main' into main

Browse Source
This commit is contained in:
Mittanicz
2025-03-25 16:41:15 +01:00
committed by GitHub
parent e4d39cce35 9866dbb73a
commit 77c7b49e1f
22 changed files with 529 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/lang/fr.json
+1
View File
@@ -118,6 +118,7 @@
"britannia": " Grande-Bretagne",
"gatewaytotheatlantic": "Porte de l'Atlantique",
"australia": "Australie",
"iceland": "Islande",
"random": "Aléatoire"
},
"private_lobby": {
resources/lang/ja.json
+5 -5
View File
@@ -27,14 +27,14 @@
"ui_control_desc": "コントロールパネルには以下が含まれます：",
"ui_pop": "人口 - 現在のユニット数、最大人口、増加速度を表示。",
"ui_gold": "資産 - 所持金と増加速度を表示。",
"ui_troops_workers": "兵士と労働者 - 攻撃/防御/金生成のための配分。",
"ui_troops_workers": "兵士と労働者 - 攻撃/防御/金生成のための配分。兵士は攻撃や防御に使われる。労働者はゴールドを生成するために使われます。兵士と労働者の数はスライダーで調整できます。",
"ui_attack_ratio": "攻撃比率 - 攻撃時の使用兵士の割合。",
"ui_options": "オプション",
"ui_options_desc": "以下の項目が含まれます：",
"option_pause": "ゲームの一時停止（シングルプレイヤーのみ）",
"option_timer": "タイマー - ゲーム開始からの経過時間",
"option_exit": "終了ボタン",
"option_settings": "設定メニュー（表示/ダークモード/クリック設定など）",
"option_settings": "設定メニュー - 設定メニューを開きます。左クリックでオルタネート表示、ダークモード、絵文字、アクションを切り替えることができます。",
"radial_title": "ラジアルメニュー",
"radial_desc": "右クリックまたはタップでメニューを開きます：",
"radial_build": "建設メニューを開く。",
@@ -44,12 +44,12 @@
"info_title": "情報メニュー",
"info_enemy_desc": "選択プレイヤーの名前、資産、兵士数、裏切り者かどうかを表示。裏切り者とは、同盟を結んでいたプレイヤーを裏切り、攻撃したプレイヤーのことです。以下のアイコンは、以下のやりとりを表しています：",
"info_target": "ターゲットマークを付ける（攻撃協調用）。",
"info_alliance": "同盟を申し込む。",
"info_alliance": "同盟を申し込む。同盟国は資源と兵力を共有できますが、互いに攻撃することはできません。",
"info_emoji": "絵文字を送る。",
"info_ally_panel": "同盟情報パネル",
"info_ally_desc": "同盟後に使える新しいアイコン：",
"ally_betray": "同盟を裏切る（アイコンが固定されます）。",
"ally_donate": "兵士を味方に寄付。",
"ally_betray": "味方を裏切り、同盟を終わらせる。あなたの名前の横には永久にアイコンが貼り付けられます。ボットはあなたと同盟を結ぶ可能性が低くなり、プレイヤーは同盟を結ぶ前によく考えるようになります。",
"ally_donate": "自分の部隊の一部を味方に寄付すること。兵力が不足して攻撃を受けているときや、敵を粉砕するために余力が必要なときに使う。",
"build_menu_title": "建設メニュー",
"build_name": "名前",
"build_icon": "アイコン",
resources/maps/Pangaea.bin
+1
View File
File diff suppressed because one or more lines are too long
resources/maps/Pangaea.json
+181
View File
@@ -0,0 +1,181 @@
{
"name": "Pangaea",
"width": 1000,
"height": 1000,
"nations": [
{
"coordinates": [389, 800],
"name": "South Africa",
"strength": 2,
"flag": "za"
},
{
"coordinates": [500, 780],
"name": "Madagascar",
"strength": 1,
"flag": "mg"
},
{
"coordinates": [515, 600],
"name": "Egypt",
"strength": 2,
"flag": "eg"
},
{
"coordinates": [180, 420],
"name": "United States",
"strength": 3,
"flag": "us"
},
{
"coordinates": [200, 310],
"name": "Canada",
"strength": 2,
"flag": "ca"
},
{
"coordinates": [150, 460],
"name": "Mexico",
"strength": 1,
"flag": "mx"
},
{
"coordinates": [160, 600],
"name": "Colombia",
"strength": 1,
"flag": "co"
},
{
"coordinates": [280, 800],
"name": "Argentina",
"strength": 1,
"flag": "ar"
},
{
"coordinates": [250, 600],
"name": "Brazil",
"strength": 1,
"flag": "br"
},
{
"coordinates": [470, 890],
"name": "Antarctica",
"strength": 3,
"flag": "aq"
},
{
"coordinates": [400, 340],
"name": "Greenland",
"strength": 2,
"flag": "gl"
},
{
"coordinates": [550, 440],
"name": "Spain",
"strength": 1,
"flag": "es"
},
{
"coordinates": [550, 450],
"name": "France",
"strength": 2,
"flag": "fr"
},
{
"coordinates": [510, 380],
"name": "Germany",
"strength": 1,
"flag": "de"
},
{
"coordinates": [480, 365],
"name": "Sweden",
"strength": 1,
"flag": "se"
},
{
"coordinates": [605, 370],
"name": "Turkey",
"strength": 1,
"flag": "tr"
},
{
"coordinates": [480, 335],
"name": "Finland",
"strength": 1,
"flag": "fi"
},
{
"coordinates": [570, 340],
"name": "Ukraine",
"strength": 1,
"flag": "ua"
},
{
"coordinates": [570, 290],
"name": "Russia",
"strength": 3,
"flag": "ru"
},
{
"coordinates": [490, 150],
"name": "Mongolia",
"strength": 1,
"flag": "mn"
},
{
"coordinates": [550, 70],
"name": "China",
"strength": 3,
"flag": "cn"
},
{
"coordinates": [620, 650],
"name": "India",
"strength": 2,
"flag": "in"
},
{
"coordinates": [545, 200],
"name": "Kazakhstan",
"strength": 1,
"flag": "kz"
},
{
"coordinates": [600, 600],
"name": "Saudi Arabia",
"strength": 1,
"flag": "sa"
},
{
"coordinates": [680, 830],
"name": "Australia",
"strength": 2,
"flag": "au"
},
{
"coordinates": [540, 650],
"name": "Ethiopia",
"strength": 1,
"flag": "et"
},
{
"coordinates": [400, 500],
"name": "Chad",
"strength": 1,
"flag": "td"
},
{
"coordinates": [420, 25],
"name": "Japan",
"strength": 1,
"flag": "jp"
},
{
"coordinates": [480, 410],
"name": "United Kingdom",
"strength": 2,
"flag": "gb"
}
]
}
resources/maps/Pangaea.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 600 KiB

resources/maps/PangaeaMini.bin
+1
View File
File diff suppressed because one or more lines are too long
resources/maps/PangaeaThumb.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 222 KiB

src/client/components/Maps.ts
+1
View File
@@ -12,6 +12,7 @@ export const MapDescription: Record<keyof typeof GameMapType, string> = {
Oceania: "Oceania",
BlackSea: "Black Sea",
Africa: "Africa",
Pangaea: "Pangaea",
Asia: "Asia",
Mars: "Mars",
SouthAmerica: "South America",
src/client/index.html
+97 -133
View File
@@ -4,7 +4,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenFront (ALPHA)</title>
<link rel="manifest" href="../../resources/manifest.json" />
<!-- Critical CSS to prevent FOUC -->
@@ -46,44 +45,6 @@
filter: blur(4px) brightness(0.7);
}
/* Critical styles to prevent layout shift */
.container {
display: flex;
padding: 1rem;
max-width: 540px !important;
flex-direction: column;
gap: 1rem;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.container__row {
display: flex;
gap: 1rem;
align-items: center;
}
.container__row--equal > * {
flex: 1 1 100%;
}
.logo-glow {
fill: url(#logo-gradient);
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
drop-shadow(1px -1px 0px rgb(255, 255, 255))
drop-shadow(-1px 1px 0px rgb(255, 255, 255))
drop-shadow(3px 3px 0px rgb(255, 255, 255));
}
.logo-version {
color: #2563eb;
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
drop-shadow(1px -1px 0px rgb(255, 255, 255))
drop-shadow(-1px 1px 0px rgb(255, 255, 255));
}
.left-gutter-ad {
position: fixed;
left: 0;
@@ -129,6 +90,7 @@
.left-gutter-ad {
display: none;
}
.right-gutter-ad {
display: none;
}
@@ -147,9 +109,11 @@
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "AW-16702609763");
</script>
@@ -159,71 +123,71 @@
crossorigin="anonymous"
></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"
>
<!-- Logo section remains the same -->
<div
class="flex justify-center items-center flex-col w-full bg-gray-900/80 backdrop-blur-md pt-8 pb-2 px-8"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1364 259"
width="100%"
height="100%"
fill="currentColor"
class="max-w-[450px] h-full logo-glow"
>
<defs>
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color: #2563eb" />
<stop offset="100%" style="stop-color: #3b82f6" />
</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 class="flex justify-center text-sm font-bold mt-[-5px] logo-version">
v0.21.0
<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: #2563eb" />
<stop offset="100%" style="stop-color: #3b82f6" />
</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 class="l-header__highlightText">v0.21.0</div>
</div>
</div>
</header>
<div class="bg-image"></div>
<!-- Left gutter ad placement - full height, no empty space -->
<div class="left-gutter-ad ad">
<google-ad
@@ -232,7 +196,6 @@
fullWidthResponsive="false"
></google-ad>
</div>
<div class="right-gutter-ad ad">
<google-ad
adSlot="1814331462"
@@ -241,10 +204,8 @@
></google-ad>
</div>
<dark-mode-button></dark-mode-button>
<!-- Main container with responsive padding -->
<div class="flex justify-center items-center flex-grow">
<main class="flex justify-center items-center flex-grow">
<div class="container">
<div class="container__row">
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
@@ -311,7 +272,7 @@
</select>
</div>
</div>
</div>
</main>
<!-- Game components -->
<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
@@ -319,20 +280,6 @@
</div>
<div id="app"></div>
<div id="radialMenu" class="radial-menu"></div>
<!-- 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>
<leader-board></leader-board>
<build-menu></build-menu>
<win-modal></win-modal>
<game-starting-modal></game-starting-modal>
<top-bar></top-bar>
<player-panel></player-panel>
<help-modal></help-modal>
<div
class="flex flex-column gap-2 fixed right-[10px] top-[10px] z-50 flex flex-col w-32 sm:w-32 lg:w-48"
>
@@ -356,38 +303,51 @@
</div>
<!-- Footer section -->
<div class="w-full bg-gray-900/80 backdrop-blur-md py-4">
<div
class="max-w-7xl mx-auto px-4 flex justify-between items-center text-white sm:flex-row flex-col sm:gap-0 gap-4"
>
<div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
<footer class="l-footer">
<div class="l-footer__content">
<div class="l-footer__col">
<a
href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
data-i18n="main.how_to_play"
class="text-white/70 hover:text-white transition-colors duration-300"
class="t-link"
target="_blank"
>How to Play</a
>
How to Play
</a>
<a
href="https://openfront.miraheze.org/wiki/Main_Page"
data-i18n="main.wiki"
class="text-white/70 hover:text-white transition-colors duration-300"
class="t-link"
target="_blank"
>Wiki</a
>
Wiki
</a>
</div>
<div class="text-white/70">
<div class="l-footer__col t-text-white">
© 2025
<a
href="https://github.com/openfrontio/OpenFrontIO"
class="hover:text-white transition-colors duration-300"
class="t-link"
target="_blank"
>OpenFront.io</a
>.
>
OpenFront.io
</a>
</div>
</div>
</div>
</footer>
<!-- 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>
<leader-board></leader-board>
<build-menu></build-menu>
<win-modal></win-modal>
<game-starting-modal></game-starting-modal>
<top-bar></top-bar>
<player-panel></player-panel>
<help-modal></help-modal>
<dark-mode-button></dark-mode-button>
<!-- Scripts -->
<script>
// Remove preload class after everything is loaded
@@ -402,6 +362,7 @@
const locale = new Intl.Locale(navigator.language);
const defaultLang = locale.language;
const userLang = localStorage.getItem("lang") || defaultLang;
async function loadLanguage(lang) {
try {
const response = await fetch(`/lang/${lang}.json`);
@@ -413,6 +374,7 @@
return {};
}
}
function applyTranslation(translations) {
const components = [
"single-player-modal",
@@ -465,6 +427,7 @@
}
});
}
async function changeLanguage(lang) {
// console.log(`Changing language to: ${lang}`);
localStorage.setItem("lang", lang);
@@ -472,6 +435,7 @@
window.translations = translations;
applyTranslation(translations);
}
const defaultTranslations = await loadLanguage("en");
window.defaultTranslations = defaultTranslations;
const translations = await loadLanguage(userLang);
src/client/styles.css
+7 -115
View File
@@ -1,7 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("./styles/core/variables.css");
@import url("./styles/core/typography.css");
@import url("./styles/layout/header.css");
@import url("./styles/layout/footer.css");
@import url("./styles/layout/container.css");
@import url("./styles/components/button.css");
@import url("./styles/components/modal.css");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -474,117 +480,3 @@ label.option-card:hover {
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/*Base styles*/
.c-button {
background: #2563eb;
color: #fff;
cursor: pointer;
outline: none;
display: inline-block;
font-size: 16px;
border: 1px solid transparent;
text-align: center;
padding: 0.8rem 1rem;
border-radius: 8px;
@media (min-width: 1024px) {
font-size: 18px;
}
}
.c-button:hover,
.c-button:active,
.c-button:focus {
background: #1d4ed8;
}
.c-button:disabled {
background: linear-gradient(to right, rgb(74, 74, 74), rgb(61, 61, 61));
opacity: 0.7;
cursor: not-allowed;
}
.c-button--secondary {
background: #dbeafe;
color: #202020;
}
.c-button--secondary:hover,
.c-button--secondary:active,
.c-button--secondary:focus {
background: #bfdbfe;
}
.c-button--block {
display: block;
width: 100%;
}
.c-button--blockDesktop {
display: block;
width: 100%;
@media (min-width: 1024px) {
width: auto;
margin: 0 auto;
}
}
.c-modal {
position: fixed;
padding: 1rem;
z-index: 1000;
left: 0;
bottom: 0;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
.c-modal__wrapper {
background: #23232382;
border-radius: 8px;
min-width: 340px;
max-width: 860px;
}
.c-modal__header {
position: relative;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-size: 18px;
background: #000000a1;
text-align: center;
color: #fff;
padding: 1rem 2.4rem 1rem 1.4rem;
}
.c-modal__close {
cursor: pointer;
position: absolute;
right: 1rem;
top: 1rem;
}
.c-modal__content {
position: relative;
color: #fff;
padding: 1.4rem;
max-height: 60dvh;
overflow-y: scroll;
backdrop-filter: blur(8px);
}
/*This will be removed in future*/
o-modal o-button {
@media (min-width: 1024px) {
margin: 0 auto;
display: block;
text-align: center;
}
}
src/client/styles/components/button.css
+57
View File
@@ -0,0 +1,57 @@
.c-button {
background: var(--primaryColor);
color: #fff;
cursor: pointer;
outline: none;
display: inline-block;
font-size: 16px;
border: 1px solid transparent;
text-align: center;
padding: 0.8rem 1rem;
border-radius: 8px;
transition: var(--transition);
@media (min-width: 1024px) {
font-size: 18px;
}
}
.c-button:hover,
.c-button:active,
.c-button:focus {
background: var(--primaryColorHover);
transition: var(--transition);
}
.c-button:disabled {
background: var(--primaryColorDisabled);
opacity: 0.7;
cursor: not-allowed;
transition: var(--transition);
}
.c-button--secondary {
background: var(--secondaryColor);
color: var(--fontColor);
}
.c-button--secondary:hover,
.c-button--secondary:active,
.c-button--secondary:focus {
background: var(--secondaryColorHover);
}
.c-button--block {
display: block;
width: 100%;
}
.c-button--blockDesktop {
display: block;
width: 100%;
@media (min-width: 1024px) {
width: auto;
margin: 0 auto;
}
}
src/client/styles/components/modal.css
+57
View File
@@ -0,0 +1,57 @@
.c-modal {
position: fixed;
padding: 1rem;
z-index: 1000;
left: 0;
bottom: 0;
right: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
overflow-y: auto;
display: flex;
align-items: center;
justify-content: center;
}
.c-modal__wrapper {
background: #23232382;
border-radius: 8px;
min-width: 340px;
max-width: 860px;
}
.c-modal__header {
position: relative;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
font-size: 18px;
background: #000000a1;
text-align: center;
color: #fff;
padding: 1rem 2.4rem 1rem 1.4rem;
}
.c-modal__close {
cursor: pointer;
position: absolute;
right: 1rem;
top: 1rem;
}
.c-modal__content {
position: relative;
color: #fff;
padding: 1.4rem;
max-height: 60dvh;
overflow-y: scroll;
backdrop-filter: blur(8px);
}
/*This will be removed in future*/
o-modal o-button {
@media (min-width: 1024px) {
margin: 0 auto;
display: block;
text-align: center;
}
}
src/client/styles/core/typography.css
+13
View File
@@ -0,0 +1,13 @@
.t-link {
color: #ffffffb3;
transition: var(--transition);
&:hover {
color: #fff;
transition: var(--transition);
}
}
.t-text-white {
color: #ffffffb3;
}
src/client/styles/core/variables.css
+19
View File
@@ -0,0 +1,19 @@
:root {
--theme: "light";
--breakPoint-tablet: 800px;
--breakPoint-Desktop: 1024px;
--blur-md: 4px;
--boxBackgroundColor: #111827cc;
--fontColor: #202020;
--fontColorLight: #fff;
--primaryColor: #2563eb;
--primaryColorHover: #1d4ed8;
--primaryColorDisabled: linear-gradient(
to right,
rgb(74, 74, 74),
rgb(61, 61, 61)
);
--secondaryColor: #dbeafe;
--secondaryColorHover: #bfdbfe;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
src/client/styles/layout/container.css
+19
View File
@@ -0,0 +1,19 @@
.container {
display: flex;
padding: 1rem;
max-width: 540px !important;
flex-direction: column;
gap: 1rem;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.container__row {
display: flex;
gap: 1rem;
align-items: center;
}
.container__row--equal > * {
flex: 1 1 100%;
}
src/client/styles/layout/footer.css
+24
View File
@@ -0,0 +1,24 @@
.l-footer {
background: var(--boxBackgroundColor);
backdrop-filter: blur(var(--blur-md));
display: flex;
justify-content: center;
padding: 12px;
@media (min-width: 800px) {
padding: 12px 24px;
}
}
.l-footer__content {
max-width: 860px;
flex-wrap: wrap;
display: flex;
flex: 1;
justify-content: space-between;
}
.l-footer__col {
display: flex;
gap: 10px;
}
src/client/styles/layout/header.css
+39
View File
@@ -0,0 +1,39 @@
.l-header {
background: var(--boxBackgroundColor);
backdrop-filter: blur(var(--blur-md));
display: flex;
justify-content: center;
padding: 24px 24px 12px;
@media (min-width: 800px) {
padding: 24px 24px;
}
}
.l-header__content {
display: flex;
flex: 1;
max-width: 600px;
flex-direction: column;
align-items: center;
gap: 10px;
}
.l-header__logo {
max-width: 450px;
fill: url(#logo-gradient);
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
drop-shadow(1px -1px 0px rgb(255, 255, 255))
drop-shadow(-1px 1px 0px rgb(255, 255, 255))
drop-shadow(3px 3px 0px rgb(255, 255, 255));
}
.l-header__highlightText {
color: #2563eb;
font-weight: 700;
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
drop-shadow(1px -1px 0px rgb(255, 255, 255))
drop-shadow(-1px 1px 0px rgb(255, 255, 255));
}
src/client/utilities/Maps.ts
+3
View File
@@ -6,6 +6,7 @@ import northAmerica from "../../../resources/maps/NorthAmericaThumb.png";
import southAmerica from "../../../resources/maps/SouthAmericaThumb.png";
import blackSea from "../../../resources/maps/BlackSeaThumb.png";
import africa from "../../../resources/maps/AfricaThumb.png";
import pangaea from "../../../resources/maps/PangaeaThumb.png";
import asia from "../../../resources/maps/AsiaThumb.png";
import mars from "../../../resources/maps/MarsThumb.png";
import britannia from "../../../resources/maps/BritanniaThumb.png";
@@ -33,6 +34,8 @@ export function getMapsImage(map: GameMapType): string {
return blackSea;
case GameMapType.Africa:
return africa;
case GameMapType.Pangaea:
return pangaea;
case GameMapType.Asia:
return asia;
case GameMapType.Mars:
src/core/game/Game.ts
+1
View File
@@ -47,6 +47,7 @@ export enum GameMapType {
Oceania = "Oceania",
BlackSea = "Black Sea",
Africa = "Africa",
Pangaea = "Pangaea",
Asia = "Asia",
Mars = "Mars",
Britannia = "Britannia",
src/core/game/TerrainMapFileLoader.ts
+1
View File
@@ -31,6 +31,7 @@ const MAP_FILE_NAMES: Record<GameMapType, string> = {
[GameMapType.Oceania]: "Oceania",
[GameMapType.BlackSea]: "BlackSea",
[GameMapType.Africa]: "Africa",
[GameMapType.Pangaea]: "Pangaea",
[GameMapType.Asia]: "Asia",
[GameMapType.Mars]: "Mars",
[GameMapType.SouthAmerica]: "SouthAmerica",
src/scripts/generateTerrainMaps.ts
+1
View File
@@ -18,6 +18,7 @@ const maps = [
"Britannia",
"GatewayToTheAtlantic",
"Australia",
"Pangaea",
"Iceland",
];
src/server/Master.ts
+1
View File
@@ -282,6 +282,7 @@ function getNextMap(): GameMapType {
Mena: 2,
NorthAmerica: 2,
BlackSea: 2,
Pangaea: 2,
Africa: 2,
Asia: 2,
Mars: 2,