feat: Enhance HealthBar component with clickable opponent usernames

- Added a new prop, isOpponent, to the HealthBar component to conditionally render opponent usernames as clickable links.
- Implemented styling for the links to improve user interaction and navigation to opponent profiles.
- Updated gameUI component to pass the isOpponent prop for the relevant player.
- Minor text change in user.js for improved clarity in navigation button.

Author: codergautam

components/duelHealthbar.js

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { getLeague } from './utils/leagues';
+import Link from 'next/link';
 
 const easeOutElastic = (t) => {
   const c4 = (2 * Math.PI) / 3;
@@ -16,7 +17,7 @@ const easeOutBack = (t) => {
   return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
 };
 
-const HealthBar = ({ health, maxHealth, name, elo, start, isStartingDuel }) => {
+const HealthBar = ({ health, maxHealth, name, elo, start, isStartingDuel, isOpponent = false }) => {
   const [displayHealth, setDisplayHealth] = useState(health);
   const [prevHealth, setPrevHealth] = useState(health);
   const [isAnimating, setIsAnimating] = useState(false);
@@ -101,7 +102,30 @@ const HealthBar = ({ health, maxHealth, name, elo, start, isStartingDuel }) => {
 
       <div className={`player-info-modern ${isStartingDuel ? 'starting' : ''}`}>
         <div className="player-name-wrapper">
-          <span className="player-name">{name}</span>
+          {isOpponent && name ? (
+            <Link 
+              href={`/user?u=${encodeURIComponent(name)}`}
+              target="_blank"
+              className="player-name"
+              style={{ 
+                color: 'white',
+                textDecoration: 'underline',
+                cursor: 'pointer',
+                transition: 'opacity 0.2s ease',
+                pointerEvents: 'auto'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.opacity = '0.8';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.opacity = '1';
+              }}
+            >
+              {name}
+            </Link>
+          ) : (
+            <span className="player-name">{name}</span>
+          )}
           {elo && (
             <span 
               className="player-elo" 

components/gameUI.js

@@ -531,7 +531,7 @@ isStartingDuel={isStartingDuel}
 name={
 // get your name from the game state
 multiplayerState?.gameData?.players.find(p => p.id !== multiplayerState?.gameData?.myId)?.username
-} elo={multiplayerState?.gameData?.players.find(p => p.id !== multiplayerState?.gameData?.myId)?.elo} start={true || isStartingDuel} />
+} elo={multiplayerState?.gameData?.players.find(p => p.id !== multiplayerState?.gameData?.myId)?.elo} start={true || isStartingDuel} isOpponent={true} />
 </div>
 </div>
 

pages/user.js

@@ -190,7 +190,7 @@ export default function UserProfilePage() {
             className="back-to-wg-button"
             onClick={() => router.push('/')}
           >
-            ← Back to WorldGuessr
+            ← Go to WorldGuessr
           </button>
         </div>