Merge branch '1354-terms-screen' into '1354-terms-of-service'

Resolve "Add a Terms of Service screen"

See merge request Isleward/isleward!443

src/client/js/config.js

@@ -10,7 +10,8 @@ define([
 		playAudio: true,
 		qualityIndicators: 'off',
 		unusableIndicators: 'off',
-		rememberChatChannel: true
+		rememberChatChannel: true,
+		readTos: false
 	};
 
 	const valueChains = {

src/client/ui/factory.js

@@ -162,7 +162,8 @@ define([
 		},
 
 		afterPreload: function () {
-			this.build('characters', {});
+			this.build('terms', {});
+			//this.build('characters', {});
 		},
 
 		update: function () {

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

@@ -0,0 +1,120 @@
+@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;
+	margin-top: -80px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	> * {
+		flex-shrink: 0;
+	}
+
+	.logo {
+		width: 562px;
+		height: @logoHeight;
+		margin-bottom: (@boxPadding * 3);
+		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;
+		}
+
+		.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);
+		}
+
+		.top-buttons {
+			width: 100%;
+			height: 35px;
+
+			.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%);
+				}
+			}
+
+		}
+
+	}
+
+	.spacer-h {
+		height: 61px;
+	}
+
+}
+
+.mobile {
+	.uiLogin {
+		margin-top: 0px;
+
+		.logo {
+			margin-bottom: 30px;
+		}
+
+		.news {
+			margin-top: 20px;
+		}
+
+	}
+
+}

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

@@ -0,0 +1,10 @@
+<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>

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

@@ -0,0 +1,44 @@
+define([
+    'js/system/events',
+    'js/system/client',
+    'ui/factory',
+    'html!ui/templates/terms/template',
+    'css!ui/templates/terms/styles',
+    'js/rendering/renderer',
+    'js/config'
+], function (
+    events,
+    client,
+    uiFactory,
+    template,
+    styles,
+    renderer,
+    config
+) {
+    return {
+        tpl: template,
+        centered: true,
+
+        postRender: function () {
+            this.tryAutoAccept();
+
+            this.find('.btnCancel').on('click', this.cancel.bind(this));
+            this.find('.btnAccept').on('click', this.accept.bind(this));
+        },
+
+        tryAutoAccept: function () {
+            if (config.readTos)
+                this.accept();
+        },
+
+        cancel: function () {
+            window.location = window.location;
+        },
+
+        accept: function () {
+            config.set('readTos', true);
+            this.destroy();
+            uiFactory.build('characters', {});
+        }
+    };
+});