From 28dabd91d9ab01dbc6570512668903329fccf50c Mon Sep 17 00:00:00 2001
From: milon8561 <michael3419371@gmail.com>
Date: Wed, 20 Dec 2023 03:32:34 -0500
Subject: [PATCH] appended messages, keybinds, player colours

---
 back-end.js                                   |  10 +-
 iframe-containers/opp-containers.html         |   5 +
 iframe-containers/self-containers.html        |   5 +
 index.html                                    |  81 +++---
 resources/css/index.css                       | 242 +++++++++++-------
 resources/css/opp-containers.css              |  44 +++-
 resources/css/self-containers.css             |  44 +++-
 .../actions/container/deck-actions.js         |  36 ++-
 .../js/front-end/actions/container/general.js |  46 ++++
 .../actions/container/hand-actions.js         |  27 +-
 .../js/front-end/actions/general/VSTAR-GX.js  |  41 ++-
 .../front-end/actions/general/flip-board.js   |  19 +-
 .../js/front-end/actions/general/flip-coin.js |   2 +-
 .../js/front-end/actions/general/reset.js     |   8 +-
 .../js/front-end/actions/general/setup.js     |   2 +-
 .../js/front-end/actions/general/take-turn.js |   2 +-
 .../context-menu/active-bench-buttons.js      |   5 +-
 .../context-menu/deck-buttons.js              |   9 +-
 .../context-menu/hand-buttons.js              |  14 +-
 .../context-menu/prizes-buttons.js            |  17 +-
 .../home-header/header-buttons.js             |  10 +-
 .../js/front-end/event-listeners/index.js     |   1 -
 .../p1-chatbox/chat-buttons.js                |  18 +-
 .../event-listeners/p2/chat-buttons.js        |  18 +-
 .../event-listeners/p2/room-buttons.js        |  24 +-
 .../side-button-container/side-buttons.js     |  15 --
 .../front-end/event-listeners/table/index.js  |   3 +-
 .../event-listeners/table/table-buttons.js    |  19 ++
 .../event-listeners/update/update-stadium.js  |   4 +-
 .../js/front-end/image-logic/click-events.js  |   2 +
 resources/js/front-end/image-logic/drag.js    |  23 +-
 .../initialization/html-elements/buttons.js   |  11 +-
 .../perspective/player-perspective.js         |   2 +-
 .../js/front-end/key-toggles/key-shortcuts.js |  32 ++-
 .../front-end/setup/chatbox/location-name.js  |  48 ++++
 .../js/front-end/setup/chatbox/messages.js    |  10 +-
 .../setup/home-header/header-toggle.js        |  17 +-
 .../js/front-end/setup/sizing/resizer.js      |   4 +-
 .../js/front-end/socket/event-listeners.js    |  10 +-
 39 files changed, 683 insertions(+), 247 deletions(-)
 delete mode 100644 resources/js/front-end/event-listeners/side-button-container/side-buttons.js
 create mode 100644 resources/js/front-end/event-listeners/table/table-buttons.js
 create mode 100644 resources/js/front-end/setup/chatbox/location-name.js

