mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:00:43 +00:00
MRH
9866dbb73a
This map was made by mashing up the world map and putting it in the general shape of the super-continent [Pangaea](https://en.wikipedia.org/wiki/Pangaea) It's not super accurate but the continents are generally in the right places and the nations are more or less the same as on World, placed in the general location where they would have been. Hope this is good enough to be added into the game; even if only among custom lobby maps!
103 lines
2.7 KiB
TypeScript
103 lines
2.7 KiB
TypeScript
import { LitElement, html, css } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
import { GameMapType } from "../../core/game/Game";
|
|
import { getMapsImage } from "../utilities/Maps";
|
|
|
|
// Add map descriptions
|
|
export const MapDescription: Record<keyof typeof GameMapType, string> = {
|
|
World: "World",
|
|
Europe: "Europe",
|
|
Mena: "MENA",
|
|
NorthAmerica: "North America",
|
|
Oceania: "Oceania",
|
|
BlackSea: "Black Sea",
|
|
Africa: "Africa",
|
|
Pangaea: "Pangaea",
|
|
Asia: "Asia",
|
|
Mars: "Mars",
|
|
SouthAmerica: "South America",
|
|
Britannia: "Britannia",
|
|
GatewayToTheAtlantic: "Gateway to the Atlantic",
|
|
Australia: "Australia",
|
|
Iceland: "Iceland",
|
|
};
|
|
|
|
@customElement("map-display")
|
|
export class MapDisplay extends LitElement {
|
|
@property({ type: String }) mapKey = "";
|
|
@property({ type: Boolean }) selected = false;
|
|
@property({ type: String }) translation: string = "";
|
|
|
|
static styles = css`
|
|
.option-card {
|
|
width: 100%;
|
|
min-width: 100px;
|
|
max-width: 120px;
|
|
padding: 4px 4px 0 4px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: rgba(30, 30, 30, 0.95);
|
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.option-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
background: rgba(40, 40, 40, 0.95);
|
|
}
|
|
|
|
.option-card.selected {
|
|
border-color: #4a9eff;
|
|
background: rgba(74, 158, 255, 0.1);
|
|
}
|
|
|
|
.option-card-title {
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
text-align: center;
|
|
margin: 0 0 4px 0;
|
|
}
|
|
|
|
.option-image {
|
|
width: 100%;
|
|
aspect-ratio: 4/2;
|
|
color: #aaa;
|
|
transition: transform 0.2s ease-in-out;
|
|
border-radius: 8px;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
`;
|
|
|
|
render() {
|
|
const mapValue = GameMapType[this.mapKey as keyof typeof GameMapType];
|
|
|
|
return html`
|
|
<div class="option-card ${this.selected ? "selected" : ""}">
|
|
${getMapsImage(mapValue)
|
|
? html`<img
|
|
src="${getMapsImage(mapValue)}"
|
|
alt="${this.mapKey}"
|
|
class="option-image"
|
|
/>`
|
|
: html`<div class="option-image">
|
|
<p>${this.mapKey}</p>
|
|
</div>`}
|
|
<div class="option-card-title">
|
|
<!-- ${MapDescription[this.mapKey as keyof typeof GameMapType]}-->
|
|
${this.translation ||
|
|
MapDescription[this.mapKey as keyof typeof GameMapType]}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|