Skip to content

Commit

Permalink
Merge pull request #306 from Vimall03/main
Browse files Browse the repository at this point in the history 
Redesigned game page with changing theme, added mute & restart button
  • Loading branch information
@ayush-t02
ayush-t02 authored Jun 4, 2024
2 parents c1cbbf0 + 43f47ff commit fbb5488
Show file tree
Hide file tree
Showing 6 changed files with 405 additions and 478 deletions.
Binary file added assets/2.mp4
View file
Binary file not shown.
Binary file added assets/3.mp4
View file
Binary file not shown.
Binary file added assets/default.mp4
View file
Binary file not shown.
186 changes: 80 additions & 106 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,91 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />

<!-- JavaScript files -->
<script defer src="./js/edge.js"></script>
<script defer src="./js/box.js"></script>
<script defer src="./js/board.js"></script>
<script defer src="./js/game.js"></script>
<script defer src="./js/edge.js"></script>
<script defer src="./js/box.js"></script>
<script defer src="./js/board.js"></script>
<script defer src="./js/game.js"></script>

<!-- Logo of the game -->
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">

<!-- Title of the game -->
<title>Dots & Boxes Game</title>
<title>Dots & Boxes Game</title>
</head>

<body>
<!-- Setting Page -->
<div class="settings">
<div class="form">
<h1 class="heading"
style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">
▁ ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁
</h1>

<h3 class="instructions-heading">Instructions</h3>

<p class="instructions">
1. Select the number of rows, columns and players. <br>
2. The player who has maximum number of boxes on board is the winner. <br>
3. Players will switch after every turn. But the player who has filled the last box, will get one extra
chance
consecutively. <br>
</p>

</div>

<!-- Form page -->
<div class="form">
<div>
<h2>What size of Board do you want? :</h2>
</div>

<div class="form-item">
<label for="rows">Rows : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="rows" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="columns">Columns : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="columns" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="players-count">Players : <span class="details">(between 2 and 6)</span></label>
<input type="number" id="players-count" min="2" max="6" value="2" />
</div>

<button class="start-btn">START</button>

</div>

<p class="author">
Created with ❤️ by <a target="_blank" href="#">Chrome Gaming</a>
</p>

</div>
<!-- Exit button -->
<!-- (BUG : resolved by harshcodesit) -->
<form action="#" method="post">
<button class="exit-btn" onclick="exitGame()">Exit</button>
</form>
<!-- Players -->
<div class="players" style="margin-top: 50px;"></div>

<div class="player-turn">
<div class="bg" style="margin-top: 60px;">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="board" style="margin-top: 154px;"></div>

<div class="rankings">
<table>
<thead>
<tr>
<th>Rank</th>
<th>Player</th>
<th>Boxes Filled</th>
</tr>
</thead>
<tbody id="ranking-body">
<!-- Rankings will be dynamically updated here -->
</tbody>
</table>
</div>


<!-- Background Videos -->
<video autoplay loop muted plays-inline class="back" id="background-video">
<source src="./background/back4.mp4" type="video/mp4">
</video>

<button class="mute-btn"><i class="fa fa-volume-up fa-2x"></i></button>

<div class="settings">
<video autoplay muted class="video" loop id="myVideo">
<source src="./assets/default.mp4" type="video/mp4">
</video>

<div class="form">
<h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1>

<h3 class="instructions-heading">Instructions</h3>

<p class="instructions">
1. Select the number of rows, columns and players. <br>
2. The player who has maximum number of boxes on board is the winner. <br>
3. Players will switch after every turn. But the player who has filled the last box, will get one extra
chance consecutively. <br>
</p>
</div>

<div class="form">
<div class="form-item">
<label for="theme-select">Select Theme:</label>
<select id="theme-select">
<option value="default">Default</option>
<option value="2">Theme 1</option>
<option value="3">Theme 2</option>
</select>
</div>

<div class="form-item">
<label for="rows">Rows : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="rows" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="columns">Columns : <span class="details">(between 5 and 30)</span></label>
<input type="number" id="columns" min="5" max="30" value="6" />
</div>

<div class="form-item">
<label for="players-count">Players : <span class="details">(between 2 and 6)</span></label>
<input type="number" id="players-count" min="2" max="6" value="2" />
</div>

<button class="start-btn">START</button>
</div>

<p class="author">
Created with ❤️ by <a target="_blank" href="#">Chrome Gaming</a>
</p>
</div>


<div class="flex">
<div class="board"></div>
<div class="score">
<div class="players"></div>
<video autoplay muted class="video" loop id="myVideo2">
<source src="./assets/default.mp4" type="video/mp4">
</video>
<div class="player-turn">
<div class="bg">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<div class="flex-btn">
<button>Mute</button>
<button>Restart</button>
</div>
</div>
</div>
</body>

</html>
Loading

0 comments on commit fbb5488

Please sign in to comment.