Improve UX of horde-map

horde-map/map.css

@@ -6,16 +6,36 @@
 }
 
 .discord-control {
-    top: 4em;
+    bottom: 0.5rem;
+    left: 0.5rem;
+}
+
+.discord-control button {
+    width: auto;
+    padding: 0.5rem;
+    font-size: 90%;
+}
+
+.edit-control {
+    bottom: 2rem;
     left: 0.5em;
 }
 
-.ol-touch .discord-control {
+.edit-control button:before {
-    top: 5em;
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 80%;
+    content: '\f044';
 }
 
-.discord-control button {
+.remove-control {
-    width: auto;
+    bottom: 2rem;
-    padding: 0.5em;
+    left: 2.5rem;
-    font-size: 11pt;
+}
+
+.remove-control button:before {
+    font-family: 'Font Awesome 5 Free';
+    font-weight: 900;
+    font-size: 80%;
+    content: '\f1f8';
 }

horde-map/map.js

@@ -1,5 +1,5 @@
-const membersApiUrl = 'https://lilia.mraveniste.cc/horde-members/api/members';
+const membersApiUrl = '/horde-members/api/members';
-const featuresApiUrl = 'https://lilia.mraveniste.cc/horde-members/api/features';
+const featuresApiUrl = '/horde-members/api/features';
 const apiKey = 'eyJhbGciOiJIUzUxMiIsImlhdCI6MTU1Mzg5MjYwNSwiZXhwIjoxODY5MjUyNjA1fQ.ImNsaWVudCI.iX2EEEsKbMYpbeU-HB_FcqeepwZn8rkq8XdyfUmr6RJk2-64I744xLdKfrikxskF6_IlJbjBH3jNNcVfWyvswQ';
 
 const discordClientId = '562565397451374593';
@@ -30,6 +30,59 @@ function remove(id) {
     });
 }
 
