Announcement card test

client/src/ui/AnnouncementCard.tsx

@@ -0,0 +1,39 @@
+import { AccountState } from "../redux/account/slice";
+import ValueCnt from "./ValueCnt";
+import GemImg from '../assets/img/gem.png';
+import UltimacyImg from '../assets/img/ultimacy.png';
+import XPImg from '../assets/img/xp.png';
+import { Link } from "react-router-dom";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faUser } from "@fortawesome/free-solid-svg-icons";
+
+export default function AccountCard({account, onLogin, onSignup,}: {account: AccountState, onLogin: () => void, onSignup: () => void}) {
+  if(account.isLoggedIn) {
+    return (
+      <span id="logged-in">
+        <h1>{account.username}</h1>
+        <br></br>
+        <div className="stats">
+        <p>         </p><p>         </p><p>         </p><p>         </p><p>         </p><p>         </p><ValueCnt scale={0.5} value={account.gems} img={GemImg}/>
+        </div>
+        <br></br>
+        <div className="stats">
+        <p>         </p><p>         </p><p>         </p><p>         </p><p>         </p><p>         </p><ValueCnt scale={0.5} value={account.ultimacy} img={UltimacyImg}/>
+
+        </div>
+                   <Link to={`/profile?username=${encodeURIComponent(account.username)}`} target="_blank" className="profilebutton">
+                      <FontAwesomeIcon icon={faUser} /> View Profile
+                </Link>
+        </span>
+    )
+  } else return (
+    <span id="logged-out">
+                    <div>
+                    <span className="announcedate">
+                      (January 27th): 
+                    </span>
+                       {} 3 new ultimate skins! + <span className="announceimportant">GET THE ULTIMATE LUMINOUS SKIN FOR FREE BEFORE 2/3!</span>
+                    </div>
+                  </span>
+  )
+}

client/src/ui/App.scss

@@ -372,6 +372,25 @@ span {
 #menuCardHolder .menu .accountCard {
   width: 310px;
 }
+#menuCardHolder .menu .announcementCard {
+  color: white;
+  text-align: center;
+  font-size: 19px;
+  width: 1000px;
+  height: 58px;
+  position: fixed;
+    top: -6%;
+    left: 50%;
+    transform: translate(-50%, -100%);
+}
+#menuCardHolder .menu .announcementCard .announcedate {
+  color: #999999;
+  font-size: 17px;
+}
+
+#menuCardHolder .menu .announcementCard .announceimportant {
+  color: yellow;
+}
 #menuCardHolder .menu .forumCard {
   width: 310px;
   padding: 0;

client/src/ui/App.tsx

@@ -34,6 +34,7 @@ import Ad from './Ad';
 import { Settings } from '../game/Settings';
 import { getServerList, updatePing } from '../ServerList';
 import AccountCard from './AccountCard';
+import AnnouncementCard from './AnnouncementCard';
 import ForumCard from './ForumCard';
 // import Game from '../game/scenes/Game';
 import titleImg from '../assets/img/final.png';
@@ -290,7 +291,7 @@ function App() {
     position: 'fixed',
     top: '-50%', 
     left: '50%',
-    transform: 'translate(-50%, -100%)' 
+    transform: 'translate(-50%, -125%)' 
   }} /> 
 </div>
 
@@ -305,6 +306,10 @@ function App() {
                   <AccountCard account={account} onLogin={onLogin} onSignup={onSignup} />
                 </div>
 
+                <div className="announcementCard menuCard panel">
+                  <AnnouncementCard account={account} onLogin={onLogin} onSignup={onSignup}/>
+                </div>
+
                 {/* <!-- Play --> */}
                 <div className="joinCard menuCard panel" style={{ position: 'relative' }}>
                   <div className="joinCardInput">

client/src/ui/modals/ShopModal.tsx

@@ -166,9 +166,6 @@ const ShopModal: React.FC<ShopModalProps> = ({ account }) => {
   )}
       </div>
       <center>
-      {selectedBadge === 'norm' && (
-          <p style={{marginTop: 0}}>ULTIMATE SKIN SALE! GET THE ULTIMATE LUMINOUS SKIN FOR FREE BEFORE 2/3!</p>
-        )}
       {selectedBadge === 'og' && (
           <p style={{marginTop: 0}}>OG skins are skins that were available in the original version of the game before 2024.<br/>They are no longer obtainable, but can still be equipped from this menu.</p>
         )}