From 9e54b5f3b83ed8dade009f35ec4d78dcf522ee1d Mon Sep 17 00:00:00 2001
From: Chord <chord@tuta.io>
Date: Thu, 14 May 2020 19:51:22 +0200
Subject: [PATCH] Improve home page layout and CharacterLinks

---
 app/components/CharacterLink.svelte | 25 ++++++++++---------------
 app/components/EmpireStats.svelte   | 16 ++++++++++++++++
 app/components/FactionIcon.svelte   | 13 +++++++++++++
 app/views/Home.svelte               | 10 +++++-----
 app/views/Login.svelte              |  2 +-
 app/views/Register.svelte           |  2 +-
 6 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 app/components/FactionIcon.svelte

diff --git a/app/components/CharacterLink.svelte b/app/components/CharacterLink.svelte
index 3c74b43..debb8c4 100644
--- a/app/components/CharacterLink.svelte
+++ b/app/components/CharacterLink.svelte
@@ -1,25 +1,20 @@
 <script>
 	import { isAdmin } from '../UserState'
+	import FactionIcon from './FactionIcon'
 	export let character;
 </script>
 
 <style>
 </style>
 
-<span class="character-link">
-	<span class="faction-icon">
-	{#if character.faction_id == 1}
-	<img height=32 src="/img/nc_icon.png" alt="NC" />
-	{:else if character.faction_id == 0}
-	<img height=32 src="/img/tr_icon.png" alt="TR" />
-	{:else if character.faction_id == 2}
-	<img height=32 src="/img/vs_icon.png" alt="VS" />
-	{/if}
-	</span>
-
-	{#if $isAdmin}
-	<a href="/user/{character.account_id}">{character.name}</a>
-	{:else}
+{#if $isAdmin}
+<a class="character-link" href="/user/{character.account_id}">
+	<FactionIcon {character} />
+	<span>{character.name}</span>
+</a>
+{:else}
+<span class="character-link">
+	<FactionIcon {character} />
 	<span>{character.name}</span>
-	{/if}
 </span>
+{/if}
diff --git a/app/components/EmpireStats.svelte b/app/components/EmpireStats.svelte
index 56427c9..2f3596c 100644
--- a/app/components/EmpireStats.svelte
+++ b/app/components/EmpireStats.svelte
@@ -72,6 +72,21 @@
   position: relative;
 }
 
+.empire-stats:before {
+    content: ' ';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    opacity: 0.4;
+    background-image: url('/img/logo_crop.png');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
 .empire-stat {
   border: 1px solid white;
   border-bottom: 0;
@@ -80,6 +95,7 @@
   text-align: center;
   min-width: 50px;
   min-height: 3em;
+  text-shadow: 2px 2px #000000;
 }
 
 .empire-stat:nth-child(2) {
diff --git a/app/components/FactionIcon.svelte b/app/components/FactionIcon.svelte
new file mode 100644
index 0000000..9c6fd1d
--- /dev/null
+++ b/app/components/FactionIcon.svelte
@@ -0,0 +1,13 @@
+<script>
+	export let character;
+</script>
+
+<span class="faction-icon">
+{#if character.faction_id == 1}
+<img height=32 src="/img/nc_icon.png" alt="NC" />
+{:else if character.faction_id == 0}
+<img height=32 src="/img/tr_icon.png" alt="TR" />
+{:else if character.faction_id == 2}
+<img height=32 src="/img/vs_icon.png" alt="VS" />
+{/if}
+</span>
diff --git a/app/views/Home.svelte b/app/views/Home.svelte
index 1c0ad21..66055b1 100644
--- a/app/views/Home.svelte
+++ b/app/views/Home.svelte
@@ -96,6 +96,11 @@
 	<h2>Online Players ({players.length})</h2>
 	<p>Next update in {next_update_label}</p>
 	</div>
+	<div class="col-md-4 col-12 mt-md-0 mt-3">
+		{#if stats.empires}
+		<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
+		{/if}
+	</div>
 	<div class="col-md-8 col-12">
 		<div class="row">
 			{#each players as char, i}
@@ -104,10 +109,5 @@
 		</div>
 
 	</div>
-	<div class="col-md-4 col-12 mt-md-0 mt-3">
-		{#if stats.empires}
-		<EmpireStats bind:this={empire_stats} bind:stats={stats.empires} />
-		{/if}
-	</div>
 </div>
 {/if}
diff --git a/app/views/Login.svelte b/app/views/Login.svelte
index 8aa7794..3d2372d 100644
--- a/app/views/Login.svelte
+++ b/app/views/Login.svelte
@@ -85,7 +85,7 @@
       <label for="inputPassword">Password</label>
       <input class="form-control" type="password" id="inputPassword" placeholder="Password" name="password" required>
     </div>
-    <button type="submit">Login</button>
+    <button type="submit" class="btn btn-primary">Login</button>
   </form>
   <p><a href="/recovery">Forgot username/password?</a></p>
 </main>
diff --git a/app/views/Register.svelte b/app/views/Register.svelte
index 13deb27..92ab742 100644
--- a/app/views/Register.svelte
+++ b/app/views/Register.svelte
@@ -106,6 +106,6 @@
 				<div class="invalid-feedback">Email addresses must match.</div>
 			</div>
 		</div>
-		<button type="submit">Join the fight!</button>
+		<button type="submit" class="btn btn-primary">Join the fight!</button>
 	</form>
 </main>