-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
245 lines (206 loc) · 8.5 KB
/
script.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
// Arreglo para almacenar los personajes
let characters = [];
// Referencias a elementos del DOM
const form = document.getElementById("character-form");
const characterList = document.getElementById("characters");
const characterSection = document.getElementById("character-list")
const characterDetails = document.getElementById("character-details"); // Cambiado el ID aquí
const modal = document.getElementById("myModal");
const modalMessage = document.getElementById("modal-message");
const deleteAllButton = document.getElementById("delete-all-button");
const nameInput = document.getElementById("name");
initializeCharacters();
function initializeCharacters() {
const storedCharacters = localStorage.getItem("characters");
if (storedCharacters) {
characters = JSON.parse(storedCharacters);
} else {
characters = [];
}
displayCharacters();
}
// Función para crear un nuevo personaje
function createCharacter(name, chapter, weapon) {
hideAlert();
const storedCharacters = localStorage.getItem('characters')
if (storedCharacters) {
characters = JSON.parse(storedCharacters)
} else {
characters = []
}
// Agregar el nuevo personaje si el nombre no está repetido
characters.push({ name, chapter, weapon });
localStorage.setItem('characters', JSON.stringify(characters))
displayCharacters();
nameInput.value = "";
}
// Función para mostrar la lista de personajes
function displayCharacters() {
const storedCharacters = localStorage.getItem("characters");
if (storedCharacters) {
characters = JSON.parse(storedCharacters);
} else {
characters = [];
}
if (characters.length !== 0) {
showListSection();
} else {
hideListSection();
return;
}
characterList.innerHTML = "";
characters.forEach((character, index) => {
const li = document.createElement("li");
li.innerHTML = `
<img id="imperium_logo" src="images/imperium_logo.png" alt="Imperium Logo">
<span>${character.name}</span>
`
li.addEventListener("click", () => showDetails(index));
characterList.appendChild(li);
});
const sectionList = document.getElementById(`character-list`);
sectionList.scrollIntoView({ behavior: "smooth" });
}
// Función para mostrar los detalles de un personaje y activar la edición
function showDetails(index) {
const character = characters[index];
characterDetails.innerHTML = `
<div class="details-container" id="character-details-${index}">
<h2>Adeptus Details</h2>
<h3>${character.name}</h3>
<p>Chapter: ${character.chapter}</p>
<p>Weapon: ${character.weapon}</p>
<button id="edit-button">Editar</button>
<button id="delete-button">Eliminar!</button>
</div>
`;
// Agregar manejador para el botón de edición
const editButton = document.getElementById("edit-button");
editButton.addEventListener("click", () => editCharacter(index));
const deleteButton = document.getElementById("delete-button");
deleteButton.addEventListener("click", () => deleteCharacter(index));
characterDetails.style.display = "block";
// Hacer scroll hacia abajo para mostrar los detalles del personaje
const detailsContainer = document.getElementById(`character-details-${index}`);
detailsContainer.scrollIntoView({ behavior: "smooth" });
}
// Función para editar los detalles de un personaje
function editCharacter(index) {
const character = characters[index];
characterDetails.innerHTML = `
<div class="edit-container">
<h2>Edit ${character.name}</h2>
<label for="new-name">Name:</label>
<input type="text" id="new-name" value="${character.name}" required>
<label for="new-chapter">Chapter:</label>
<select id="new-chapter">
<option ${character.chapter === "Space Marine" ? "selected" : ""}>Space Marine</option>
<option ${character.chapter === "Adeptus Mechanicus" ? "selected" : ""}>Adeptus Mechanicus</option>
<option ${character.chapter === "Adeptus Titanicus" ? "selected" : ""}>Adeptus Titanicus</option>
<option ${character.chapter === "Adeptus Custodes" ? "selected" : ""}>Adeptus Custodes</option>
</select>
<label for="new-weapon">Weapon:</label>
<select id="new-weapon">
<option ${character.weapon === "Bolter" ? "selected" : ""}>Bolter</option>
<option ${character.weapon === "Power Sword" ? "selected" : ""}>Power Sword</option>
<option ${character.weapon === "Missile Launcher" ? "selected" : ""}>Missile Launcher</option>
<option ${character.weapon === "Flamer" ? "selected" : ""}>Flamer</option>
</select>
<button id="update-button">Actualizar</button>
</div>
`;
// Agregar manejador para el botón de actualización
const updateButton = document.getElementById("update-button");
updateButton.addEventListener("click", () => updateCharacter(index));
}
function deleteCharacter(index) {
characters.splice(index, 1);
// Actualizar los datos en el almacenamiento local
localStorage.setItem("characters", JSON.stringify(characters));
displayCharacters();
characterDetails.style.display = "none";
hideAlert();
}
// Función para actualizar los detalles de un personaje
function updateCharacter(index) {
const character = characters[index];
const originalName = character.name;
const newNameInput = document.getElementById("new-name");
const newChapter = document.getElementById("new-chapter").value;
const newWeapon = document.getElementById("new-weapon").value;
if (newNameInput.value === "") {
showAlert("You heartless heretic!!! Enter a name!!!");
newNameInput.value = originalName;
return;
}
// Verificar si el nuevo nombre ya está en la lista
const nameExists = characters.some((char, i) => i !== index && char.name === newNameInput.value);
if (nameExists) {
showAlert("Don't steal your brother's soul! Try a different name.");
newNameInput.value = originalName;
return;
}
character.name = newNameInput.value;
character.chapter = newChapter;
character.weapon = newWeapon;
// Actualizar los datos en el almacenamiento local
characters[index] = character;
localStorage.setItem("characters", JSON.stringify(characters));
displayCharacters();
showDetails(index);
}
function deleteAllCharacters() {
characters = []; // Vaciar el arreglo de personajes
localStorage.removeItem('characters');
displayCharacters(); // Actualizar la visualización de personajes
characterDetails.style.display = "none"; // Ocultar los detalles del personaje
hideAlert();
showAlert("The planet's fate was sealed in fire and brimstone");
}
// Función para mostrar mensajes de alerta
function showAlert(message) {
modalMessage.textContent = message;
modal.style.display = "block";
// Agregar evento para cerrar el modal al hacer clic en la "x"
const closeButton = document.getElementsByClassName("close")[0];
closeButton.addEventListener("click", () => {
hideAlert();
});
setTimeout(() => {
hideAlert();
}, 5000);
}
// Función para ocultar mensajes de alerta
function hideAlert() {
modal.style.display = "none";
}
function showListSection(){
characterSection.classList.remove("hidden");
}
function hideListSection(){
characterSection.classList.add("hidden");
}
// Manejador de envío de formulario
form.addEventListener("submit", function (event) {
event.preventDefault();
const name = document.getElementById("name").value;
const chapter = document.getElementById("chapter").value;
const weapon = document.getElementById("weapon").value;
if(name === ""){
showAlert("SUCH HERECY!!! Enter a real name");
return;
}
const existingCharacter = characters.find(character => character.name === name);
if (existingCharacter) {
showAlert("Cloning is forbidden science! Try a different brother's name.");
return; // Detener la creación del personaje
}
createCharacter(name, chapter, weapon);
form.reset();
});
nameInput.addEventListener("input", hideAlert);
deleteAllButton.addEventListener("click", deleteAllCharacters);
// Inicialización: Puedes agregar personajes de ejemplo aquí
//createCharacter("Titus", "Space Marine", "Power Sword");
// Ocultar la sección character details al cargar la página
characterDetails.style.display = "none";