feat: first profile picture
authorxangelo <me@xangelo.ca>
Fri, 28 Jul 2023 19:35:10 +0000 (15:35 -0400)
committerxangelo <me@xangelo.ca>
Fri, 28 Jul 2023 19:35:10 +0000 (15:35 -0400)
public/assets/css/game.css
public/assets/img/profile-pics/warrior-1.jpg [new file with mode: 0644]
public/index.html

index d5a39f8db357559413b5c59eee8a5977a81056a3..de43ba4bf48c6bb9f9af494ef07f296c487a37fd 100644 (file)
@@ -100,16 +100,19 @@ section {
 }
 
 .avatar-container {
-  width: 64px;
-  height: 64px;
+  max-width: 128px;
 }
 #avatar {
   width: 100%;
 }
-#stat-summary {
+header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   border: 0;
+  margin-bottom: 1rem;
+}
+#player-info {
+  width: 100%;
 }
 #player-section {
   display: flex;
diff --git a/public/assets/img/profile-pics/warrior-1.jpg b/public/assets/img/profile-pics/warrior-1.jpg
new file mode 100644 (file)
index 0000000..de2e4af
Binary files /dev/null and b/public/assets/img/profile-pics/warrior-1.jpg differ
index fdebbbb5596f1eb9d9f087f994681368095ecf9f..a8eac157b3899271dd4b3b2f2855d523d637dc0d 100644 (file)
   <body>
     <section id="time-of-day"></section>
     <div id="view">
-      <section id="stat-summary">
+      <header>
         <div class="avatar-container">
-          <img id="avatar" src="https://via.placeholder.com/64x64">
+          <img id="avatar" src="/assets/img/profile-pics/warrior-1.jpg">
         </div>
-        <div id="stat-bars">
-          <div id="player-section">
-            <div id="username"></div>
-            <div class="gold"></div>
+        <div id="player-info">
+          <div id="stat-bars">
+            <div id="player-section">
+              <div id="username"></div>
+              <div class="gold"></div>
+            </div>
+            <div id="ap-bar"></div>
+            <div class="progress-bar" id="hp-bar"></div>
+            <div class="progress-bar" id="exp-bar"></div>
           </div>
-          <div id="ap-bar"></div>
-          <div class="progress-bar" id="hp-bar"></div>
-          <div class="progress-bar" id="exp-bar"></div>
+          <nav>
+            <li><a href="#" data-section="inventory" data-container="main-nav">Profile</a></li>
+            <li><a href="#" data-section="skills" data-container="main-nav">Skills</a></li>
+            <li><a href="#" data-section="explore" data-container="main-nav">Explore</a></li>
+          </nav>
         </div>
-      </section>
-      <nav>
-        <li><a href="#" data-section="inventory" data-container="main-nav">Profile</a></li>
-        <li><a href="#" data-section="skills" data-container="main-nav">Skills</a></li>
-        <li><a href="#" data-section="explore" data-container="main-nav">Explore</a></li>
-      </nav>
+      </header>
 
       <div id="signup-prompt" class="hidden"></div>
       <div id="announcements" class="hidden"></div>