Profiles!

database/create/live.sql

@@ -43,7 +43,8 @@ CREATE TABLE characters (
 	`fer` INTEGER NOT NULL DEFAULT 0,  -- Ferocity
 	`luck` INTEGER NOT NULL DEFAULT 0, -- Luck
 	`inv_slots` INTEGER NOT NULL DEFAULT 10,
-	`att_points` INTEGER NOT NULL DEFAULT 0
+	`att_points` INTEGER NOT NULL DEFAULT 0,
+	`bio` TEXT DEFAULT ''
 );
 CREATE INDEX idx_characters_user_id ON characters (`user_id`);
 

public/assets/css/build.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+if ! command -v bun &> /dev/null
+then
+    echo "Bun is not installed. Please install it from https://bun.sh"
+    exit 1
+fi
+
+if ! command -v entr &> /dev/null
+then
+    echo "entr is not installed. Installing entr..."
+    # For Debian/Ubuntu-based systems
+    if [[ -x "$(command -v apt)" ]]; then
+        sudo apt update && sudo apt install entr -y
+    # For Red Hat-based systems
+    elif [[ -x "$(command -v yum)" ]]; then
+        sudo yum install entr -y
+    # For macOS with Homebrew
+    elif [[ -x "$(command -v brew)" ]]; then
+        brew install entr
+    else
+        echo "Package manager not supported. Please install entr manually."
+        exit 1
+    fi
+fi
+
+echo "Running 'find src/ | entr -s \"bunx lightningcss-cli --minify --bundle src/main.css -o dragon.css\"'..."
+find src/ | entr -s 'bunx lightningcss-cli --minify --bundle src/main.css -o dragon.css'

public/assets/css/src/main.css

@@ -41,6 +41,7 @@ header#main-header {
 main {
 	padding: 1rem;
 	width: 100%;
+	min-width: 968px;
 	display: flex;
 	gap: 2rem;
 

public/assets/css/src/profile.css

@@ -8,9 +8,13 @@ section.profile {
 			text-transform: uppercase;
 			font-size: 1rem;
 		}
+
+		h4 {
+			font-size: 0.75rem;
+		}
 	}
 
