diff --git a/js/game.js b/js/game.js
index 94cf7ee..053c2be 100644
--- a/js/game.js
+++ b/js/game.js
@@ -48,12 +48,13 @@ class Game {
// Create timer UI
createTimerUI() {
const timerContainer = document.createElement("div");
+ const misc = document.querySelector(".button-container");
timerContainer.id = "timer-container";
timerContainer.innerHTML = `
<div id="timer">30</div>
<div id="timer-label">seconds left</div>
`;
- document.body.appendChild(timerContainer);
+ misc.appendChild(timerContainer);
this.timerDisplay = document.getElementById("timer");
}
@@ -149,6 +150,9 @@ class Game {
// Add players to UI
addPlayersUI() {
+ const scoreboardContainer = document.querySelector(".scoreboard-container");
+ scoreboardContainer.style.visibility = "visible";
+
const scoreboard = document.querySelector(".scoreboard");
scoreboard.innerHTML = ""; // Clear existing content
diff --git a/pages/game.html b/pages/game.html
index 4063724..8ab79dd 100644
--- a/pages/game.html
+++ b/pages/game.html
@@ -29,6 +29,695 @@
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
+ <style>
+ .back-home:visited {
+ color: white;
+ }
+
+ .button-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ }
+
+ .button-container button,
+ .button-container a {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 13px 13px;
+ font-size: 14px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+ transition: background-color 0.3s ease;
+ }
+
+ .button-container #sound-toggle {
+ background-color: rgb(12, 1, 1);
+ border-radius: 4px;
+ padding: 1rem 1.2rem;
+ }
+
+ .button-container svg {
+ width: 30px;
+ height: 30px;
+ fill: white;
+ }
+
+ .button-container a {
+ text-decoration: none;
+ }
+
+ .button-container button:hover,
+ .button-container a:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ .button-container #sound-toggle:hover {
+ background-color: rgb(21, 39, 77);
+ }
+
+ .button-container [title]:hover::after {
+ opacity: 1;
+ }
+
+ .circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(circle, #ff6600, #ffb584a5);
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+ }
+
+ .circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 99999;
+ }
+
+ /* Timer */
+ #timer-container {
+ height: 77px;
+ width: 96px;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ text-align: center;
+ }
+
+ #timer {
+ font-size: 38px;
+ font-weight: bold;
+ margin-top: -19px;
+ color: #333;
+ }
+
+ #timer-label {
+ font-size: 14px;
+ color: #666;
+ margin-top: -6px;
+ }
+
+ /* Score board */
+ .game-wrapper {
+ position: relative;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ padding: 20px;
+ }
+
+ .game-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ }
+
+ .scoreboard-container {
+ position: absolute;
+ right: 5%;
+ top: 20%;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ padding: 20px;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+ width: 275px;
+ cursor: move;
+ visibility: hidden;
+ }
+
+ .scoreboard-container h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+ }
+
+ .scoreboard {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .score {
+ font-size: 22px;
+ font-weight: bold;
+ padding: 15px;
+ border-radius: 10px;
+ text-align: center;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ /* Tour */
+ #tour-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ }
+
+ .overlay-content ul {
+ text-align: left;
+ margin: 20px 0;
+ }
+
+ .tour-step {
+ position: absolute;
+ display: none;
+ padding: 20px;
+ border-radius: 8px;
+ background: #fff0f5;
+ color: #000;
+ width: 314px;
+ }
+
+ .tour-step.step-1 {
+ top: 20%;
+ left: 40%;
+ margin-top: -268px;
+ }
+
+ .tour-step.step-2 {
+ top: 80%;
+ left: 66%;
+ margin-top: -16%;
+ }
+
+ .tour-step.step-3 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-4 {
+ top: 27%;
+ right: 57%;
+ margin-top: -30%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-5 {
+ top: 10%;
+ left: 13%;
+ margin-top: -28%;
+ width: 340px;
+ }
+
+ .tour-step.step-6 {
+ top: 20%;
+ left: 42%;
+ margin-top: -103px;
+ width: 392px;
+ }
+
+ .tour-step.step-7 {
+ top: 20%;
+ left: 31%;
+ margin-top: -80px;
+ width: 392px;
+ }
+
+ .tour-controls {
+ position: absolute;
+ bottom: -40px;
+ width: 86%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .tour-controls .button {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 5px 17px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .tour-controls .button:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ #prev-step {
+ background-color: rgb(255, 165, 0);
+ }
+
+ #skip-tour {
+ background-color: rgb(255, 0, 0);
+ }
+
+ .overlay-content .button-container {
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ /* Responsive styles for tablets and mobile devices */
+ @media screen and (max-width: 768px) {
+ .players {
+ margin-top: 1.5rem;
+ }
+
+ .player-turn {
+ top: 30px;
+ }
+
+ .tour-step {
+ width: 80%;
+ padding: 15px;
+ }
+
+ .circle-container {
+ display: none;
+ }
+
+ .button-container button,
+ .button-container a {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 13px;
+ font-size: 14px;
+ cursor: pointer;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ position: relative;
+ transition: background-color 0.3s ease;
+ }
+
+ .button-container #sound-toggle {
+ background-color: rgb(12, 1, 1);
+ border-radius: 4px;
+ padding: 10px 20px;
+ }
+
+ .button-container svg {
+ width: 30px;
+ height: 30px;
+ fill: white;
+ }
+
+ .button-container a {
+ text-decoration: none;
+ }
+
+ .button-container button:hover,
+ .button-container a:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ .button-container #sound-toggle:hover {
+ background-color: rgb(21, 39, 77);
+ }
+
+ .button-container [title]:hover::after {
+ opacity: 1;
+ }
+
+ .circle {
+ position: absolute;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ pointer-events: none;
+ background: radial-gradient(
+ circle,
+ rgba(73, 232, 247, 0.466),
+ rgba(141, 38, 172, 0.5)
+ );
+ transition: transform 0.1s, left 0.1s, top 0.1s;
+ }
+
+ .circle-container {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 99999;
+ }
+
+ /* Timer */
+ #timer-container {
+ height: 90px;
+ width: 103px;
+ padding: 15px;
+ }
+
+ #timer {
+ font-size: 38px;
+ font-weight: bold;
+ margin-top: -11px;
+ color: #333;
+ }
+
+ #timer-label {
+ font-size: 14px;
+ color: #666;
+ margin-top: -6px;
+ }
+
+ /* Score board */
+ .game-wrapper {
+ margin-top: 7rem;
+ }
+
+ .game-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ margin-top: -156px;
+ }
+
+ .scoreboard-container {
+ position: static;
+ z-index: 500;
+ margin: 2rem;
+ }
+
+ .scoreboard-container h2 {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #333;
+ }
+
+ .scoreboard {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+
+ .score {
+ font-size: 22px;
+ font-weight: bold;
+ padding: 15px;
+ border-radius: 10px;
+ text-align: center;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ /* Tour */
+ #tour-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.3);
+ display: none;
+ align-items: center;
+ justify-content: center;
+ z-index: 10000;
+ }
+
+ .overlay-content ul {
+ text-align: left;
+ margin: 20px 0;
+ }
+
+ .tour-step {
+ position: absolute;
+ display: none;
+ padding: 20px;
+ border-radius: 8px;
+ background: #fff0f5;
+ color: #000;
+ width: 314px;
+ }
+
+ .tour-step.step-1 {
+ top: 20%;
+ left: 40%;
+ margin-top: -268px;
+ }
+
+ .tour-step.step-2 {
+ top: 80%;
+ left: 15%;
+ margin-top: -16%;
+ }
+
+ .tour-step.step-3 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-4 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step.step-5 {
+ bottom: 30%;
+ left: 14%;
+ margin-bottom: 230px;
+ }
+
+ .tour-step.step-6 {
+ top: 20%;
+ left: 37%;
+ margin-top: -74px;
+ width: 536px;
+ }
+
+ .tour-step.step-7 {
+ top: 20%;
+ left: 32%;
+ margin-top: -65px;
+ width: 392px;
+ }
+
+ .tour-controls {
+ position: absolute;
+ bottom: -40px;
+ width: 86%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+
+ .tour-controls .button {
+ background-color: rgb(0, 166, 255);
+ color: white;
+ border: none;
+ padding: 5px 17px;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+ }
+
+ .tour-controls .button:hover {
+ background-color: rgb(69, 133, 254);
+ }
+
+ #prev-step {
+ background-color: rgb(255, 165, 0);
+ }
+
+ #skip-tour {
+ background-color: rgb(255, 0, 0);
+ }
+
+ .overlay-content .button-container {
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ }
+ }
+
+ @media screen and (max-width: 1200px) {
+ .circle-container {
+ display: none;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .player-turn {
+ top: 20px;
+ }
+
+ .button-container {
+ gap: 0.5rem;
+ }
+
+ .button-container svg {
+ width: 15px;
+ height: 15px;
+ }
+
+ .button-container a {
+ padding: 0.5rem;
+ }
+
+ #game-wrapper {
+ margin-top: 5rem;
+ }
+
+ #timer-container {
+ height: 70px;
+ width: 72px;
+ padding: 15px;
+ }
+
+ #timer {
+ font-size: 33px;
+ font-weight: bold;
+ margin-top: -15px;
+ color: #333;
+ }
+
+ #timer-label {
+ font-size: 11px;
+ color: #666;
+ margin-top: -5px;
+ }
+
+ .scoreboard-container {
+ margin-top: 1rem;
+ }
+
+ .tour-step.step-1 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ }
+
+ .tour-step.step-2 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -39px;
+ }
+
+ .tour-step.step-3 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -392px;
+ }
+
+ .tour-step.step-4 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-bottom: 53px;
+ }
+
+ .tour-step.step-5 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -119px;
+ }
+
+ .tour-step.step-6 {
+ width: 83%;
+ padding: 10px;
+ left: 41%;
+ margin-left: -32%;
+ margin-top: -193px;
+ }
+
+ .tour-step.step-7 {
+ width: 83%;
+ padding: 10px;
+ left: 65%;
+ margin-left: -32%;
+ margin-top: -339px;
+ }
+
+ .tour-step .step-8 {
+ top: 20%;
+ right: 59%;
+ margin-top: -32%;
+ width: 399px;
+ padding: 20px;
+ }
+
+ .tour-step h3 {
+ font-size: 1em;
+ }
+
+ .tour-step p {
+ font-size: 0.8em;
+ }
+
+ .tour-controls .button {
+ padding: 5px 10px;
+ font-size: 0.8em;
+ }
+
+ .tour-controls {
+ flex-direction: column;
+ gap: 3px;
+ margin-bottom: -15%;
+ margin-left: 8px;
+ }
+
+ .circle-container {
+ display: none;
+ }
+ }
+
+ #myVideo {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ min-width: 100%;
+ min-height: 100%;
+ z-index: -1;
+ }
+ </style>
<!-- Title of the game -->
<title>Dots & Boxes Game</title>
@@ -101,12 +790,6 @@ <h2>Select Avatar</h2>
<!-- Game Page -->
<div class="game-wrapper">
- <div class="scoreboard-container">
- <h2>Scoreboard</h2>
- <div class="scoreboard">
- <!-- Scoreboard content will be dynamically added here -->
- </div>
- </div>
<div class="game-container">
<div class="board"></div>
</div>
@@ -133,6 +816,13 @@ <h2>Scoreboard</h2>
</a>
</div>
+ <div class="scoreboard-container">
+ <h2>Scoreboard</h2>
+ <div class="scoreboard">
+ <!-- Scoreboard content will be dynamically added here -->
+ </div>
+ </div>
+
<!-- Winner Overlay -->
<div id="win-overlay" class="overlay">
<!-- Overlay content -->