+function removePin() {
+    if (!discordUser)
+        return;
+
+    var feature = source.forEachFeature((feature) => {
+        if (feature.get('id') == discordUser.id)
+            return feature;
+    });
+
+    if (feature === undefined)
+        return;
+
+    if (confirm('Are you sure you want to remove yourself from the map?'))
+    {
+        source.removeFeature(feature);
+
+        remove(discordUser.id);
+
+        var button = editControl.element.firstElementChild;
+        button.style.display = 'none';
+
+        var button = removeControl.element.firstElementChild;
+        button.style.display = 'none';
+    }
+}
+
+function editNick(feature) {
+    if (!discordUser)
+        return;
+
+    if (!feature)
+        feature = source.forEachFeature((feature) => {
+            if (feature.get('id') == discordUser.id)
+                return feature;
+        });
+
+    if (feature === undefined)
+        return;
+
+    var nick = prompt('Edit nickname:', feature.get('nick'));
+
+    if (nick !== null && nick != feature.get('nick')) {
+        feature.set('nick', nick);
+
+        store(feature);
+    }
+}
+
+document.addEventListener('keydown', (evt) => {
+    if (evt.code == 'Delete')
+        removePin();
+});
+
 function getColor(nick, alpha) {
     var r = 0;
     var g = 0;
@@ -78,14 +131,25 @@ discord.onlogin = async () => {
     var user = await discord.fetchUser();
     var guilds = await discord.fetchGuilds();
 
-    var horde = guilds.find((guild) => guild.id == cheeseHordeGuildId);
+    var guild = guilds.find((guild) => guild.id == cheeseHordeGuildId);
 
-    if (horde !== undefined) {
+    if (guild !== undefined) {
         discordUser = user;
 
         var button = discordControl.element.firstElementChild;
         button.innerHTML = `${discordUser.username}: Log out`;
         button.style.display = null;
+
+        var feature = source.forEachFeature((feature) => {
+            if (feature.get('id') == discordUser.id)
+                return feature;
+        });
+
+        var button = editControl.element.firstElementChild;
+        button.style.display = feature === undefined ? 'none' : null;
+
+        var button = removeControl.element.firstElementChild;
+        button.style.display = feature === undefined ? 'none' : null;
     }
 }
 
@@ -95,15 +159,13 @@ discord.onlogout = async () => {
     var button = discordControl.element.firstElementChild;
     button.innerHTML = 'Log in with Discord';
     button.style.display = null;
-};
 
-async function discordLogin() {
+    var button = editControl.element.firstElementChild;
-    await discord.login();
+    button.style.display = 'none';
-}
 
-async function discordLogout() {
+    var button = removeControl.element.firstElementChild;
-    await discord.logout();
+    button.style.display = 'none';
-}
+};
 
 var DiscordControl = (function(Control) {
     function DiscordControl(opt_options) {
@@ -130,11 +192,11 @@ var DiscordControl = (function(Control) {
     DiscordControl.prototype = Object.create(Control && Control.prototype);
     DiscordControl.prototype.constructor = DiscordControl;
 
-    DiscordControl.prototype.handleClick = function() {
+    DiscordControl.prototype.handleClick = async function() {
         if (!discordUser)
-            discordLogin();
+            await discord.login();
         else
-            discordLogout();
+            await discord.logout();
     };
 
     return DiscordControl;
@@ -142,6 +204,74 @@ var DiscordControl = (function(Control) {
 
 var discordControl = new DiscordControl();
 
+var EditControl = (function(Control) {
+    function EditControl(opt_options) {
+        var options = opt_options || {};
+
+        var button = document.createElement('button');
+        button.style.display = 'none';
+
+        var element = document.createElement('div');
+        element.className = 'edit-control ol-unselectable ol-control';
+        element.appendChild(button);
+
+        Control.call(this, {
+            element: element,
+            target: options.target
+        });
+
+        button.addEventListener('click', this.handleClick.bind(this), false);
+    }
+
+    if (Control)
+        EditControl.__proto__ = Control;
+
+    EditControl.prototype = Object.create(Control && Control.prototype);
+    EditControl.prototype.constructor = EditControl;
+
+    EditControl.prototype.handleClick = function() {
+        editNick();
+    };
+
+    return EditControl;
+}(ol.control.Control));
+
+var editControl = new EditControl();
+
+var RemoveControl = (function(Control) {
+    function RemoveControl(opt_options) {
+        var options = opt_options || {};
+
+        var button = document.createElement('button');
+        button.style.display = 'none';
+
+        var element = document.createElement('div');
+        element.className = 'remove-control ol-unselectable ol-control';
+        element.appendChild(button);
+
+        Control.call(this, {
+            element: element,
+            target: options.target
+        });
+
+        button.addEventListener('click', this.handleClick.bind(this), false);
+    }
+
+    if (Control)
+        RemoveControl.__proto__ = Control;
+
+    RemoveControl.prototype = Object.create(Control && Control.prototype);
+    RemoveControl.prototype.constructor = RemoveControl;
+
+    RemoveControl.prototype.handleClick = function() {
+        removePin();
+    };
+
+    return RemoveControl;
+}(ol.control.Control));
+
+var removeControl = new RemoveControl();
+
 var source = new ol.source.Vector({
     url: featuresApiUrl,
     wrapX: false,
@@ -193,39 +323,24 @@ var map = new ol.Map({
         zoom: 2
     }),
     controls: ol.control.defaults().extend([
-        discordControl
+        discordControl,
+        editControl,
+        removeControl
     ])
 });
 
-var snap = new ol.interaction.Snap({
+map.on('dblclick', (evt) => {
-    source: source
-});
-
-map.addInteraction(snap);
-
-var modify = new ol.interaction.Modify({
-    source: source,
-    condition: (evt) => {
     if (!discordUser)
-            return false;
+        return;
-
-        var feature = source.getClosestFeatureToCoordinate(evt.coordinate);
-
-        if (!feature)
-            return false;
 
-        return feature.get('id') == discordUser.id;
+    map.forEachFeatureAtPixel(evt.pixel, (feature) => {
+        if (feature.get('id') == discordUser.id) {
+            editNick(feature);
+            return true;
         }
+    });
 });
 
-modify.on('modifyend', (evt) => {
-    var feature = evt.features.getArray().find((feature) => feature.getRevision() > 1);
-
-    store(feature);
-});
-
-map.addInteraction(modify);
-
 var draw = new ol.interaction.Draw({
     source: source,
     type: 'Point',
@@ -238,17 +353,7 @@ var draw = new ol.interaction.Draw({
                 return feature;
         });
 
-        if (feature === undefined)
+        return feature === undefined;
-            return true;
-
-        var features = [];
-
-        // FIXME: allows duplication
-        map.forEachFeatureAtPixel(evt.pixel, (feature) => {
-            features.push(feature);
-        });
-
-        return features.length > 1;
     }
 });
 
@@ -257,29 +362,44 @@ draw.on('drawend', (evt) => {
     evt.feature.set('nick', discordUser.username);
 
     store(evt.feature);
+
+    var button = editControl.element.firstElementChild;
+    button.style.display = null;
+
+    var button = removeControl.element.firstElementChild;
+    button.style.display = null;
+
+    // hack
+    draw.lastDragTime_ = undefined;
 });
 
 map.addInteraction(draw);
 
-document.addEventListener('keydown', (evt) => {
+var snap = new ol.interaction.Snap({
-    if (evt.code != 'Delete')
+    source: source
-        return;
+});
 
-    if (!discordUser)
+map.addInteraction(snap);
-        return;
 
-    var feature = source.forEachFeature((feature) => {
+var modify = new ol.interaction.Modify({
-        if (feature.get('id') == discordUser.id)
+    source: source,
-            return feature;
+    condition: (evt) => {
-    });
+        if (!discordUser)
+            return false;
 
-    if (feature === undefined)
+        var feature = source.getClosestFeatureToCoordinate(evt.coordinate);
-        return;
 
-    if (confirm('Are you sure you want to remove yourself?'))
+        if (!feature)
-    {
+            return false;
-        source.removeFeature(feature);
 
-        remove(discordUser.id);
+        return feature.get('id') == discordUser.id;
     }
 });
+
+modify.on('modifyend', (evt) => {
+    var feature = evt.features.getArray().find((feature) => feature.getRevision() > 1);
+
+    store(feature);
+});
+
+map.addInteraction(modify);