Merge branch 'main' into main

YadavAkhileshh · Nov 1, 2024 · f93210a · f93210a
2 parents 3f49216 + 98deaf2
commit f93210a
Show file tree

Hide file tree

Showing 34 changed files with 4,235 additions and 1,193 deletions.
diff --git a/.github/ISSUE_TEMPLATE/Custom.yml b/.github/ISSUE_TEMPLATE/Custom.yml
@@ -0,0 +1,70 @@
+name: "⚙️ Custom Issue"
+description: "Submit a custom issue or suggestion for Alien-Invasion-Defense."
+title: "[Custom]: <Brief description of the issue>"
+labels: ["custom", "status: needs triage"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for submitting a custom issue for **Alien-Invasion-Defense**! This template is intended for any requests or suggestions that don't fit into the bug report, feature request, or documentation categories.
+
+  - type: input
+    id: issue_summary
+    attributes:
+      label: "Issue Summary"
+      description: "Provide a summary of the custom issue."
+      placeholder: "E.g., Enhancement suggestion for search functionality"
+    validations:
+      required: true
+
+  - type: textarea
+    id: issue_description
+    attributes:
+      label: "Issue Description"
+      description: "Describe the issue or suggestion in detail."
+      placeholder: "Provide a detailed description of the custom issue, including the context, use case, or scenario in which this issue occurs or would be relevant..."
+    validations:
+      required: true
+
+  - type: textarea
+    id: proposed_solution
+    attributes:
+      label: "Proposed Solution (Optional)"
+      description: "If you have any ideas or suggestions for how to address this issue, describe them here."
+      placeholder: "Describe your proposed solution or approach..."
+
+  - type: dropdown
+    id: priority
+    attributes:
+      label: "Priority"
+      description: "How important is this issue to you?"
+      options:
+        - "High - Requires urgent attention"
+        - "Medium - Should be addressed soon"
+        - "Low - Can be addressed later"
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: category
+    attributes:
+      label: "Category"
+      description: "Select the category that best describes the issue."
+      options:
+        - label: "Enhancement"
+        - label: "Refactor"
+        - label: "Security"
+        - label: "Design"
+        - label: "Other"
+
+  - type: textarea
+    id: additional_context
+    attributes:
+      label: "Additional Context (Optional)"
+      description: "Add any other context or information that might be relevant to this issue."
+      placeholder: "Provide any extra details, screenshots, or references that could help with understanding the issue..."
+
+  - type: markdown
+    attributes:
+      value: |
+        **Thank you for your suggestion!** We appreciate your input and will review your custom issue promptly. 📝
diff --git a/Alien.css b/Alien.css
@@ -17,17 +17,18 @@
   --border-dark: #2d2d3a;
 
   /* Common Variables */
-  --game-font: 'Press Start 2P', system-ui, -apple-system, sans-serif;
+  --game-font: "Roboto", sans-serif; /* Updated to 'Roboto' */
   --transition-speed: 0.3s;
 }
 
 /* Base Styles */
 body {
   margin: 0;
   padding: 0;
-  font-family: var(--game-font);
+  font-family: var(--game-font); /* This line uses the updated font */
   min-height: 100vh;
-  transition: background-color var(--transition-speed), color var(--transition-speed);
+  transition: background-color var(--transition-speed),
+    color var(--transition-speed);
 }
 
 /* Light Theme (default) */
