112 lines
3.6 KiB
JavaScript
112 lines
3.6 KiB
JavaScript
|
const webSocket = new WebSocket('ws://51.15.125.82:5000')
|
|||
|
|
|
|||
|
|
|
|||
|
|
const waitForOpenConnection = () => {
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const maxNumberOfAttempts = 10
|
|||
|
|
const intervalTime = 200 //ms
|
|||
|
|
|
|||
|
|
let currentAttempt = 0
|
|||
|
|
const interval = setInterval(() => {
|
|||
|
|
if (currentAttempt > maxNumberOfAttempts - 1) {
|
|||
|
|
clearInterval(interval)
|
|||
|
|
reject(new Error('Maximum number of attempts exceeded'))
|
|||
|
|
} else if (webSocket.readyState === webSocket.OPEN) {
|
|||
|
|
clearInterval(interval)
|
|||
|
|
resolve()
|
|||
|
|
}
|
|||
|
|
currentAttempt++
|
|||
|
|
}, intervalTime)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function send(msg, data) {
|
|||
|
|
await waitForOpenConnection();
|
|||
|
|
webSocket.send(JSON.stringify({msg, data}))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let pokedex = {}
|
|||
|
|
webSocket.onmessage = evt => {
|
|||
|
|
const {msg, data} = JSON.parse(evt.data);
|
|||
|
|
switch (msg) {
|
|||
|
|
case 'pokedexUpdated': pokedex = data; showPokedex(); break;
|
|||
|
|
case 'pokedexInitialized': pokedex = data; initGUI(); break;
|
|||
|
|
case 'pokedexCompleted': window.alert(data.msg); break;
|
|||
|
|
case 'error': window.alert(data.msg); break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fillInPokémons(pkdx) {
|
|||
|
|
window.setTimeout(() => {
|
|||
|
|
send('updatePokedex', {pokemon: pkdx[0], values: {captured: true}})
|
|||
|
|
fillInPokémons(pkdx.slice(1))
|
|||
|
|
}, 200)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function initializePokedex() {
|
|||
|
|
send('initializePokedex')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
initializePokedex()
|
|||
|
|
|
|||
|
|
function initGUI() {
|
|||
|
|
const selection = document.getElementById("pokeselect");
|
|||
|
|
const options = Object.entries(pokedex).map(([pokemon, properties]) => {
|
|||
|
|
const option = document.createElement("option")
|
|||
|
|
option.setAttribute("value", pokemon)
|
|||
|
|
option.append(pokemon)
|
|||
|
|
return option
|
|||
|
|
})
|
|||
|
|
selection.append(...options);
|
|||
|
|
showPokedex();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function catchPokemon() {
|
|||
|
|
const selection = document.getElementById("pokeselect").value;
|
|||
|
|
send('updatePokedex', {pokemon: selection, values: {captured: true}})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function showPokedex() {
|
|||
|
|
const container = document.getElementById("capturedPokemon");
|
|||
|
|
container.textContent = '';
|
|||
|
|
const pokedexTable = Object.entries(pokedex)
|
|||
|
|
.reduce((acc, val) =>
|
|||
|
|
(acc[acc.length - 1].length === 5)
|
|||
|
|
? [...acc, [val]]
|
|||
|
|
: [...acc.slice(0, acc.length - 1), [...acc[acc.length - 1], val]],
|
|||
|
|
[[]]
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const pokedexGUI = pokedexTable.map((pokeRow, colNum) => {
|
|||
|
|
const ths = pokeRow.map(([pokemon, properties], rowNum) => {
|
|||
|
|
const th = document.createElement("th");
|
|||
|
|
th.setAttribute("class", "pokecell")
|
|||
|
|
if(properties.captured) {
|
|||
|
|
const img = document.createElement("img");
|
|||
|
|
const htmlFriendlyPokeName = pokemon
|
|||
|
|
.toLowerCase()
|
|||
|
|
.replace("♀", "-f")
|
|||
|
|
.replace("♂", "-m")
|
|||
|
|
.replace("’", "")
|
|||
|
|
.replace(". ", "-")
|
|||
|
|
img.setAttribute("src", `https://img.pokemondb.net/artwork/${htmlFriendlyPokeName}.jpg`);
|
|||
|
|
img.setAttribute("height", "100");
|
|||
|
|
img.setAttribute("width", "100");
|
|||
|
|
const name = document.createElement("h2")
|
|||
|
|
name.innerText = pokemon
|
|||
|
|
th.append(img, name)
|
|||
|
|
} else {
|
|||
|
|
const name = document.createElement("h1")
|
|||
|
|
name.innerText = `${colNum * 5 + rowNum + 1}`
|
|||
|
|
th.append(name)
|
|||
|
|
}
|
|||
|
|
return th
|
|||
|
|
})
|
|||
|
|
const tr = document.createElement("tr");
|
|||
|
|
tr.append(...ths)
|
|||
|
|
return tr
|
|||
|
|
})
|
|||
|
|
container.append(...pokedexGUI)
|
|||
|
|
}
|