backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-22 03:51:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'ui-load-from-url'

Browse source
This commit is contained in:
hasparus 2019-04-27 14:41:21 +02:00
commit 41a0d06357
No known key found for this signature in database
GPG key ID: 199946486FC7B0AC
3 changed files with 512 additions and 251 deletions
Download patch file Download diff file Expand all files Collapse all files

15
index.css
View file

@ -845,22 +845,29 @@ div.slider .ui-slider-handle {
line-height: 1.6em;
}
#saveDropdown {
.dropdown {
display: block;
float: left;
position: relative;
}
.dropdown__options {
display: none;
position: absolute;
left: 29%;
left: 50%;
top: 100%;
transform: translateX(-50%);
border: 1px solid #5e4fa2;
background-color: #a4879b;
width: 44px;
}
#saveDropdown>div {
.dropdown__options > div {
padding: 2px 4px;
cursor: pointer;
}
#saveDropdown>div:hover {
.dropdown__options > div:hover {
color: white;
}

647
index.html
View file

File diff suppressed because one or more lines are too long

99
script.js
View file

@ -275,7 +275,7 @@ function fantasyMap() {
placePoints();
calculateVoronoi(points);
makeFileFromUrl(decodeURIComponent(mapLink)).then(blob => {
makeBlobFromUrl(decodeURIComponent(mapLink)).then(blob => {
uploadFile(blob);
manorsAndRegions(); // namesBase global state
cleanData();
@ -6824,7 +6824,7 @@ function fantasyMap() {
uploadFile(fileToLoad);
});
function makeFileFromUrl(mapLink) {
function makeBlobFromUrl(mapLink) {
return fetch(mapLink, {
method: 'GET',
mode: 'cors',
@ -7727,7 +7727,8 @@ function fantasyMap() {
zoom.scaleExtent([1, 20]).scaleTo(svg, 1);
}
if (id === "saveButton") {$("#saveDropdown").slideToggle();}
if (id === "loadMap") {mapToLoad.click();}
if (id === "loadButton") {$("#loadDropdown").slideToggle();}
if (id === "zoomReset") {resetZoom(1000);}
if (id === "zoomPlus") {
scale += 1;
@ -7825,6 +7826,98 @@ function fantasyMap() {
$("#saveDropdown").slideUp("fast");
});
$('#loadDropdown > div[role="button"]').click(event => {
const id = event.target.id;
console.log(event, id);
if (id === "loadMap") {
mapToLoad.click();
}
if (id === "loadMapFromURL") {
const modal = document.createElement("form");
Object.assign(modal.style, {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate3d(-50%, -50%, 0)",
border: "1px solid #5e4fa2",
boxShadow: "2px 2px 5px -3px #3a2804",
padding: "auto",
background: "white"
});
modal.className = "ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons";
// <div
// style="height: auto; width: 320px; top: 365.9px; left: 648px;"
// tabindex="-1"
// role="dialog"
// class="ui-dialog ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable"
// aria-describedby="alert"
// aria-labelledby="ui-id-1">
// <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">Map size conflict</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="✖"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>✖</button></div><div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
// <p id="alertMessage">
// The loaded map has size 1920 x 1005 pixels, while the current canvas size is 1408 x 1005 pixels.
// Click "Rescale" to fit the map to the current canvas size. Click "OK" to browse the map without rescaling
// </p>
// </div>
// <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
// <div class="ui-dialog-buttonset">
// <button type="button" class="ui-button ui-corner-all ui-widget">
// Rescale
// </button>
// <button type="button" class="ui-button ui-corner-all ui-widget">
// OK
// </button>
// </div>
// </div>
// </div>
const linkInputName = "link";
modal.innerHTML = `
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-draggable-handle">
<span id="ui-id-1" class="ui-dialog-title">
Load Map
</span>
<button
class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close"
title="✖"
>
<span class="ui-button-icon ui-icon ui-icon-closethick"></span>
<span class="ui-button-icon-space"></span>
✖
</button>
</div>
<div id="alert" style="width: auto; min-height: 48.8px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content">
<label style="display: block;">
<div>Enter link to your map</div>
<input
style="width: 24em; margin-top: 0.5em"
type="url"
name="${linkInputName}"
pattern=".*\\.map"
placeholder="https://example.com/faerun.map"
required
/>
</label>
</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset">
<button type="submit" class="ui-button">Load</button>
</div>
</div>
`;
modal.onsubmit = (event) => {
event.preventDefault();
const formData = new FormData(event.target);
console.log("ok", formData.get(linkInputName), event)
document.body.removeChild(modal);
}
document.body.appendChild(modal);
}
$("#loadDropdown").slideUp("fast");
});
// lock / unlock option randomization
$("#options i[class^='icon-lock']").click(function() {
$(this).toggleClass("icon-lock icon-lock-open");