Skip to content

Commit

Permalink
Added the instructions button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Khushipawar37
Khushipawar37 committed Jun 7, 2024
1 parent 80f5105 commit 1ab595f
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 38 deletions.
7 changes: 7 additions & 0 deletions game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3914,3 +3914,10 @@ function applyGradient() {
document.querySelector('.content').style.background = `linear-gradient(${direction}, ${color1}, ${color2})`;
toggleGradientSelector(); // Close the selector container after applying the gradient
}

// Function to display instructions

document.querySelector('.instructions').addEventListener('click', () => {
const instructionsBox = document.getElementById('instructionsBox');
instructionsBox.style.display = instructionsBox.style.display === 'none' || instructionsBox.style.display === '' ? 'block' : 'none';
});
122 changes: 84 additions & 38 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>PACKABUNCHAS</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
<link rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.c {
position: fixed;
Expand All @@ -30,7 +35,8 @@
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom right, #FFEA7E, #FFA500); /* Default background gradient */
background: linear-gradient(to bottom right, #FFEA7E, #FFA500);
/* Default background gradient */
overflow: hidden;
position: relative;
}
Expand All @@ -39,11 +45,13 @@
width: auto;
height: auto;
max-width: 100%;
max-height: 100%; /* Adjusting to full available height */
max-height: 100%;
/* Adjusting to full available height */
touch-action: none;
}

body, html {
body,
html {
margin: 0;
padding: 0;
height: 100%;
Expand All @@ -57,7 +65,7 @@
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.4);
padding: 10px;
border-radius: 8px;
display: none;
Expand All @@ -71,51 +79,89 @@
margin: 5px 0;
}

.gradient-button {
.gradient-button:focus {
outline: none;
}

.controls-container {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
background-color:rgb(126, 198, 181);
padding: 10px;
border-radius: 8px;
}

.instructions {
cursor: pointer;
font-size: 24px;
color: black;
margin-right: 10px;
}

.gradient-button {
padding: 10px;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: whitesmoke;
}

.gradient-button:focus {
outline: none;
.instructions-box {
position: absolute;
top: 50px;
right: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 8px;
display: none;
max-width: 300px;
z-index: 10;
}
#v {
border-radius: 0px 0px 25px 25px;
}

#v{
border-radius: 0px 0px 25px 25px;
}

</style>
</head>
<body>
<div class="content">
<canvas id="v" width="1080" height="1920"></canvas>
<button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
<div class="gradient-selector-container" id="gradientSelectorContainer">
<label for="color1">Color 1:</label>
<input type="color" id="color1" name="color1" value="#FFEA7E">
<label for="color2">Color 2:</label>
<input type="color" id="color2" name="color2" value="#FFA500">
<label for="direction">Direction:</label>
<select id="direction" name="direction">
<option value="to bottom right">To Bottom Right</option>
<option value="to bottom left">To Bottom Left</option>
<option value="to top right">To Top Right</option>
<option value="to top left">To Top Left</option>
<option value="to bottom">To Bottom</option>
<option value="to top">To Top</option>
<option value="to left">To Left</option>
<option value="to right">To Right</option>
</select>
<button onclick="applyGradient()">Apply Gradient</button>
<div class="content">
<canvas id="v" width="1080" height="1920"></canvas>
<div class="controls-container">
<div class="instructions"><i class="fa-regular fa-lightbulb"></i></div>
<button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
</div>
<div class="gradient-selector-container" id="gradientSelectorContainer">
<label for="color1">Color 1:</label>
<input type="color" id="color1" name="color1" value="#FFEA7E">
<label for="color2">Color 2:</label>
<input type="color" id="color2" name="color2" value="#FFA500">
<label for="direction">Direction:</label>
<select id="direction" name="direction">
<option value="to bottom right">To Bottom Right</option>
<option value="to bottom left">To Bottom Left</option>
<option value="to top right">To Top Right</option>
<option value="to top left">To Top Left</option>
<option value="to bottom">To Bottom</option>
<option value="to top">To Top</option>
<option value="to left">To Left</option>
<option value="to right">To Right</option>
</select>
<button onclick="applyGradient()">Apply Gradient</button>
</div>
<div class="instructions-box" id="instructionsBox">
<h2>Game Instructions</h2>
<p>Welcome to the game! Here are the instructions:</p>
<ul>
<li>Drag the puzzle pieces.</li>
<li>You can change thier direction by double clicking on it.</li>
<li>Adjust the puzzle pieces to completely occupy the given space.</li>
<li>Have fun!</li>
</ul>
</div>
</div>

</div>
<script src="game.js"></script>
<script src="game.js"></script>
</body>
</html>
</html>

0 comments on commit 1ab595f

Please sign in to comment.