task-final/scenes.js at main · anonyme-afk/task-final · 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
// scenes.js
// Chaque scène définit :
// - id HTML de la section
// - targetLat/targetLon : où le globe doit pointer (coordonnées GPS)
// - rotationDuration : temps en secondes pour faire tourner le globe jusqu'à cet endroit
// - arrowConfig : configuration de la flèche animée
// - autoRotate : est-ce que le globe continue de tourner en fond ?

const SCENES = [
  {
    index: 0,
    id: "scene-intro",
    targetLat: 20,
    targetLon: 0,
    rotationDuration: 0,
    autoRotate: true,
    autoRotateSpeed: 0.003,
    arrow: null,
    onEnter: () => {
      const hintText = document.getElementById("hint-text");
      if (hintText) hintText.textContent = "Click anywhere to begin";
    }
  },
  {
    index: 1,
    id: "scene-north",
    targetLat: 45,    // Northern Hemisphere general (North Atlantic)
    targetLon: -40,
    rotationDuration: 2.2,
    autoRotate: false,
    autoRotateSpeed: 0,
    arrow: null,
    regionHighlight: {
      type: "north",
      color: 0x4ade80
    },
    onEnter: () => {
      document.getElementById("hint-text").textContent = "Swipe or tap globe to continue";
    }
  },
  {
    index: 2,
    id: "scene-south",
    targetLat: -40,   // Southern Hemisphere general (South Atlantic)
    targetLon: -40,
    rotationDuration: 2.8,
    autoRotate: false,
    autoRotateSpeed: 0,
    arrow: null,
    regionHighlight: {
      type: "south",
      color: 0xef4444
    },
    onEnter: () => {
      document.getElementById("hint-text").textContent = "Swipe or tap globe to continue";
    }
  },
  {
    index: 3,
    id: "scene-ukraine",
    targetLat: 48.3794,   // Center of Ukraine
    targetLon: 31.1656,
    rotationDuration: 1.8,
    autoRotate: false,
    autoRotateSpeed: 0,
    arrow: {
      color: "#fbbf24",
      glowFilter: "url(#glow-yellow)",
      markerEnd: "url(#arrowhead-yellow)",
      type: "curved",
      animateDashDraw: true,
      bounceEnabled: true
    },
    countryHighlight: {
      url: "https://raw.githubusercontent.com/johan/world.geo.json/master/countries/UKR.geo.json",
      color: 0xfbbf24
    },
    onEnter: () => {
      const hintText = document.getElementById("hint-text");
      if (hintText) hintText.textContent = "Click the arrow to continue";
    }
  },
  {
    index: 4,
    id: "scene-final",
    targetLat: 20,
    targetLon: 0,
    rotationDuration: 2.0,
    autoRotate: true,
    autoRotateSpeed: 0.002,
    arrow: null,
    onEnter: () => {
      const hintText = document.getElementById("hint-text");
      if (hintText) hintText.textContent = "";
      const navControls = document.querySelector(".nav-controls");
      if (navControls) navControls.style.opacity = "0";
    }
  }
];