completed rev2

pages/js/rev2.js

@@ -1,4 +1,47 @@
 export function update_rev2(data) {
-  let time_remaining = document.getElementById('rev2_time_remaining');
-  console.log(data);
+  // Обновление оставшегося времени
+  const time_remaining_element = document.getElementById('rev2_time_remaining');
+
+  const time_remaining_counter = document.createTextNode(data.time_remaining);
+  const time_remaining_text = document.createElement('span');
+  time_remaining_text.classList.add('fw-bold');
+  time_remaining_text.innerText = 'Времени осталось: ';
+
+  [time_remaining_text, time_remaining_counter].forEach((element) => {
+    time_remaining_element.appendChild(element);
+  });
+
+  time_remaining_element.removeAttribute('class');
+
+  // Обновление HP
+  const content_element = document.getElementById('rev2_emenies');
+  data.enemies.forEach((emeny) => {
+    enemy_data = emeny.split(' ');
+
+    // Элемент с именем монстра
+    const enemy_name = document.createElement('p');
+    enemy_name.innerText = enemy_data[0];
+
+    ['my-1', 'fw-bold', 'd-flex', 'justify-content-between'].forEach((style_class) => {
+      enemy_name.classList.add(style_class);
+    });
+
+    // Элемент с полосой здоровья босса
+    const progressbar_element = document.createElement('div');
+    ['progress-bar', 'bg-danger'].forEach((style_class) => {
+      progressbar_element.classList.add(style_class);
+    });
+    progressbar_element.style.width = enemy_data[1];
+    progressbar_element.innerText = enemy_data[1];
+
+    const progress_element = document.createElement('div');
+    progress_element.classList.add('progress');
+    time_remaining_element.setAttribute('aria-valuemin', 0);
+    time_remaining_element.setAttribute('aria-valuemax', 100);
+    time_remaining_element.setAttribute('aria-valuenow', enemy_data[1].replace('%', ''));
+    progress_element.appendChild(progressbar_element);
+
+    content_element.appendChild(enemy_name);
+    content_element.appendChild(progress_element);
+  });
 }

pages/rer2.html

@@ -55,34 +55,10 @@
 			</svg>
 		</h5>
 
-		<div id="rev2_emenies">
-			<p class="my-1 fw-bold d-flex justify-content-between">
-				<span>Aello</span>
-				<span class="text-danger">[? / ?]</span>
-			</p>
-			<div
-				class="progress"
-				role="progressbar"
-				aria-valuenow="21"
-				aria-valuemin="0"
-				aria-valuemax="100">
-				<div class="progress-bar bg-danger" style="width: 21%">21%</div>
-			</div>
-			<p class="my-1 fw-bold d-flex justify-content-between">
-				<span>Ocypete</span>
-				<span class="text-danger">[? / ?]</span>
-			</p>
-			<div
-				class="progress"
-				role="progressbar"
-				aria-valuenow="91"
-				aria-valuemin="0"
-				aria-valuemax="100">
-				<div class="progress-bar bg-danger" style="width: 91%">91%</div>
-			</div>
-		</div>
+		<div id="rev2_emenies"></div>
 	</div>
 	<div class="card-footer text-body-secondary">
+		Данные обновляются каждый час |
 		<a
 			class="text-reset"
 			href="https://game.capcom.com/residentevil/en/onlineevent-4_1108.html#windows"