Skip to content

Commit

Permalink
update UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@antihax
antihax committed Jan 7, 2023
1 parent f8bdeca commit 9a75d2d
Show file tree
Hide file tree
Showing 8 changed files with 666 additions and 14 deletions.
17 changes: 8 additions & 9 deletions src/atlasmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,6 @@ function setupMap(config) {
});
new SearchBox().addTo(map);

let measureControl = new L.Control.Measure({});
measureControl.addTo(map);

// Add Layer Control
L.control
.layers(
Expand Down Expand Up @@ -167,13 +164,15 @@ function setupMap(config) {

map.setView([-128, 128], 2);

L.easyButton('<div>📝</div>', function () {
window.open('items.html', '_self');
}).addTo(map);
if (config.ItemLink)
L.easyButton('<div>📝</div>', function () {
window.open('items.html', '_self');
}).addTo(map);

L.easyButton('<div>☕</div>', function () {
window.open('https://ko-fi.com/antihax', '_blank');
}).addTo(map);
if (config.KofiLink)
L.easyButton('<div>☕</div>', function () {
window.open('https://ko-fi.com/antihax', '_blank');
}).addTo(map);

let ArrowIcon = L.icon({
iconUrl: 'icons/Arrow.svg',
Expand Down
2 changes: 2 additions & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import './leaflet.pathfinder.js';
import './leaflet.atlasgrid.js';
import './leaflet.rotatedmarker.js';
import './leaflet.atlasmap.js';
import './leaflet.accountservice.js';
import './leaflet.movingmarker.js';
import './atlasmap.js';

import 'leaflet/dist/leaflet.css';
Expand Down
172 changes: 172 additions & 0 deletions src/items.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
<!DOCTYPE html>
<html>

<head>
<title>ATLAS - Item Search</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/corejs-typeahead/1.3.1/typeahead.bundle.min.js" integrity="sha512-lEb9Vp/rkl9g2E/LdHIMFTqz21+LA79f84gqP75fbimHqVTu6483JG1AwJlWLLQ8ezTehty78fObKupq3HSHPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js" integrity="sha512-sIqUEnRn31BgngPmHt2JenzleDDsXwYO+iyvQ46Mw6RL+udAUZj2n/u/PGY80NxRxynO7R9xIGx5LEzw4INWJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
.bs-example {
font-family: sans-serif;
position: relative;
margin: 100px;
}

.typeahead,
.tt-query,
.tt-hint {
border: 2px solid #CCCCCC;
border-radius: 8px;
font-size: 22px;
/* Set input font size */
height: 30px;
line-height: 30px;
outline: medium none;
padding: 8px 12px;
width: 396px;
}

.typeahead {
background-color: #FFFFFF;
}

.typeahead:focus {
border: 2px solid #0097CF;
}

.tt-query {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}

.tt-hint {
color: #999999;
}

.tt-menu {
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
margin-top: 12px;
padding: 8px 0;
width: 422px;
}

.tt-suggestion {
font-size: 22px;
/* Set suggestion dropdown font size */
padding: 3px 20px;
}

.tt-suggestion:hover {
cursor: pointer;
background-color: #0097CF;
color: #FFFFFF;
}

.tt-dropdown-menu {
max-height: 150px;
overflow-y: auto;
}

.tt-suggestion p {
margin: 0;
}

.icon {
display: block;
float: left;
padding-right: 10px;
width: 32px;
height: 32px;
}

.nl {
display: block;
font-size: 12pt;
}

.title {
display: block;
font-size: 12pt;
}

.classname {
display: block;
font-size: 8pt;
}
</style>

<script>
var className = "";
$(document).ready(function() {
let bh = new Bloodhound({
datumTokenizer: function(d) {
let tokens = [d.Name, d.ClassName.slice(0, -2).replace("_", " ")];
return Bloodhound.tokenizers.whitespace(tokens);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) {
return obj.Name;
},
prefetch: {
url: '/json/items.json',
filter: function(list) {
return $.map(list, function(v, k) {
if (!v.ClassName)
return;
v.Name = k
v.ClassName = v.ClassName.slice(0, -2); // Remove _C
return v;
});
}
}
});
bh.clearPrefetchCache();
bh.initialize(true);
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 1,
}, {
name: 'bh',
source: bh,
limit: 10,
display: function(data) {
return data.Name
},
templates: {
suggestion: function(data) {
return `<p><img src="/atlasicons/${data.Icon}_32.png" class="icon"><span><span class="title">${data.Name}</span><span class="classname">${data.ClassName}</span></span></p>`
}
},
});
}).on('typeahead:selected', function(evt, item) {
className = item.ClassName;
updateItem();
});

function updateItem() {
$('#target').text(`cheat gfi ${className} ${$('#quant').val() ? $('#quant').val() : 0} ${$('#qual').val() ? $('#qual').val() : 0} ${$('#bp').prop('checked') ? 1 : 0}`)
}
</script>
</head>

<body>
<div>
<input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">
<span class="nl"><input type="checkbox" id="bp" onchange="updateItem()">Blueprint</span>
<span class="nl">Quantity <input type="number" id="quant" value="100" min="0" max="1000"
onchange="updateItem()"></span>
<span class="nl">Quality <input type="number" id="qual" value="0" min="0" max="100000"
onchange="updateItem()"></span>
<pre id="target">cheat gfi</pre>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target">Copy</button>
<script>
new ClipboardJS('.btn');
</script>
</div>
</body>

</html>
170 changes: 170 additions & 0 deletions src/leaflet.accountservice.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
/* global L */

L.Control.AccountService = L.Control.extend({
options: {
position: 'topleft',
},

// hardcode for now
_icons_src: {
Bed: 'Item_SimpleBed_Icon',
Broadsider: 'ICON_Broadsider',
Carrack: 'ICON_Carrack',
Cog: 'ICON_Cog',
Brigantine: 'Item_BrigHull_Icon',
Harrier: 'ICON_Harrier',
Kraken: 'KrakenShipNewIcon',
Turtle: 'Turtleship_Icon',
MortarShip: 'Mortarship_Icon',
Ramming_Galley: 'Galley_Icon',
Galleon: 'Item_GalleonHull_Icon',
Raft: 'Item_Raft_Icon',
Schooner: 'Item_SchoonerHull_Icon',
Sloop: 'Item_SloopHull_Icon',
Sloop_FromNPC: 'Item_SloopHull_Icon',
Submarine: 'Item_Submarine_Icon',
TrampFreighter: 'ICON_Tramp_Freighter',
TurtleShip: 'Turtleship_Icon',
},

_icons: {},
_ships: {},
_eventSource: {},

initialize: function (options) {
L.Util.setOptions(this, options);
for (let i in this._icons_src) {
this._icons[i] = L.icon({
iconUrl: '/atlasIcons/entities/' + this._icons_src[i] + '_32.png',
iconSize: [30, 30],
iconAnchor: [15, 15],
popupAnchor: [0, -15],
});
}
},

onAdd: function (map) {
let container = L.DomUtil.create('div', 'leaflet-control-zoom leaflet-bar leaflet-control');
this._map = map;
this._config = map.options.config;

fetch(this._config.AtlasMapServer + '/s/account', {
dataType: 'json',
})
.then((r) => {
r.json()
.then((account) => {
this._createButton(
'<img src="icons/logout.svg" height=30 width=30>',
'logout',
'leaflet-control-pin leaflet-bar-part leaflet-bar-part-top-and-bottom',
container,
this._logout,
this,
);
this._startEventListener(map);
})
.catch((error) => {
this._createButton(
'<img src="icons/steam.svg" height=30 width=30>',
'Login with Steam',
'leaflet-control-pin leaflet-bar-part leaflet-bar-part-top-and-bottom',
container,
this._login,
this,
);
});
})
.catch((error) => {
console.log('backend unavailable; not enabling login', error);
});
return container;
},

onRemove: function (map) {},
_startEventListener: function (map) {
this._eventSource = new EventSource(this._config.AtlasMapServer + '/s/events');
this._eventSource.onmessage = (event) => {
let d = JSON.parse(event.data);
if (d.EntityType !== undefined) {
this._processEntity(d);
}
};
},

_processEntity: function (d) {
switch (d.EntityType) {
case 'Ship':
case 'ETribeEntityType::Ship':
this._trackShip(d);
break;

case 'Bed':
case 'ETribeEntityType::Bed':
console.dir(d); // slap bed on map
break;
}
},
_trackShip: function (d) {
// Get server grid reference.
let duration = 5000,
x = d.ServerId >> 16,
y = d.ServerId & 0xffff,
unrealX = this._map.options.config.GridSize * d.X + this._map.options.config.GridSize * x,
unrealY = this._map.options.config.GridSize * d.Y + this._map.options.config.GridSize * y,
gps = this._map.worldToLeaflet(unrealX, unrealY);

let ship = this._ships[d.EntityID];
if (ship === undefined) {
if (this._icons[d.ShipType] !== undefined) {
ship = L.Marker.movingMarker([gps], [duration], {icon: this._icons[d.ShipType], title: d.EntityName }).addTo(
this._map,
);
} else {
ship = L.Marker.movingMarker([gps], [duration]).addTo(this._map);
}
}

ship.addLatLng(gps, duration);
ship.start();
this._ships[d.EntityID] = ship;
},

_login: function () {
window.location = this._config.AtlasMapServer + '/login';
},

_logout: function () {
window.location = this._config.AtlasMapServer + '/logout';
},

_createButton: function (html, title, className, container, fn, context) {
let link = L.DomUtil.create('a', className, container);
link.innerHTML = html;
link.href = '#';
link.title = title;

L.DomEvent.on(link, 'click', L.DomEvent.stopPropagation)
.on(link, 'click', L.DomEvent.preventDefault)
.on(link, 'click', fn, context)
.on(link, 'dbclick', L.DomEvent.stopPropagation);
return link;
},

draw: function (grids) {
return this;
},
});

L.control.accountControl = function (options) {
return new L.Control.AccountService(options);
};

var accountControl;
L.Map.addInitHook(function () {
if (this.options.config.AtlasMapServer) {
this.accountControl = new L.Control.AccountService();
accountControl = this.accountControl;
this.addControl(this.accountControl);
}
});
2 changes: 1 addition & 1 deletion src/leaflet.measure.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ L.Map.mergeOptions({
});

L.Map.addInitHook(function () {
if (this.options.measureControl) {
if (this.options.config.WarehouseTool) {
this.measureControl = new L.Control.Measure();
this.addControl(this.measureControl);
}
Expand Down
Loading

0 comments on commit 9a75d2d

Please sign in to comment.