did some stuff for #1354

src/client/js/config.js

@@ -1,7 +1,7 @@
 define([
-
+	'js/system/browserStorage'
 ], function (
-
+	browserStorage
 ) {
 	const config = {
 		showNames: true,
@@ -31,13 +31,13 @@ define([
 	};
 
 	const getKeyName = key => {
-		return `iwd_opt_${key.toLowerCase()}`;
+		return `opt_${key}`;
 	};
 
 	config.set = (key, value) => {
 		config[key] = value;
 
-		window.localStorage.setItem(getKeyName(key), config[key]);
+		browserStorage.set(getKeyName(key), config[key]);
 	};
 
 	config.toggle = key => {
@@ -46,12 +46,11 @@ define([
 		else
 			config[key] = !config[key];
 
-		window.localStorage.setItem(getKeyName(key), config[key]);
+		browserStorage.set(getKeyName(key), config[key]);
 	};
 
 	const loadValue = key => {
-		const keyName = getKeyName(key);
-		const { [keyName]: currentValue = '{unset}' } = localStorage;
+		const currentValue = browserStorage.get(getKeyName(key));
 
 		if (currentValue === '{unset}')
 			return;

src/client/ui/factory.js

@@ -1,9 +1,13 @@
 define([
 	'ui/uiBase',
-	'js/system/events'
+	'js/system/events',
+	'js/system/globals',
+	'js/misc/tosAcceptanceValid'
 ], function (
 	uiBase,
-	events
+	events,
+	globals,
+	tosAcceptanceValid
 ) {
 	const startupUis = [
 		'inventory',
@@ -162,8 +166,13 @@ define([
 		},
 
 		afterPreload: function () {
-			this.build('terms', {});
-			//this.build('characters', {});
+			if (!globals.clientConfig.tos.required || tosAcceptanceValid()) {
+				this.build('characters');
+
+				return;
+			}
+
+			this.build('terms');
 		},
 
 		update: function () {

src/client/ui/templates/terms/styles.less

@@ -1,18 +1,9 @@
 @import "../../../css/colors.less";
-@leftWidth: 400px;
-@rightWidth: 400px;
-@boxPadding: 16px;
-@logoWidth: 559px;
-@logoHeight: 200px;
-@boxHeight: 169px;
-@messageHeight: @boxPadding;
-@totalWidth: @rightWidth;
-@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight);
 
 .uiTerms {
 	display: none;
 	width: 562px;
-	height: 475px;
+	height: 700px;
 	margin-top: -80px;
 	display: flex;
 	flex-direction: column;
@@ -24,97 +15,60 @@
 
 	.logo {
 		width: 562px;
-		height: @logoHeight;
-		margin-bottom: (@boxPadding * 3);
+		height: 200px;
+		margin-bottom: 24px;
 		filter: drop-shadow(0px -4px 0px @blackD) 
 		drop-shadow(0px 4px 0px @blackD)
 		drop-shadow(4px 0px 0px @blackD) 
 		drop-shadow(-4px 0px 0px @blackD);
 	}
 
-	.right {
-		height: @boxHeight;
-		background-color: #3a3b4a;
-		width: @rightWidth;
-		padding: @boxPadding;
-
-		.label {
-			width: 30%;
-			padding-top: 10px;
-			color: @green;
-		}
+	.heading {
+		color: @orangeA;
+		filter: drop-shadow(0px -4px 0px @blackD) 
+		drop-shadow(0px 4px 0px @blackD)
+		drop-shadow(4px 0px 0px @blackD) 
+		drop-shadow(-4px 0px 0px @blackD);
+		margin-bottom: 24px;
+	}
 
-		.message {
-			height: @messageHeight;
-			width: 200%;
-			margin-left: -50%;
-			margin-top: 36px;
-			float: left;
-			text-align: center;
-			color: @orangeA;
-			filter: brightness(100%)
-			drop-shadow(0px -4px 0px @blackD) 
-			drop-shadow(0px 4px 0px @blackD)
-			drop-shadow(4px 0px 0px @blackD) 
-			drop-shadow(-4px 0px 0px @blackD);
-			-moz-filter: brightness(100%)
-			drop-shadow(0px -4px 0px @blackD) 
-			drop-shadow(0px 4px 0px @blackD)
-			drop-shadow(4px 0px 0px @blackD) 
-			drop-shadow(-4px 0px 0px @blackD);
-		}
+	.content {
+		flex: 1;
+		width: 100%;
+		overflow-y: auto;
+		background-color: @blackC;
+		border: 5px solid @blackB;
+		padding: 10px;
+		color: @white;
+		text-align: justify;
+	}
 
-		.top-buttons {
-			width: 100%;
+	.buttons {
+		width: 100%;
+		background-color: @blackC;
+		display: flex;
+		justify-content: space-between;
+		border-style: solid;
+		border-color: @blackB;
+		border-width: 0px 5px 5px 5px;
+		padding: 5px;
+
+		.btn {
+			background-color: @blueC;
+			color: @white;
 			height: 35px;
+			padding-left: 10px;
+			padding-right: 10px;
 
-			.btn {
-				background-color: @blueC;
-				width: calc((100% - @boxPadding) / 2);
-				float: left;
-				margin-right: @boxPadding;
-				color: @white;
-
-				&:last-child {
-					margin-right: 0px;
-				}
-
-				&:hover {
-					background-color: @blueB;
-				}
-
-			}
-
-			.btnCancel {
-				background-color: @red;
-
-				&:hover {
-					background-color: lighten(@red, 15%);
-				}
+			&:hover {
+				background-color: @blueB;
 			}
-
 		}
-
-	}
-
-	.spacer-h {
-		height: 61px;
 	}
 
 }
 
-.mobile {
-	.uiLogin {
-		margin-top: 0px;
-
-		.logo {
-			margin-bottom: 30px;
-		}
-
-		.news {
-			margin-top: 20px;
-		}
-
-	}
-
+.mobile .uiTerms {
+	height: 80%;
+	margin-top: 0px;
 }

src/client/ui/templates/terms/template.html

@@ -1,10 +1,9 @@
 <div class="uiTerms">
     <img class="logo" src="images/logo_0.png" alt="">
-    <div class="right">
-        <div class="top-buttons">
-            <div class="el btn btnCancel">cancel</div>
-            <div class="el btn btnAccept">accept</div>
-        </div>
-        <div class="message"></div>
-    </div>
-</div>
+    <div class="heading">Terms of Service</div>
+	<div class="content"></div>
+	<div class="buttons">
+		<div class="el btn btnDecline">Decline</div>
+		<div class="el btn btnAccept" title="Please scroll to the bottom to accept">Accept</div>
+	</div>
+</div>

src/client/ui/templates/terms/terms.js

@@ -1,44 +1,42 @@
 define([
-    'js/system/events',
-    'js/system/client',
-    'ui/factory',
-    'html!ui/templates/terms/template',
-    'css!ui/templates/terms/styles',
-    'js/rendering/renderer',
-    'js/config'
+	'ui/factory',
+	'html!ui/templates/terms/template',
+	'css!ui/templates/terms/styles',
+	'js/system/globals',
+	'js/system/browserStorage'
 ], function (
-    events,
-    client,
-    uiFactory,
-    template,
-    styles,
-    renderer,
-    config
+	uiFactory,
+	template,
+	styles,
+	globals,
+	browserStorage
 ) {
-    return {
-        tpl: template,
-        centered: true,
+	return {
+		tpl: template,
+		centered: true,
 
-        postRender: function () {
-            this.tryAutoAccept();
+		postRender: function () {
+			const { clientConfig: { tos: { content, version } } } = globals;
+			const morphedContent = content.split('\n').join('<br />');
 
-            this.find('.btnCancel').on('click', this.cancel.bind(this));
-            this.find('.btnAccept').on('click', this.accept.bind(this));
-        },
+			const elHeading = this.find('.heading');
+			elHeading.html(`${elHeading.html()} (v${version})`);
 
-        tryAutoAccept: function () {
-            if (config.readTos)
-                this.accept();
-        },
+			this.find('.content').html(morphedContent);
 
-        cancel: function () {
-            window.location = window.location;
-        },
+			this.find('.btnDecline').on('click', this.onDeclineClick.bind(this));
+			this.find('.btnAccept').on('click', this.onAcceptClick.bind(this, version));
+		},
 
-        accept: function () {
-            config.set('readTos', true);
-            this.destroy();
-            uiFactory.build('characters', {});
-        }
-    };
+		onDeclineClick: function () {
+			window.location = window.location;
+		},
+
+		onAcceptClick: function (version) {
+			browserStorage.set('tos_accepted_version', version);
+			this.destroy();
+
+			uiFactory.build('characters');
+		}
+	};
 });

src/server/config/clientConfig.js

@@ -1,4 +1,5 @@
-let events = require('../misc/events');
+const events = require('../misc/events');
+const tos = require('./tos');
 
 const config = {
 	resourceList: [],
@@ -6,7 +7,8 @@ const config = {
 	contextMenuActions: {
 		player: [],
 		npc: []
-	}
+	},
+	tos
 };
 
 module.exports = {
@@ -14,6 +16,7 @@ module.exports = {
 		events.emit('onBeforeGetResourceList', config.resourceList);
 		events.emit('onBeforeGetUiList', config.uiList);
 		events.emit('onBeforeGetContextMenuActions', config.contextMenuActions);
+		events.emit('onBeforeGetTermsOfService', config.tos);
 	},
 
 	getClientConfig: function (msg) {

src/server/config/serverConfig.js

@@ -8,7 +8,7 @@ module.exports = {
 	// sqlite
 	// rethink
 	//eslint-disable-next-line no-process-env
-	db: process.env.IWD_DB || 'rethink',
+	db: process.env.IWD_DB || 'sqlite',
 	//eslint-disable-next-line no-process-env
 	dbHost: process.env.IWD_DB_HOST || 'localhost',
 	//eslint-disable-next-line no-process-env