catch up

README.md

@@ -64,9 +64,6 @@ We've used [Balsamiq](https://balsamiq.com/wireframes) to design our site wirefr
 |   | Landing Page | Game Page | Contact Page |
 | --- | --- | --- | --- |
 | Desktop | ![Landing Page Screenshot](/docs/wireframes/landing-page.png) | ![Game Page Screenshot](/docs/wireframes/game-page.png) | ![Contact Page Screenshot](/docs/wireframes/contact-page.png)|
-| Tablet | TBC | TBC | TBC |
-| Mobile | TBC | TBC | TBC |
-
 
 [Back to top](#marios-reboot)
 
@@ -84,6 +81,10 @@ We've used [Balsamiq](https://balsamiq.com/wireframes) to design our site wirefr
 
   - The contact page is for users to submit messages about anything to do with the Mario's Reboot game to the developers.
 
+- **Thank You Page**
+
+  - The thank you page is to say thank you to users for getting in touch.
+
 - **Navbar**
 
   - Navbar is present so that the user can navigate around the site.
@@ -92,6 +93,24 @@ We've used [Balsamiq](https://balsamiq.com/wireframes) to design our site wirefr
 
 - **Error Page**
 
+We have included error handling for error 404 pages:
+
+![Error Page Screenshot](/docs/readme_screenshots/error-page.png)
+
+- **Images**
+
+We have included the following images in the project:
+
+| Image | Screenshot |
+| --- | --- |
+| About Title | ![About Page Title Screenshot](/assets/images/about-title.webp) |
+| Title | ![Project Title Screenshot](/assets/images/title.webp) |
+| Contact Link | ![Contact Link Screenshot](/assets/images/contact.webp) |
+| Developers Link | ![Developers Link Screenshot](/assets/images/developers.webp) |
+| Homepage Link | ![Homepage Link Screenshot](/assets/images/homepage.webp) |
+| Start Link | ![Start Link Screenshot](/assets/images/start.webp)
+| Bricks | ![Bricks Image Screenshot](/assets/images/bricks.webp) |
+
 [Back to top](#marios-reboot)
 
 ## Tools & Technologies Used
@@ -256,7 +275,8 @@ By forking the GitHub Repository, we make a copy of the original repository on o
 | Source | Location | Notes |
 | --- | --- | --- |
 | [Favicon](https://www.favicon.cc/?action=icon&file_id=898422) | Favicon | Created by ineedicons |
-| [Mario Retro Font](https://www.mariowiki.com/List_of_fonts#Classic_Super_Mario_font) | Fonts | Created by mariowiki | 
+| [Mario Retro Font](https://www.mariowiki.com/List_of_fonts#Classic_Super_Mario_font) | Fonts | Created by mariowiki |
+| canva | Images | canva |
 
 ### Acknowledgements
 

assets/css/game.css

@@ -8,4 +8,5 @@
 
 body, html {
     overflow: auto !important;
-}
+}
+

assets/css/style.css

@@ -122,7 +122,9 @@ label.menu-icon {
   z-index: 10;
   border-radius: 5px;
   padding: 10px;
-  background: transparent;
+  background:transparent;
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
   transform: translateX(100%);
   transition: transform 0.3s ease;
   display: none;
@@ -340,6 +342,36 @@ box-shadow: 0 0 20px 10px #ffffff;
     transform: scale(1.5);
   }
 
+  .card {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+    width: 40%;
+    margin-bottom: 5px;
+    font-size: 8.7px;
+    height: 150px;
+}
+
+div.powers {
+  display: flex;
+  position: absolute;
+  bottom: 46px;
+}
+
+  .card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+  }
+
+  .mushroom {
+    padding: 2px 16px;
+  }
+  .powers{
+  display:flex;
+  gap:20px;
+
+  }
+
+/*Footer*/
+
 footer {
   display: flex;
   justify-content: space-around;
@@ -430,9 +462,10 @@ footer {
   text-align: center;
   width: 90%;
   left: 5%;
-  font-size: 30px;
+  font-size: 24px;
   position: fixed;
   top: 430px;
+  margin-top: 50px;
 }
 
 #error-link {
@@ -443,38 +476,137 @@ footer {
   top: 580px;
   color: #E52521;
   text-decoration: none;
-  height: 90px;
-  width: 300px;
+  height: 70px;
+  width: 240px;
+  margin-top: 60px;
 }
 
-/* Media query for smaller screens for errors */
- @media (max-width: 768px) {
- #error-text {
-    font-size: 24px;
-    margin-top: 50px;
+/* Styling for thank you page */
+
+.scene-thank-you {
+  width: 100dvw;
+  height: 100dvh;
+  background-color: #049cd8;
+  position: relative;
+  overflow: hidden;
+}
+
+.box-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); 
+    width: 100%;
+    height: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* Box styling */
+.centered-box {
+    font-family: "Press Start 2P", cursive;
+    text-align: center;
+    background-color: #ffffff9d;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 800px;
+    width: 90%;
+    left: 5%;
+    opacity: 0;  /* Initially hidden */
+    transform: scale(0);  /* Start from a small scale */
+    transition: transform 3s ease-out, opacity 3s ease-out;
+    animation: expand-box 3s ease-out forwards;
+}
+
+/* Keyframes to handle the expansion */
+@keyframes expand-box {
+    0% {
+        opacity: 0;
+        transform: scale(0);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.centered-box h2 {
+    margin-bottom: 20px;
+    font-size: 22px;
+    color: #000000;
+}
+
+.centered-box p {
+    margin-bottom: 15px;
+    font-size: 18px;
+    color: #000000;
+}
+
+.centered-box a {
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+}
+
+#homepage-link {
+  height: 70px;
+  width: 190px;
+}
+
+  /* Media queries for devices larger than 320px */
+@media screen and (min-width:320px){
+
+.card {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  width: 40%;
+  margin-bottom: 5px;
+  font-size: 8.3px;
+  height: 145px;
+}
+}
+
+/* Media queries for tablet and larger 768px */
+@media screen and (min-width:768px){
+  .card{
+    font-size: 30px;
+
+  }
+
+  /* error page */
+  #error-text {
+    font-size: 30px;
+    margin-top: 0;
   }
 
   #error-link {
     font-size: 24px;
-    margin-top: 60px;
-    height: 70px;
-    width: 240px;
+    margin-top: 0;
+    height: 90px;
+    width: 300px;
   }
-  /* .flip-card{
-    padding-left: 2px;
-  } */
-}
 
-/* Media queries for tablet and larger 768px */
-@media screen and (min-width:768px){
-  /* .flip-card{
-    padding-left: 190px;
-  } */
+  /* thank you page */
+  .centered-box h2 {
+    font-size: 32px;
+  }
+
+  .centered-box p {
+    margin-bottom: 30px;
+    font-size: 30px;
+  }
+
+  #homepage-link {
+  height: 90px;
+  width: 300px;
+  }
 }
 
 /*large devices (laptops and desktops,992px and up)*/
   /* @media screen and (min-width:992px){
   .flip-card{
     padding-left: 550px;
   }
- } */
+ } */

assets/js/Entity.js

@@ -1,6 +1,7 @@
 import {Vec2} from './math.js';
 import AudioBoard from './AudioBoard.js';
 import BoundingBox from './BoundingBox.js';
+import EventEmitter from './EventEmitter.js';
 
 export const Sides = {
     TOP: Symbol('top'),
@@ -13,6 +14,7 @@ export class Trait {
     constructor(name) {
         this.NAME = name;
 
+        this.events = new EventEmitter();
         this.sounds = new Set();
         this.tasks = [];
     }

assets/js/EventEmitter.js

@@ -0,0 +1,18 @@
+export default class EventEmitter {
+    constructor() {
+        this.listeners = [];
+    }
+
+    listen(name, callback) {
+        const listener = {name, callback};
+        this.listeners.push(listener);
+    }
+
+    emit(name, ...args) {
+        this.listeners.forEach(listener => {
+            if (listener.name === name) {
+                listener.callback(...args);
+            }
+        });
+    }
+}

assets/js/main.js

@@ -65,10 +65,25 @@ async function main(canvas) {
 }
 
 const canvas = document.getElementById('screen');
-
-const start = () => {
-    window.removeEventListener('click', start);
-    main(canvas);
-};
-
-window.addEventListener('click', start);
+const startButton = document.createElement('button');
+startButton.textContent = 'Start Game';
+startButton.style.cssText = `
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+  display: grid;
+  margin-inline: auto;
+  top: 35%;
+  background: red;
+  border-radius: 16px;
+  padding: 16px;
+  border: 2px solid white;
+`;
+document.body.appendChild(startButton);
+
+startButton.addEventListener('click', () => {
+  startButton.remove();
+  // Call your main function here
+  main(canvas);
+});

assets/js/traits/PlayerController.js

@@ -13,9 +13,9 @@ export default class PlayerController extends Trait {
     setPlayer(entity) {
         this.player = entity;
 
-        this.player.stomper.onStomp = () => {
+        this.player.stomper.events.listen('stomp', () => {
             this.score += 100;
-        }
+        });
     }
 
     update(entity, {deltaTime}, level) {

assets/js/traits/Stomper.js

@@ -4,9 +4,6 @@ export default class Stomper extends Trait {
     constructor() {
         super('stomper');
         this.bounceSpeed = 400;
-
-        this.onStomp = function() {
-        }
     }
 
     bounce(us, them) {
@@ -22,7 +19,7 @@ export default class Stomper extends Trait {
         if (us.vel.y > them.vel.y) {
             this.bounce(us, them);
             this.sounds.add('stomp');
-            this.onStomp(us, them);
+            this.events.emit('stomp', us, them);
         }
     }
 }