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)
|
||
}
|