-	div.grid {
+	& > div.grid {
 		display: flex;
 		gap: 1rem;
 
@@ -36,14 +40,31 @@ section.profile {
 		text-align: center;
 		text-transform: uppercase;
 		color: rgba(0, 0, 0, 0.3);
+		margin-bottom: 0.5rem;
 	}
 
 	div.stats {
-		& > div {
+		& > .grid {
-			color: white;
+			display: grid;
-			background-color: rgba(0, 0, 0, 0.3);
+			grid-template-columns: 1fr 1fr;
-			border-radius: 0.15rem;
+			gap: 0.25rem;
-			padding: 0.25rem;
+
+			& > div.cell {
+				color: white;
+				background: rgba(0, 0, 0, 0.3);
+				border-radius: 0.15rem;
+				padding: 0.25rem 0.5rem;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.label {
+					font-size: 0.75rem;
+					text-transform: uppercase;
+					color: rgba(255, 255, 255, 0.75);
+					margin-right: 0.25rem;
+				}
+			}
 		}
 	}
 }

src/helpers.php

@@ -287,3 +287,16 @@ function title($title_id)
 {
 	return db_query(db_live(), 'SELECT * FROM titles WHERE id = :i', [':i' => $title_id])->fetchArray();
 }
+
+/**
+ * Abbreviate a number in text notation.
+ */
+function abb_num($num)
+{
+	$d = $num % 100 === 0 ? 0 : 1;
+	return match(true) {
+		$num >= 1000000000 => number_format($num / 1000000000, $d) . 'B',
+		$num >= 1000000 => number_format($num / 1000000, $d) . 'M',
+		default => number_format($num, 0)
+	};
+}

src/model/char.php

@@ -275,3 +275,10 @@ function char_get_title($char_id = 0)
     return $title;
 }
 
+/**
+ * Get the character's user data.
+ */
+function char_get_user($char)
+{
+	return user_find($char['user_id']);
+}

src/util/components.php

@@ -87,3 +87,11 @@ function c_debug_stopwatch()
 {
 	return render('components/debug_stopwatch');
 }
+
+/**
+ * Render a profile's stat grid using a character array.
+ */
+function c_profile_stats($char)
+{
+	return render('components/profile_stats', ['char' => $char]);
+}

templates/components/profile_stats.php

@@ -0,0 +1,17 @@
+<div class="stats">
+	<h4>Stats</h4>
+	<div class="grid">
+		<div class="cell"><span class="label">Max HP</span> <?= abb_num($char['m_hp']) ?></div>
+		<div class="cell"><span class="label">Max MP</span> <?= abb_num($char['m_mp']) ?></div>
+		<div class="cell"><span class="label">Power</span> <?= abb_num($char['pow']) ?></div>
+		<div class="cell"><span class="label">Accuracy</span> <?= abb_num($char['acc']) ?></div>
+		<div class="cell"><span class="label">Penetration</span> <?= abb_num($char['pen']) ?></div>
+		<div class="cell"><span class="label">Focus</span> <?= abb_num($char['foc']) ?></div>
+		<div class="cell"><span class="label">Toughness</span> <?= abb_num($char['tou']) ?></div>
+		<div class="cell"><span class="label">Armor</span> <?= abb_num($char['arm']) ?></div>
+		<div class="cell"><span class="label">Resist</span> <?= abb_num($char['res']) ?></div>
+		<div class="cell"><span class="label">Precision</span> <?= abb_num($char['pre']) ?></div>
+		<div class="cell"><span class="label">Ferocity</span> <?= abb_num($char['fer']) ?></div>
+		<div class="cell"><span class="label">Luck</span> <?= abb_num($char['luck']) ?></div>
+	</div>
+</div>

templates/pages/profile/main.php

@@ -1,7 +1,8 @@
 <section class="profile">
 	<header>
 		<h1><?= char('name') ?></h1>
-		<h3>Level <?= char('level') ?> <?= char_get_title()['name'] ?></h2>
+		<h3>Level <?= char('level') ?> <?= char_get_title()['name'] ?></h3>
+		<h4>You</h4>
 	</header>
 
 	<div class="grid">
@@ -10,15 +11,33 @@
 				<img src="/assets/img/rathalos.webp">
 			</div>
 
-			<div class="stats">
+			<?= c_profile_stats(char()) ?>
-				<h4>Stats</h4>
+
-				<div>Power: <?= char('power') ?></div>
+			<div class="badges">
+				<h4>Badges</h4>
+				@TODO
+			</div>
+
+			<div class="traits">
+				<h4>Traits</h4>
+				@TODO
 			</div>
 		</section>
 
 		<section class="right">
 			<div class="bio">
-				HELLO THERE MY FRIEND.
+				<h4>Biography</h4>
+				<?= char('bio') ?>
+			</div>
+
+			<div class="gear">
+				<h4>Equipped Gear</h4>
+				@TODO
+			</div>
+
+			<div class="inv">
+				<h4>Inventory</h4>
+				@TODO
 			</div>
 		</section>
 	</div>

templates/pages/profile/show.php

@@ -1,2 +1,23 @@
-<h1><?= $char['name'] ?><?php if ($char['user_id'] == user('id')): ?><span class="badge">Owned</span><?php endif; ?></h1>
+<section class="profile">
-other
+	<header>
+		<h1><?= $char['name'] ?></h1>
+		<h3>Level <?= $char['level'] ?> <?= char_get_title($char['id'])['name'] ?></h3>
+		<h4>owned by <?= $char['user_id'] === user('id') ? 'you' : char_get_user($char)['username'] ?></h4>
+	</header>
+
+	<div class="grid">
+		<section class="left">
+			<div class="avatar">
+				<img src="/assets/img/rathalos.webp">
+			</div>
+
+			<?= c_profile_stats($char) ?>
+		</section>
+
+		<section class="right">
+			<div class="bio">
+				HELLO THERE MY FRIEND.
+			</div>
+		</section>
+	</div>
+</section>