Merge branch 'main' into Resolved_Branch

ChromeGaming · Jun 21, 2024 · 99f437a · 99f437a
2 parents 539f3de + 8326528
commit 99f437a
Show file tree

Hide file tree

Showing 7 changed files with 233 additions and 24 deletions.
diff --git a/.github/workflows/CommentOnIssueClose.yml b/.github/workflows/CommentOnIssueClose.yml
@@ -0,0 +1,30 @@
+name: Comment on Issue Close
+
+on:
+  issues:
+    types: [closed]
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Comment on Closed Issue
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const response = await github.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body: `
+              Thank you for your contribution! If you have any questions or need further assistance, feel free to reach out to us on our Discord server: [Discord](https://discord.gg/rZb46cCMmK). We have separate channels for all projects. Happy coding! 🚀
+
+              Connect with us on social media:
+              - **GitHub**: [ChromeGaming](https://github.com/ChromeGaming)
+              - **LinkedIn**: [ChromeGaming](https://www.linkedin.com/company/chromegaming)
+              - **Instagram**: [@chromegamingon](https://www.instagram.com/chromegamingon/)
+              `
+            });
+            console.log(response);
diff --git a/404.html b/404.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>404:Page not found</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>">
+</head>
+<style>
+    body{
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background: linear-gradient(to bottom right, #FFEA7E, #FFA500); /* Default background gradient */
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+        background-size: cover;
+        height: 100vh;
+        overflow: hidden;
+    }
+    .center {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 90vh;
+
+    }
+    .pic{
+        width: 550px;
+        height: 550px;
+        animation: updown 2s ease-in-out infinite alternate;
+        transition: all 0.3s ease-in-out;
+    }
+    .pic:hover{
+        filter: drop-shadow(0 0 10px #fffdef);
+    }
+    @keyframes updown {
+        from{
+            transform: translateY(0);
+        }
+        to{
+            transform: translateY(20px);
+        }
+    }
+    a{
+        text-decoration: none;
+        color: #353535;
+    }
+    .btn{
+        position: absolute;
+        padding: 10px 20px;
+        background-color: #32ddaac9;
+        border-radius: 5px;
+        font-size: 20px;
+        font-weight: bold;
+        border: none;
+        top: 600px;
+    }
+    @media screen and (max-width: 600px) {
+        .pic{
+            width: 300px;
+            height: 300px;
+        }
+        .btn{
+            top: 500px;
+        }
+    }
+</style>
+<body>
+    <div class="center">
+        <img src="404pic2.png" alt="404 pic" class="pic">
+        <button class="btn"><a href="index.html">Home</a></button>
+    </div>
+    <script src="game.js"></script>
+</body>
+</html>
diff --git a/404pic2.png b/404pic2.png
diff --git a/PACKABUNCHAS b/PACKABUNCHAS
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@
 
   # Game Description 🎮
 
-  To every game enthusiast, here in PACKBUNCHES you are spacey, a group of space rangers specialised in packing and rescuing cretures around the galaxy! This is a stimulating brain game Built using core tech-stacks HTML and JavaScript that requires strategy and spatial intelligence. Players must strategically drag different shaped pieces onto the spaceship grid and aim to save the creatures! 🚀
+  To every game enthusiast, here in PACKABUNCHAS you are spacey, a group of space rangers specialised in packing and rescuing cretures around the galaxy! This is a stimulating brain game Built using core tech-stacks HTML and JavaScript that requires strategy and spatial intelligence. Players must strategically drag different shaped pieces onto the spaceship grid and aim to save the creatures! 🚀
 
   ### Features 📃
 

diff --git a/game.js b/game.js
@@ -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';
+});
diff --git a/index.html b/index.html
@@ -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;
@@ -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;
         }
@@ -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%;
@@ -60,7 +68,7 @@
             background-color: rgba(201, 179, 39, 0.8);
             border: 5px solid black;
             padding: 10px;
-            border-radius: 8px;
+            border-radius: 30px;
             display: none;
             flex-direction: column;
             color: whitesmoke;
@@ -72,8 +80,24 @@
         .gradient-selector-container select,
         .gradient-selector-container input {
             margin: 5px 0;
+            font-weight:800;
+        }
+
+        .color_input {
+        width: 30%;
+        display: flex;
+        flex-direction: column ;
+        height: 30px;
+        border-radius: 6px;
+        background-color: #5d4d54;
+        color: #5d4d54;
+        font-size: 12px;
+        font-family: Arial, sans-serif;
+        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
+        transition: box-shadow 0.3s, background-color 0.3s;
         }
 
+
         .gradient-selector-container select{
            border-radius: 5px;
            font-weight: 200; 
@@ -86,18 +110,57 @@
             background-color: #FFEA7E;
             transform: scale(1.1);
         }
+
+        .gradient-selector-container select {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        padding: 0.5em;
+        /* Add padding for the text */
+        padding-left: 0.5em;
+        /* Add a border for the placeholder */
+        border: 4px solid #5d4d54;
+        border-radius: 6px;  
+        font-weight:520;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+        font-size: 15px;
+        border-radius: 10px;
+        color: #5d4d54; 
+        background-color: #dfdccfe2; 
+        }
+
+        select:hover{
+            background-color: whitesmoke;
+        }
 
-        .gradient-button {
+
+        .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;
         }
@@ -128,29 +191,52 @@
             transform: scale(1.075);
         }
 
+
         #v{
-                border-radius: 0px 0px 25px 25px;
+            border-radius: 0px 0px 25px 25px;
+        }
+
+        .gradient-selector-container button {
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
         }
 
-        @media (min-width:365px) and (max-width: 768px){
-            .gradient-selector-container{
-                background-color: rgb(236, 195, 72);
-            }
+        .gradbtn{
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            border-radius: 10px;
+            width: 200px;
+            height: 35px;
         }
 
+        .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;
+
     </style>
 </head>
 <body>
 <div class="content">
     <canvas id="v" width="1080" height="1920"></canvas>
-    <button class="gradient-button" onclick="toggleGradientSelector()">🎨</button>
+    <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">
+        <label for="color1" class="color">Color 1:</label>
+        <input type="color" id="color1" name="color1" value="#FFEA7E" class="color_input">
+        <label for="color2" class="color">Color 2:</label>
+        <input type="color" id="color2" name="color2" value="#FFA500" class="color_input">
+        <label for="direction" class="direction">Direction:</label>
+        <select id="direction" class="custom-select" name="direction">
+            <option disabled selected value="select direction">Select direction</option>
             <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>
@@ -160,10 +246,18 @@
             <option value="to left">To Left</option>
             <option value="to right">To Right</option>
         </select>
-        <button class="apply_btn" onclick="applyGradient()">Apply Gradient</button>
+        <button onclick="applyGradient()" class="gradbtn">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>
 <script src="game.js"></script>
 </body>
-</html>
+</html>