first bit of work on login

src/client/css/colors.less

@@ -14,8 +14,8 @@
 @red: #d43346;
 @blue: #3fa7dd;
 @green: #80f643;
-
 @greenB: #4ac441;
+@greenC: #386646;
 
 @blackA: #505360;
 @blackB: #3c3f4c;

src/client/js/rendering/renderer.js

@@ -154,14 +154,43 @@ define([
 
 			for (var i = 0; i < w; i++) {
 				for (var j = 0; j < h; j++) {
+					var ii = i / 10;
+					var alpha = Math.sin(((j * 0.2) % 4) + Math.cos(ii % 8));
 					var tile = 5;
-					if (Math.random() < 0.4)
-						tile = 6;
-					var tile = new pixi.Sprite(this.getTexture('sprites', tile));
+					if (j < 7)
+						tile = 5;
+					else if ((j > 18) && (alpha >= 0.2))
+						tile = 3;
+					else if (alpha < -0.2)
+						tile = 3;
+					else if (alpha < 0.2)
+						tile = 4;
+					else if ((alpha < 0.5) && (j > 7))
+						tile = 53;
+
+					alpha = Math.random();
 
-					var alpha = Math.sin((i % 4) + Math.cos(j % 8));
 					if (tile == 5)
-						alpha /= 2;
+						alpha *= 2;
+					else if (tile == 3)
+						alpha *= 1;
+					else if (tile == 4)
+						alpha *= 1;
+					else if (tile == 53)
+						alpha *= 2;
+
+					alpha = Math.min(Math.max(0.1, alpha), 0.8);
+
+					if (Math.random() < 0.35) {
+						tile = {
+							'5': 6,
+							'3': 0,
+							'4': 1,
+							'53': 54
+						}[tile];
+					}
+
+					var tile = new pixi.Sprite(this.getTexture('sprites', tile));
 
 					tile.alpha = alpha;
 					tile.position.x = i * scale;

src/client/ui/templates/login/login.js

@@ -29,6 +29,9 @@ define([
 				.eq(0).focus();
 
 			renderer.buildTitleScreen();
+
+			this.find('.extra, .version')
+				.appendTo($('<div class="uiLoginExtra"></div>>').appendTo('.ui-container'));
 		},
 
 		redirect: function(e) {

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

@@ -7,18 +7,18 @@
 @logoWidth: 559px;
 @logoHeight: 200px;
 
-@boxHeight: 370px;
+@boxHeight: 169px;
 
 @messageHeight: @boxPadding;
 
-@totalWidth: (@leftWidth + @rightWidth + (@boxPadding * 2));
+@totalWidth: @rightWidth;
 @totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight);
 
 .uiLogin {
 	display: none;
 	width: @totalWidth;
 	height: @totalHeight;
-	margin-top: -30px;
+	margin-top: -80px;
 
 	.logo {
 		width: 562px;
@@ -27,25 +27,30 @@
 		margin-bottom: (@boxPadding * 3);
 	}
 
-	.left, .right, .news {
+	.right {
 		height: @boxHeight;
 		float: left;
 		background-color: #3a3b4a;
-	}
-
-	.left {
-		width: @leftWidth;
-		padding: @boxPadding;
-	}
 
-	.right {
 		width: @rightWidth;
 		padding: @boxPadding;
-		margin-left: (@boxPadding * 2);
+
+		.label, input {
+			float: left;
+		}
+
+		.label {
+			width: 30%;
+			padding-top: 10px;
+			color: @green;
+		}
+
+		input {
+			width: 70%;
+		}
 
 		input, .textbox, input:-webkit-autofill {
 		    box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset;
-			width: 100%;
 			color: @white;
 			-webkit-text-fill-color: @white;
 			margin-bottom: @boxPadding;
@@ -54,7 +59,6 @@
 		/* We duplicate this for firefox which doesn't like the webkit selector */
 		input, .textbox {
 		    box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset;
-			width: 100%;
 			color: @white;
 			-webkit-text-fill-color: @white;
 			margin-bottom: @boxPadding;
@@ -62,11 +66,26 @@
 
 		.message {
 			height: @messageHeight;
-			width: 100%;
-			margin-top: @boxPadding;
+			width: 200%;
+			margin-left: -50%;
+			margin-top: 36px;
 			float: left;
 			text-align: center;
-			color: @redA;
+			color: @orange;
+
+			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 {
@@ -89,52 +108,41 @@
 				}
 			}
 		}
+	}
 
-		.buttons {
-			width: 100%;
-			height: 35px;
-			margin-top: 80px;
-
-			.button {
-				width: 100%;
-				margin-bottom: calc(@boxPadding / 2);
-				background-color: @blueC;
-				color: @white;
-
-				&:hover {
-					background-color: @blueB;
-				}
-			}
-		}
+	.spacer-h {
+		height: 61px;
 	}
+}
 
-	.news {
-		width: @leftWidth;
-		padding: @boxPadding;
+.uiLoginExtra {
+	.extra {
+		position: absolute;
+		left: 10px;
+		bottom: 10px;
 
-		.heading {
-			background-color: @grayD;
+		.button {
+			padding-left: 10px;
+			padding-right: 10px;
 			width: 100%;
+			margin-bottom: 10px;
+			background-color: @blueD;
 			color: @white;
-			margin-bottom: 8px;
-			text-align: center;
-			height: 35px;
-			padding-top: 9px;
-		}
 
-		.list {
-			overflow-y: auto;
-			padding: 16px;
+			&:last-child {
+				margin-bottom: 0px;
+			}
 
-			.item {
-				text-align: justify;
-				color: @grayB;
-				margin-bottom: 22px;
+			&:hover {
+				background-color: @blueC;
 			}
 		}
 	}
 
-	.spacer-h {
-		height: 61px;
+	.version {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+		color: @yellow;
 	}
 }

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

@@ -1,28 +1,20 @@
 <div class="uiLogin">
 	<img class="logo" src="images/logo_4.png" alt="">
-	<div class="news">
-		<div class="heading">what's new</div>
-		<div class="list">
-			<div class="item">Faction Quartermasters</div>
-			<div class="item">New Unlockable Skin</div>
-			<div class="item">New Map: City Sewer</div>
-			<div class="item">Factions and Reputations</div>
-			<div class="item">You can now filter the chat window</div>
-			<div class="item">Prophecies. When creating a new character you can choose which prophecies to apply. This includes a permadeath prophecy called 'hardcore'.</div>
-		</div>
-	</div>
 	<div class="right">
+		<div class="label">username</div>
 		<input type="text" class="el textbox txtUsername" placeholder="username">
+		<div class="label">password</div>
 		<input type="password" class="el textbox txtPassword" placeholder="password">
 		<div class="top-buttons">
 			<div class="el button btnRegister">register</div>
 			<div class="el button btnLogin">login</div>
 		</div>
 		<div class="message"></div>
-		<div class="buttons">
-			<div class="el button btnPatreon" location="http://patreon.com/bigbadwaffle">Pledge on Patreon</div>
-			<div class="el button btnPaypal" location="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BR2CC82WUAVEA">Donate on Paypal</div>
-			<div class="el button btnWiki" location="http://isleward.gamepedia.com/Isleward_Wiki">Access the Wiki</div>
-		</div>
 	</div>
+	<div class="extra">
+		<div class="el button btnPatreon" location="http://patreon.com/bigbadwaffle">Pledge on Patreon</div>
+		<div class="el button btnPaypal" location="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BR2CC82WUAVEA">Donate on Paypal</div>
+		<div class="el button btnWiki" location="http://isleward.gamepedia.com/Isleward_Wiki">Access the Wiki</div>
+	</div>
+	<div class="version">v0.1.3</div>
 </div>