progress

app/bloonsa_game/static/bloonsa_game/css/levelinfo.css

@@ -24,7 +24,7 @@
 #level-title, #level-author, #level-stars, #level-stats,
 #level-pb-text, #level-pb-pops, #level-pb-darts {
   display: flex;
-  flex-grow: 1;
+  flex: 1;
 }
 
 #level-title, #level-author, #level-pb-darts {
@@ -42,8 +42,11 @@
   text-align: left;
 }
 
-#level-wins, #level-plays, #level-glitches {
-  flex-grow: 1;
+#level-plays, #level-glitches {
+  flex: 1;
+}
+#level-wins {
+    flex: 2;
 }
 
 #level-info-right {

app/bloonsa_game/static/bloonsa_game/css/profilebox.css

@@ -0,0 +1,60 @@
+#profile-box {
+  height: 90px;
+  width: 244px;
+  background-color: #536DFE;
+  display: flex;
+  flex-direction: row;
+  font-family: "Comic Sans MS", "Comic Sans", cursive;
+  color: white;
+  position: relative;
+  overflow: hidden;
+    float: right;
+    margin: 10px;
+}
+
+#avatar {
+  display: block;
+  height: 64px;
+  width: 64px;
+  margin: 10px;
+  border-style: solid;
+  border-width: 4px;
+  border-color: black;
+}
+
+#profile-user {
+    display: flex;
+    flex-direction: column;
+}
+
+#profile-username {
+  font-size: 16px;
+  white-space: nowrap;
+  text-align: center;
+}
+
+#profile-plays, #profile-clears {
+    text-align: right;
+    text-decoration: none;
+    border: none;
+}
+
+#profile-plays-img, #profile-clears-img {
+  height: 18px;
+  width: 18px;
+  margin: 2px;
+}
+
+#profile-buttons {
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  padding: 0;
+}
+
+#profile-settings-button, #profile-logout-button {
+    background-color: #536DFE;
+    color: white;
+    border: 2px solid grey;
+    font-family: inherit;
+}

app/bloonsa_game/static/bloonsa_game/js/flash_handler.js

@@ -90,8 +90,8 @@ function bloonsa_update_html(r) {
     }
 
     // Profile
-    document.getElementById("levels_played").textContent = r.bloonsa_levels_played;
-    document.getElementById("levels_beaten").textContent = r.bloonsa_levels_beaten;
-    document.getElementById("total_levels").textContent = r.bloonsa_total_levels;
-
+    document.getElementById("profile-plays-number").textContent = r.bloonsa_levels_played;
+    document.getElementById("profile-clears-number").textContent = r.bloonsa_levels_beaten;
+    document.getElementById("profile-plays-max").textContent = r.bloonsa_total_levels;
+    document.getElementById("profile-clears-max").textContent = r.bloonsa_total_levels;
 }

app/bloonsa_game/templates/bloonsa_game/modules/profilebox.html

@@ -1,10 +1,40 @@
 {% load bloonsa_game_tags %}
-<div id="profile_box">
-  <h3 id="username">{{ user }}</h3>
-    <div class="profile_text">Levels played: </div>
-    <div id="levels_played">{{ player.bloonsa_levels_played_count }}</div><br>
-    <div class="profile_text">Levels beaten: </div>
-    <div id="levels_beaten">{{ player.bloonsa_levels_beaten_count }}</div>
-    <div class="profile_text"> / </div><div id="total_levels">{{ total_levels }}</div><br>
-  <a href="/users/logout" id="logout_button"><b>Logout</b></a>
+{% load static %}
+
+<link rel="stylesheet" type="text/css" media="screen" href="{% static 'bloonsa_game/css/profilebox.css' %}"/>
+
+<div id="profile-box">
+  <div id="avatar-box">
+    <img id="avatar" src="{% static 'bloonsa_game/img/profilebox/user.png' %}">
+  </div>
+
+  <div id="profile-user">
+    <div id="profile-username">{{ user }}</div>
+    <div id="profile-plays">
+      <object data="{% static 'bloonsa_game/img/levelinfo/plays.svg' %}"
+              class="level-plays-img filter-grey"
+              id="profile-plays-img"
+              type="image/svg+xml"></object>
+      <span id="profile-plays-number">{{ player.bloonsa_levels_played_count }}</span>
+      <span id="profile-plays-separator"> / </span>
+      <span id="profile-plays-max">{{ total_levels }}</span>
+    </div>
+    <div id="profile-clears">
+      <object data="{% static 'bloonsa_game/img/levelinfo/wins.svg' %}"
+                    class="level-wins-img filter-orange"
+                    id="profile-clears-img"
+                    type="image/svg+xml"></object>
+      <span id="profile-clears-number">{{ player.bloonsa_levels_beaten_count }}</span>
+      <span id="profile-clears-separator"> / </span>
+      <span id="profile-clears-max">{{ total_levels }}</span>
+    </div>
+
+  </div>
+  <div id="profile-buttons">
+    <button id="profile-settings-button">settings</button>
+    <a href="/users/logout">
+      <button id="profile-logout-button">logout</button>
+    </a>
+  </div>
+
 </div>