simple v1 version

src/index.js

@@ -0,0 +1,118 @@
+function updateTimes() {
+  const travelTime = 1;  // in hours
+
+  const now = new Date();
+  const currentHours = now.getHours();
+  const currentMinutes = now.getMinutes();
+  const currentSeconds = now.getSeconds();
+
+  const currentTimeElement = document.getElementById('currentTime');
+  currentTimeElement.textContent = `${currentHours.toString().padStart(2, '0')}:${currentMinutes.toString().padStart(2, '0')}:${currentSeconds.toString().padStart(2, '0')}`;
+
+  const targetTimesElement = document.getElementById('targetTimes');
+  const leaveTimesElement = document.getElementById('leaveTimes');
+  const timeDifferencesElement = document.getElementById('timeDifferences');
+
+  targetTimesElement.innerHTML = '';
+  leaveTimesElement.innerHTML = '';
+  timeDifferencesElement.innerHTML = '';
+
+  const ttBlock = document.createElement('span');
+  ttBlock.className = 'time-block label-block';
+  ttBlock.textContent = 'TT';
+  targetTimesElement.appendChild(ttBlock);
+
+  const ltBlock = document.createElement('span');
+  ltBlock.className = 'time-block label-block';
+  ltBlock.textContent = 'LT';
+  leaveTimesElement.appendChild(ltBlock);
+
+  const tdBlock = document.createElement('span');
+  tdBlock.className = 'time-block label-block';
+  tdBlock.textContent = 'TD';
+  timeDifferencesElement.appendChild(tdBlock);
+
+  const targetTimeBlocks = [];
+  const leaveTimeBlocks = [];
+  const diffTimeBlocks = [];
+
+  for (let hour = 13; hour <= 22; hour++) {
+    let leaveHour = hour - travelTime;
+
+    const timeBlock = document.createElement('span');
+    timeBlock.className = 'time-block';
+    timeBlock.textContent = `${hour.toString().padStart(2, '0')}:00`;
+    targetTimeBlocks.push(timeBlock);
+
+    const leaveTimeBlock = document.createElement('span');
+    leaveTimeBlock.className = 'time-block';
+    leaveTimeBlock.textContent = `${(leaveHour).toString().padStart(2, '0')}:00`;
+    leaveTimeBlocks.push(leaveTimeBlock);
+
+    const targetTime = new Date();
+    targetTime.setHours(leaveHour, 0, 0, 0);
+
+    const diffBlock = document.createElement('span');
+    diffBlock.className = 'time-block';
+
+    const diffMs = targetTime - now;
+    if (diffMs < 0) {
+      const diffHours = -1 * Math.ceil(diffMs / (1000 * 60 * 60));
+      const diffMinutes = -1 * Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+      diffBlock.textContent = `-${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
+    } else {
+      const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+      const diffMinutes = Math.ceil((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+      diffBlock.textContent = `${diffHours.toString().padStart(2, '0')}:${diffMinutes.toString().padStart(2, '0')}`;
+    }
+
+    diffTimeBlocks.push(diffBlock);
+  }
+
+  distributeBlocks(targetTimesElement, targetTimeBlocks);
+  distributeBlocks(leaveTimesElement, leaveTimeBlocks);
+  distributeBlocks(timeDifferencesElement, diffTimeBlocks);
+}
+
+
+function distributeBlocks(container, blocks) {
+  const screenWidth = window.innerWidth;
+  const blockWidth = 120;
+  const labelWidth = 40;
+
+  const availableWidth = screenWidth - labelWidth;
+  const blocksPerRow = Math.floor(availableWidth / blockWidth);
+
+  if (blocksPerRow > blocks.length) {
+    blocks.forEach(block => container.appendChild(block));
+    return;
+  }
+
+  const totalBlocks = blocks.length;
+  const halfBlocks = Math.ceil(totalBlocks / 2);
+
+  const rowsContainer = document.createElement('div');
+  rowsContainer.className = 'multi-rows-container';
+
+  const topRow = document.createElement('div');
+  topRow.className = 'time-row';
+  for (let i = 0; i < halfBlocks; i++) {
+    topRow.appendChild(blocks[i]);
+  }
+  rowsContainer.appendChild(topRow);
+
+  const bottomRow = document.createElement('div');
+  bottomRow.className = 'time-row';
+  for (let i = halfBlocks; i < totalBlocks; i++) {
+    bottomRow.appendChild(blocks[i]);
+  }
+  rowsContainer.appendChild(bottomRow);
+
+  const label = container.firstChild;
+  container.appendChild(rowsContainer);
+}
+
+
+updateTimes();
+setInterval(updateTimes, 200);
+window.addEventListener('resize', updateTimes);