diff --git a/back-end.js b/back-end.js
index c4c0208..3d6590f 100644
--- a/back-end.js
+++ b/back-end.js
@@ -30,14 +30,14 @@ io.on('connection', (socket) => {
 
         const otherPlayerUsernames = otherPlayerInfo.map(([_, player]) => player.username);
 
+        socket.on('disconnect', () => {
+            players.delete(socket.id);
+            socket.broadcast.to(id).emit('leaveGameMessage', username);
+        });
+
         if (otherPlayerUsernames.length < 2){
             socket.emit('joinGame', otherPlayerUsernames);
             socket.broadcast.to(id).emit('joinMessage', username);
-    
-            socket.on('disconnect', () => {
-                players.delete(socket.id);
-                socket.broadcast.to(id).emit('leaveGameMessage', username);
-            });
         } else {
             socket.emit('roomReject');
         };
diff --git a/iframe-containers/opp-containers.html b/iframe-containers/opp-containers.html
index 9d3ba91..1f3d942 100644
--- a/iframe-containers/opp-containers.html
+++ b/iframe-containers/opp-containers.html
@@ -31,6 +31,11 @@
 <div id="prizes_html" class="base"></div>
 <div id="board_html" class="oppBoard"></div>
 
+<div id="buttonContainer" class="oppButtonContainer">
+    <button id="vSTARButton">VSTAR</button>
+    <button id="GXButton" >GX</button>
+</div>
+
 <div id="attachedCardPopup_html" class="opp-view">
     <div id="attachedCardPopupHeader" class="header opp-header">Opponent moving cards...</div>
     <div id="attachedCardPopupButtonContainer" class="opp-button-container">
diff --git a/iframe-containers/self-containers.html b/iframe-containers/self-containers.html
index bf94349..b446598 100644
--- a/iframe-containers/self-containers.html
+++ b/iframe-containers/self-containers.html
@@ -31,6 +31,11 @@
 <div id="prizes_html" class="base"></div>
 <div id="board_html" class="selfBoard"></div>
 
+<div id="buttonContainer" class="selfButtonContainer">
+    <button id="vSTARButton">VSTAR</button>
+    <button id="GXButton" >GX</button>
+</div>
+
 <div id="attachedCardPopup_html" class="self-view">
     <div id="attachedCardPopupHeader" class="header self-header">Move attached cards</div>
     <div id="attachedCardPopupButtonContainer" class="self-button-container">
diff --git a/index.html b/index.html
index 462f41f..cb45e8f 100644
--- a/index.html
+++ b/index.html
@@ -14,46 +14,43 @@
     <iframe id="oppContainers" class="opp" src="./iframe-containers/opp-containers.html"></iframe>
     <div id="stadium_html" class="base"></div>
     <div id="selfResizer" class="selfColour"></div>
-    <div id="oppResizer" class="oppColour"></div>
-    <div id="boardDivider"></div>
-  
-    <div id="sideButtonContainer">
-        <button id="turnButton" class="squareButton">+Turn</button>
-        <button id="flipCoinButton" class="squareButton">Coin Flip</button>
-        <button id="vSTARButton" class="squareButton">VSTAR</button>
-        <button id="GXButton" class="squareButton">GX</button>
-        <button id="flipBoardButton" class="squareButton">Flip Board</button>
+    <div id="oppResizer" class="oppColour"></div>  
+
+    <div id="boardButtonContainer">
+        <button id="turnButton">+Turn</button>
+        <button id="flipCoinButton">Coin</button>
+        <button id="flipBoardButton">⇅</button>
     </div>
 
     <div id="topButtonContainer">
-        <button id="p1Button">1P</button>
-        <button id="p2Button">2P</button>
-        <button id="deckImportButton">Import Deck</button>
-        <button id="settingsButton">Settings</button>
+        <button id="p1Button" class="selectedPage">1P</button>
+        <button id="p2Button" class="notSelectedPage">2P</button>
+        <button id="deckImportButton" class="notSelectedPage">Import Deck</button>
+        <button id="settingsButton" class="notSelectedPage">Settings</button>
     </div>
     
-    <div id="p1Box" class="side-box">
-        <div id="chatbox">Hi! Welcome to ptcg-sim. description incoming.</div>
+    <div id="p1Box" class="sidebox">
+        <div id="chatbox"><strong>Welcome to PTCG-sim!</strong><br><br>This is a free tool to practice by yourself or with others. Drag or use keybinds (<span class="shift-font">shift</span>) to play.<br><br>Import your decklist to start testing! 🥳</div>
         <div id="chatboxButtonContainer" class="sidebox-button-container">
-            <button id="attackButton">Attack</button>
-            <button id="passButton">Pass</button>
-            <button id="FREEBUTTON">🥳</button>
+            <button id="attackButton" class="selfColour">Attack</button>
+            <button id="passButton" class="selfColour">Pass</button>
+            <button id="FREEBUTTON" class="selfColour">🥳</button>
         </div>
         <input id="messageInput" type="text" placeholder="Type your message here...">
         <div id="bottomP1ButtonContainer" class="sidebox-button-container">
-            <button id="setupButton">Set Up</button>
-            <button id="resetButton">Reset</button>
-            <button id="setupBothButton">Set Up Both</button>
-            <button id="resetBothButton">Reset Both</button>
+            <button id="setupButton" class="selfColour">Set Up</button>
+            <button id="resetButton" class="selfColour">Reset</button>
+            <button id="setupBothButton" class="neutralColour">Set Up Both</button>
+            <button id="resetBothButton" class="neutralColour">Reset Both</button>
         </div>
     </div>
-    <div id="p2Box" class="side-box">
+    <div id="p2Box" class="sidebox">
         <div id="lobby">
             <input id="nameInput" type="text" placeholder="Name">
             <div id="roomId">
                 <input id="roomIdInput" type="text" placeholder="Room ID">
                 <button id="copyButton">📋</button>
-                <button id="generateIdButton">Generate ID</button>
+                <button id="generateIdButton">Generate</button>
             </div>
             <div id="joinRoomButton"> Join Room </div>
         </div>
@@ -64,23 +61,23 @@
             </div>
             <div id="p2Chatbox"></div>
             <div id="p2ChatboxButtonContainer" class="sidebox-button-container">
-                <button id="p2AttackButton">Attack</button>
-                <button id="p2PassButton">Pass</button>
-                <button id="FREEBUTTON">🥳</button>
+                <button id="p2AttackButton" class="selfColour">Attack</button>
+                <button id="p2PassButton" class="selfColour">Pass</button>
+                <button id="p2FREEBUTTON" class="selfColour">🥳</button>
             </div>
             <input id="p2MessageInput" type="text" placeholder="Type your message here...">
             <div id="p2BottomButtonContainer" class="sidebox-button-container">
-                <button id="p2SetupButton">Set Up</button>
-                <button id="p2ResetButton">Reset</button>
-                <button id="leaveRoomButton">Leave Room</button>
+                <button id="p2SetupButton" class="selfColour">Set Up</button>
+                <button id="p2ResetButton" class="selfColour">Reset</button>
+                <button id="leaveRoomButton" class="neutralColour">Leave Room</button>
             </div>
         </div>
        
     </div>
-    <div id="deckImport" class="side-box"> 
+    <div id="deckImport" class="sidebox"> 
         <input id="deckImportInput" type="text" placeholder="Import your decklist here..."
     ></div>
-    <div id="settings" class="side-box">Settings content...</div>
+    <div id="settings" class="sidebox">Settings content...</div>
 
 
     <div id="cardContextMenu" class="contextMenu">
@@ -120,11 +117,10 @@
     </div>
 
     <div id="keybindModal">
-        <h1>Keybinds</h1>
         <div class="sections-container">
             <div class="section">
                 <div class="column">
-                    <h2>Move card...</h2>
+                    <h1>Move card...</h1>
                     <ul>
                         <li>to Hand <code>[h]</code></li>
                         <li>to Discard <code>[d]</code></li>
@@ -141,7 +137,7 @@ <h2>Move card...</h2>
                     </ul>
                 </div>
                 <div class="column">
-                    <h2>Card actions</h2>
+                    <h1>Card actions</h1>
                     <ul>
                         <li>Attach <code>[q]</code></li>
                         <li>Evolve <code>[e]</code></li>
@@ -163,23 +159,32 @@ <h2>Card actions</h2>
             </div>
             <div class="section">
                 <div class="column">
-                    <h2>Deck</h2>
+                    <h1>Deck</h1>
                     <ul>
-                        <li>Draw <code>[1-9]</code></li>
                         <li>Shuffle <code>[s]</code></li>
+                        <li>Draw <code>[1-9]</code></li>
                         <li>View top <code>[alt + 1-9]</code></li>
                         <li>View bottom <code>[ctrl + 1-9]</code></li>
                         <li>View <code>[v]</code></li>
                     </ul>
                 </div>
                 <div class="column">
-                    <h2>General</h2>
+                    <h1>Hand</h1>
+                    <ul>
+                        <li>Discard <code>[alt + d]</code></li>
+                        <li>Shuffle into deck <code>[alt + s]</code></li>
+                        <li>Shuffle to bottom <code>[alt + ↓]</code></li>
+                    </ul>
+                </div>
+                <div class="column">
+                    <h1>General</h1>
                     <ul>
                         <li>Set up <code>[alt + n]</code></li>
                         <li>Reset <code>[alt + r]</code></li>
                         <li>Start turn <code>[alt + t]</code></li>
                         <li>Flip coin <code>[f]</code></li>
                         <li>Flip board <code>[alt + f]</code></li>
+                        <li>Mulligan <code>[m]</code></li>
                     </ul>
                 </div>
             </div>
diff --git a/resources/css/index.css b/resources/css/index.css
index d54ce71..b6bc669 100644
--- a/resources/css/index.css
+++ b/resources/css/index.css
@@ -1,3 +1,6 @@
+body, input, textarea, button {
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
 body {
   background: white;
   background-size: 100% 100%;
@@ -8,16 +11,16 @@ body {
 #keybindModal {
   display: none;
   position: fixed;
-  width: 50%;
+  width: 70%;
+  height: 85%;
   top: 50%;
-  left: 33%;
+  left: 37.5%;
   transform: translate(-50%, -50%);
-  padding: 20px;
+  padding: 0 15px 15px 15px;
   background-color: rgba(200, 200, 200, 0.873); /* Semi-transparent grey background */
   border: 1px solid #ccc;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   z-index: 1000;
-  font-family: 'Helvetica', sans-serif;
 }
 .sections-container {
   display: flex;
@@ -28,17 +31,19 @@ body {
   flex: 1;
 }
 .column {
+  margin-right: 10px;
   padding: 10px;
-  margin: 10px;
 }
-h1, h2 {
-  margin-top: 0;
+h1 {
+  font-size: 2vh; /* Adjust the font size using vw unit */
   margin-bottom: 10px;
+  margin: 0;
   padding: 0;
 }
 ul, li {
   margin: 0;
   padding: 0;
+  font-size: 1.8vh; /* Adjust the font size using vw unit */
 }
 .column ul ul {
   margin-left: 10px;
@@ -46,10 +51,10 @@ ul, li {
 .column ul ul li {
   margin-bottom: 1px;
   margin-top: 0;
-  font-size: 13px;
+  font-size: 1.75vh; /* Adjust the font size using vw unit */
 }
 .column ul li {
-  margin-top: 10px;
+  margin-top: 1vh;
   display: flex;
   justify-content: space-between;
 }
@@ -57,22 +62,22 @@ ul, li {
   position: fixed;
   border: none;
   bottom: 0;
-  width: 66%;
+  width: 75.5%;
   height: 50%;
 }
 .opp {
   position: fixed;
   border: none;
   bottom: 50%;
-  width: 66%;
+  width: 75.5%;
   height: 50%;
   transform: scaleX(-1) scaleY(-1);
 }
 #stadium_html {
   position: fixed;
   bottom: 42%;
-  left: 12%;
-  width: 8%;
+  left: 11%;
+  width: 6%;
   height: 16%;
   display: flex; /* Add this */
 	justify-content: center; /* Horizontally center-align child elements */
@@ -97,7 +102,7 @@ ul, li {
 }
 #selfResizer {
   position: fixed;
-  left: 68%;
+  left: 75.5%;
   bottom: 49%;
   cursor: row-resize;
   display: flex;
@@ -111,7 +116,7 @@ ul, li {
 }
 #oppResizer {
   position: fixed;
-  left: 68%;
+  left: 75.5%;
   bottom: 51%;
   cursor: row-resize;
   display: flex;
@@ -129,39 +134,31 @@ ul, li {
 .oppColour {
   background-color: rgba(188, 90, 113, 0.864);  
 }
-#boardDivider {
-  position: fixed;
-  height: 100%;
-  width: 1%;
-  left: 67%;
-  bottom: 0;
-  background: rgb(231, 228, 228);
+.neutralColour {
+  background-color: rgba(112, 112, 112, 0.864);  
 }
-#sideButtonContainer {
+#boardButtonContainer {
   position: fixed;
-  height: 20%;
-  width: 5%;
-  left: 70%;
-  bottom: 40%;
+  height: 6%;
+  left: 52%;
+  bottom: 47%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: center;
+  gap: 5px;
 }
-#sideButtonContainer button {
-  width: 50px; /* Adjust as needed */
-  height: 50px; /* Adjust as needed */
-  margin-bottom: 10px; /* Space between buttons */
-  align-items: center; /* Add this */
-  justify-content: center; /* Add this */
-  padding: 7px 0; /* Adjust padding for button size */
-  width: 100%; /* Adjust width to distribute evenly */
+#boardButtonContainer button {
   border-radius: 10px; /* Rounded edges */
-  font-size: 12px; /* Adjust font size as needed */
+  font-size: 2vh; /* Adjust font size as needed */
   cursor: pointer;
-  background-color: #4c4f4c; /* Natural green background color */
-  color: white; /* Text color */
+  background: rgb(231, 228, 228);
+  color: rgb(149, 149, 149); /* Text color */
   border: none;
 }
+#boardButtonContainer button:hover {
+  background-color: rgb(117, 117, 117); /* Natural green background color */
+  color: rgb(255, 255, 255); /* Text color */
+}
 #topButtonContainer {
   position: fixed;
   right: 0;
@@ -169,35 +166,37 @@ ul, li {
   width: 24%;
   height: 5%;
   display: flex;
-  justify-content: space-around;
-  align-items: center;
   overflow: hidden; /* Ensure buttons don't exceed container width */
+  background: rgb(145, 145, 145);
 }
 #topButtonContainer button {
   padding: 7px 0; /* Adjust padding for button size */
   width: 30%; /* Adjust width to distribute evenly */
-  max-width: 100px; /* Maximum width for each button */
-  border-radius: 10px; /* Rounded edges */
-  font-size: 12px; /* Adjust font size as needed */
+  font-size: 1vw; /* Adjust font size as needed */
   cursor: pointer;
-  background-color: #8c9e8c; /* Natural green background color */
-  color: white; /* Text color */
   border: none;
-  margin: 0 5px; /* Add spacing between buttons */
+}
+.selectedPage {
+  background: rgb(231, 228, 228);
+  color:  rgb(50, 50, 50);
+  border-radius: 10px 10px 0 0; /* Rounded edges */
+}
+.notSelectedPage {
+  background: rgb(145, 145, 145);
+  color: white;
 }
 #topButtonContainer button:hover {
-  background-color: #babcba; /* Darker green on hover */
+  color:  rgb(50, 50, 50);
 }
-.side-box {
-  background: #99c1be;
+.sidebox {
+  background: rgb(231, 228, 228);
   position: fixed;
   right: 0;
   top: 5%;
   width: 24%;
   height: 95%;
-  padding: 10px;
+  padding: 0.5%;
   box-sizing: border-box;
-  border: 2px solid #7ab7ad;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -205,13 +204,15 @@ ul, li {
 #chatbox {
   width: 100%;
   height: 85%;
-  background: #abbfbe;
+  background: white;
   overflow-y: auto;
   padding: 10px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  display: block;
+  border-radius: 10px;
+}
+.shift-font {
+  font-family: monospace; /* or your preferred coding font */
 }
 .sidebox-button-container {
   width: 100%;
@@ -219,27 +220,27 @@ ul, li {
   justify-content: space-around;
   align-items: center;
   margin-top: 10px;
+  margin-bottom: 10px;
   overflow: hidden; /* Ensure buttons don't exceed container width */
 }
 .sidebox-button-container button {
   padding: 7px 0; /* Adjust padding for button size */
-  width: 50%; /* Adjust width to distribute evenly */
-  max-width: 100px; /* Maximum width for each button */
+  width: 23%; /* Adjust width to distribute evenly */
   border-radius: 10px; /* Rounded edges */
-  font-size: 12px; /* Adjust font size as needed */
+  font-size: 2vh; /* Adjust font size as needed */
   cursor: pointer;
-  background-color: #4CAF50; /* Natural green background color */
   color: white; /* Text color */
   border: none;
-  margin: 0 5px; /* Add spacing between buttons */
 }
 .sidebox-button-container button:hover {
-  background-color: #45a049; /* Darker green on hover */
+  background-color: #a4a3a3; /* Darker green on hover */
 }
 #messageInput {
   width: 100%;
   padding: 10px;
   box-sizing: border-box; /* Include padding and border in the total width */
+  border-radius: 10px;
+  border: none;
 }
 #bottomP1ButtonContainer {
   width: 100%;
@@ -249,11 +250,15 @@ ul, li {
 }
 #lobby {
   width: 100%;
+  margin-top: 5%;
 }
 #nameInput {
   width: 100%;
   padding: 10px;
   box-sizing: border-box; /* Include padding and border in the total width */
+  border-radius: 10px;
+  border: none;
+  font-size: 2vh;
 }
 #roomId {
   width: 100%;
@@ -262,18 +267,32 @@ ul, li {
   align-items: center;
 }
 #roomIdInput {
-  padding: 10px;
+  padding: 1vh;
   width: 80%;
+  border-radius: 10px;
+  border: none;
+  font-size: 2vh;
 }
 #copyButton {
   margin: 10px;
-  padding: 9px;
+  padding: .5vh;
+  border-radius: 10px;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+  font-size: 3vh;
+}
+.copied {
+  background-color: #b7d9b8 !important;
 }
 #generateIdButton {
-  padding: 9px;
+  padding: 1vh;
   background: #a89850;
   color: white;
+  border-radius: 10px;
   border: none;
+  cursor: pointer;
+  font-size: 2vh;
 }
 #generateIdButton:hover {
   background: #8c7e46; /* Change this color to the hover color you want */
@@ -285,6 +304,10 @@ ul, li {
   text-align: center;
   padding: 10px;
   box-sizing: border-box; /* Include padding and border in the total width */
+  border-radius: 10px;
+  border: none;
+  cursor: pointer;
+  font-size: 2.5vh;
 }
 #joinRoomButton:hover {
   background: #78766e; /* Change this color to the hover color you want */
@@ -293,6 +316,8 @@ ul, li {
   display: none;
   width: 100%;
   height: 100%;
+  flex-direction: column;
+  align-items: flex-start;
 }
 #roomHeader {
   width: 100%;
@@ -300,33 +325,36 @@ ul, li {
   display: flex;
   align-items: center; /* Center vertically */
   justify-content: space-between;
-  background-color: #97d1bb;
-  padding: 15px;
   box-sizing: border-box;
-  border-radius: 10px;
   color: black;
   margin-bottom: 10px; /* Adjust margin as needed for spacing */
 }
 #roomHeaderText {
   margin-right: 5px;
