rangefinder/splashScreen.js at main · BetaNumeric/rangefinder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// splashScreen.js
/*
Initial loading screen that shows:
- Game logo
- Loading status
- Initial animations
*/

let loadingState = {
  started: false,
  progress: 0,
  message: "Initializing...",
  dots: 0,
  lastDotUpdate: 0,
  rotation: 0
};

function drawSplashScreen() {
  background(getBackgroundColor());

  // Draw logo with spinning compass
  if (logoMarker && logoCompass) {
    const maxLogoSize = min(width * 0.6, height * 0.4);
    const aspectRatio = logoMarker.width / logoMarker.height;
    const logoWidth = maxLogoSize;
    const logoHeight = logoWidth / aspectRatio;

    push();
    imageMode(CENTER);
    translate(width/2, height/4);

    // Draw marker (static)
    if (document.documentElement.getAttribute('data-theme') === 'dark') {
      image(logoMarkerInverted, 0, 0, logoWidth, logoHeight);
    } else {
      image(logoMarker, 0, 0, logoWidth, logoHeight);
    }

    // Draw compass (rotating)
    push();
    // Use deltaTime for consistent rotation speed across devices
    loadingState.rotation += (deltaTime / 50); // Adjust this value to control speed
    rotate(loadingState.rotation);
    if (document.documentElement.getAttribute('data-theme') === 'dark') {
      image(logoCompassInverted, 0, 0, logoWidth, logoHeight);
    } else {
      image(logoCompass, 0, 0, logoWidth, logoHeight);
    }
    pop();

    pop();
  }

  // Show loading text with animated dots
  fill(getTextColor());
  textSize(24);
  noStroke();
  textAlign(CENTER, CENTER);

  // Animate loading dots
  if (millis() - loadingState.lastDotUpdate > 500) {
    loadingState.dots = (loadingState.dots + 1) % 4;
    loadingState.lastDotUpdate = millis();
  }

  let dots = ".".repeat(loadingState.dots).padEnd(3);
  push();
  text(""+loadingState.message + dots, width/2, height/2);
  pop();

  // Start loading if not already started
  if (!loadingState.started) {
    loadingState.started = true;

    // Load dataset
    loadingState.message = "V2.1 Loading";
    const selectedDataset = localStorage.getItem('selectedDataset') || 'global';
    dataLoader.loadQuestions(selectedDataset, (loadedQuestions) => {
      if (loadedQuestions && loadedQuestions.length > 0) {
        questions = loadedQuestions;
        userSettings.radius = dataLoader.datasets[selectedDataset].defaultRadius;

        // Small delay to ensure everything is ready
        setTimeout(() => {
          loadingState = {
            started: false,
            progress: 0,
            message: "Initializing...",
            dots: 0,
            lastDotUpdate: 0,
            rotation: 0
          };
          goToScreen("mainMenu");
        }, 500);
      } else {
        loadingState.message = "Error loading data";
      }
    });
  }
}