@@ -40,15 +41,19 @@ body {
 body.dark-theme {
   background-color: var(--background-dark);
   color: var(--text-light);
-  background-image: 
-    radial-gradient(circle at 50% 50%, rgba(0, 255, 136, 0.1) 0%, transparent 50%),
+  background-image: radial-gradient(
+      circle at 50% 50%,
+      rgba(0, 255, 136, 0.1) 0%,
+      transparent 50%
+    ),
     linear-gradient(to bottom, #0a0b1a 0%, #1a1b3a 100%);
 }
 
+/* Other styles remain unchanged */
+
 /* Game Container */
 #gameContainer {
   position: relative;
-  width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
@@ -59,7 +64,8 @@ body.dark-theme {
 #gameCanvas {
   border: 2px solid;
   border-radius: 8px;
-  transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
+  transition: border-color var(--transition-speed),
+    box-shadow var(--transition-speed);
 }
 
 #gameOver {
@@ -69,7 +75,12 @@ body.dark-theme {
   left: 15%;
   transform: translate(-50%, -50%);
   text-align: center;
-  background-color: rgba(0, 0, 0, 0.7); /* Optional: semi-transparent background */
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); /* Optional: semi-transparent background */
   color: white; /* Text color */
   padding: 20px;
   border-radius: 10px; /* Optional: rounded corners */
@@ -82,15 +93,18 @@ body.dark-theme {
   left: 35%;
   transform: translate(-50%, -50%);
   text-align: center;
-  background-color: rgba(242, 255, 0, 0.7); /* Optional: semi-transparent background */
+  background-color: rgba(
+    242,
+    255,
+    0,
+    0.7
+  ); /* Optional: semi-transparent background */
   color: white; /* Text color */
   padding: 20px;
   border-radius: 10px; /* Optional: rounded corners */
   z-index: 1000; /* Ensure it appears above other content */
 }
 
-
-
 body.light-theme #gameCanvas {
   border-color: var(--primary-color-light);
   box-shadow: 0 0 15px rgba(37, 99, 235, 0.2);
@@ -108,12 +122,12 @@ body.dark-theme #gameCanvas {
   max-width: 68%;
   margin-left: 40px;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   padding: 20px;
   border-radius: 8px;
   margin-bottom: 20px;
-  transition: background-color var(--transition-speed), border-color var(--transition-speed);
+  transition: background-color var(--transition-speed),
+    border-color var(--transition-speed);
 }
 
 body.light-theme #gameControls {
@@ -188,7 +202,12 @@ input:checked + .slider:before {
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;
-  background-color: rgba(0, 0, 0, 0.7); /* Optional: semi-transparent background */
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.7
+  ); /* Optional: semi-transparent background */
   color: white; /* Text color */
   padding: 20px;
   border-radius: 10px; /* Optional: rounded corners */
@@ -238,7 +257,8 @@ body.dark-theme button:hover {
   width: 300px;
   height: 100vh;
   padding: 20px;
-  transition: background-color var(--transition-speed), border-color var(--transition-speed);
+  transition: background-color var(--transition-speed),
+    border-color var(--transition-speed);
 }
 
 body.light-theme .sidebar {
@@ -289,4 +309,112 @@ body.light-theme #instructionsTitle {
 
 body.dark-theme #instructionsTitle {
   color: var(--primary-color-dark);
-}
+}
+
+.controls {
+  margin-left: 33%;
+}
+/* responsive styling */
+
+/* Hamburger icon styling */
+.hamburger-icon {
+  display: none;
+  position: absolute;
+  top: 15px;
+  right: 2px;
+  cursor: pointer;
+  font-size: 1.5em;
+  z-index: 2000;
+}
+
+/* Display the sidebar and hamburger icon on screens <= 768px */
+@media screen and (max-width: 768px) {
+  /* Hide the sidebar by default for smaller screens */
+  .sidebar {
+    display: none;
+    position: fixed;
+    right: 0;
+    width: 250px;
+    background-color: #333;
+    color: #fff;
+    height: 100%;
+    padding: 20px;
+    z-index: 1000;
+    overflow-y: auto;
+    transform: translateX(100%);
+  }
+  .hamburger-icon {
+    display: block;
+  }
+
+  /* Sidebar styling for slide-in effect */
+  .sidebar.active {
+    display: block;
+    transform: translateX(0);
+  }
+
+  .controls {
+    margin-right: 45%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+/* Center the container */
+.button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap; /* Allows wrapping when space is limited */
+  max-width: 100%;
+  margin: 0 auto; /* Center container */
+  padding: 10px 0;
+}
+
+/* Preserve button size and reduce gaps only when necessary */
+.button-container button,
+.button-container h2 {
+  flex: 0 1 auto; /* Keep buttons at their original size */
+  text-align: center;
+}
+
+/* Minimal gap on smaller screens */
+@media (max-width: 768px) {
+  .button-container {
+    gap: 5px; /* Smaller gap between buttons */
+  }
+}
+
+#gameControls.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Minimal gap on smaller screens */
+@media (max-width: 768px) {
+  #gameControls.header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    font-size: 10px;
+    gap: 10px;
+    padding: 8px;
+    margin-top: 8px;
+  }
+
+  #gameControls.header button,
+  #gameControls.header select {
+    padding: 6px 10px;
+    font-size: 0.9em;
+    width: auto; /* Keeps button widths adaptive */
+  }
+
+  #gameControls.header #pauseBtn {
+    font-size: 0.9em;
+    padding: 5px 8px;
+  }
+}