Browse Source

Add settings and credits pages (closes #3), move chat JS to own file

master
Skylar Ittner 2 years ago
parent
commit
d2961066e3
  1. 6
      ART_CREDITS.md
  2. 2
      LICENSE.md
  3. 93
      www/art-credits.html
  4. 3102
      www/code-credits.txt
  5. 11
      www/css/app.css
  6. 178
      www/js/chat.js
  7. 170
      www/js/home.js
  8. 5
      www/js/main.js
  9. 56
      www/js/settings.js
  10. 33
      www/pages/credits.html
  11. 3
      www/pages/home.html
  12. 28
      www/pages/settings.html
  13. 91
      www/routes.js

6
ART_CREDITS.md

@ -1,13 +1,11 @@
Art Credits
===========
Map data copyright [OpenMapTiles](http://www.openmaptiles.org/)
and [OpenStreetMap contributors](http://www.openstreetmap.org/about/).
Map data copyright [OpenMapTiles](http://www.openmaptiles.org/) and [OpenStreetMap contributors](http://www.openstreetmap.org/about/).
-----
[Game Icons Font](https://github.com/seiyria/gameicons-font)
by Kyle J. Kemp ([@seiyria](https://github.com/seiyria))
[Game Icons Font](https://github.com/seiyria/gameicons-font) by Kyle J. Kemp ([@seiyria](https://github.com/seiyria))
[Game icons](https://game-icons.net) used in the aforementioned font made by:
- Lorc, http://lorcblog.blogspot.com

2
LICENSE.md

@ -1,4 +1,4 @@
Copyright (c) 2016-2019 Netsyms Technologies. Some rights reserved.
Copyright (c) 2014-2019 Netsyms Technologies. Some rights reserved.
Licensed under the Mozilla Public License Version 2.0. Files without MPL header
comments, including third party code, may be under a different license.

93
www/art-credits.html

@ -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>

3102
www/code-credits.txt
File diff suppressed because it is too large
View File

11
www/css/app.css

@ -10,4 +10,15 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
.popup {
overflow-y: scroll;
}
#settings-bin .card {
text-align: center;
min-height: 250px;
position: relative;
}
#settings-bin .card .item-icon {
font-size: 6em;
height: 1.23em;
}

178
www/js/chat.js

@ -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();
}
});

170
www/js/home.js

@ -84,172 +84,4 @@ function scanCode() {
disableSuccessBeep: true
}
);
}
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");
} 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();
}
})
}

5
www/js/main.js

@ -38,6 +38,11 @@ function restartApplication() {
window.location = "index.html";
}
function logout() {
localStorage.clear();
restartApplication();
}
router.on("pageInit", function (pagedata) {
pagedata.$el.find('script').each(function (el) {
if ($$(this).attr('src')) {

56
www/js/settings.js

@ -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 &copy; 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>');
});
}

33
www/pages/credits.html

@ -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>

3
www/pages/home.html

@ -72,7 +72,7 @@
<i class="fas fa-2x fa-user-circle"></i><br />
Profile
</div>
<div class="col-50 mainmenu-item mainmenu-item-sm">
<div class="col-50 mainmenu-item mainmenu-item-sm popup-close" onclick="router.navigate('/settings');">
<i class="fas fa-2x fa-cog"></i><br />
Settings
</div>
@ -109,6 +109,7 @@
</div>
<script src="js/map.js"></script>
<script src="js/chat.js"></script>
<script src="js/home.js"></script>
</div>

28
www/pages/settings.html

@ -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>

91
www/routes.js

@ -59,56 +59,55 @@ var routes = [
},
{
path: '/settings',
name: 'prefs',
async: function (routeTo, routeFrom, resolve, reject) {
var username = localStorage.getItem("username");
if (username == null) {
username = "Not logged in";
}
var serverurl = localStorage.getItem("serverurl");
if (serverurl == null) {
serverurl = "None";
}
resolve({
templateUrl: './pages/settings.html'
}, {
context: {
settings: [{
setting: "userinfo",
title: '<i class="fa fa-user"></i> <span id="username">' + username + '</span>',
text: '',
onclick: ""
},
{
setting: "account",
title: "Sign out",
onclick: "router.navigate('/setup/0')"
},
{
setting: "versions",
title: "TerranQuest v2.0.0",
text: "Copyright &copy; 2018-2019 Netsyms Technologies. License: <span style=\"text-decoration: underline;\" onclick=\"openBrowser('https://source.netsyms.com/Netsyms/HelpingHelenaApp?pk_campaign=HelpingHelenaApp');\">Mozilla Public License 2.0</span>.",
onclick: ""
},
{
setting: "opensource",
title: "Open Source Information",
text: "",
onclick: "router.navigate('/credits')"
},
{
setting: "privacy",
title: "Privacy Policy",
text: "",
onclick: "openBrowser('" + SETTINGS["terms_of_service_url"] + "')"
}]
name: 'settings',
templateUrl: './pages/settings.html',
on: {
pageAfterIn: function () {
function tryToLoadSettings() {
if (typeof loadSettings != "function") {
setTimeout(loadSettings, 500);
} else {
loadSettings();
}
}
});
tryToLoadSettings();
}
}
},
{
path: '/credits',
url: './pages/credits.html',
name: 'credits'
name: 'credits',
async: function (routeTo, routeFrom, resolve, reject) {
$.ajax({
url: 'code-credits.txt',
dataType: 'text',
type: 'GET',
async: true,
success: function (codecredits) {
$.ajax({
url: 'art-credits.html',
dataType: 'text',
type: 'GET',
async: true,
success: function (artcredits) {
resolve({
templateUrl: './pages/credits.html'
}, {
context: {
artcredits: artcredits,
codecredits: codecredits
}
});
},
error: function (jqXHR, status, errorThrown) {
reject();
}
});
},
error: function (jqXHR, status, errorThrown) {
reject();
}
});
}
}
];
Loading…
Cancel
Save