Fully load river from save files

Correctly Load from save file now
This commit is contained in:
Leie Sistal 2024-01-16 16:43:05 +01:00 committed by Claude
parent ad11a632c4
commit 03ed19b030
No known key found for this signature in database
3 changed files with 134 additions and 45 deletions

View file

@ -5462,7 +5462,7 @@
class="icon-plus"
></button>
<button id="riverCreateNew" data-tip="Create a new river selecting river cells" class="icon-map-pin"></button>
<button id="loadriverfromcsv" data-tip="Generate river from saved map" class="icon-upload"></button>
<button id="loadriverfromSavedMap" data-tip="Generate river from saved map" class="icon-upload"></button>
<button id="riversBasinHighlight" data-tip="Toggle basin highlight mode" class="icon-sitemap"></button>
<button
id="riversExport"
@ -6143,6 +6143,55 @@
</div>
</div>
<div id="loadRiverMapData" style="display: none" class="dialog">
<div>
<strong>Load River map from</strong>
<button onclick="mapRiverToLoad.click()" data-tip="Load map file (.map or .gz) from your local disk">
machine
</button>
<button
onclick="loadRiverURL()"
data-tip="Load map file (.map or .gz) file from URL. Note that the server should allow CORS"
>
URL
</button>
<button onclick="quickLoad()" data-tip="Load map from browser storage (if saved before)">storage</button>
</div>
<p>Click on <i>storage</i> to open the last saved map.</p>
<div id="loadRiverFromDropbox">
<p style="margin-bottom: 0.3em">
Or load from your Dropbox account
<button
id="dropboxConnectButton"
onclick="connectToDropbox()"
data-tip="Connect your Dropbox account to be able to load maps from it"
>
Connect
</button>
</p>
<select id="loadRiverFromDropboxSelect" style="width: 22em"></select>
<div id="loadRiverFromDropboxButtons" style="margin-bottom: 0.6em">
<button onclick="loadRiverFromDropbox()" data-tip="Load map file (.map or .gz) from your Dropbox">Load</button>
<button
onclick="createSharableRiverDropboxLink()"
data-tip="Select file and create a link to share with your friends"
>
Share
</button>
</div>
<div style="margin-top: 0.3em">
<div id="sharableLinkContainer" style="display: none">
<a id="sharableLink" target="_blank"></a>
<i data-tip="Copy link to the clipboard" onclick="copyLinkToClickboard()" class="icon-clone pointer"></i>
</div>
</div>
</div>
</div>
<div id="exportToPngTilesScreen" style="display: none" class="dialog">
<p>Map will be split into tiles and downloaded as a single zip file. Avoid saving too large images</p>
<div data-tip="Number of columns" style="margin-bottom: 0.3em">
@ -6220,6 +6269,7 @@
<div id="fileInputs" style="display: none">
<input type="file" accept=".map,.gz" id="mapToLoad" />
<input type="file" accept=".map,.gz" id="mapRiverToLoad" />
<input type="file" accept=".txt,.csv" id="burgsListToLoad" />
<input type="file" accept=".txt" id="legendsToLoad" />
<input type="file" accept="image/*" id="imageToLoad" />

View file