+  background-color: #9dd1bd;
+  border-radius: 10px;
+  width: 98%;
+  padding: .5vh;
+  font-size: 2vh;
+  text-align: center;
 }
 #roomHeaderCopyButton {
   cursor: pointer;
   background-color: transparent;
+  border-radius: 10px;
   border: none;
-  font-size: 20px;
-  color: white;
+  padding: .25vh;
+  font-size: 2.5vh;
 }
 #p2Chatbox {
-  background: #abbfbe;
+  background: white;
   width: 100%; /* Set to 100% */
   height: 80%;
   overflow-y: auto;
   padding: 10px;
   box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+  display: block;
+  border-radius: 10px;
 }
 #p2ChatboxButtonContainer {
   width: 100%;
@@ -335,6 +363,8 @@ ul, li {
   width: 100%;
   padding: 10px;
   box-sizing: border-box; /* Include padding and border in the total width */
+  border-radius: 10px;
+  border: none;
 }
 #p2BottomButtonContainer {
   width: 100%;
@@ -358,7 +388,6 @@ ul, li {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   width: 155px; /* Set a fixed width */
-  font-family: Arial, Helvetica, sans-serif;
 }
 .contextMenu ul {
   list-style-type: none;
@@ -408,33 +437,62 @@ ul, li {
 }
 
 /*chatbox text styling*/
-.selfBubble, .announcement, .oppBubble {
-  max-width: 80%;
-  padding: 10px;
+.self-text, .announcement, .opp-text, .self-message, .opp-message {
   word-wrap: break-word;
-  margin-bottom: 0px;
-}
-.selfBubble {
-  background-color: #f0f0f0;
+  display: block;
+  font-size: 1.75vh;
+  margin: 0.5vh 0 0 0;
   border-radius: 10px;
+  padding: 0.25vh 1vh;
+}
+.announcement {
+  background-color: rgb(205, 203, 203);
+  text-align: center;
+}
+.self-message {
+  background-color: rgba(142, 155, 209, 0.864);
   text-align: left;
-  align-self: flex-end;
+  width: fit-content;
 }
-.oppBubble {
-  background-color: rgb(139, 148, 206);
-  border-radius: 10px;
+.opp-message {
+  background-color: rgba(187, 120, 136, 0.864);  
   text-align: left;
-  margin-right: auto;
+  width: fit-content;
 }
-.announcement {
-  background-color: rgb(206, 139, 139);
-  border-radius: 10px;
+.self-text {
+  background-color: rgba(211, 219, 250, 0.864);
+  text-align: left;
+  width: fit-content;
+}
+.opp-text {
+  background-color: rgba(247, 217, 223, 0.864);  
   text-align: left;
-  margin-right: auto;
-  margin-left: auto;
+  width: fit-content;
 }
 
 
 
+/* .tooltip-btn {
+  position: relative;
+  cursor: pointer;
+}
+.tooltip-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px;
+  background-color: #333;
+  color: #fff;
+  border-radius: 4px;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+.tooltip-btn:hover::after {
+  opacity: 1;
+  visibility: visible;
+} */
 
 
diff --git a/resources/css/opp-containers.css b/resources/css/opp-containers.css
index e5fa9e5..e34a0f4 100644
--- a/resources/css/opp-containers.css
+++ b/resources/css/opp-containers.css
@@ -1,3 +1,6 @@
+body, input, textarea, button {
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
 .base {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
   border-radius: 15px; /* Rounded corners */
@@ -146,12 +149,10 @@
 }
 .self-text {
   font-size: clamp(10px, 4vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   user-select: none;
 }
 .opp-text {
   font-size: clamp(10px, 4vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   user-select: none;
   transform: scaleX(-1) scaleY(-1);
 }
@@ -208,6 +209,44 @@
   width: 19%;
   height: 30%;
 }
+.selfButtonContainer {
+  position: fixed;
+  height: 6%;
+  width: 10%;
+  right: 67%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; /* Align items to the right */
+  gap: 5px; /* Set the desired space between items */
+}
+.oppButtonContainer {
+  position: fixed;
+  height: 6%;
+  width: 10%;
+  left: 67%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px; /* Set the desired space between items */
+}
+#buttonContainer button {
+  min-height: 10px;
+  max-height: 20px;
+  height: 6vh; /* Adjust as needed */
+  border-radius: 10px; /* Rounded edges */
+  font-size: clamp(6px, 3vh, 15px); /* Adjust font size as needed */
+  cursor: pointer;
+  background: rgb(231, 228, 228);
+  color: rgb(149, 149, 149); /* Text color */
+  border: none;
+}
+#buttonContainer button:hover {
+  background-color: rgb(117, 117, 117); /* Natural green background color */
+  color: rgb(255, 255, 255); /* Text color */
+}
+.used {
+  background-color: rgba(188, 90, 113, 0.3) !important;
+}
 .playContainer {
   display: inline-block;
   flex-wrap: nowrap;
@@ -281,7 +320,6 @@
   border-radius: 15px 15px 0 0;
   color: white; /* White text */
   font-size: clamp(12px, 3vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   background-color:rgba(224, 97, 75, 0.864); 
   border: 2px solid #ff0000;
 }
diff --git a/resources/css/self-containers.css b/resources/css/self-containers.css
index 508b781..842b749 100644
--- a/resources/css/self-containers.css
+++ b/resources/css/self-containers.css
@@ -1,3 +1,6 @@
+body, input, textarea, button {
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
 .base {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
   border-radius: 15px; /* Rounded corners */
@@ -147,12 +150,10 @@
 }
 .self-text {
   font-size: clamp(10px, 4vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   user-select: none;
 }
 .opp-text {
   font-size: clamp(10px, 4vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   user-select: none;
   transform: scaleX(-1) scaleY(-1);
 }
@@ -209,6 +210,44 @@
   width: 19%;
   height: 30%;
 }
+.selfButtonContainer {
+  position: fixed;
+  height: 6%;
+  width: 10%;
+  right: 67%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end; /* Align items to the right */
+  gap: 5px; /* Set the desired space between items */
+}
+.oppButtonContainer {
+  position: fixed;
+  height: 6%;
+  width: 10%;
+  left: 67%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 5px; /* Set the desired space between items */
+}
+#buttonContainer button {
+  min-height: 10px;
+  max-height: 20px;
+  height: 6vh; /* Adjust as needed */
+  border-radius: 10px; /* Rounded edges */
+  font-size: clamp(6px, 3vh, 15px); /* Adjust font size as needed */
+  cursor: pointer;
+  background: rgb(231, 228, 228);
+  color: rgb(149, 149, 149); /* Text color */
+  border: none;
+}
+#buttonContainer button:hover {
+  background-color: rgb(117, 117, 117); /* Natural green background color */
+  color: rgb(255, 255, 255); /* Text color */
+}
+.used {
+  background-color: rgba(90, 110, 188, 0.3) !important;
+}
 .playContainer {
   display: inline-block;
   flex-wrap: nowrap;
@@ -282,7 +321,6 @@
   border-radius: 15px 15px 0 0;
   color: white; /* White text */
   font-size: clamp(12px, 3vh, 20px);
-  font-family: Arial, sans-serif; /* Same font as the buttons */
   background-color: #007bffb3; /* Blue background */
   border: 2px solid rgba(75, 137, 224, 0.952);
 }
diff --git a/resources/js/front-end/actions/container/deck-actions.js b/resources/js/front-end/actions/container/deck-actions.js
index cb4a3dd..026ffd9 100644
--- a/resources/js/front-end/actions/container/deck-actions.js
+++ b/resources/js/front-end/actions/container/deck-actions.js
@@ -1,14 +1,19 @@
-import { POV, deck, oppDeck, oppViewCards, oppViewCards_html, p1, roomId, sCard, socket, viewCards, viewCards_html } from '../../front-end.js';
+import { POV, deck, oppDeck, oppViewCards_html, p1, roomId, sCard, socket, viewCards_html } from '../../front-end.js';
+import { moveCardMessage } from '../../setup/chatbox/location-name.js';
+import { appendMessage } from '../../setup/chatbox/messages.js';
+import { determineUsername } from '../../setup/general/determine-username.js';
 import { moveCard } from '../general/move-card.js';
-import { hideCards, revealCards } from '../general/reveal-and-hide.js';
+import { hideCards } from '../general/reveal-and-hide.js';
 import { shuffleContainer } from './shuffle-container.js';
 
 export const shuffleIntoDeck = () => {
+    moveCardMessage(sCard.locationAsString, 'deck', 'shuffle', sCard.card.image.attached);
     moveCard(sCard.user, sCard.locationAsString, sCard.containerId, 'deck', 'deck_html', sCard.index);    
     shuffleContainer(sCard.user, 'deck', 'deck_html');
 }
 
 export const moveToDeckTop = () => {
+    moveCardMessage(sCard.locationAsString, 'deck', 'top', sCard.card.image.attached);
     moveCard(sCard.user, sCard.locationAsString, sCard.containerId, 'deck', 'deck_html', sCard.index);
     //since card is appended to bottom, move all existing cards in deck to the bottom afterwards
     const deckCount = sCard.user === 'self' ? deck.count : oppDeck.count;
@@ -18,10 +23,12 @@ export const moveToDeckTop = () => {
 }
 
 export const moveToDeckBottom = () => {
+    moveCardMessage(sCard.locationAsString, 'deck', 'bottom', sCard.card.image.attached);
     moveCard(sCard.user, sCard.locationAsString, sCard.containerId, 'deck', 'deck_html', sCard.index);
 }
 
 export const moveToBoard = () => {
+    moveCardMessage(sCard.locationAsString, 'board', 'move', sCard.card.image.attached);
     moveCard(sCard.user, sCard.locationAsString, sCard.containerId, 'board', 'board_html', sCard.index);
 }
 
@@ -31,18 +38,22 @@ export const shuffleDeck = (user) => {
 
 export const draw = (user) => {
     let drawAmount;
-
     const userInput = window.prompt('Draw how many cards?', '0');
-    
     drawAmount = parseInt(userInput);
-
     const deckCount = user === 'self' ? deck.count : oppDeck.count;
 
-    if (!isNaN(drawAmount) && drawAmount >= 0){
+    if (!isNaN(drawAmount) && drawAmount > 0){
         drawAmount = Math.min(drawAmount, deckCount);
         for (let i = 0; i < drawAmount; i++){
             moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
         };
+        let message;
+        if (drawAmount > 1){
+            message = determineUsername(user) + ' drew ' + drawAmount + ' cards';
+        } else {
+            message = determineUsername(user) + ' drew a card';
+        };
+        appendMessage(user, message, 'player');
     } else {
         window.alert('Please enter a valid number for the draw amount.');
     };
@@ -93,10 +104,21 @@ export const viewDeck = (user, viewAmount, top, deckCount, targetOpp, received =
         };
         socket.emit('viewDeck', data);
     };
+    const location = top ? 'top ' : 'bottom ';
+    const owner = user === 'self' ? '' : "opponent's"
+    const message = determineUsername(POV.user) + ' looked at ' + location + viewAmount + ' card(s) of ' + owner + ' deck';
+    appendMessage(POV.user, message, 'player'); 
 }
 
 export const switchWithDeckTop = () => {
-    moveToDeckTop();
+    moveCardMessage(sCard.locationAsString, 'deck', 'switch', sCard.card.image.attached);
+    //first part is moving a card to the top of the deck
+    moveCard(sCard.user, sCard.locationAsString, sCard.containerId, 'deck', 'deck_html', sCard.index);
+    const initialDeckCount = sCard.user === 'self' ? deck.count : oppDeck.count;
+    for (let i = 0; i < initialDeckCount - 1; i++){
+        moveCard(sCard.user, 'deck', 'deck_html', 'deck', 'deck_html', 0);
+    };
+
     const deckCount = sCard.user === 'self' ? deck.count : oppDeck.count;
     if (deckCount > 1){
         moveCard(sCard.user, 'deck', 'deck_html', sCard.locationAsString, sCard.containerId, 1);
diff --git a/resources/js/front-end/actions/container/general.js b/resources/js/front-end/actions/container/general.js
index 72f0d3c..ed845df 100644
--- a/resources/js/front-end/actions/container/general.js
+++ b/resources/js/front-end/actions/container/general.js
@@ -1,6 +1,8 @@
 import { selfContainersDocument } from "../../front-end.js";
+import { appendMessage } from "../../setup/chatbox/messages.js";
 import { containerIdToLocation } from "../../setup/containers/container-reference.js";
 import { stringToVariable, variableToString } from "../../setup/containers/string-to-variable.js";
+import { determineUsername } from "../../setup/general/determine-username.js";
 import { moveCard } from "../general/move-card.js";
 import { shuffleContainer } from "./shuffle-container.js";
 
@@ -19,6 +21,20 @@ export const shuffleAll = (event) => {
 
     const container_html = stringToVariable(user, containerId);
     container_html.style.display = 'none';
+
+    if (count > 0){
+        let message;
+        if (locationAsString === 'deck'){
+            message = determineUsername(user) + ' shuffled deck';
+        } else if (locationAsString === 'attachedCardPopup'){
+            message = determineUsername(user) + ' shuffled ' + count + ' attached card(s) into deck';
+        } else if (locationAsString === 'viewCards'){
+            message = determineUsername(user) + ' shuffled ' + count + ' card(s) into deck';
+        } else if (locationAsString === 'discard'){
+            message = determineUsername(user) + ' shuffled discard into deck';
+        };
+        appendMessage(user, message, 'player');
+    };
 }
 
 export const discardAll = (event) => {
@@ -34,6 +50,16 @@ export const discardAll = (event) => {
 
     const container_html = stringToVariable(user, containerId);
     container_html.style.display = 'none';
+
+    if (count > 0){
+        let message;
+        if (locationAsString === 'attachedCardPopup'){
+            message = determineUsername(user) + ' discarded '+ count + ' attached card(s)';
+        } else {
+            message = determineUsername(user) + ' discarded ' + count + ' card(s)';
+        };
+        appendMessage(user, message, 'player');
+    };
 }
 
 export const lostzoneAll = (event) => {
@@ -49,6 +75,16 @@ export const lostzoneAll = (event) => {
 
     const container_html = stringToVariable(user, containerId);
     container_html.style.display = 'none';
+
+    if (count > 0){
+        let message;
+        if (locationAsString === 'attachedCardPopup'){
+            message = determineUsername(user) + ' lost-zoned '+ count + ' attached card(s)';
+        } else {
+            message = determineUsername(user) + ' lost-zoned ' + count + ' card(s)';
+        };
+        appendMessage(user, message, 'player');
+    };
 }
 
 export const handAll = (event) => {
@@ -64,6 +100,16 @@ export const handAll = (event) => {
 
     const container_html = stringToVariable(user, containerId);
     container_html.style.display = 'none';
+
+    if (count > 0){
+        let message;
+        if (locationAsString === 'attachedCardPopup'){
+            message = determineUsername(user) + ' put '+ count + ' attached card(s) into hand';
+        } else {
+            message = determineUsername(user) + ' put ' + count + ' card(s) into hand';
+        };
+        appendMessage(user, message, 'player');
+    };
 }
 
 export const closeDisplay = (event) => {
diff --git a/resources/js/front-end/actions/container/hand-actions.js b/resources/js/front-end/actions/container/hand-actions.js
index 4baffa5..03aa1a6 100644
--- a/resources/js/front-end/actions/container/hand-actions.js
+++ b/resources/js/front-end/actions/container/hand-actions.js
@@ -1,4 +1,6 @@
 import { deck, hand, oppDeck, oppHand, socket } from '../../front-end.js';
+import { appendMessage } from '../../setup/chatbox/messages.js';
+import { determineUsername } from '../../setup/general/determine-username.js';
 import { shuffleIndices } from '../../setup/general/shuffle.js';
 import { moveCard } from '../general/move-card.js';
 import { shuffleContainer } from './shuffle-container.js';
@@ -29,6 +31,14 @@ export const discardAndDraw = (user) => {
         for (let i = 0; i < drawAmount; i++){
             moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
         };
+
+        let message;
+        if (drawAmount > 0){
+            message = determineUsername(user) + ' discarded hand and drew ' + drawAmount + ' card(s)';
+        } else {
+            message = determineUsername(user) + ' discarded hand';
+        };
+        appendMessage(user, message, 'player');
     } else {
         window.alert('Please enter a valid number for the draw amount.');
     };
@@ -54,7 +64,14 @@ export const shuffleAndDraw = (user) => {
         for (let i = 0; i < drawAmount; i++){
             moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
         };
-    
+        
+        let message;
+        if (drawAmount > 0){
+            message = determineUsername(user) + ' shuffled hand into deck and drew ' + drawAmount + ' card(s)';
+        } else {
+            message = determineUsername(user) + ' shuffled hand into deck';
+        };
+        appendMessage(user, message, 'player');
     } else {
         window.alert('Please enter a valid number for the draw amount.');
     };
@@ -80,7 +97,13 @@ export const shuffleBottomAndDraw = (user) => {
         for (let i = 0; i < drawAmount; i++){
             moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
         };
-
+        let message;
+        if (drawAmount > 0){
+            message = determineUsername(user) + ' shuffled hand to bottom of deck and drew ' + drawAmount + ' card(s)';
+        } else {
+            message = determineUsername(user) + ' shuffled hand to bottom of deck';
+        };
+        appendMessage(user, message, 'player');
     } else {
         window.alert('Please enter a valid number for the draw amount.');
     };
diff --git a/resources/js/front-end/actions/general/VSTAR-GX.js b/resources/js/front-end/actions/general/VSTAR-GX.js
index ac447f4..e95b989 100644
--- a/resources/js/front-end/actions/general/VSTAR-GX.js
+++ b/resources/js/front-end/actions/general/VSTAR-GX.js
@@ -1,17 +1,36 @@
-import { POV, p1, roomId, socket } from "../../front-end.js";
+import { POV, oppGXButton, oppVSTARButton, p1, roomId, selfGXButton, selfVSTARButton, socket } from "../../front-end.js";
 import { appendMessage } from "../../setup/chatbox/messages.js";
 import { determineUsername } from "../../setup/general/determine-username.js";
 
 export const VSTARGXFunction = (user, type, received = false) => {
-    const message = determineUsername(user) + ' used their ' + type + '!';
-    appendMessage(POV.user, message, 'announcement', true);
-    if (!p1[0] && !received){
-        const data = {
-            roomId : roomId,
-            user : POV.oUser,
-            type: type,
-            received : true
-        }
-        socket.emit('VSTARGXFunction', data);
+    let button;
+    if (user === 'self'){
+        if (type === 'GX'){
+            button = selfGXButton;
+        } else {
+            button = selfVSTARButton;
+        };
+    } else {
+        if (type === 'GX'){
+            button = oppGXButton;
+        } else {
+            button = oppVSTARButton;
+        };
+    };
+    if (button.classList.contains('used')){
+        button.classList.remove('used');
+    } else {
+        button.classList.add('used');
+        const message = determineUsername(user) + ' used their ' + type + '!';
+        appendMessage(user, message, 'player', true);
+        if (!p1[0] && !received){
+            const data = {
+                roomId : roomId,
+                user : POV.oUser,
+                type: type,
+                received : true
+            }
+            socket.emit('VSTARGXFunction', data);
+        };
     };
 }
\ No newline at end of file
diff --git a/resources/js/front-end/actions/general/flip-board.js b/resources/js/front-end/actions/general/flip-board.js
index 965ae75..9cd52d3 100644
--- a/resources/js/front-end/actions/general/flip-board.js
+++ b/resources/js/front-end/actions/general/flip-board.js
@@ -1,4 +1,4 @@
-import { POV, board_html, oppBoard_html, oppContainers, oppContainersDocument, oppResizer, selfContainers, selfContainersDocument, selfResizer, stadium, stadium_html } from '../../front-end.js';
+import { FREEBUTTON, POV, attackButton, board_html, oppBoard_html, oppContainers, oppContainersDocument, oppResizer, p2AttackButton, p2FREEBUTTON, p2PassButton, p2ResetButton, p2SetupButton, passButton, resetButton, selfContainers, selfContainersDocument, selfResizer, setupButton, stadium, stadium_html } from '../../front-end.js';
 import { flippedOppHandleMouseDown, flippedSelfHandleMouseDown, oppHandleMouseDown, selfHandleMouseDown } from '../../setup/sizing/resizer.js';
 import { reloadBoard } from '../../setup/sizing/reload-board.js';
 
@@ -26,13 +26,23 @@ export const flipBoard = () => {
     toggleClasses(oppContainers, 'opp', 'self');
     toggleClasses(board_html, 'selfBoard', 'oppBoard');
     toggleClasses(oppBoard_html, 'oppBoard', 'selfBoard');
-      
+    toggleClasses(attackButton, 'selfColour', 'oppColour');
+    toggleClasses(passButton, 'selfColour', 'oppColour');
+    toggleClasses(FREEBUTTON, 'selfColour', 'oppColour');
+    toggleClasses(setupButton, 'selfColour', 'oppColour');
+    toggleClasses(resetButton, 'selfColour', 'oppColour');
+    toggleClasses(p2AttackButton, 'selfColour', 'oppColour');
+    toggleClasses(p2PassButton, 'selfColour', 'oppColour');
+    toggleClasses(p2FREEBUTTON, 'selfColour', 'oppColour');
+    toggleClasses(p2SetupButton, 'selfColour', 'oppColour');
+    toggleClasses(p2ResetButton, 'selfColour', 'oppColour');
 
     const users = ['self', 'opp'];
     const textIds = ['deckText', 'discardText', 'lostzoneText'];
     const containerIds = ['deck_html', 'discard_html', 'lostzone_html', 'attachedCardPopup_html', 'viewCards_html'];
     const buttonIds = ['viewCardsButtonContainer', 'attachedCardPopupButtonContainer'];
     const headerIds = ['attachedCardPopupHeader', 'viewCardsHeader'];
+    const buttonContainerIds = ['buttonContainer'];
 
     for (const user of users) {
         const document = user === 'self' ? selfContainersDocument : oppContainersDocument;
@@ -62,6 +72,11 @@ export const flipBoard = () => {
                 header.textContent = 'Move attached cards';
             };
         };
+        for (const buttonContainerId of buttonContainerIds) {
+            const button = document.getElementById(buttonContainerId);
+            button.classList.toggle('selfButtonContainer');
+            button.classList.toggle('oppButtonContainer');
+        };
     };
 
     const selfCircleElements = selfContainersDocument.querySelectorAll('.self-circle, .opp-circle');
diff --git a/resources/js/front-end/actions/general/flip-coin.js b/resources/js/front-end/actions/general/flip-coin.js
index a51d6a1..d33fed3 100644
--- a/resources/js/front-end/actions/general/flip-coin.js
+++ b/resources/js/front-end/actions/general/flip-coin.js
@@ -5,7 +5,7 @@ export const flipCoin = (user, result) => {
     const randomValue = Math.random();
     const coinFlipResult = result !== undefined ? result : (randomValue < 0.5 ? 'heads' : 'tails');
     const message = determineUsername(user) + ' flipped ' + coinFlipResult;
-    appendMessage(user, message, 'announcement');
+    appendMessage(user, message, 'player');
 }
 
 
diff --git a/resources/js/front-end/actions/general/reset.js b/resources/js/front-end/actions/general/reset.js
index 1d89a65..1dc78b1 100644
--- a/resources/js/front-end/actions/general/reset.js
+++ b/resources/js/front-end/actions/general/reset.js
@@ -23,6 +23,9 @@ export const reset = (user, clean = false, received = false) => {
             element.textContent = '0'
             element.handleRemove();
         });
+        selfContainersDocument.querySelectorAll('.used').forEach(element => {
+            element.classList.remove('used');
+        });
     } else {
         cardArrays = [oppDeck, oppLostzone, oppDiscard, oppPrizes, oppActive, oppBench, oppHand, oppAttachedCardPopup, oppViewCards, oppBoard];
         cardContainers = [oppDeck_html, oppPrizes_html, oppDeckDisplay_html, oppLostzone_html, oppDiscard_html, oppActive_html, oppBench_html, oppHand_html, oppLostzoneDisplay_html, oppDiscardDisplay_html, oppAttachedCardPopup_html, oppViewCards_html, oppBoard_html]
@@ -31,6 +34,9 @@ export const reset = (user, clean = false, received = false) => {
             element.textContent = '0'
             element.handleRemove();
         });
+        oppContainersDocument.querySelectorAll('.used').forEach(element => {
+            element.classList.remove('used');
+        });
     };
     cardArrays.forEach(container => container.cards = []);
     cardContainers.forEach(container => removeImages(container));
@@ -42,7 +48,7 @@ export const reset = (user, clean = false, received = false) => {
     display_html.appendChild(makeDeckCover(user).image);
 
     if (!clean){
-        appendMessage(user, determineUsername(user) + ' reset', 'announcement', true);
+        appendMessage(user, determineUsername(user) + ' reset', 'player', true);
     };
 
     if (!p1[0] && !received){
diff --git a/resources/js/front-end/actions/general/setup.js b/resources/js/front-end/actions/general/setup.js
index d4e091c..a2dfba3 100644
--- a/resources/js/front-end/actions/general/setup.js
+++ b/resources/js/front-end/actions/general/setup.js
@@ -8,5 +8,5 @@ export const setup = (user) => {
     reset(user, true);
     shuffleContainer(user, 'deck', 'deck_html');
     drawHand(user);
-    appendMessage(user, determineUsername(user) + ' setup', 'announcement');
+    appendMessage(user, determineUsername(user) + ' setup', 'player');
 };
diff --git a/resources/js/front-end/actions/general/take-turn.js b/resources/js/front-end/actions/general/take-turn.js
index 931e31d..3be87cb 100644
--- a/resources/js/front-end/actions/general/take-turn.js
+++ b/resources/js/front-end/actions/general/take-turn.js
@@ -11,7 +11,7 @@ export const takeTurn = (user, received = false) => {
         turn[0] ++;
         moveCard(user, 'deck', 'deck_html', 'hand', 'hand_html', 0, false, true);
         appendMessage(user, 'Turn ' + turn, 'announcement', true);
-        appendMessage(user, determineUsername(user) + ' drew for turn', 'announcement', true);
+        appendMessage(user, determineUsername(user) + ' drew for turn', 'player', true);
     } else {
         appendMessage(user, determineUsername(user) + ' has no more cards in deck!', 'announcement', true);
     };
diff --git a/resources/js/front-end/event-listeners/context-menu/active-bench-buttons.js b/resources/js/front-end/event-listeners/context-menu/active-bench-buttons.js
index c463589..fbd15d1 100644
--- a/resources/js/front-end/event-listeners/context-menu/active-bench-buttons.js
+++ b/resources/js/front-end/event-listeners/context-menu/active-bench-buttons.js
@@ -1,8 +1,10 @@
 import { addAbilityCounter } from "../../actions/counters/ability-counter.js";
 import { addDamageCounter } from "../../actions/counters/damage-counter.js";
 import { addSpecialCondition } from "../../actions/counters/special-condition.js";
-import { damageCounterButton, sCard, specialConditionButton, abilityCounterButton } from "../../front-end.js";
+import { damageCounterButton, sCard, specialConditionButton, abilityCounterButton, POV } from "../../front-end.js";
+import { appendMessage } from "../../setup/chatbox/messages.js";
 import { variableToString } from "../../setup/containers/string-to-variable.js";
+import { determineUsername } from "../../setup/general/determine-username.js";
 
 
 damageCounterButton.addEventListener('click', () => {
@@ -18,5 +20,6 @@ abilityCounterButton.addEventListener('click', () => {
         sCard.card.image.abilityCounter.handleRemove();
     } else {
         addAbilityCounter(sCard.user, variableToString(sCard.user, sCard.location), variableToString(sCard.user, sCard.container), sCard.index);
+        appendMessage(POV.user, determineUsername(POV.user) + ' used ability', 'player');
     };
 });
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/context-menu/deck-buttons.js b/resources/js/front-end/event-listeners/context-menu/deck-buttons.js
index 168398c..073a007 100644
--- a/resources/js/front-end/event-listeners/context-menu/deck-buttons.js
+++ b/resources/js/front-end/event-listeners/context-menu/deck-buttons.js
@@ -1,9 +1,14 @@
 import { drawButton, sCard, shuffleDeckButton, viewBottomButton, viewTopButton } from '../../front-end.js'
 import { draw, handleViewButtonClick, shuffleDeck} from '../../actions/container/deck-actions.js';
+import { appendMessage } from '../../setup/chatbox/messages.js';
+import { determineUsername } from '../../setup/general/determine-username.js';
 
-shuffleDeckButton.addEventListener('click', () => {shuffleDeck(sCard.user)});
+shuffleDeckButton.addEventListener('click', () => {
+    shuffleDeck(sCard.user);
+    appendMessage(sCard.user, determineUsername(sCard.user) + ' shuffled deck', 'player');
+});
 
-drawButton.addEventListener('click', () => {draw(sCard.user)});
+drawButton.addEventListener('click', () => draw(sCard.user));
 
 viewTopButton.addEventListener('click', () => handleViewButtonClick(sCard.user, true));
 
diff --git a/resources/js/front-end/event-listeners/context-menu/hand-buttons.js b/resources/js/front-end/event-listeners/context-menu/hand-buttons.js
index 08847a3..8d8ddb6 100644
--- a/resources/js/front-end/event-listeners/context-menu/hand-buttons.js
+++ b/resources/js/front-end/event-listeners/context-menu/hand-buttons.js
@@ -1,10 +1,18 @@
 import { discardAndDraw, shuffleAndDraw, shuffleBottomAndDraw } from '../../actions/container/hand-actions.js';
 import { hideCards, revealCards } from '../../actions/general/reveal-and-hide.js';
-import { discardHandButton, hideHandButton, revealHandButton, sCard, shuffleHandBottomButton, shuffleHandButton } from '../../front-end.js'
+import { POV, discardHandButton, hideHandButton, revealHandButton, sCard, shuffleHandBottomButton, shuffleHandButton } from '../../front-end.js'
+import { appendMessage } from '../../setup/chatbox/messages.js';
+import { determineUsername } from '../../setup/general/determine-username.js';
 
-revealHandButton.addEventListener('click', () => revealCards(sCard.user, 'hand', 'hand_html'));
+revealHandButton.addEventListener('click', () => {
+    revealCards(sCard.user, 'hand', 'hand_html');
+    appendMessage(POV.user, determineUsername(POV.user) + " looked at opponent's hand", 'player');
+});
 
-hideHandButton.addEventListener('click', () => hideCards(sCard.user, 'hand', 'hand_html'));
+hideHandButton.addEventListener('click', () => {
+    hideCards(sCard.user, 'hand', 'hand_html');
+    appendMessage(POV.user, determineUsername(POV.user) + " hid opponent's hand", 'player');
+});
 
 discardHandButton.addEventListener('click', () => discardAndDraw(sCard.user));
 
diff --git a/resources/js/front-end/event-listeners/context-menu/prizes-buttons.js b/resources/js/front-end/event-listeners/context-menu/prizes-buttons.js
index 7684f14..783d793 100644
--- a/resources/js/front-end/event-listeners/context-menu/prizes-buttons.js
+++ b/resources/js/front-end/event-listeners/context-menu/prizes-buttons.js
@@ -1,10 +1,21 @@
 import { shuffleContainer } from "../../actions/container/shuffle-container.js";
 import { hideCards, revealCards } from "../../actions/general/reveal-and-hide.js";
 import { hidePrizesButton, revealPrizesButton, sCard, shufflePrizesButton } from "../../front-end.js";
+import { appendMessage } from "../../setup/chatbox/messages.js";
+import { determineUsername } from "../../setup/general/determine-username.js";
 
-shufflePrizesButton.addEventListener('click', () => shuffleContainer(sCard.user, 'prizes', 'prizes_html'));
+shufflePrizesButton.addEventListener('click', () => {
+    shuffleContainer(sCard.user, 'prizes', 'prizes_html');
+    appendMessage(sCard.user, determineUsername(sCard.user) + ' shuffled prizes', 'player');
+});
 
-revealPrizesButton.addEventListener('click', () => revealCards(sCard.user, 'prizes', 'prizes_html'));
+revealPrizesButton.addEventListener('click', () => {
+    revealCards(sCard.user, 'prizes', 'prizes_html');
+    appendMessage(sCard.user, determineUsername(sCard.user) + ' looked at prizes', 'player');
+});
 
-hidePrizesButton.addEventListener('click', () => hideCards(sCard.user, 'prizes', 'prizes_html'));
+hidePrizesButton.addEventListener('click', () => {
+    hideCards(sCard.user, 'prizes', 'prizes_html');
+    appendMessage(sCard.user, determineUsername(sCard.user) + ' hid prizes', 'player');
+});
 
diff --git a/resources/js/front-end/event-listeners/home-header/header-buttons.js b/resources/js/front-end/event-listeners/home-header/header-buttons.js
index 9adb91b..dd6b862 100644
--- a/resources/js/front-end/event-listeners/home-header/header-buttons.js
+++ b/resources/js/front-end/event-listeners/home-header/header-buttons.js
@@ -4,7 +4,7 @@ import { show } from '../../setup/home-header/header-toggle.js';
 
 p1Button.addEventListener('click', () => {
     if (p1[0]) {
-        show('p1Box')
+        show('p1Box', p1Button);
     } else if (window.confirm('Are you sure you want to leave the room?')) {
         socket.disconnect();
         lobby.style.display = 'block';
@@ -14,9 +14,9 @@ p1Button.addEventListener('click', () => {
         socket.connect();
         p1[0] = true;
         p2Chatbox.innerHTML = '';
-        show('p1Box');
+        show('p1Box', p1Button);
     };
 });
-p2Button.addEventListener('click', () => {show('p2Box')});
-deckImportButton.addEventListener('click', () => {show('deckImport')});
-settingsButton.addEventListener('click', () => {show('settings')});
\ No newline at end of file
+p2Button.addEventListener('click', () => {show('p2Box', p2Button)});
+deckImportButton.addEventListener('click', () => {show('deckImport', deckImportButton)});
+settingsButton.addEventListener('click', () => {show('settings', settingsButton)});
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/index.js b/resources/js/front-end/event-listeners/index.js
index 6ca1fa6..1924b1d 100644
--- a/resources/js/front-end/event-listeners/index.js
+++ b/resources/js/front-end/event-listeners/index.js
@@ -3,7 +3,6 @@ export * from './home-header/header-buttons.js'
 export * from './p1-chatbox/index.js'
 export * from './p2/index.js'
 export * from './resizer/resizer.js'
-export * from './side-button-container/side-buttons.js'
 export * from './table/index.js'
 export * from './update/index.js'
 export * from './window/window.js'
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/p1-chatbox/chat-buttons.js b/resources/js/front-end/event-listeners/p1-chatbox/chat-buttons.js
index 095a079..39c37b1 100644
--- a/resources/js/front-end/event-listeners/p1-chatbox/chat-buttons.js
+++ b/resources/js/front-end/event-listeners/p1-chatbox/chat-buttons.js
@@ -1,17 +1,27 @@
 import { resetCounters } from "../../actions/counters/reset-ability-counters.js";
-import { attackButton, POV, passButton} from "../../front-end.js";
+import { attackButton, POV, passButton, messageInput} from "../../front-end.js";
 import { appendMessage } from "../../setup/chatbox/messages.js";
 import { determineUsername } from "../../setup/general/determine-username.js";
 
 attackButton.addEventListener('click', () => {
     resetCounters();
     const user = POV.user;
-    const message = determineUsername(user) + ' attacked!';
-    appendMessage(user, message, 'announcement');
+    const message = determineUsername(user) + ' attacked';
+    appendMessage(user, message, 'player');
 });
 passButton.addEventListener('click', () => {
     resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' passed';
-    appendMessage(user, message, 'announcement');
+    appendMessage(user, message, 'player');
+});
+messageInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        const message = messageInput.value.trim();
+        if (message !== '') {
+            appendMessage(POV.user, determineUsername(POV.user) + ': ' + message, 'message');
+            messageInput.value = '';
+        };
+    }
 });
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/p2/chat-buttons.js b/resources/js/front-end/event-listeners/p2/chat-buttons.js
index 8e70310..c0d10b6 100644
--- a/resources/js/front-end/event-listeners/p2/chat-buttons.js
+++ b/resources/js/front-end/event-listeners/p2/chat-buttons.js
@@ -1,18 +1,28 @@
 import { resetCounters } from "../../actions/counters/reset-ability-counters.js";
-import { p2AttackButton, POV, p2PassButton} from "../../front-end.js";
+import { p2AttackButton, POV, p2PassButton, p2MessageInput} from "../../front-end.js";
 import { appendMessage } from "../../setup/chatbox/messages.js";
 import { determineUsername } from "../../setup/general/determine-username.js";
 
 p2AttackButton.addEventListener('click', () => {
     resetCounters();
     const user = POV.user;
-    const message = determineUsername(user) + ' attacked!';
-    appendMessage(user, message, 'announcement');
+    const message = determineUsername(user) + ' attacked';
+    appendMessage(user, message, 'player');
 });
 
 p2PassButton.addEventListener('click', () => {
     resetCounters();
     const user = POV.user;
     const message = determineUsername(user) + ' passed';
-    appendMessage(user, message, 'announcement');
+    appendMessage(user, message, 'player');
+});
+p2MessageInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        const message = p2MessageInput.value.trim();
+        if (message !== '') {
+            appendMessage(POV.user, determineUsername(POV.user) + ': ' + message, 'message');
+            p2MessageInput.value = '';
+        };
+    }
 });
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/p2/room-buttons.js b/resources/js/front-end/event-listeners/p2/room-buttons.js
index 50d70b3..2ebff36 100644
--- a/resources/js/front-end/event-listeners/p2/room-buttons.js
+++ b/resources/js/front-end/event-listeners/p2/room-buttons.js
@@ -1,12 +1,23 @@
+import { flipBoard } from '../../actions/general/flip-board.js';
 import { reset } from '../../actions/general/reset.js';
-import { chatbox, connectedRoom, copyButton, generateIdButton, joinRoomButton, leaveRoomButton, lobby, nameInput, p1, p2Chatbox, p2SelfUsername, roomHeaderCopyButton, roomHeaderText, roomId, roomIdInput, socket } from '../../front-end.js';
+import { POV, chatbox, connectedRoom, copyButton, generateIdButton, joinRoomButton, leaveRoomButton, lobby, nameInput, p1, p2Chatbox, p2SelfUsername, roomHeaderCopyButton, roomHeaderText, roomId, roomIdInput, socket } from '../../front-end.js';
 
 copyButton.addEventListener('click', () => {
-    navigator.clipboard.writeText(roomIdInput.value)
+    navigator.clipboard.writeText(roomIdInput.value);
+
+    copyButton.classList.add('copied');
+    setTimeout(() => {
+        copyButton.classList.remove('copied');
+    }, 1000);
 });
 
 roomHeaderCopyButton.addEventListener('click', () => {
-    navigator.clipboard.writeText(roomIdInput.value)
+    navigator.clipboard.writeText(roomIdInput.value).then(() => {
+        roomHeaderCopyButton.classList.add('copied');
+        setTimeout(() => {
+            roomHeaderCopyButton.classList.remove('copied');
+        }, 1000);
+    });
 });
 
 generateIdButton.addEventListener('click', () => {
@@ -14,10 +25,15 @@ generateIdButton.addEventListener('click', () => {
 });
 
 joinRoomButton.addEventListener('click', () => {
-    p2SelfUsername[0] = nameInput.value.trim() !== '' ? nameInput.value : 'Anonymous';
+    const names = ['Froakie', 'Shauna', 'Avery', 'Peonia', 'Korrina', 'Guzma', 'Bridgette', 'AZ', 'Xerosic', 'Colress', 'Melony', 'Serena', 'Thorton', 'Cyllene', 'Acerola', 'Marnie', 'Arven', 'Giovanni', 'Judge', 'Boss', 'Penny', 'Leon', 'Cheren', 'Elesa', 'Volo', 'Raihan', 'Ash', 'Brock', 'Misty', 'Cynthia', 'Oak', 'N', 'Roxanne', 'Iono', 'Irida', 'Lysandre', 'Cyrus', 'Hex', 'Skyla', 'Juniper', 'Sycamore'];
+    const randomIndex = Math.floor(Math.random() * names.length);
+    p2SelfUsername[0] = nameInput.value.trim() !== '' ? nameInput.value : names[randomIndex];
     roomId[0] = roomIdInput.value;
     roomHeaderText.textContent = 'id: ' + roomId;
     chatbox.innerHTML = '';
+    if (POV.user === 'opp'){
+        flipBoard();
+    };
     socket.emit('joinGame', roomId[0], p2SelfUsername[0]);
 });
 
diff --git a/resources/js/front-end/event-listeners/side-button-container/side-buttons.js b/resources/js/front-end/event-listeners/side-button-container/side-buttons.js
deleted file mode 100644
index 1519ada..0000000
--- a/resources/js/front-end/event-listeners/side-button-container/side-buttons.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { VSTARGXFunction } from '../../actions/general/VSTAR-GX.js';
-import { flipBoard } from '../../actions/general/flip-board.js';
-import { flipCoin } from '../../actions/general/flip-coin.js';
-import { takeTurn } from '../../actions/general/take-turn.js';
-import { GXButton, flipBoardButton, flipCoinButton, p1, POV, roomId, socket, turnButton, vSTARButton } from '../../front-end.js';
-
-turnButton.addEventListener('click', () => takeTurn(POV.user));
-
-flipCoinButton.addEventListener('click', () => flipCoin(POV.user));
-
-vSTARButton.addEventListener('click', () => VSTARGXFunction(POV.user, 'VSTAR'));
-
-GXButton.addEventListener('click', () => VSTARGXFunction(POV.user, 'GX'));
-
-flipBoardButton.addEventListener('click', flipBoard);
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/table/index.js b/resources/js/front-end/event-listeners/table/index.js
index 77499ec..db00ed0 100644
--- a/resources/js/front-end/event-listeners/table/index.js
+++ b/resources/js/front-end/event-listeners/table/index.js
@@ -1,2 +1,3 @@
 export * from './container-buttons.js'
-export * from './containers-and-documents.js'
\ No newline at end of file
+export * from './containers-and-documents.js'
+export * from './table-buttons.js'
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/table/table-buttons.js b/resources/js/front-end/event-listeners/table/table-buttons.js
new file mode 100644
index 0000000..9fbeac1
--- /dev/null
+++ b/resources/js/front-end/event-listeners/table/table-buttons.js
@@ -0,0 +1,19 @@
+import { VSTARGXFunction } from '../../actions/general/VSTAR-GX.js';
+import { flipBoard } from '../../actions/general/flip-board.js';
+import { flipCoin } from '../../actions/general/flip-coin.js';
+import { takeTurn } from '../../actions/general/take-turn.js';
+import { flipBoardButton, flipCoinButton, POV, turnButton, selfVSTARButton, selfGXButton, oppVSTARButton, oppGXButton } from '../../front-end.js';
+
+turnButton.addEventListener('click', () => takeTurn(POV.user));
+
+flipCoinButton.addEventListener('click', () => flipCoin(POV.user));
+
+selfVSTARButton.addEventListener('click', () => VSTARGXFunction('self', 'VSTAR'));
+
+selfGXButton.addEventListener('click', () => VSTARGXFunction('self', 'GX'));
+
+oppVSTARButton.addEventListener('click', () => VSTARGXFunction('opp', 'VSTAR'));
+
+oppGXButton.addEventListener('click', () => VSTARGXFunction('opp', 'GX'));
+
+flipBoardButton.addEventListener('click', flipBoard);
\ No newline at end of file
diff --git a/resources/js/front-end/event-listeners/update/update-stadium.js b/resources/js/front-end/event-listeners/update/update-stadium.js
index f1430bf..785d436 100644
--- a/resources/js/front-end/event-listeners/update/update-stadium.js
+++ b/resources/js/front-end/event-listeners/update/update-stadium.js
@@ -1,4 +1,4 @@
-import { attachedCardPopup_html, deck_html, discard_html, lostzone_html, oppAttachedCardPopup_html, oppDeck_html, oppDiscard_html, oppLostzone_html, oppViewCards_html, stadium_html, viewCards_html } from '../../front-end.js';
+import { attachedCardPopup_html, boardButtonContainer, deck_html, discard_html, lostzone_html, oppAttachedCardPopup_html, oppDeck_html, oppDiscard_html, oppLostzone_html, oppViewCards_html, stadium_html, viewCards_html } from '../../front-end.js';
 
 const containers = [
     lostzone_html,
@@ -18,11 +18,13 @@ const checkDisplayAndUpdateZIndex = () => {
     for (let i = 0; i < containers.length; i++) {
         if (containers[i].style.display === 'block') {
             stadium_html.style.zIndex = '-1';
+            boardButtonContainer.style.zIndex = '-1';
             return;  // Exit the function if a container is displayed
         };
     };
     // If none of the containers are displayed, set the z-index to 0
     stadium_html.style.zIndex = '0';
+    boardButtonContainer.style.zIndex = '0';
 }
 
 // Create a MutationObserver instance
diff --git a/resources/js/front-end/image-logic/click-events.js b/resources/js/front-end/image-logic/click-events.js
index 0904739..05ce913 100644
--- a/resources/js/front-end/image-logic/click-events.js
+++ b/resources/js/front-end/image-logic/click-events.js
@@ -7,6 +7,7 @@ import { closeFullView, closePopups, deselectCard } from '../actions/general/clo
 import { moveCard } from '../actions/general/move-card.js';
 import { socket } from '../initialization/socket-port/socket.js';
 import { cardContextMenu } from '../initialization/html-elements/context-menu.js';
+import { moveCardMessage } from '../setup/chatbox/location-name.js';
 
 export const identifyCard = (event) => {
     if (event.target.user === 'self'){
@@ -150,6 +151,7 @@ export const imageClick = (event) => {
         target.location = containerIdToLocation(sCard.user, target.containerId);
         target.index = target.location.cards.findIndex(card => card.image === event.target);
         target.locationAsString = variableToString(sCard.user, target.location);
+        moveCardMessage(sCard.locationAsString, target.locationAsString, 'move', sCard.card.image.attached);
         moveCard(sCard.user, sCard.locationAsString, sCard.containerId, target.locationAsString, target.containerId, sCard.index, target.index);
     } else {
         closePopups(event); //need both because of highlights
diff --git a/resources/js/front-end/image-logic/drag.js b/resources/js/front-end/image-logic/drag.js
index f83b8d7..44cbc26 100644
--- a/resources/js/front-end/image-logic/drag.js
+++ b/resources/js/front-end/image-logic/drag.js
@@ -1,6 +1,7 @@
 import { closeContainerPopups, closePopups } from '../actions/general/close-popups.js';
 import { moveCard } from '../actions/general/move-card.js';
 import { POV, active_html, attachedCardPopup_html, bench_html, deck_html, discard_html, lostzone_html, oppActive_html, oppAttachedCardPopup_html, oppBench_html, oppContainersDocument, oppDeck_html, oppDiscard_html, oppLostzone_html, oppViewCards_html, p1, roomId, sCard, selfContainersDocument, socket, target, viewCards_html } from '../front-end.js';
+import { moveCardMessage } from '../setup/chatbox/location-name.js';
 import { appendMessage } from '../setup/chatbox/messages.js';
 import { containerIdToLocation } from '../setup/containers/container-reference.js';
 import { stringToVariable, variableToString } from '../setup/containers/string-to-variable.js';
@@ -168,27 +169,7 @@ export const drop = (event) => {
         };
 
         if ((sCard.containerId !== target.containerId || draggedImage.attached) && !(draggedImage.attached && ['bench_html', 'active_html'].includes(target.containerId) && target.index === undefined)){
-            // //find if card is attached
-            // let hostCard;
-            // if (sCard.card.image.relative){
-            //     const location = stringToVariable(sCard.user, sCard.locationAsString);
-            //     hostCard = location.cards.find(card => card.image === sCard.card.image.relative);
-            // };
-            // const oLocation = hostCard ? hostCard.name : sCard.locationAsString;
-            // //find if card is being attached
-            // let targetCard;
-            // if (typeof target.index === 'number'){
-            //     const location = stringToVariable(sCard.user, target.locationAsString);
-            //     if (target.locationAsString === 'active' && !sCard.card.image.attached && sCard.locationAsString === 'bench'){
-            //         targetCard = undefined;
-            //     } else {
-            //         targetCard = location.cards[target.index];
-            //     };
-            // };
-            // const mLocation = targetCard ? targetCard.name : target.locationAsString;
-
-            // const message = determineUsername(POV.user) + ' moved ' + sCard.card.name + ' from ' + oLocation + ' to ' + mLocation;
-            // appendMessage(POV.user, message, 'announcement');
+            moveCardMessage(sCard.locationAsString, target.locationAsString, 'move', sCard.card.image.attached);
             moveCard(sCard.user, sCard.locationAsString, sCard.containerId, target.locationAsString, target.containerId, sCard.index, target.index);
         };
     };
diff --git a/resources/js/front-end/initialization/html-elements/buttons.js b/resources/js/front-end/initialization/html-elements/buttons.js
index 58801e9..17d1ef4 100644
--- a/resources/js/front-end/initialization/html-elements/buttons.js
+++ b/resources/js/front-end/initialization/html-elements/buttons.js
@@ -2,6 +2,7 @@ import { oppContainersDocument } from '../containers/opp-containers.js';
 import { selfContainersDocument } from '../containers/self-containers.js';
 
 //side button container
+export const boardButtonContainer = document.getElementById('boardButtonContainer');
 export const turnButton = document.getElementById('turnButton');
 export const flipCoinButton = document.getElementById('flipCoinButton');
 export const vSTARButton = document.getElementById('vSTARButton');
@@ -17,6 +18,7 @@ export const settingsButton = document.getElementById('settingsButton');
 //p1 buttons
 export const attackButton = document.getElementById('attackButton');
 export const passButton = document.getElementById('passButton');
+export const FREEBUTTON = document.getElementById('FREEBUTTON');
 export const setupButton = document.getElementById('setupButton');
 export const resetButton = document.getElementById('resetButton');
 export const setupBothButton = document.getElementById('setupBothButton');
@@ -32,6 +34,7 @@ export const joinRoomButton = document.getElementById('joinRoomButton');
 export const roomHeaderCopyButton = document.getElementById('roomHeaderCopyButton');
 export const p2AttackButton = document.getElementById('p2AttackButton');
 export const p2PassButton = document.getElementById('p2PassButton');
+export const p2FREEBUTTON = document.getElementById('p2FREEBUTTON');
 export const p2SetupButton = document.getElementById('p2SetupButton');
 export const p2ResetButton = document.getElementById('p2ResetButton');
 export const leaveRoomButton = document.getElementById('leaveRoomButton');
@@ -52,6 +55,9 @@ export const selfCloseDeckDisplayButton = selfContainersDocument.getElementById(
 export const selfCloseDiscardDisplayButton = selfContainersDocument.getElementById('closeDiscardDisplayButton');
 export const selfCloseLostzoneDisplayButton = selfContainersDocument.getElementById('closeLostzoneDisplayButton');
 
+export const selfVSTARButton = selfContainersDocument.getElementById('vSTARButton');
+export const selfGXButton = selfContainersDocument.getElementById('GXButton');
+
 //oppContainers
 export const oppShuffleDeckButton = oppContainersDocument.getElementById('oppShuffleDeckButton')
 export const oppDiscardShuffleButton = oppContainersDocument.getElementById('discardShuffleButton');
@@ -66,4 +72,7 @@ export const oppViewCardsHandButton = oppContainersDocument.getElementById('view
 
 export const oppCloseDeckDisplayButton = oppContainersDocument.getElementById('closeDeckDisplayButton');
 export const oppCloseDiscardDisplayButton = oppContainersDocument.getElementById('closeDiscardDisplayButton');
-export const oppCloseLostzoneDisplayButton = oppContainersDocument.getElementById('closeLostzoneDisplayButton');
\ No newline at end of file
+export const oppCloseLostzoneDisplayButton = oppContainersDocument.getElementById('closeLostzoneDisplayButton');
+
+export const oppVSTARButton = oppContainersDocument.getElementById('vSTARButton');
+export const oppGXButton = oppContainersDocument.getElementById('GXButton');
\ No newline at end of file
diff --git a/resources/js/front-end/initialization/perspective/player-perspective.js b/resources/js/front-end/initialization/perspective/player-perspective.js
index 2ad88b1..a13d173 100644
--- a/resources/js/front-end/initialization/perspective/player-perspective.js
+++ b/resources/js/front-end/initialization/perspective/player-perspective.js
@@ -11,7 +11,7 @@ export const POV = {
 };
 export const roomId = [];
 export const p1Username = (user) => {
-    return user === 'self' ? 'Blue player' : 'Red player';
+    return user === 'self' ? 'Blue' : 'Red';
 }
 export const p2SelfUsername = [];
 export const p2OppUsername = [];
diff --git a/resources/js/front-end/key-toggles/key-shortcuts.js b/resources/js/front-end/key-toggles/key-shortcuts.js
index 6ec495e..13e5989 100644
--- a/resources/js/front-end/key-toggles/key-shortcuts.js
+++ b/resources/js/front-end/key-toggles/key-shortcuts.js
@@ -1,4 +1,5 @@
 import { moveToDeckBottom, moveToDeckTop, shuffleIntoDeck, switchWithDeckTop, viewDeck } from '../actions/container/deck-actions.js';
+import { discardAndDraw, shuffleAndDraw, shuffleBottomAndDraw } from '../actions/container/hand-actions.js';
 import { shuffleContainer } from '../actions/container/shuffle-container.js';
 import { addAbilityCounter } from '../actions/counters/ability-counter.js';
 import { addDamageCounter } from '../actions/counters/damage-counter.js';
@@ -10,9 +11,12 @@ import { moveCard } from '../actions/general/move-card.js';
 import { reset } from '../actions/general/reset.js';
 import { setup } from '../actions/general/setup.js';
 import { takeTurn } from '../actions/general/take-turn.js';
-import { sCard, keybindModal, target, deck, oppDeck, POV, viewTopButton, deck_html, oppDeck_html, active, bench, oppActive, oppBench, p1, socket, roomId } from '../front-end.js';
+import { sCard, keybindModal, target, deck, oppDeck, POV, deck_html, oppDeck_html, active, bench, oppActive, oppBench, p1, socket, roomId } from '../front-end.js';
 import { doubleClick } from '../image-logic/click-events.js';
+import { moveCardMessage } from '../setup/chatbox/location-name.js';
+import { appendMessage } from '../setup/chatbox/messages.js';
 import { variableToString } from '../setup/containers/string-to-variable.js';
+import { determineUsername } from '../setup/general/determine-username.js';
 
 export const keyUp = (event) => {
     if (event.key === 'Shift') {
@@ -27,7 +31,6 @@ export const keyDown = (event) => {
     if (event.key === 'Shift') {
         keybindModal.style.display = 'block';
     };
-
     if (!sCard.selecting){
         if (event.key >= 1 && event.key <= 9 && !event.altKey && !event.ctrlKey) {
             const deckCount = POV.user === 'self' ? deck.count : oppDeck.count;
@@ -35,9 +38,18 @@ export const keyDown = (event) => {
             for (let i = 0; i < drawAmount; i++){
                 moveCard(POV.user, 'deck', 'deck_html', 'hand', 'hand_html', 0);
             };
+            let message;
+            if (drawAmount > 1){
+                message = determineUsername(POV.user) + ' drew ' + drawAmount + ' cards';
+                appendMessage(POV.user, message, 'player');
+            } else if (drawAmount === 1){
+                message = determineUsername(POV.user) + ' drew a card';
+                appendMessage(POV.user, message, 'player');
+            };
         };
         if (event.key === 's') {
             shuffleContainer(POV.user, 'deck', 'deck_html');
+            appendMessage(POV.user, determineUsername(POV.user) + ' shuffled deck', 'player');
         };
         if (event.key >= 1 && event.key <= 9 && event.altKey) {
             const deckCount = POV.user === 'self' ? deck.count : oppDeck.count;        
@@ -69,6 +81,18 @@ export const keyDown = (event) => {
             event.preventDefault();
             flipBoard();
         };
+        if (event.key === 'm') {
+            appendMessage(POV.user, determineUsername(POV.user) + ' mulligans', 'announcement');
+        };
+        if (event.key === 'd' && event.altKey) {
+            discardAndDraw(POV.user);
+        };
+        if (event.key === 's' && event.altKey) {
+            shuffleAndDraw(POV.user);
+        };
+        if (event.key === 'ArrowDown' && event.altKey) {
+            shuffleBottomAndDraw(POV.user);
+        };
     };
     if (sCard.selecting){
         const keyBinds = {
@@ -86,7 +110,7 @@ export const keyDown = (event) => {
             's': { locationAsString: 'deck', containerId: 'deck_html' },
         };
         const bind = keyBinds[event.key];
-        if (bind) {
+        if (bind && !event.altKey) {
             target.locationAsString = bind.locationAsString;
             target.containerId = bind.containerId;
             target.index = '';
@@ -100,6 +124,7 @@ export const keyDown = (event) => {
             } else if (event.key === 's'){
                 shuffleIntoDeck();
             } else {
+                moveCardMessage(sCard.locationAsString, target.locationAsString, 'move', sCard.card.image.attached);
                 moveCard(sCard.user, sCard.locationAsString, sCard.containerId, target.locationAsString, target.containerId, sCard.index, target.index);
             };
         };
@@ -133,6 +158,7 @@ export const keyDown = (event) => {
                 sCard.card.image.abilityCounter.handleRemove();
             } else {
                 addAbilityCounter(sCard.user, variableToString(sCard.user, sCard.location), variableToString(sCard.user, sCard.container), sCard.index);
+                appendMessage(POV.user, determineUsername(POV.user) + ' used ability', 'player');
             };
         };
         if (event.key >= 1 && event.key <= 9 && ['active_html', 'bench_html'].includes(sCard.containerId)){
diff --git a/resources/js/front-end/setup/chatbox/location-name.js b/resources/js/front-end/setup/chatbox/location-name.js
new file mode 100644
index 0000000..15c8534
--- /dev/null
+++ b/resources/js/front-end/setup/chatbox/location-name.js
@@ -0,0 +1,48 @@
+import { POV, sCard, target } from "../../front-end.js"
+import { determineUsername } from "../general/determine-username.js";
+import { appendMessage } from "./messages.js";
+
+export const findLocation = (locationAsString) => {
+    if (locationAsString === 'lostzone'){
+        return 'lost zone';
+    } else if (locationAsString === 'attachedCardPopup'){
+        return 'attached cards';
+    } else if (locationAsString === 'viewCards'){
+        return 'deck';
+    } else {
+        return locationAsString;
+    };
+}
+
+export const moveCardMessage = (oLocation, mLocation, action, attached = false) => {
+    oLocation = findLocation(oLocation);
+    mLocation = findLocation(mLocation);
+
+    let card;
+    if (attached){
+        card = 'attached card';
+    } else if (['active', 'bench'].includes(oLocation)){
+        card = 'Pokémon';
+    } else {
+        card = 'card';
+    };
+    if (typeof target.index === 'number' && (oLocation !== 'bench' || attached)){
+        action = 'attach';
+    };
+
+    let message;
+    if (action === 'move'){
+        message = determineUsername(POV.user) + ' moved ' + card + ' from ' + oLocation + ' to ' + mLocation;
+    } else if (action === 'shuffle'){
+        message = determineUsername(POV.user) + ' shuffled ' + card + ' from ' + oLocation + ' into deck';
+    } else if (action === 'top'){
+        message = determineUsername(POV.user) + ' moved ' + card + ' from ' + oLocation + ' to top of deck';
+    } else if (action === 'bottom'){
+        message = determineUsername(POV.user) + ' moved ' + card + ' from ' + oLocation + ' to bottom of deck';
+    } else if (action === 'switch'){
+        message = determineUsername(POV.user) + ' switched ' + card + ' from ' + oLocation + ' with top of deck';
+    } else if (action === 'attach'){
+        message = determineUsername(POV.user) + ' moved ' + card + ' from ' + oLocation + ' to Pokémon on ' + mLocation;
+    };
+    appendMessage(POV.user, message, 'player');
+};
\ No newline at end of file
diff --git a/resources/js/front-end/setup/chatbox/messages.js b/resources/js/front-end/setup/chatbox/messages.js
index 4b7eabc..039b8c2 100644
--- a/resources/js/front-end/setup/chatbox/messages.js
+++ b/resources/js/front-end/setup/chatbox/messages.js
@@ -2,14 +2,22 @@ import { chatbox, p1, p2Chatbox, roomId, socket } from '../../front-end.js';
 
 export const appendMessage = (user, message, type, received = false) => {
     const p = document.createElement('p');
-    p.className = type;
+    if (type === 'player'){
+        p.className = user === 'self' ? 'self-text' : 'opp-text';
+    } else if (type === 'message'){
+        p.className = user === 'self' ? 'self-message' : 'opp-message';
+    } else {
+        p.className = type;
+    };
     p.textContent = message;
     const chat = p1[0] ? chatbox : p2Chatbox;
     chat.appendChild(p);
     chat.scrollTop = chat.scrollHeight;
     if (!p1[0] && !received){
+        const oUser = user === 'self' ? 'opp' : 'self';
         const data = {
             roomId : roomId,
+            user: oUser,
             message: message,
             type : type,
             received : true
diff --git a/resources/js/front-end/setup/home-header/header-toggle.js b/resources/js/front-end/setup/home-header/header-toggle.js
index 7435003..a5a75b4 100644
--- a/resources/js/front-end/setup/home-header/header-toggle.js
+++ b/resources/js/front-end/setup/home-header/header-toggle.js
@@ -1,9 +1,20 @@
-import { deckImport, p1Box, p2Box, settings } from '../../front-end.js';
+import { deckImport, deckImportButton, p1Box, p1Button, p2Box, p2Button, settings, settingsButton } from '../../front-end.js';
 
-export const show = (id) => {
+export const show = (id, button) => {
     deckImport.style.display = 'none';
     settings.style.display = 'none';
     p1Box.style.display = 'none';
     p2Box.style.display = 'none';
-    document.getElementById(id).style.display = 'flex';
+    const page = document.getElementById(id);
+    page.style.display = 'flex';
+
+    const buttons = [p1Button, p2Button, settingsButton, deckImportButton];
+
+    buttons.forEach(btn => {
+        btn.classList.remove('selectedPage');
+        btn.classList.add('notSelectedPage');
+    });
+    
+    button.classList.remove('notSelectedPage');
+    button.classList.add('selectedPage');    
 }
\ No newline at end of file
diff --git a/resources/js/front-end/setup/sizing/resizer.js b/resources/js/front-end/setup/sizing/resizer.js
index 0ec5f73..f89fb99 100644
--- a/resources/js/front-end/setup/sizing/resizer.js
+++ b/resources/js/front-end/setup/sizing/resizer.js
@@ -2,7 +2,7 @@ import { addAbilityCounter } from '../../actions/counters/ability-counter.js';
 import { addDamageCounter } from '../../actions/counters/damage-counter.js';
 import { addSpecialCondition } from '../../actions/counters/special-condition.js';
 import { closeFullView } from '../../actions/general/close-popups.js';
-import { hand_html, oppContainers, oppHand_html, oppResizer, selfContainers, selfResizer, stadium_html } from '../../front-end.js';
+import { hand_html, oppContainers, oppHand_html, oppResizer, selfContainers, selfResizer, boardButtonContainer, stadium_html } from '../../front-end.js';
 import { stringToVariable } from '../containers/string-to-variable.js';
 import { adjustAlignment } from './adjust-alignment.js';
 // Create the overlay div
@@ -79,6 +79,7 @@ export const selfResize = (e) => {
         adjustCards('opp', 'active', 'active_html', oppRatio);
     };
     stadium_html.style.bottom = (Math.min(84, ((parseFloat(oppResizer.style.bottom) + parseFloat(selfResizer.style.bottom))/2 - 8))) + '%';
+    boardButtonContainer.style.bottom = (Math.min(90, ((parseFloat(oppResizer.style.bottom) + parseFloat(selfResizer.style.bottom))/2 - 3))) + '%';
     oppResizer.style.height = '2%';
     if (parseFloat(oppResizer.style.bottom) > 100){
         oppResizer.style.height = '6%';
@@ -120,6 +121,7 @@ export const oppResize = (e) => {
         adjustCards('self', 'active', 'active_html', selfRatio);
     };
     stadium_html.style.bottom = (Math.min(84, ((parseFloat(oppResizer.style.bottom) + parseFloat(selfResizer.style.bottom))/2 - 8))) + '%';
+    boardButtonContainer.style.bottom = (Math.min(90, ((parseFloat(oppResizer.style.bottom) + parseFloat(selfResizer.style.bottom))/2 - 3))) + '%';
     oppResizer.style.height = '2%';
     if (parseFloat(oppResizer.style.bottom) > 100){
         oppResizer.style.height = '6%';
diff --git a/resources/js/front-end/socket/event-listeners.js b/resources/js/front-end/socket/event-listeners.js
index 64ff232..141b6c6 100644
--- a/resources/js/front-end/socket/event-listeners.js
+++ b/resources/js/front-end/socket/event-listeners.js
@@ -17,22 +17,22 @@ socket.on('generateId', (id) => {
 });
 socket.on('joinGame', (otherPlayerUsername) => {
     p1[0] = false;
-    connectedRoom.style.display = 'block';
+    connectedRoom.style.display = 'flex';
     lobby.style.display = 'none';
     reset('self', true);
     reset('opp', true);
     if (otherPlayerUsername.length > 0){
         p2OppUsername[0] = otherPlayerUsername[0];
-        appendMessage('', otherPlayerUsername[0] + ' is here!', 'announcement', true);
+        appendMessage('opp', otherPlayerUsername[0] + ' is here!', 'announcement', true);
     };
-    appendMessage('', p2SelfUsername[0] + ' joined', 'announcement', true);
+    appendMessage('self', p2SelfUsername[0] + ' joined', 'announcement', true);
 });
 socket.on('joinMessage', (otherPlayerUsername) => {
     p2OppUsername[0] = otherPlayerUsername;
-    appendMessage('', otherPlayerUsername + ' joined', 'announcement', true);
+    appendMessage('opp', otherPlayerUsername + ' joined', 'announcement', true);
 });
 socket.on('leaveGameMessage', (otherPlayerUsername) => {
-    appendMessage('', otherPlayerUsername + ' left', 'announcement', true);
+    appendMessage('opp', otherPlayerUsername + ' left', 'announcement', true);
 });
 socket.on('roomReject', () => {
     // Create overlay