jude/Riskless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a far more basic map

Browse Source
This commit is contained in:
jude
2023-02-06 12:30:24 +00:00
parent 3062653d95
commit 79c4ce20d1
7 changed files with 133 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
static/css/style.css
View File

@@ -37,3 +37,39 @@
.not-ready {
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;
}

4
static/js/dom.js
View File

@@ -1,3 +1,7 @@
function unlockMapDom() {}
function lockMapDom() {}
function updatePlayerDom() {
let list = document.querySelector("#playerList");
list.replaceChildren();

11
static/js/index.js
View File

@@ -11,6 +11,8 @@ const PRE_GAME = 1;
const PLAYING = 2;
const POST_GAME = 3;
const COLORS = ["#FF0000", "#00FF00", "#0000FF", "#FF00FF", "#FFFF00", "#00FFFF"];
let gameState = WAITING;
let socket;
@@ -69,6 +71,12 @@ document.addEventListener("DOMContentLoaded", () => {
case "CLAIM":
// Claim a region in the pregame.
await currentPlayer().claim(data);
// Increment to next player.
currentPlayer().endTurn();
if (currentPlayer() === us) {
currentPlayer().claimRegions();
}
break;
}
});
@@ -155,8 +163,7 @@ async function startPregame() {
firstPlayer.isPlaying = true;
await barrier.wait();
updatePlayerDom();
// Players select starting regions.
updatePlayerDom();
}

102
static/js/map.js
View File

@@ -46,95 +46,17 @@ class Region {
}
}
const EUROPE = new Continent("Europe");
const ASIA = new Continent("Asia");
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 EAST = new Continent("East");
const WEST = new Continent("West");
const BRITISH_ISLES = new Region("British Isles", EUROPE);
const SPAIN = new Region("Spain", EUROPE);
const MEDITERRANEAN = new Region("Mediterranean", EUROPE);
const GERMANIC = new Region("Germanic States", EUROPE);
const WESTERN_SOVIET = new Region("USSR - West", EUROPE);
const SCANDINAVIA = new Region("Scandinavia", EUROPE);
const ICELAND = new Region("Iceland", EUROPE);
const A = new Region("A", EAST);
const B = new Region("B", EAST);
const C = new Region("C", EAST);
const D = new Region("D", EAST);
const E = new Region("E", EAST);
const GREENLAND = new Region("Greenland", NORTH_AMERICA);
const NEWFOUNDLAND = new Region("Newfoundland", NORTH_AMERICA);
const EAST_COAST = new Region("USA - East Coast", NORTH_AMERICA);
const CENTRAL_AMERICA = new Region("Mexico", NORTH_AMERICA);
const WEST_COAST = new Region("USA - West Coast", NORTH_AMERICA);
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);
const F = new Region("F", WEST);
const G = new Region("G", WEST);
const H = new Region("H", WEST);
const I = new Region("I", WEST);
const J = new Region("J", WEST);

14
static/js/player.js
View File

@@ -13,11 +13,22 @@ class Player {
}
this.timeout = window.setTimeout(() => {
delete players[this.id];
if (players[this.id] !== undefined) {
delete players[this.id];
}
updatePlayerDom();
}, TIMEOUT);
}
/**
* Allow the user to claim regions whilst in the pre-game phase.
*/
claimRegions() {
unlockMapDom();
lockMapDom();
}
/**
* Claim a region of the map.
*
@@ -50,6 +61,7 @@ class Player {
*/
endTurn() {
this.isPlaying = false;
this.nextPlayer().startTurn();
}
nextPlayer() {

3
static/js/shim.js
View File

@@ -1,3 +0,0 @@
Array.prototype.min = function () {
return this.reduce((min, val) => (min < val ? min : val));
};

60
templates/index.html
View File

@@ -7,7 +7,6 @@
<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="{{ 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/player.js') }}"></script>
<script src="{{ url_for('static', filename='js/dom.js') }}"></script>
@@ -23,6 +22,65 @@
</ul>
</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">
<button id="ready-button">Not ready</button>
</div>