Added a far more basic map
This commit is contained in:
parent
3062653d95
commit
79c4ce20d1
@ -37,3 +37,39 @@
|
|||||||
.not-ready {
|
.not-ready {
|
||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
position: absolute;
|
||||||
|
top: 50vh;
|
||||||
|
left: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map-back {
|
||||||
|
position: absolute;
|
||||||
|
top: -500px;
|
||||||
|
left: -500px;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-color: black;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 2px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.strength {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
position: absolute;
|
||||||
|
top: -20px;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,7 @@
|
|||||||
|
function unlockMapDom() {}
|
||||||
|
|
||||||
|
function lockMapDom() {}
|
||||||
|
|
||||||
function updatePlayerDom() {
|
function updatePlayerDom() {
|
||||||
let list = document.querySelector("#playerList");
|
let list = document.querySelector("#playerList");
|
||||||
list.replaceChildren();
|
list.replaceChildren();
|
||||||
|
|||||||
@ -11,6 +11,8 @@ const PRE_GAME = 1;
|
|||||||
const PLAYING = 2;
|
const PLAYING = 2;
|
||||||
const POST_GAME = 3;
|
const POST_GAME = 3;
|
||||||
|
|
||||||
|
const COLORS = ["#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#FFFF00", "#00FFFF"];
|
||||||
|
|
||||||
let gameState = WAITING;
|
let gameState = WAITING;
|
||||||
|
|
||||||
let socket;
|
let socket;
|
||||||
@ -69,6 +71,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||||||
case "CLAIM":
|
case "CLAIM":
|
||||||
// Claim a region in the pregame.
|
// Claim a region in the pregame.
|
||||||
await currentPlayer().claim(data);
|
await currentPlayer().claim(data);
|
||||||
|
// Increment to next player.
|
||||||
|
currentPlayer().endTurn();
|
||||||
|
|
||||||
|
if (currentPlayer() === us) {
|
||||||
|
currentPlayer().claimRegions();
|
||||||
|
}
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -155,8 +163,7 @@ async function startPregame() {
|
|||||||
|
|
||||||
firstPlayer.isPlaying = true;
|
firstPlayer.isPlaying = true;
|
||||||
await barrier.wait();
|
await barrier.wait();
|
||||||
|
updatePlayerDom();
|
||||||
|
|
||||||
// Players select starting regions.
|
// Players select starting regions.
|
||||||
|
|
||||||
updatePlayerDom();
|
|
||||||
}
|
}
|
||||||
|
|||||||
102
static/js/map.js
102
static/js/map.js
@ -46,95 +46,17 @@ class Region {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const EUROPE = new Continent("Europe");
|
const EAST = new Continent("East");
|
||||||
const ASIA = new Continent("Asia");
|
const WEST = new Continent("West");
|
||||||
const AUSTRALASIA = new Continent("Australasia");
|
|
||||||
const AFRICA = new Continent("Africa");
|
|
||||||
const SOUTH_AMERICA = new Continent("South America");
|
|
||||||
const NORTH_AMERICA = new Continent("North America");
|
|
||||||
|
|
||||||
const BRITISH_ISLES = new Region("British Isles", EUROPE);
|
const A = new Region("A", EAST);
|
||||||
const SPAIN = new Region("Spain", EUROPE);
|
const B = new Region("B", EAST);
|
||||||
const MEDITERRANEAN = new Region("Mediterranean", EUROPE);
|
const C = new Region("C", EAST);
|
||||||
const GERMANIC = new Region("Germanic States", EUROPE);
|
const D = new Region("D", EAST);
|
||||||
const WESTERN_SOVIET = new Region("USSR - West", EUROPE);
|
const E = new Region("E", EAST);
|
||||||
const SCANDINAVIA = new Region("Scandinavia", EUROPE);
|
|
||||||
const ICELAND = new Region("Iceland", EUROPE);
|
|
||||||
|
|
||||||
const GREENLAND = new Region("Greenland", NORTH_AMERICA);
|
const F = new Region("F", WEST);
|
||||||
const NEWFOUNDLAND = new Region("Newfoundland", NORTH_AMERICA);
|
const G = new Region("G", WEST);
|
||||||
const EAST_COAST = new Region("USA - East Coast", NORTH_AMERICA);
|
const H = new Region("H", WEST);
|
||||||
const CENTRAL_AMERICA = new Region("Mexico", NORTH_AMERICA);
|
const I = new Region("I", WEST);
|
||||||
const WEST_COAST = new Region("USA - West Coast", NORTH_AMERICA);
|
const J = new Region("J", WEST);
|
||||||
const ALASKA = new Region("USA - Alaskan", NORTH_AMERICA);
|
|
||||||
const WEST_CANADA = new Region("Canada - West", NORTH_AMERICA);
|
|
||||||
const NORTH_CANADA = new Region("Canada - North", NORTH_AMERICA);
|
|
||||||
const CENTRAL_CANADA = new Region("Canada - Central", NORTH_AMERICA);
|
|
||||||
|
|
||||||
const MIDDLE_EAST = new Region("Middle East", ASIA);
|
|
||||||
const INDIA = new Region("India", ASIA);
|
|
||||||
const SOUTH_EAST_ASIA = new Region("South East Asia", ASIA);
|
|
||||||
const SOUTH_CHINA = new Region("China - South", ASIA);
|
|
||||||
const NORTH_CHINA = new Region("China - North", ASIA);
|
|
||||||
const JAPAN = new Region("Japan", ASIA);
|
|
||||||
const ALASKAN_SOVIET = new Region("USSR - Alaskan", ASIA);
|
|
||||||
const EAST_NORTH_SOVIET = new Region("USSR - Far East/North", ASIA);
|
|
||||||
const EAST_SOUTH_SOVIET = new Region("USSR - Far East/South", ASIA);
|
|
||||||
const EASTERN_SOVIET = new Region("USSR - East", ASIA);
|
|
||||||
const CENTRAL_SOVIET = new Region("USSR - Central", ASIA);
|
|
||||||
const ISLAMIC_EMIRATE = new Region("Islamic Emirate States", ASIA);
|
|
||||||
|
|
||||||
const NORTH_AFRICA = new Region("Egypt", AFRICA);
|
|
||||||
const EAST_AFRICA = new Region("Somalia", AFRICA);
|
|
||||||
const SOUTH_AFRICA = new Region("Southern Africa", AFRICA);
|
|
||||||
const CENTRAL_AFRICA = new Region("Central Africa", AFRICA);
|
|
||||||
const WEST_AFRICA = new Region("Saharan Africa", AFRICA);
|
|
||||||
const MADAGASCAR = new Region("Madagascar", AFRICA);
|
|
||||||
|
|
||||||
const EAST_AUSTRALIA = new Region("Australia - Eastern", AUSTRALASIA);
|
|
||||||
const WEST_AUSTRALIA = new Region("Australia - Western", AUSTRALASIA);
|
|
||||||
const EAST_INDONESIA = new Region("East Indonesia", AUSTRALASIA);
|
|
||||||
const WEST_INDONESIA = new Region("West Indonesia", AUSTRALASIA);
|
|
||||||
|
|
||||||
const NORTH_SOUTH_AMERICA = new Region("Northern South America", SOUTH_AMERICA);
|
|
||||||
const EAST_SOUTH_AMERICA = new Region("Brazil", SOUTH_AMERICA);
|
|
||||||
const SOUTH_SOUTH_AMERICA = new Region("Argentina", SOUTH_AMERICA);
|
|
||||||
const WEST_SOUTH_AMERICA = new Region("Peru", SOUTH_AMERICA);
|
|
||||||
|
|
||||||
Region.setNeighbours(BRITISH_ISLES, ICELAND);
|
|
||||||
Region.setNeighbours(BRITISH_ISLES, SCANDINAVIA);
|
|
||||||
Region.setNeighbours(BRITISH_ISLES, GERMANIC);
|
|
||||||
Region.setNeighbours(BRITISH_ISLES, SPAIN);
|
|
||||||
|
|
||||||
Region.setNeighbours(SPAIN, BRITISH_ISLES);
|
|
||||||
Region.setNeighbours(SPAIN, GERMANIC);
|
|
||||||
Region.setNeighbours(SPAIN, MEDITERRANEAN);
|
|
||||||
Region.setNeighbours(SPAIN, WEST_AFRICA);
|
|
||||||
|
|
||||||
Region.setNeighbours(GERMANIC, SCANDINAVIA);
|
|
||||||
Region.setNeighbours(GERMANIC, WESTERN_SOVIET);
|
|
||||||
Region.setNeighbours(GERMANIC, MEDITERRANEAN);
|
|
||||||
Region.setNeighbours(GERMANIC, BRITISH_ISLES);
|
|
||||||
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, GERMANIC);
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, SPAIN);
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, NORTH_AFRICA);
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, WEST_AFRICA);
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, MIDDLE_EAST);
|
|
||||||
Region.setNeighbours(MEDITERRANEAN, WESTERN_SOVIET);
|
|
||||||
|
|
||||||
Region.setNeighbours(ICELAND, GREENLAND);
|
|
||||||
Region.setNeighbours(ICELAND, SCANDINAVIA);
|
|
||||||
Region.setNeighbours(ICELAND, BRITISH_ISLES);
|
|
||||||
|
|
||||||
Region.setNeighbours(SCANDINAVIA, WESTERN_SOVIET);
|
|
||||||
Region.setNeighbours(SCANDINAVIA, ICELAND);
|
|
||||||
Region.setNeighbours(SCANDINAVIA, GERMANIC);
|
|
||||||
Region.setNeighbours(SCANDINAVIA, BRITISH_ISLES);
|
|
||||||
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, CENTRAL_SOVIET);
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, ISLAMIC_EMIRATE);
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, MIDDLE_EAST);
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, MEDITERRANEAN);
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, GERMANIC);
|
|
||||||
Region.setNeighbours(WESTERN_SOVIET, SCANDINAVIA);
|
|
||||||
|
|||||||
@ -13,11 +13,22 @@ class Player {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.timeout = window.setTimeout(() => {
|
this.timeout = window.setTimeout(() => {
|
||||||
|
if (players[this.id] !== undefined) {
|
||||||
delete players[this.id];
|
delete players[this.id];
|
||||||
|
}
|
||||||
updatePlayerDom();
|
updatePlayerDom();
|
||||||
}, TIMEOUT);
|
}, TIMEOUT);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allow the user to claim regions whilst in the pre-game phase.
|
||||||
|
*/
|
||||||
|
claimRegions() {
|
||||||
|
unlockMapDom();
|
||||||
|
|
||||||
|
lockMapDom();
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Claim a region of the map.
|
* Claim a region of the map.
|
||||||
*
|
*
|
||||||
@ -50,6 +61,7 @@ class Player {
|
|||||||
*/
|
*/
|
||||||
endTurn() {
|
endTurn() {
|
||||||
this.isPlaying = false;
|
this.isPlaying = false;
|
||||||
|
this.nextPlayer().startTurn();
|
||||||
}
|
}
|
||||||
|
|
||||||
nextPlayer() {
|
nextPlayer() {
|
||||||
|
|||||||
@ -1,3 +0,0 @@
|
|||||||
Array.prototype.min = function () {
|
|
||||||
return this.reduce((min, val) => (min < val ? min : val));
|
|
||||||
};
|
|
||||||
@ -7,7 +7,6 @@
|
|||||||
|
|
||||||
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
|
||||||
<script src="{{ url_for('static', filename='js/shim.js') }}"></script>
|
|
||||||
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/player.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/player.js') }}"></script>
|
||||||
<script src="{{ url_for('static', filename='js/dom.js') }}"></script>
|
<script src="{{ url_for('static', filename='js/dom.js') }}"></script>
|
||||||
@ -23,6 +22,65 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="map">
|
||||||
|
<svg id="map-back" viewBox="-520 -520 1000 1000" width="1000" height="1000">
|
||||||
|
<line x1="0" y1="0" x2="160" y2="0" stroke="black"></line>
|
||||||
|
<line x1="160" y1="0" x2="260" y2="0" stroke="black"></line>
|
||||||
|
<line x1="160" y1="0" x2="220" y2="-200" stroke="black"></line>
|
||||||
|
<line x1="280" y1="0" x2="220" y2="-200" stroke="black"></line>
|
||||||
|
<line x1="220" y1="-200" x2="380" y2="-200" stroke="black"></line>
|
||||||
|
<line x1="220" y1="-200" x2="-40" y2="-140" stroke="black"></line>
|
||||||
|
<line x1="0" y1="0" x2="-40" y2="-140" stroke="black"></line>
|
||||||
|
<line x1="0" y1="0" x2="-40" y2="140" stroke="black"></line>
|
||||||
|
<line x1="-280" y1="80" x2="-40" y2="140" stroke="black"></line>
|
||||||
|
<line x1="-280" y1="-80" x2="-40" y2="-140" stroke="black"></line>
|
||||||
|
<line x1="-280" y1="80" x2="-180" y2="0" stroke="black"></line>
|
||||||
|
<line x1="-280" y1="-80" x2="-180" y2="0" stroke="black"></line>
|
||||||
|
<line x1="-180" y1="0" x2="-40" y2="140" stroke="black"></line>
|
||||||
|
<path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path>
|
||||||
|
</svg>
|
||||||
|
<div class="node" data-name="A" style="left: 280px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">A</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="B" style="left: 160px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">B</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="C" style="left: 220px; top: -200px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">C</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="D" style="left: 380px; top: -200px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">D</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="E" style="left: -40px; top: 140px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">E</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="F" style="left: -40px; top: -140px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">F</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="G" style="left: -280px; top: -80px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">G</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="H" style="left: -280px; top: 80px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">H</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="I" style="left: -180px;">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">I</div>
|
||||||
|
</div>
|
||||||
|
<div class="node" data-name="J" style="">
|
||||||
|
<div class="strength"><strong>U</strong></div>
|
||||||
|
<div class="label">J</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="ready">
|
<div id="ready">
|
||||||
<button id="ready-button">Not ready</button>
|
<button id="ready-button">Not ready</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user