-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.js
115 lines (100 loc) · 3.24 KB
/
popup.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
//
let getPoke = {};
getPoke[1] = 1;
getPoke[2] = 1;
getPoke[3] = 1;
getPoke[4] = 1;
getPoke[5] = 1;
getPoke[6] = 1;
getPoke[7] = 1;
getPoke[8] = 1;
getPoke[9] = 1;
async function loadPokeData(){
// const loadData = JSON.parse(sessionStorage.getItem('myPokeData'));
// if (loadData) {
// getPoke = loadData;
// }
//
// chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
// if (message.action === "sendPokeData") {
// const receivedData = message.data;
// if (receivedData) {
// getPoke = receivedData;
// }
// }
// });
}
const apiUrl = 'https://pokeapi.co/api/v2/';
// 引数の番号のポケモンのデータを取得
async function fetchPoke(pokeId){
// console.log(pokeId);
const url = `${apiUrl}pokemon/${pokeId}`;
// console.log(url);
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('ネットワークエラーまたはリクエストに問題があります');
}
return response.json();
} catch (error) {
console.log('データを取得できませんでした', error);
throw error;
}
}
// 引数の番号のポケモンの名前を取得
async function fetchPokeName(pokeId){
const url = `${apiUrl}pokemon-species/${pokeId}`;
// console.log(url, 'URL');
try {
const response = await fetch(url, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error('ネットワークエラーまたはリクエストに問題があります');
}
const data = await response.json();
// console.log(data);
return data.names.find(nameData => nameData.language.name === 'ja').name;
} catch (error) {
console.log('データを取得できませんでした', error);
throw error;
}
}
async function pokeHTML(pokeId){
const spriteValue = "front_default";
try {
const data = await fetchPoke(pokeId);
const pokeName = await fetchPokeName(pokeId);
if (data) {
return `
<p id="pokeName">${pokeId}. ${pokeName} x${getPoke[pokeId]}</p>
<img id="pokeImg" src="${data.sprites[spriteValue]}" alt="Sprite">
`;
}
} catch (error) {
console.log('データの表示中にエラーが発生しました', error);
return '';
}
}
// 選択されているポケモンを表示
async function displayPoke() {
await loadPokeData();
const pokeDexElement = document.getElementById("pokeDex_pop");
pokeDexElement.innerHTML = '';
const getPokeNums = Object.keys(getPoke).filter(key => getPoke[key] >= 1).map(Number);
for (const pokeId of getPokeNums) {
const newDiv = document.createElement('div');
newDiv.innerHTML = await pokeHTML(pokeId);
pokeDexElement.appendChild(newDiv);
}
}
document.querySelector('#reloadButton').addEventListener('click', () => displayPoke());
displayPoke();