Add settings and credits pages (closes #3), move chat JS to own file
parent
88f6f54aab
commit
d2961066e3
@ -0,0 +1,93 @@
|
|||||||
|
<html>
|
||||||
|
<body>
|
||||||
|
<h1>
|
||||||
|
Art Credits
|
||||||
|
</h1>
|
||||||
|
<p>
|
||||||
|
Map data copyright
|
||||||
|
<a href="http://www.openmaptiles.org/">
|
||||||
|
OpenMapTiles
|
||||||
|
</a>
|
||||||
|
and
|
||||||
|
<a href="http://www.openstreetmap.org/about/">
|
||||||
|
OpenStreetMap contributors
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
<hr/>
|
||||||
|
<p>
|
||||||
|
<a href="https://github.com/seiyria/gameicons-font">
|
||||||
|
Game Icons Font
|
||||||
|
</a>
|
||||||
|
by Kyle J. Kemp (
|
||||||
|
<a href="https://github.com/seiyria">
|
||||||
|
@seiyria
|
||||||
|
</a>
|
||||||
|
)
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<a href="https://game-icons.net">
|
||||||
|
Game icons
|
||||||
|
</a>
|
||||||
|
used in the aforementioned font made by:
|
||||||
|
<br/>
|
||||||
|
- Lorc, http://lorcblog.blogspot.com
|
||||||
|
<br/>
|
||||||
|
- Delapouite, http://delapouite.com
|
||||||
|
<br/>
|
||||||
|
- John Colburn, http://ninmunanmu.com
|
||||||
|
<br/>
|
||||||
|
- Felbrigg, http://blackdogofdoom.blogspot.co.uk
|
||||||
|
<br/>
|
||||||
|
- John Redman, http://www.uniquedicetowers.com
|
||||||
|
<br/>
|
||||||
|
- Carl Olsen, https://twitter.com/unstoppableCarl
|
||||||
|
<br/>
|
||||||
|
- Sbed, http://opengameart.org/content/95-game-icons
|
||||||
|
<br/>
|
||||||
|
- PriorBlue
|
||||||
|
<br/>
|
||||||
|
- Willdabeast, http://wjbstories.blogspot.com
|
||||||
|
<br/>
|
||||||
|
- Viscious Speed, http://viscious-speed.deviantart.com - CC0
|
||||||
|
<br/>
|
||||||
|
- Lord Berandas, http://berandas.deviantart.com
|
||||||
|
<br/>
|
||||||
|
- Irongamer, http://ecesisllc.wix.com/home
|
||||||
|
<br/>
|
||||||
|
- HeavenlyDog, http://www.gnomosygoblins.blogspot.com
|
||||||
|
<br/>
|
||||||
|
- Lucas
|
||||||
|
<br/>
|
||||||
|
- Faithtoken, http://fungustoken.deviantart.com
|
||||||
|
<br/>
|
||||||
|
- Skoll
|
||||||
|
<br/>
|
||||||
|
- Andy Meneely, http://www.se.rit.edu/~andy/
|
||||||
|
<br/>
|
||||||
|
- Cathelineau
|
||||||
|
<br/>
|
||||||
|
- Kier Heyl
|
||||||
|
<br/>
|
||||||
|
- Aussiesim
|
||||||
|
<br/>
|
||||||
|
- Sparker, http://citizenparker.com
|
||||||
|
<br/>
|
||||||
|
- Zeromancer - CC0
|
||||||
|
<br/>
|
||||||
|
- Rihlsul
|
||||||
|
<br/>
|
||||||
|
- Quoting
|
||||||
|
<br/>
|
||||||
|
- Guard13007, https://guard13007.com
|
||||||
|
<br/>
|
||||||
|
- DarkZaitzev, http://darkzaitzev.deviantart.com
|
||||||
|
<br/>
|
||||||
|
- SpencerDub
|
||||||
|
<br/>
|
||||||
|
- GeneralAce135
|
||||||
|
<br/>
|
||||||
|
- Zajkonur
|
||||||
|
</p>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,178 @@
|
|||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Chat functionality for home page
|
||||||
|
*/
|
||||||
|
|
||||||
|
function initChat() {
|
||||||
|
messages = app.messages.create({
|
||||||
|
el: '.messages',
|
||||||
|
pageContentEl: '#messagebar',
|
||||||
|
|
||||||
|
// First message rule
|
||||||
|
firstMessageRule: function (message, previousMessage, nextMessage) {
|
||||||
|
// Skip if title
|
||||||
|
if (message.isTitle)
|
||||||
|
return false;
|
||||||
|
/* if:
|
||||||
|
- there is no previous message
|
||||||
|
- or previous message type (send/received) is different
|
||||||
|
- or previous message sender name is different
|
||||||
|
*/
|
||||||
|
if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name)
|
||||||
|
return true;
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
// Last message rule
|
||||||
|
lastMessageRule: function (message, previousMessage, nextMessage) {
|
||||||
|
// Skip if title
|
||||||
|
if (message.isTitle)
|
||||||
|
return false;
|
||||||
|
/* if:
|
||||||
|
- there is no next message
|
||||||
|
- or next message type (send/received) is different
|
||||||
|
- or next message sender name is different
|
||||||
|
*/
|
||||||
|
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
|
||||||
|
return true;
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
// Last message rule
|
||||||
|
tailMessageRule: function (message, previousMessage, nextMessage) {
|
||||||
|
// Skip if title
|
||||||
|
if (message.isTitle)
|
||||||
|
return false;
|
||||||
|
/* if (bascially same as lastMessageRule):
|
||||||
|
- there is no next message
|
||||||
|
- or next message type (send/received) is different
|
||||||
|
- or next message sender name is different
|
||||||
|
*/
|
||||||
|
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name)
|
||||||
|
return true;
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function scrollToBottom(id) {
|
||||||
|
var div = document.getElementById(id);
|
||||||
|
$('#' + id).animate({
|
||||||
|
scrollTop: div.scrollHeight - div.clientHeight
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshChat(forcescroll) {
|
||||||
|
if (typeof forcescroll == 'undefined') {
|
||||||
|
forcescroll = false;
|
||||||
|
}
|
||||||
|
var vars = {
|
||||||
|
username: localStorage.getItem("username"),
|
||||||
|
password: localStorage.getItem("password")
|
||||||
|
};
|
||||||
|
if (!(map.getCenter().lng == 0 && Math.abs(map.getCenter().lat) > 0.000001)) {
|
||||||
|
vars["latitude"] = map.getCenter().lat;
|
||||||
|
vars["longitude"] = map.getCenter().lng;
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://stackoverflow.com/a/21067431
|
||||||
|
var out = document.getElementById("messages-content");
|
||||||
|
// allow 1px inaccuracy by adding 1
|
||||||
|
var isScrolledToBottom = out.scrollHeight - out.clientHeight <= out.scrollTop + 1;
|
||||||
|
|
||||||
|
var messagebox = messages;
|
||||||
|
callAPI("getchat", vars, function (success) {
|
||||||
|
for (var i = 0; i < success.messages.length; i++) {
|
||||||
|
var msg = success.messages[i];
|
||||||
|
if ($(".message[data-id=" + msg.id + "]").length > 0) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if (msg.me) {
|
||||||
|
messagebox.addMessage({
|
||||||
|
text: msg.message,
|
||||||
|
attrs: {
|
||||||
|
'data-id': msg.id
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
messagebox.addMessage({
|
||||||
|
text: msg.message,
|
||||||
|
type: 'received',
|
||||||
|
name: msg.nickname,
|
||||||
|
attrs: {
|
||||||
|
'data-id': msg.id
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isScrolledToBottom || forcescroll) {
|
||||||
|
scrollToBottom("messages-content");
|
||||||
|
}
|
||||||
|
}, function (error) {});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sendChat() {
|
||||||
|
var message = $("#chatbox").val().trim();
|
||||||
|
var chatfailure = function (error, message) {
|
||||||
|
$("#chatbox").prop("disabled", true);
|
||||||
|
$("#chatbox").val(error);
|
||||||
|
$("#chatbox").addClass("text-color-red");
|
||||||
|
setTimeout(function () {
|
||||||
|
$("#chatbox").prop("disabled", false);
|
||||||
|
$("#chatbox").val(message);
|
||||||
|
$("#chatbox").removeClass("text-color-red");
|
||||||
|
}, 1000 * 2);
|
||||||
|
}
|
||||||
|
if (message == "") {
|
||||||
|
chatfailure("Message empty.", "");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (map.getCenter().lng == 0 && Math.abs(map.getCenter().lat) < 0.000001) {
|
||||||
|
chatfailure("Can't chat without valid location.", message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
callAPI("sendchat", {
|
||||||
|
username: localStorage.getItem("username"),
|
||||||
|
password: localStorage.getItem("password"),
|
||||||
|
latitude: map.getCenter().lat,
|
||||||
|
longitude: map.getCenter().lng,
|
||||||
|
message: message
|
||||||
|
}, function (success) {
|
||||||
|
$("#chatbox").val("");
|
||||||
|
refreshChat(true);
|
||||||
|
}, function (error) {
|
||||||
|
chatfailure(error, message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var messagebar = app.messagebar.create({
|
||||||
|
el: '#messagebar',
|
||||||
|
textareaEl: '#chatbox'
|
||||||
|
});
|
||||||
|
|
||||||
|
$('a.toggle-messages').on('click', function () {
|
||||||
|
var contentbox = $("#messagebar #messages-content");
|
||||||
|
if (contentbox.hasClass("display-none")) {
|
||||||
|
$("#chattoggle-closed").addClass("display-none");
|
||||||
|
$("#chattoggle-opened").removeClass("display-none");
|
||||||
|
contentbox.removeClass("display-none");
|
||||||
|
scrollToBottom("messages-content");
|
||||||
|
} else {
|
||||||
|
$("#chattoggle-opened").addClass("display-none");
|
||||||
|
$("#chattoggle-closed").removeClass("display-none");
|
||||||
|
contentbox.addClass("display-none");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#sendmsgbtn").click(function () {
|
||||||
|
sendChat();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#chatbox").on("keyup", function (evt) {
|
||||||
|
if (evt.keyCode == 13) {
|
||||||
|
sendChat();
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -0,0 +1,56 @@
|
|||||||
|
/*
|
||||||
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
var settings = [
|
||||||
|
{
|
||||||
|
setting: "account",
|
||||||
|
title: "Sign out",
|
||||||
|
text: "Disconnect this device and open the sign in screen.",
|
||||||
|
icon: "game-icon game-icon-exit-door",
|
||||||
|
color: "red",
|
||||||
|
onclick: "logout()"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
setting: "opensource",
|
||||||
|
title: "Credits",
|
||||||
|
text: "See information on third-party code and artwork used in TerranQuest.",
|
||||||
|
icon: "game-icon game-icon-spell-book",
|
||||||
|
color: "lightblue",
|
||||||
|
onclick: "router.navigate('/credits')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
setting: "privacy",
|
||||||
|
title: "Privacy Policy",
|
||||||
|
text: "Know what data we collect and what your rights are.",
|
||||||
|
icon: "game-icon game-icon-spy",
|
||||||
|
color: "purple",
|
||||||
|
onclick: "openBrowser('" + SETTINGS["terms_of_service_url"] + "')"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
setting: "versions",
|
||||||
|
title: "TerranQuest v2.0.0",
|
||||||
|
text: "Copyright © 2014-2019 Netsyms Technologies. License: <span style=\"text-decoration: underline;\" onclick=\"openBrowser('https://source.netsyms.com/TerranQuest/Game?pk_campaign=TerranQuestApp');\">Mozilla Public License 2.0</span>.",
|
||||||
|
icon: "far fa-copyright margin-vertical",
|
||||||
|
color: "gray",
|
||||||
|
onclick: ""
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
function loadSettings() {
|
||||||
|
$("#settings-bin").html("");
|
||||||
|
settings.forEach(function (item) {
|
||||||
|
$("#settings-bin").append('<div class="col-100 tablet-33 desktop-25 item-col">'
|
||||||
|
+ '<div class="card padding-half" onclick="' + item.onclick + '">'
|
||||||
|
+ '<div class="card-content">'
|
||||||
|
+ '<i class="item-icon ' + item.icon + ' text-color-' + item.color + '"></i><br />'
|
||||||
|
+ '<h3>' + item.title + '</h3>'
|
||||||
|
+ item.text
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>'
|
||||||
|
+ '</div>');
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
|
|
||||||
|
<div class="page" data-name="credits">
|
||||||
|
|
||||||
|
<div class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="title"><i class="fas fa-cog"></i> Credits</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="block">
|
||||||
|
<div id="art-credits-block">{{artcredits}}</div>
|
||||||
|
<hr />
|
||||||
|
<pre id="credits-block" style="white-space: pre-wrap; word-wrap: break-word;">{{codecredits}}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fab fab-center-bottom">
|
||||||
|
<a href="#" class="back">
|
||||||
|
<i class="fas fa-2x fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(".page[data-name=credits]").on("click", ".page-content a", function () {
|
||||||
|
openBrowser($(this).attr("href"));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||||
|
|
||||||
|
<div class="page" data-name="settings">
|
||||||
|
|
||||||
|
<div class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="title"><i class="fas fa-cog"></i> Settings</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-content">
|
||||||
|
<div class="block">
|
||||||
|
<div class="row justify-content-center" id="settings-bin">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="fab fab-center-bottom">
|
||||||
|
<a href="#" class="back">
|
||||||
|
<i class="fas fa-2x fa-times"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/settings.js"></script>
|
||||||
|
|
||||||
|
</div>
|
||||||
Loading…
Reference in New Issue