Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const actualTable = [
+ 'Malmö FF', 'AIK', 'Elfsborg', 'Djurgården', 'Häcken',
+ 'IFK Göteborg', 'Hammarby', 'IFK Norrköping', 'Kalmar FF',
+ 'Sirius', 'Värnamo', 'Brommapojkarna', 'Mjällby',
+ 'Halmstad', 'Gais', 'Degerfors'
+ ];
+
+ const predictionList = document.getElementById('prediction-list');
+ const calculateButton = document.getElementById('calculate-score');
+ const resetButton = document.getElementById('reset-prediction');
+ const resultsSection = document.getElementById('results-section');
+ const totalScoreElement = document.getElementById('total-score');
+ const scoreBreakdown = document.getElementById('score-breakdown');
+
+ // Drag and drop functionality
+ let draggingElement = null;
+
+ predictionList.addEventListener('dragstart', (e) => {
+ draggingElement = e.target;
+ e.target.classList.add('dragging');
+ });
+
+ predictionList.addEventListener('dragend', (e) => {
+ e.target.classList.remove('dragging');
+ });
+
+ predictionList.addEventListener('dragover', (e) => {
+ e.preventDefault();
+ const afterElement = getDragAfterElement(predictionList, e.clientY);
+ const currentElement = draggingElement;
+ if (afterElement) {
+ predictionList.insertBefore(currentElement, afterElement);
+ } else {
+ predictionList.appendChild(currentElement);
+ }
+ });
+
+ function getDragAfterElement(container, y) {
+ const draggableElements = [...container.querySelectorAll('.team:not(.dragging)')];
+
+ return draggableElements.reduce((closest, child) => {
+ const box = child.getBoundingClientRect();
+ const offset = y - box.top - box.height / 2;
+
+ if (offset < 0 && offset > closest.offset) {
+ return { offset: offset, element: child };
+ } else {
+ return closest;
+ }
+ }, { offset: Number.NEGATIVE_INFINITY }).element;
+ }
+
+ // Calculate score
+ calculateButton.addEventListener('click', () => {
+ const predictions = [...predictionList.children].map(team => team.textContent);
+ let totalScore = 0;
+ let breakdown = [];
+
+ predictions.forEach((team, index) => {
+ const actualPosition = actualTable.indexOf(team);
+ const difference = Math.abs(actualPosition - index);
+
+ if (difference === 0) {
+ totalScore += 3;
+ breakdown.push(`${team}: Exakt rätt position! (+3 poäng)`);
+ } else if (difference === 1) {
+ totalScore += 2;
+ breakdown.push(`${team}: En position från rätt! (+2 poäng)`);
+ } else if (difference === 2) {
+ totalScore += 1;
+ breakdown.push(`${team}: Två positioner från rätt (+1 poäng)`);
+ }
+ });
+
+ totalScoreElement.textContent = totalScore;
+ scoreBreakdown.innerHTML = breakdown.map(text => `
${text}
`).join('');
+ resultsSection.classList.remove('hidden');
+ });
+
+ // Reset prediction
+ resetButton.addEventListener('click', () => {
+ resultsSection.classList.add('hidden');
+ // Shuffle teams for new prediction
+ const teams = [...predictionList.children];
+ for (let i = teams.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ predictionList.appendChild(teams[j]);
+ }
+ });
+ });
