GitHub Migration

script.js

@@ -0,0 +1,125 @@
+class FlashcardApp {
+    constructor() {
+        this.forms = [];
+        this.currentIndex = 0;
+        this.isFlipped = false;
+        
+        this.flashcard = document.getElementById('flashcard');
+        this.formName = document.getElementById('form-name');
+        this.formNumber = document.getElementById('form-number');
+        this.handPosition = document.getElementById('hand-position');
+        this.openingMove = document.getElementById('opening-move');
+        this.prevBtn = document.getElementById('prev-btn');
+        this.nextBtn = document.getElementById('next-btn');
+        this.cardCounter = document.getElementById('card-counter');
+        this.progressFill = document.getElementById('progress-fill');
+        
+        this.init();
+    }
+    
+    async init() {
+        try {
+            await this.loadForms();
+            this.setupEventListeners();
+            this.updateCard();
+        } catch (error) {
+            console.error('Error initializing app:', error);
+            this.showError('Failed to load forms data. Please check that forms.json exists.');
+        }
+    }
+    
+    async loadForms() {
+        try {
+            const response = await fetch('forms.json');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            this.forms = await response.json();
+            
+            if (!Array.isArray(this.forms) || this.forms.length === 0) {
+                throw new Error('Invalid forms data');
+            }
+        } catch (error) {
+            throw new Error(`Failed to load forms: ${error.message}`);
+        }
+    }
+    
+    setupEventListeners() {
+        this.flashcard.addEventListener('click', () => this.flipCard());
+        this.prevBtn.addEventListener('click', () => this.previousCard());
+        this.nextBtn.addEventListener('click', () => this.nextCard());
+        
+        document.addEventListener('keydown', (e) => {
+            switch(e.key) {
+                case 'ArrowLeft':
+                    this.previousCard();
+                    break;
+                case 'ArrowRight':
+                    this.nextCard();
+                    break;
+                case ' ':
+                case 'Enter':
+                    e.preventDefault();
+                    this.flipCard();
+                    break;
+            }
+        });
+    }
+    
+    flipCard() {
+        if (this.forms.length === 0) return;
+        
+        this.isFlipped = !this.isFlipped;
+        this.flashcard.classList.toggle('flipped', this.isFlipped);
+    }
+    
+    previousCard() {
+        if (this.forms.length === 0) return;
+        
+        this.currentIndex = (this.currentIndex - 1 + this.forms.length) % this.forms.length;
+        this.updateCard();
+    }
+    
+    nextCard() {
+        if (this.forms.length === 0) return;
+        
+        this.currentIndex = (this.currentIndex + 1) % this.forms.length;
+        this.updateCard();
+    }
+    
+    updateCard() {
+        if (this.forms.length === 0) return;
+        
+        const currentForm = this.forms[this.currentIndex];
+        
+        this.formNumber.textContent = currentForm.number;
+        this.formName.textContent = currentForm.name;
+        this.handPosition.textContent = currentForm.handPosition;
+        this.openingMove.textContent = currentForm.openingMove;
+        
+        this.cardCounter.textContent = `${this.currentIndex + 1} / ${this.forms.length}`;
+        
+        const progressPercent = ((this.currentIndex + 1) / this.forms.length) * 100;
+        this.progressFill.style.width = `${progressPercent}%`;
+        
+        this.prevBtn.disabled = this.forms.length <= 1;
+        this.nextBtn.disabled = this.forms.length <= 1;
+        
+        this.isFlipped = false;
+        this.flashcard.classList.remove('flipped');
+    }
+    
+    showError(message) {
+        this.formName.textContent = 'Error';
+        this.handPosition.textContent = message;
+        this.openingMove.textContent = 'Please ensure forms.json exists in the same directory.';
+        this.cardCounter.textContent = '0 / 0';
+        this.progressFill.style.width = '0%';
+        this.prevBtn.disabled = true;
+        this.nextBtn.disabled = true;
+    }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    new FlashcardApp();
+});