+
+
+
+
+ `);
+ });
+ }
+
+ // ------------------------------
+ // setPath(element)
+ // Toggles a character's path on the map when the corresponding button or element is clicked
+ // ------------------------------
+ function setPath(element) {
+ console.log("A character checkbox icon was clicked");
+ PathsController.togglePath(element.name);
+ MarkersController.clearMarkers();
+ MarkersController.addMarkers();
+ };
+
+ // ------------------------------
+ // resetCharacterSelection()
+ // ------------------------------
+ function resetCharacterSelection() {
+ // Uncheck all UI checkboxes
+ document
+ .querySelectorAll('.pathsgrid input[type="checkbox"]')
+ .forEach(cb => {
+ cb.checked = false;
+ });
+
+ // Clear paths from the map
+ PathsController.clearPaths();
+ }
+
+ return {
+ rebuild,
+ setPath,
+ resetCharacterSelection
+ };
+})();
\ No newline at end of file
diff --git a/js/core/appState.js b/js/core/appState.js
new file mode 100644
index 0000000..b821a06
--- /dev/null
+++ b/js/core/appState.js
@@ -0,0 +1,9 @@
+// rop-map/js/core/appState.js
+// Shared global state
+window.AppState = {
+ LIST_PATHS: {},
+ LIST_MARKERS: [],
+ CURRENT_RANGE: [0, 8],
+ PATH_SPEED_ANIMATION: 400,
+ PATH_WEIGHT: 4
+};
\ No newline at end of file
diff --git a/js/core/mapController.js b/js/core/mapController.js
new file mode 100644
index 0000000..a122bc3
--- /dev/null
+++ b/js/core/mapController.js
@@ -0,0 +1,57 @@
+// rop-map/js/core/mapController.js
+window.MapController = (function () {
+
+ const map = L.map('map', {
+ crs: L.CRS.Simple,
+ attributionControl: false,
+ zoom: 0,
+ minZoom: -1,
+ maxZoom: 4,
+ zoomControl: false
+ });
+
+ L.control.zoom({ position: 'topright' }).addTo(map);
+
+ const c = new L.Control.Coordinates();
+ c.addTo(map);
+ map.on('click', e => c.setCoordinates(e));
+
+ const bounds = [[0, 0], [1000, 1366]];
+ L.imageOverlay('./img/map.webp', bounds).addTo(map);
+ map.setView([500, 683]);
+
+ // Draw tool
+ const drawControl = new L.Control.Draw({
+ position: 'topright',
+ draw: {
+ polyline: { shapeOptions: { color: '#5e81ac', weight: 4 } },
+ polygon: false,
+ circle: false,
+ rectangle: false,
+ circlemarker: false,
+ marker: false
+ }
+ });
+
+ map.addControl(drawControl);
+ L.Draw.Polyline.prototype._onTouch = L.Util.falseFn;
+
+ // Dev helper
+ map.on(L.Draw.Event.CREATED, function (e) {
+ let output = "";
+ e.layer.getLatLngs().forEach(p => {
+ output += `[${p.lat}, ${p.lng}], `;
+ });
+ console.log(output);
+ });
+
+ return { map };
+
+})();
+
+
+
+// Now everywhere you used `map`, call
+/*
+MapController.map
+*/
\ No newline at end of file
diff --git a/js/core/markersController.js b/js/core/markersController.js
new file mode 100644
index 0000000..a4ff852
--- /dev/null
+++ b/js/core/markersController.js
@@ -0,0 +1,101 @@
+// rop-map/js/core/markersController.js
+// ==============================
+// MarkersController
+// ==============================
+// Manages the creation, display, and removal of markers on the map.
+// Markers are filtered by the currently selected season and displayed
+// using Leaflet with custom icons and popups.
+
+window.MarkersController = (function () {
+
+ // ------------------------------
+ // clearMarkers()
+ // ------------------------------
+ // Removes all currently displayed markers from the map and
+ // clears the list of markers in AppState.
+ function clearMarkers() {
+ // Remove each marker from the map
+ AppState.LIST_MARKERS.forEach(marker => marker.removeFrom(MapController.map));
+ // Clear the array holding references to markers
+ AppState.LIST_MARKERS.length = 0;
+ }
+
+ // ------------------------------
+ // addMarkers()
+ // ------------------------------
+ // Adds markers to the map based on the currently selected season.
+ // Only markers relevant to the selected season are displayed.
+ function addMarkers() {
+ // Get the currently selected season
+ const currentSeason = SeasonController.getCurrentSeason();
+ const [from, to] = AppState.CURRENT_RANGE;
+
+ // Loop through all markers defined in DATA_MARKERS
+ DATA_MARKERS.markers.forEach(marker => {
+
+ // Skip markers that are not relevant to the current season
+ const matchesSeason = currentSeason.markersRelevant(marker);
+ const matchesEpisodeRange = marker.episodes.some(e =>
+ e.season === currentSeason.id &&
+ e.episode >= from &&
+ e.episode <= to
+ );
+ if (!matchesSeason || !matchesEpisodeRange) return;
+
+ // Find marker type information (icon, size, anchor points)
+ const type = DATA_MARKER_TYPES.types.find(t => t.name === marker.type);
+
+ // Create a Leaflet marker at the marker's coordinates
+ const leafletMarker = L.marker(marker.coordinates, {
+ icon: L.icon({
+ iconUrl: `img/markers/${type.icon}`, // path to the icon image
+ iconSize: type.iconSize, // size of the icon
+ iconAnchor: type.iconAnchor, // anchor point for the icon
+ popupAnchor: type.popupAnchor // anchor point for the popup
+ }),
+ title: marker.title // tooltip title when hovering over the marker
+ }).bindPopup(
+ // HTML content for the popup
+ `
+
+
+
+ 
+
+
+
+
+
+
+
+
`
+ )
+ // Add the marker to the map
+ .addTo(MapController.map);
+
+ // Store the marker reference in AppState for later clearing or updates
+ AppState.LIST_MARKERS.push(leafletMarker);
+ });
+ }
+
+ // Expose public functions
+ return {
+ clearMarkers, // Function to remove all markers
+ addMarkers // Function to add markers for the current season
+ };
+
+})();
diff --git a/js/core/pathsController.js b/js/core/pathsController.js
new file mode 100644
index 0000000..085862c
--- /dev/null
+++ b/js/core/pathsController.js
@@ -0,0 +1,89 @@
+// rop-map/js/core/pathsController.js
+
+window.PathsController = (function () {
+ // ------------------------------
+ // togglePath(characterName)
+ // ------------------------------
+ function togglePath(characterName) {
+ const paths = AppState.LIST_PATHS;
+ const currentSeason = SeasonController.getCurrentSeason();
+
+ if (!paths[characterName]) {
+ const layer = L.layerGroup(
+ getPolylinesFromName(characterName, currentSeason.id),
+ { snakingPause: AppState.PATH_SPEED_ANIMATION }
+ ).addTo(MapController.map);
+
+ layer.snakeIn(); // animate first add
+ paths[characterName] = layer;
+ } else {
+ paths[characterName].removeFrom(MapController.map);
+ delete paths[characterName];
+ }
+ }
+
+ // ------------------------------
+ // clearPaths()
+ // ------------------------------
+ function clearPaths() {
+ Object.keys(AppState.LIST_PATHS).forEach(characterName => {
+ AppState.LIST_PATHS[characterName].removeFrom(MapController.map);
+ });
+ }
+
+ // ------------------------------
+ // addPaths()
+ // ------------------------------
+ function addPaths() {
+ const currentSeason = SeasonController.getCurrentSeason();
+
+ Object.keys(AppState.LIST_PATHS).forEach(characterName => {
+ AppState.LIST_PATHS[characterName] = L.layerGroup(
+ getPolylinesFromName(characterName, currentSeason.id)
+ ).addTo(MapController.map);
+ });
+ }
+
+ // ------------------------------
+ // hasPaths(characterName, seasonId)
+ // ------------------------------
+ function hasPaths(characterName, seasonId) {
+ return DATA_PATHS.paths.some(p =>
+ p.character === characterName &&
+ (p.season === seasonId || p.season >= 100)
+ );
+ }
+
+ // ------------------------------
+ // getPolylinesFromName(characterName, seasonId)
+ // ------------------------------
+ function getPolylinesFromName(characterName, seasonId) {
+ const [from, to] = AppState.CURRENT_RANGE;
+
+ const filteredPaths = DATA_PATHS.paths.filter(p =>
+ p.character === characterName &&
+ (p.season === seasonId || p.season >= 100) &&
+ p.episode >= from &&
+ p.episode <= to
+ );
+
+ const color = DATA_CHARACTERS.characters.find(c => c.name === characterName).color;
+
+ return filteredPaths.map(p =>
+ L.polyline(p.coordinates, {
+ color,
+ weight: AppState.PATH_WEIGHT,
+ dashArray: p.isConfirmed ? '0' : '2 6',
+ opacity: p.isConfirmed ? 1 : 0.7
+ })
+ );
+ }
+
+ return {
+ togglePath,
+ clearPaths,
+ addPaths,
+ hasPaths
+ };
+
+})();
diff --git a/js/core/seasonController.js b/js/core/seasonController.js
new file mode 100644
index 0000000..64949c8
--- /dev/null
+++ b/js/core/seasonController.js
@@ -0,0 +1,47 @@
+// rop-map/js/core/seasonController.js
+window.SeasonController = (function () {
+ const seasonSelect = document.getElementById('seasonSelect');
+
+ // Default season = first visible season
+ let currentSeason = DATA_SEASONS.find(s => s.showInSelect);
+
+ function initDropdown() {
+ seasonSelect.innerHTML = "";
+
+ DATA_SEASONS.forEach((season, index) => {
+ if (!season.showInSelect) return;
+
+ const option = document.createElement('option');
+ option.value = index; // IMPORTANT: original index
+ option.textContent = season.name;
+ seasonSelect.appendChild(option);
+ });
+
+ // Select first visible season
+ seasonSelect.selectedIndex = 0;
+ currentSeason = DATA_SEASONS[seasonSelect.value];
+
+ seasonSelect.addEventListener('change', () => {
+ const selectedIndex = Number(seasonSelect.value);
+ currentSeason = DATA_SEASONS[selectedIndex];
+
+ PathsController.clearPaths();
+ MarkersController.clearMarkers();
+
+ AppState.LIST_PATHS = {};
+
+ SliderController.updateSlider(currentSeason.episodes);
+
+ PathsController.addPaths();
+ MarkersController.addMarkers();
+
+ CharacterCheckBoxController.resetCharacterSelection();
+ });
+ }
+
+ function getCurrentSeason() {
+ return currentSeason;
+ }
+
+ return { initDropdown, getCurrentSeason };
+})();
diff --git a/js/core/sliderController.js b/js/core/sliderController.js
new file mode 100644
index 0000000..95ffd33
--- /dev/null
+++ b/js/core/sliderController.js
@@ -0,0 +1,69 @@
+// rop-map/js/core/sliderController.js
+window.SliderController = (function () {
+ let slider;
+
+ // ------------------------------
+ // createSlider(count)
+ // ------------------------------
+ function createSlider(count) {
+ if (slider.noUiSlider) {
+ slider.noUiSlider.destroy();
+ }
+
+ noUiSlider.create(slider, {
+ start: [0, count],
+ connect: true,
+ step: 1,
+ range: { min: 0, max: count },
+ pips: {
+ mode: 'steps',
+ density: 100,
+ filter: () => 2,
+ format: {
+ to: value => (value === 0 ? 'Prologue' : `Episode ${value}`),
+ from: value => Number(value)
+ }
+ }
+ });
+
+ slider.noUiSlider.on('update', values => {
+ sliderChange([Number(values[0]), Number(values[1])]);
+ });
+ }
+
+ // ------------------------------
+ // init()
+ // ------------------------------
+ function init() {
+ slider = document.getElementById('slider');
+
+ const season = SeasonController.getCurrentSeason();
+ createSlider(season.episodes);
+ }
+
+ // ------------------------------
+ // updateSlider(newCount)
+ // ------------------------------
+ function updateSlider(newCount) {
+ createSlider(newCount);
+ }
+
+ // ------------------------------
+ // sliderChange(range)
+ // ------------------------------
+ function sliderChange(range) {
+ AppState.CURRENT_RANGE = range;
+
+ PathsController.clearPaths();
+ PathsController.addPaths();
+
+ MarkersController.clearMarkers();
+ MarkersController.addMarkers();
+ }
+
+ return {
+ init,
+ updateSlider,
+ sliderChange
+ };
+})();
diff --git a/js/core/uiController.js b/js/core/uiController.js
new file mode 100644
index 0000000..46271d0
--- /dev/null
+++ b/js/core/uiController.js
@@ -0,0 +1,44 @@
+// rop-map/js/core/uiController.js
+window.UIController = (function () {
+
+ /*
+ * Function: Hide or Show the main menu
+ */
+ function hideshow() {
+ const button = document.getElementById("main__button-input");
+ const menu = document.getElementById("main");
+ const timeline = document.getElementById("rangeselect");
+
+ const isHidden = button.classList.contains('main__button-input--hidden');
+
+ if (!isHidden) {
+ button.classList.add("main__button-input--hidden");
+ menu.classList.add("menu--hidden");
+ timeline.classList.add("slider--hidden");
+ } else {
+ button.classList.remove("main__button-input--hidden");
+ menu.classList.remove("menu--hidden");
+ timeline.classList.remove("slider--hidden");
+ }
+ }
+
+ /*
+ * A11Y Function: Trigger checkbox when using keyboard on focused label
+ * @param event KeyboardEvent
+ */
+ function interactionLabel(event) {
+ const checkbox = event.target.control;
+
+ // Enter (13) or Space (32)
+ if (event.keyCode === 13 || event.keyCode === 32) {
+ checkbox.checked = !checkbox.checked;
+ CharacterCheckBoxController.setPath(checkbox);
+ }
+ }
+
+ return {
+ hideshow,
+ interactionLabel
+ };
+
+})();
diff --git a/js/main.js b/js/main.js
index 2221d56..7a3d904 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,291 +1,33 @@
-// Global variables
-const LIST_PATHS = {};
-const LIST_MARKERS = [];
-const CURRENT_CHAR = [];
-const CURRENT_RANGE = [null, null];
-const PATH_SPEED_ANIMATION = 400;
-const PATH_WEIGHT = 4;
-
-// Leaflet map setup
-let map = L.map('map', {
- crs: L.CRS.Simple,
- attributionControl: false,
- zoom: 0,
- minZoom: -1,
- maxZoom: 4,
- zoomControl: false
-});
-
-// Set zoom panel to the top right
-L.control.zoom({
- position: 'topright'
-}).addTo(map);
-
-// Show coordinates
-let c = new L.Control.Coordinates();
-c.addTo(map);
-map.on('click', function(e) {
- c.setCoordinates(e);
-});
-
-// Draw options for measure distance feature
-var drawPluginOptions = {
- position: 'topright',
- draw: {
- polyline: {
- shapeOptions: {
- color: '#5e81ac',
- weight: 4
- }
- },
- polygon: false,
- circle: false,
- rectangle: false,
- circlemarker: false,
- marker: false
- }
-};
-
-var drawControl = new L.Control.Draw(drawPluginOptions);
-map.addControl(drawControl);
-L.Draw.Polyline.prototype._onTouch = L.Util.falseFn; // Fix for touchscreen
-
-// Set the custom map
-let bounds = [[0,0], [1000,1366]];
-let image = L.imageOverlay('./img/map.webp', bounds).addTo(map);
-map.setView([500,683]);
-
-// Slider configuration
-const slider = document.getElementById('slider');
-
-const listEpisodes = ['Prologue', 'Episode 1', 'Episode 2', 'Episode 3', 'Episode 4', 'Episode 5', 'Episode 6', 'Episode 7', 'Episode 8'];
-noUiSlider.create(slider, {
- start: [0, 8],
- connect: true,
- step: 1,
- range: {
- 'min': 0,
- 'max': 8
- },
- pips: {
- mode: 'steps',
- density: 100,
- filter: (x) => 2,
- format: {
- to: function (value) {
- return listEpisodes[value];
- },
- from: function (value) {
- return Number(value);
- }
- }
- }
-});
-
-slider.noUiSlider.on('update', function (values) {
- timelineChange([Number(values[0]), Number(values[1])]);
-});
-
-
-/*
- * Alright, this thing is a real mess, need to be refactored asap
-*/
-function setMarker() {
- DATA_MARKERS.markers.forEach((marker) => {
-
- // Will break on season 2, todo
- let isMarkerRelevant = marker.episodes.find((elem) => elem.episode >= CURRENT_RANGE[0] && elem.episode <= CURRENT_RANGE[1] && elem.season === 1 ) !== undefined ? true : false;
-
- if (marker.episodes.find((elem) => elem.season === 100) !== undefined && LIST_PATHS["Frodo and Sam"] !== undefined)
- isMarkerRelevant = true;
- if (marker.episodes.find((elem) => elem.season === 101) !== undefined && LIST_PATHS["Bilbo and Thorin"] !== undefined)
- isMarkerRelevant = true;
-
- if (isMarkerRelevant)
- {
- let confirmed = (marker.isConfirmed) ? "" : `${marker.title}
+${marker.type}
+ ${marker.isConfirmed ? '' : "coordinates not confirmed
"}
+
+ ${marker.decription}
+
+
+ Seen in:
+ ${marker.episodes.map(e => {
+ // Format the episodes in which this marker appears
+ if (e.season === 100) return "The Lord of the Rings (Movies)";
+ if (e.season === 104) return "The Hobbit (Movies)";
+ return `S0${e.season}E0${e.episode}`; // Standard season/episode format
+ }).join(", ")}
+
+ ${marker.readMoreUrl ? `` : ''}
+ coordinates not confirmed
`;
- let readMore = (marker.readMoreUrl) ? `` : "";
- let type = DATA_MARKERS.types.find((type) => type.name === marker.type);
-
- let listEpisodes = marker.episodes.map((elem) => {
- switch (elem.season) {
- case 100:
- return "Lord Of The Rings (Movie)";
- case 101:
- return "The Hobbit (Movie)";
- default:
- return `S0${elem.season}E0${elem.episode}`;
- }
- }).join(", ");
-
- LIST_MARKERS.push(L.marker(marker.coordinates,
- {icon: L.icon(
- {
- iconUrl: `img/markers/${type.icon}`,
- iconSize: type.iconSize,
- iconAnchor: type.iconAnchor,
- popupAnchor: type.popupAnchor
- }
- ),
- maxWidth: '500',
- title: marker.title
- })
- .bindPopup(`${marker.title}
${marker.type}
${confirmed}${marker.decription}
Seen in: ${listEpisodes}
${readMore}