Create script.js

script.js

@@ -0,0 +1,359 @@
+// Assembly Steps Data
+const YOUTUBE_VIDEO_ID = "_r0cHySFbeY";
+
+const stepsData = [
+    { timestamp: "00:00:00", title: "Apply the foot pads." },
+    { timestamp: "00:01:14", title: "Install the USB extension cable." },
+    { timestamp: "00:02:55", title: "Mount the body PCB." },
+    { timestamp: "00:04:30", title: "Connect the cables to the body PCB." },
+    { timestamp: "00:05:05", title: "Insert the ball bearing." },
+    { timestamp: "00:05:44", title: "Fit the body down assembly to the foot assembly." },
+    { timestamp: "00:06:14", title: "Mount the base foot motor to the body turning unit." },
+    { timestamp: "00:07:14", title: "Position the body turning assembly on the body down assembly." },
+    { timestamp: "00:08:25", title: "Secure the body turning assembly to the body down assembly." },
+    { timestamp: "00:10:15", title: "Screw the Stewart main plate in place." },
+    { timestamp: "00:13:10", title: "Connect the base foot motor." },
+    { timestamp: "00:14:13", title: "Screw the link rods onto the motor arms." },
+    { timestamp: "00:18:05", title: "Connect Motors 1 and 2." },
+    { timestamp: "00:18:44", title: "Connect Motors 2 and 3." },
+    { timestamp: "00:19:31", title: "Connect Motors 4 and 5." },
+    { timestamp: "00:20:19", title: "Connect Motors 5 and 6." },
+    { timestamp: "00:20:53", title: "Insert all motors into the Stewart main plate." },
+    { timestamp: "00:22:55", title: "Clip the motor cables into the body down assembly." },
+    { timestamp: "00:24:46", title: "Screw the speaker into the tricap." },
+    { timestamp: "00:25:39", title: "Position the tricap." },
+    { timestamp: "00:27:01", title: "Connect Motors 3 and 4." },
+    { timestamp: "00:27:44", title: "Route the cables." },
+    { timestamp: "00:28:04", title: "Secure the tricap with screws." },
+    { timestamp: "00:30:47", title: "Screw the bottom head onto the link rods." },
+    { timestamp: "00:35:17", title: "Route the cables through the bottom head." },
+    { timestamp: "00:35:49", title: "Route the cables through the head PCB." },
+    { timestamp: "00:36:10", title: "Screw the head PCB in place." },
+    { timestamp: "00:37:38", title: "Position the top shell." },
+    { timestamp: "00:38:42", title: "Screw the top shell in place." },
+    { timestamp: "00:41:08", title: "Place the lenses in the glasses holder." },
+    { timestamp: "00:41:38", title: "Insert the fisheye lenses into the caps." },
+    { timestamp: "00:42:14", title: "Snap the fisheye lenses into the glasses holder." },
+    { timestamp: "00:43:07", title: "Position the Arducam camera." },
+    { timestamp: "00:43:35", title: "Screw the Arducam camera in place." },
+    { timestamp: "00:44:08", title: "Screw the glasses assembly onto the front head shell." },
+    { timestamp: "00:45:51", title: "Plug in USB-C." },
+    { timestamp: "00:46:06", title: "Attach the cases to the antenna motors." },
+    { timestamp: "00:46:46", title: "Mount the motor assembly to the back head shell." },
+    { timestamp: "00:50:11", title: "Connect the antenna motors." },
+    { timestamp: "00:51:13", title: "Slide the back-head assembly onto the Reachy Mini body." },
+    { timestamp: "00:51:45", title: "Screw the back head in place." },
+    { timestamp: "00:53:35", title: "Attach the cable holder." },
+    { timestamp: "00:54:29", title: "Connect the speaker and motor cables." },
+    { timestamp: "00:55:22", title: "Connect the power and USB extension cables." },
+    { timestamp: "00:55:48", title: "Connect the flexible printed cable to the top head PCB." },
+    { timestamp: "00:56:23", title: "Slide the top-head assembly onto the back head." },
+    { timestamp: "00:56:31", title: "Connect the flexible printed cable to the head PCB." },
+    { timestamp: "00:57:18", title: "Plug the USB-C cable into the head PCB." },
+    { timestamp: "00:58:09", title: "Attach the front head." },
+    { timestamp: "00:59:20", title: "Assemble the antennas." },
+    { timestamp: "01:00:00", title: "Attach the antennas to the head." }
+];
+
+// Parse timestamp to seconds
+function parseTimestamp(ts) {
+    const parts = ts.split(':').map(Number);
+    return parts[0] * 3600 + parts[1] * 60 + parts[2];
+}
+
+// Create assembly steps with parsed timestamps
+const assemblySteps = stepsData.map((step, index) => ({
+    id: index + 1,
+    title: step.title,
+    timestamp: step.timestamp,
+    timestampSeconds: parseTimestamp(step.timestamp)
+}));
+
+const TOTAL_STEPS = assemblySteps.length;
+
+// Available step images
+const availableImages = {
+    1: "assets/step1.jpg",
+    2: "assets/step2.jpg"
+};
+
+function getStepImage(stepId) {
+    return availableImages[stepId] || null;
+}
+
+// App State
+let currentStep = 1;
+let isFullscreen = false;
+let scale = 1;
+let position = { x: 0, y: 0 };
+let isDragging = false;
+let dragStart = { x: 0, y: 0 };
+
+// DOM Elements
+const stepCounterText = document.getElementById('step-counter-text');
+const stepImage = document.getElementById('step-image');
+const placeholder = document.getElementById('placeholder');
+const placeholderNumber = document.getElementById('placeholder-number');
+const imageWrapper = document.getElementById('image-wrapper');
+const youtubeIframeDesktop = document.getElementById('youtube-iframe-desktop');
+const youtubeIframeMobile = document.getElementById('youtube-iframe-mobile');
+const prevBtn = document.getElementById('prev-btn');
+const nextBtn = document.getElementById('next-btn');
+const stepIndicators = document.getElementById('step-indicators');
+const progressBar = document.getElementById('progress-bar');
+const fullscreenBtn = document.getElementById('fullscreen-btn');
+const fullscreenModal = document.getElementById('fullscreen-modal');
+const closeFullscreenBtn = document.getElementById('close-fullscreen-btn');
+const fullscreenStepTitle = document.getElementById('fullscreen-step-title');
+const fullscreenImage = document.getElementById('fullscreen-image');
+const fullscreenPlaceholder = document.getElementById('fullscreen-placeholder');
+const fullscreenPlaceholderNumber = document.getElementById('fullscreen-placeholder-number');
+const fullscreenImageContainer = document.getElementById('fullscreen-image-container');
+const fullscreenYoutubeIframeDesktop = document.getElementById('fullscreen-youtube-iframe-desktop');
+const fullscreenYoutubeIframeMobile = document.getElementById('fullscreen-youtube-iframe-mobile');
+const fullscreenPrevBtn = document.getElementById('fullscreen-prev-btn');
+const fullscreenNextBtn = document.getElementById('fullscreen-next-btn');
+const fullscreenStepIndicators = document.getElementById('fullscreen-step-indicators');
+const fullscreenProgressBar = document.getElementById('fullscreen-progress-bar');
+const zoomInBtn = document.getElementById('zoom-in-btn');
+const zoomOutBtn = document.getElementById('zoom-out-btn');
+const zoomLevel = document.getElementById('zoom-level');
+
+// Update YouTube embed
+function updateYouTubeEmbed(timestampSeconds) {
+    const embedUrl = `https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?start=${timestampSeconds}&rel=0&autoplay=1&mute=1`;
+    youtubeIframeDesktop.src = embedUrl;
+    youtubeIframeMobile.src = embedUrl;
+    fullscreenYoutubeIframeDesktop.src = embedUrl;
+    fullscreenYoutubeIframeMobile.src = embedUrl;
+}
+
+// Render step indicators
+function renderStepIndicators(containerId, currentStep, onClick) {
+    const container = document.getElementById(containerId);
+    container.innerHTML = '';
+    
+    const groupStart = Math.floor((currentStep - 1) / 10) * 10 + 1;
+    
+    for (let i = 0; i < 10; i++) {
+        const stepNum = groupStart + i;
+        if (stepNum > TOTAL_STEPS) break;
+        
+        const isActive = stepNum === currentStep;
+        const button = document.createElement('button');
+        button.className = `step-indicator ${isActive ? 'step-indicator-active' : 'step-indicator-inactive'}`;
+        button.setAttribute('aria-label', `Go to step ${stepNum}`);
+        button.addEventListener('click', () => onClick(stepNum));
+        container.appendChild(button);
+    }
+}
+
+// Update UI
+function updateUI() {
+    const step = assemblySteps[currentStep - 1];
+    const imageSrc = getStepImage(step.id);
+    
+    // Update step counter
+    stepCounterText.textContent = `Step ${step.id}/${TOTAL_STEPS}`;
+    
+    // Update image
+    if (imageSrc) {
+        stepImage.src = imageSrc;
+        stepImage.alt = `Assembly step ${step.id}`;
+        stepImage.classList.remove('hidden');
+        placeholder.classList.add('hidden');
+    } else {
+        stepImage.classList.add('hidden');
+        placeholder.classList.remove('hidden');
+        placeholderNumber.textContent = step.id;
+    }
+    
+    // Update YouTube embed
+    updateYouTubeEmbed(step.timestampSeconds);
+    
+    // Update buttons
+    prevBtn.disabled = currentStep === 1;
+    nextBtn.disabled = currentStep === TOTAL_STEPS;
+    
+    // Update step indicators
+    renderStepIndicators('step-indicators', currentStep, goToStep);
+    
+    // Update progress bar
+    const progress = (currentStep / TOTAL_STEPS) * 100;
+    progressBar.style.width = `${progress}%`;
+    
+    // Update fullscreen UI
+    updateFullscreenUI();
+}
+
+// Update fullscreen UI
+function updateFullscreenUI() {
+    const step = assemblySteps[currentStep - 1];
+    const imageSrc = getStepImage(step.id);
+    
+    fullscreenStepTitle.textContent = `Step ${step.id}/${TOTAL_STEPS} - ${step.title}`;
+    
+    if (imageSrc) {
+        fullscreenImage.src = imageSrc;
+        fullscreenImage.alt = `Step ${step.id}`;
+        fullscreenImage.classList.remove('hidden');
+        fullscreenPlaceholder.classList.add('hidden');
+    } else {
+        fullscreenImage.classList.add('hidden');
+        fullscreenPlaceholder.classList.remove('hidden');
+        fullscreenPlaceholderNumber.textContent = step.id;
+    }
+    
+    fullscreenPrevBtn.disabled = currentStep === 1;
+    fullscreenNextBtn.disabled = currentStep === TOTAL_STEPS;
+    
+    renderStepIndicators('fullscreen-step-indicators', currentStep, goToStepFullscreen);
+    
+    const progress = (currentStep / TOTAL_STEPS) * 100;
+    fullscreenProgressBar.style.width = `${progress}%`;
+    
+    updateZoomDisplay();
+}
+
+// Navigation functions
+function goToPrevious() {
+    if (currentStep > 1) {
+        currentStep--;
+        updateUI();
+    }
+}
+
+function goToNext() {
+    if (currentStep < TOTAL_STEPS) {
+        currentStep++;
+        updateUI();
+    }
+}
+
+function goToStep(step) {
+    if (step >= 1 && step <= TOTAL_STEPS) {
+        currentStep = step;
+        updateUI();
+    }
+}
+
+function goToStepFullscreen(step) {
+    resetZoom();
+    goToStep(step);
+}
+
+function goToPreviousFullscreen() {
+    resetZoom();
+    goToPrevious();
+}
+
+function goToNextFullscreen() {
+    resetZoom();
+    goToNext();
+}
+
+// Fullscreen functions
+function openFullscreen() {
+    isFullscreen = true;
+    fullscreenModal.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+    updateFullscreenUI();
+}
+
+function closeFullscreen() {
+    isFullscreen = false;
+    fullscreenModal.classList.add('hidden');
+    document.body.style.overflow = '';
+    resetZoom();
+}
+
+// Zoom functions
+function zoomIn() {
+    scale = Math.min(scale + 0.5, 4);
+    updateZoomDisplay();
+}
+
+function zoomOut() {
+    scale = Math.max(scale - 0.5, 0.5);
+    updateZoomDisplay();
+}
+
+function resetZoom() {
+    scale = 1;
+    position = { x: 0, y: 0 };
+    updateZoomDisplay();
+}
+
+function updateZoomDisplay() {
+    zoomLevel.textContent = `${Math.round(scale * 100)}%`;
+    fullscreenImage.style.transform = `translate(${position.x}px, ${position.y}px) scale(${scale})`;
+}
+
+// Drag functions for fullscreen image
+function handleMouseDown(e) {
+    if (scale > 1) {
+        isDragging = true;
+        dragStart = {
+            x: e.clientX - position.x,
+            y: e.clientY - position.y
+        };
+        fullscreenImageContainer.style.cursor = 'grabbing';
+    }
+}
+
+function handleMouseMove(e) {
+    if (isDragging && scale > 1) {
+        position = {
+            x: e.clientX - dragStart.x,
+            y: e.clientY - dragStart.y
+        };
+        updateZoomDisplay();
+    }
+}
+
+function handleMouseUp() {
+    isDragging = false;
+    fullscreenImageContainer.style.cursor = 'grab';
+}
+
+function handleWheel(e) {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.2 : 0.2;
+    scale = Math.max(0.5, Math.min(4, scale + delta));
+    updateZoomDisplay();
+}
+
+// Event Listeners
+prevBtn.addEventListener('click', goToPrevious);
+nextBtn.addEventListener('click', goToNext);
+fullscreenBtn.addEventListener('click', openFullscreen);
+stepImage.addEventListener('click', openFullscreen);
+closeFullscreenBtn.addEventListener('click', closeFullscreen);
+fullscreenPrevBtn.addEventListener('click', goToPreviousFullscreen);
+fullscreenNextBtn.addEventListener('click', goToNextFullscreen);
+zoomInBtn.addEventListener('click', zoomIn);
+zoomOutBtn.addEventListener('click', zoomOut);
+
+fullscreenImageContainer.addEventListener('mousedown', handleMouseDown);
+fullscreenImageContainer.addEventListener('mousemove', handleMouseMove);
+fullscreenImageContainer.addEventListener('mouseup', handleMouseUp);
+fullscreenImageContainer.addEventListener('mouseleave', handleMouseUp);
+fullscreenImageContainer.addEventListener('wheel', handleWheel, { passive: false });
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+    if (isFullscreen) {
+        if (e.key === 'Escape') closeFullscreen();
+        if (e.key === '+' || e.key === '=') zoomIn();
+        if (e.key === '-') zoomOut();
+        if (e.key === '0') resetZoom();
+        if (e.key === 'ArrowLeft' && currentStep > 1) goToPreviousFullscreen();
+        if (e.key === 'ArrowRight' && currentStep < TOTAL_STEPS) goToNextFullscreen();
+    } else {
+        if (e.key === 'ArrowRight') goToNext();
+        if (e.key === 'ArrowLeft') goToPrevious();
+    }
+});
+
+// Initialize
+updateUI();