@ -770,10 +770,27 @@ async function parseLoadedData(data, mapVersion) {
}
}
async function createSharableRiverDropboxLink() {
const mapFile = document.querySelector("#loadRiverFromDropbox select").value;
const sharableLink = byId("sharableLink");
const sharableLinkContainer = byId("sharableLinkContainer");
try {
const previewLink = await Cloud.providers.dropbox.getLink(mapFile);
const directLink = previewLink.replace("www.dropbox.com", "dl.dropboxusercontent.com"); // DL allows CORS
const finalLink = `${location.origin}${location.pathname}?maplink=${directLink}`;
async function loadRiversFromDropbox() {
const mapPath = byId("loadFromDropboxSelect")?.value;
sharableLink.innerText = finalLink.slice(0, 45) + "...";
sharableLink.setAttribute("href", finalLink);
sharableLinkContainer.style.display = "block";
} catch (error) {
ERROR && console.error(error);
return tip("Dropbox API error. Can not create link.", true, "error", 2000);
}
}
async function loadRiverFromDropbox() {
const mapPath = byId("loadRiverFromDropboxSelect")?.value;
DEBUG && console.log("Loading map from Dropbox:", mapPath);
const blob = await Cloud.providers.dropbox.load(mapPath);
@ -846,21 +863,66 @@ async function parseLoadedDataOnlyRivers(data) {
customization = 0;
if (customizationMenu.offsetParent) styleTab.click();
const params = data[0].split("|");
INFO && console.group("Loaded Map " + seed);
void (function parsePackData() {
reGraph();
reMarkFeatures();
pack.rivers = data[32] ? JSON.parse(data[32]) : [];
const cells = pack.cells;
cells.r = Uint16Array.from(data[22].split(","));
pack.cells.r = Uint16Array.from(data[22].split(","));
})();
void (function restoreLayersState() {
const isVisible = selection => selection.node() && selection.style("display") !== "none";
const isVisibleNode = node => node && node.style.display !== "none";
const hasChildren = selection => selection.node()?.hasChildNodes();
const hasChild = (selection, selector) => selection.node()?.querySelector(selector);
const turnOn = el => byId(el).classList.remove("buttonoff");
toggleRivers();
toggleRivers();
// turn all layers off
byId("mapLayers")
.querySelectorAll("li")
.forEach(el => el.classList.add("buttonoff"));
// turn on active layers
if (hasChild(texture, "image")) turnOn("toggleTexture");
if (hasChildren(terrs)) turnOn("toggleHeight");
if (hasChildren(biomes)) turnOn("toggleBiomes");
if (hasChildren(cells)) turnOn("toggleCells");
if (hasChildren(gridOverlay)) turnOn("toggleGrid");
if (hasChildren(coordinates)) turnOn("toggleCoordinates");
if (isVisible(compass) && hasChild(compass, "use")) turnOn("toggleCompass");
if (hasChildren(rivers)) turnOn("toggleRivers");
if (isVisible(terrain) && hasChildren(terrain)) turnOn("toggleRelief");
if (hasChildren(relig)) turnOn("toggleReligions");
if (hasChildren(cults)) turnOn("toggleCultures");
if (hasChildren(statesBody)) turnOn("toggleStates");
if (hasChildren(provs)) turnOn("toggleProvinces");
if (hasChildren(zones) && isVisible(zones)) turnOn("toggleZones");
if (isVisible(borders) && hasChild(borders, "path")) turnOn("toggleBorders");
if (isVisible(routes) && hasChild(routes, "path")) turnOn("toggleRoutes");
if (hasChildren(temperature)) turnOn("toggleTemp");
if (hasChild(population, "line")) turnOn("togglePopulation");
if (hasChildren(ice)) turnOn("toggleIce");
if (hasChild(prec, "circle")) turnOn("togglePrec");
if (isVisible(emblems) && hasChild(emblems, "use")) turnOn("toggleEmblems");
if (isVisible(labels)) turnOn("toggleLabels");
if (isVisible(icons)) turnOn("toggleIcons");
if (hasChildren(armies) && isVisible(armies)) turnOn("toggleMilitary");
if (hasChildren(markers)) turnOn("toggleMarkers");
if (isVisible(ruler)) turnOn("toggleRulers");
if (isVisible(scaleBar)) turnOn("toggleScaleBar");
if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
getCurrentPreset();
})();
{
// dynamically import and run auto-update script
const versionNumber = parseFloat(params[0]);
@ -876,11 +938,7 @@ async function parseLoadedDataOnlyRivers(data) {
}
}
{
// add custom texture if any
const textureHref = texture.attr("data-href");
if (textureHref) updateTextureSelectValue(textureHref);
}
fitMapToScreen();
void (function checkDataIntegrity() {
const cells = pack.cells;

View file

@ -26,7 +26,7 @@ function overviewRivers() {
document.getElementById("riversBasinHighlight").addEventListener("click", toggleBasinsHightlight);
document.getElementById("riversExport").addEventListener("click", downloadRiversData);
document.getElementById("riversRemoveAll").addEventListener("click", triggerAllRiversRemove);
document.getElementById("loadriverfromcsv").addEventListener("click", showLoadRiverPane);
document.getElementById("loadriverfromSavedMap").addEventListener("click", showLoadRiverPane);
// add line for each river
function riversOverviewAddLines() {
@ -203,25 +203,9 @@ function overviewRivers() {
riversOverviewAddLines();
}
function loadriverfromcsvfunction() {
alertMessage.innerHTML = /* html */ `Are you sure you want to add river from file?`;
$("#alert").dialog({
resizable: false,
title: "Import rivers",
buttons: {
Import: function() {
$(this).dialog("load");
showLoadRiverPane();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
async function showLoadRiverPane() {
$("#loadMapData").dialog({
$("#loadRiverMapData").dialog({
title: "Load River from saved map",
resizable: false,
width: "auto",
@ -236,20 +220,20 @@ async function showLoadRiverPane() {
// already connected to Dropbox: list saved maps
if (Cloud.providers.dropbox.api) {
byId("dropboxConnectButton").style.display = "none";
byId("loadFromDropboxSelect").style.display = "block";
const loadFromDropboxButtons = byId("loadFromDropboxButtons");
const fileSelect = byId("loadFromDropboxSelect");
byId("loadRiverFromDropboxSelect").style.display = "block";
const loadRiverFromDropboxButtons = byId("loadRiverFromDropboxButtons");
const fileSelect = byId("loadRiverFromDropboxSelect");
fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Loading...</option>`;
const files = await Cloud.providers.dropbox.list();
if (!files) {
loadFromDropboxButtons.style.display = "none";
loadRiverFromDropboxButtons.style.display = "none";
fileSelect.innerHTML = /* html */ `<option value="" disabled selected>Save files to Dropbox first</option>`;
return;
}
loadFromDropboxButtons.style.display = "block";
loadRiverFromDropboxButtons.style.display = "block";
fileSelect.innerHTML = "";
files.forEach(({name, updated, size, path}) => {
const sizeMB = rn(size / 1024 / 1024, 2) + " MB";
@ -264,16 +248,13 @@ async function showLoadRiverPane() {
// not connected to Dropbox: show connect button
byId("dropboxConnectButton").style.display = "inline-block";
byId("loadFromDropboxButtons").style.display = "none";
byId("loadFromDropboxSelect").style.display = "none";
byId("loadRiverFromDropboxButtons").style.display = "none";
byId("loadRiverFromDropboxSelect").style.display = "none";
}
async function connectToDropbox() {
await Cloud.providers.dropbox.initialize();
if (Cloud.providers.dropbox.api) showLoadPane();
}
function loadURL() {
function loadRiverURL() {
const pattern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
const inner = `Provide URL to map file:
<input id="mapURL" type="url" style="width: 24em" placeholder="https://e-cloud.com/test.map">
@ -301,7 +282,7 @@ function loadURL() {
}
// load map
byId("mapToLoad").addEventListener("change", function () {
byId("mapRiverToLoad").addEventListener("change", function () {
const fileToLoad = this.files[0];
this.value = "";
closeDialogs();