From 4bdcb728fd86dbc052b34d5e2eec7b6db7805ffe Mon Sep 17 00:00:00 2001 From: PalomaCardozo Date: Mon, 9 Feb 2026 17:43:14 +0100 Subject: [PATCH 01/38] Initial backend integration and frontend adjustments --- README.md | 65 - {Images => app/Images}/frog-hunter.png | Bin {Images => app/Images}/frog.gif | Bin {Images => app/Images}/frog1.png | Bin {Images => app/Images}/frog10.png | Bin {Images => app/Images}/frog11.png | Bin {Images => app/Images}/frog12.png | Bin {Images => app/Images}/frog13.png | Bin {Images => app/Images}/frog14.png | Bin {Images => app/Images}/frog15.png | Bin {Images => app/Images}/frog16.png | Bin {Images => app/Images}/frog17.png | Bin {Images => app/Images}/frog18.png | Bin {Images => app/Images}/frog19.png | Bin {Images => app/Images}/frog2.png | Bin {Images => app/Images}/frog20.png | Bin {Images => app/Images}/frog3.png | Bin {Images => app/Images}/frog4.png | Bin {Images => app/Images}/frog5.png | Bin {Images => app/Images}/frog6.png | Bin {Images => app/Images}/frog7.png | Bin {Images => app/Images}/frog8.png | Bin {Images => app/Images}/frog9.png | Bin {Images => app/Images}/froggy.png | Bin {Images => app/Images}/lotus-flower.png | Bin app/README.md | 75 + index.html => app/index.html | 4 +- script.js => app/script.js | 157 +- styles.css => app/styles.css | 29 +- server/.gitignore | 2 + server/README.md | 67 + server/Script-2.sql | 27 + server/database.db | Bin 0 -> 12288 bytes server/index.js | 34 + server/package-lock.json | 2200 +++++++++++++++++++++++ server/package.json | 12 + 36 files changed, 2450 insertions(+), 222 deletions(-) delete mode 100644 README.md rename {Images => app/Images}/frog-hunter.png (100%) rename {Images => app/Images}/frog.gif (100%) rename {Images => app/Images}/frog1.png (100%) rename {Images => app/Images}/frog10.png (100%) rename {Images => app/Images}/frog11.png (100%) rename {Images => app/Images}/frog12.png (100%) rename {Images => app/Images}/frog13.png (100%) rename {Images => app/Images}/frog14.png (100%) rename {Images => app/Images}/frog15.png (100%) rename {Images => app/Images}/frog16.png (100%) rename {Images => app/Images}/frog17.png (100%) rename {Images => app/Images}/frog18.png (100%) rename {Images => app/Images}/frog19.png (100%) rename {Images => app/Images}/frog2.png (100%) rename {Images => app/Images}/frog20.png (100%) rename {Images => app/Images}/frog3.png (100%) rename {Images => app/Images}/frog4.png (100%) rename {Images => app/Images}/frog5.png (100%) rename {Images => app/Images}/frog6.png (100%) rename {Images => app/Images}/frog7.png (100%) rename {Images => app/Images}/frog8.png (100%) rename {Images => app/Images}/frog9.png (100%) rename {Images => app/Images}/froggy.png (100%) rename {Images => app/Images}/lotus-flower.png (100%) create mode 100644 app/README.md rename index.html => app/index.html (94%) rename script.js => app/script.js (60%) rename styles.css => app/styles.css (82%) create mode 100644 server/.gitignore create mode 100644 server/README.md create mode 100644 server/Script-2.sql create mode 100644 server/database.db create mode 100644 server/index.js create mode 100644 server/package-lock.json create mode 100644 server/package.json diff --git a/README.md b/README.md deleted file mode 100644 index 0120b42..0000000 --- a/README.md +++ /dev/null @@ -1,65 +0,0 @@ -# 🐸 Frog Hunter – Memory Game - -Frog Hunter is a browser-based memory game developed as part of the **Foundation Project at Hack Your Future**. - -The game is inspired by the classic Memory Game and challenges players to find all matching pairs of cards by flipping them two at a time. -Our focus is on making the game work and building a smooth, intuitive, and enjoyable experience that encourages players to keep playing. - -This project is developed incrementally, following a sprint-based approach, where functionality, structure, and complexity grow step by step. - ---- - -## 🎮 About the Game - -In Frog Hunter, players interact with a grid of cards showing frog-themed images. - -- Cards start face down -- Players flip cards to reveal the images -- Only two cards can be revealed at the same time -- Matching cards remain revealed -- Non-matching cards flip back after a short delay -- The game ends once all matching pairs have been found -- The timer starts from when the player clicks their first card -- The counter shows how many times the player has revealed a card - -Display a timer should start from when the player clicks their first card. - -The game logic and interactions are designed to be clear, responsive, and easy to understand. - ---- - -## 🛠️ Technologies & Approach - -This project is built using: - -- **HTML** for structure -- **CSS** for layout and animations -- **JavaScript** for game logic and DOM manipulation -- **Git & GitHub** for version control and collaboration - -As part of the project milestones, the game evolves from a fully frontend-based implementation to a version that includes: - -- Fetching card data from a backend API -- Storing card information in a database - -These steps are introduced progressively as the project advances through the sprints. - ---- - -## 📂 Project Structure - -/frogHunter -│── index.html -│── styles.css -│── script.js - -The structure is intentionally simple, allowing us to focus on core concepts such as game logic, state handling, and user interaction. - ---- - -## 👩🏻‍💻👩🏼‍💻 Team - -This project is developed as a pair-programming exercise, emphasizing collaboration, communication, and shared ownership of the codebase: - -- **Paloma Cardozo** -- **Iryna Lopatina** diff --git a/Images/frog-hunter.png b/app/Images/frog-hunter.png similarity index 100% rename from Images/frog-hunter.png rename to app/Images/frog-hunter.png diff --git a/Images/frog.gif b/app/Images/frog.gif similarity index 100% rename from Images/frog.gif rename to app/Images/frog.gif diff --git a/Images/frog1.png b/app/Images/frog1.png similarity index 100% rename from Images/frog1.png rename to app/Images/frog1.png diff --git a/Images/frog10.png b/app/Images/frog10.png similarity index 100% rename from Images/frog10.png rename to app/Images/frog10.png diff --git a/Images/frog11.png b/app/Images/frog11.png similarity index 100% rename from Images/frog11.png rename to app/Images/frog11.png diff --git a/Images/frog12.png b/app/Images/frog12.png similarity index 100% rename from Images/frog12.png rename to app/Images/frog12.png diff --git a/Images/frog13.png b/app/Images/frog13.png similarity index 100% rename from Images/frog13.png rename to app/Images/frog13.png diff --git a/Images/frog14.png b/app/Images/frog14.png similarity index 100% rename from Images/frog14.png rename to app/Images/frog14.png diff --git a/Images/frog15.png b/app/Images/frog15.png similarity index 100% rename from Images/frog15.png rename to app/Images/frog15.png diff --git a/Images/frog16.png b/app/Images/frog16.png similarity index 100% rename from Images/frog16.png rename to app/Images/frog16.png diff --git a/Images/frog17.png b/app/Images/frog17.png similarity index 100% rename from Images/frog17.png rename to app/Images/frog17.png diff --git a/Images/frog18.png b/app/Images/frog18.png similarity index 100% rename from Images/frog18.png rename to app/Images/frog18.png diff --git a/Images/frog19.png b/app/Images/frog19.png similarity index 100% rename from Images/frog19.png rename to app/Images/frog19.png diff --git a/Images/frog2.png b/app/Images/frog2.png similarity index 100% rename from Images/frog2.png rename to app/Images/frog2.png diff --git a/Images/frog20.png b/app/Images/frog20.png similarity index 100% rename from Images/frog20.png rename to app/Images/frog20.png diff --git a/Images/frog3.png b/app/Images/frog3.png similarity index 100% rename from Images/frog3.png rename to app/Images/frog3.png diff --git a/Images/frog4.png b/app/Images/frog4.png similarity index 100% rename from Images/frog4.png rename to app/Images/frog4.png diff --git a/Images/frog5.png b/app/Images/frog5.png similarity index 100% rename from Images/frog5.png rename to app/Images/frog5.png diff --git a/Images/frog6.png b/app/Images/frog6.png similarity index 100% rename from Images/frog6.png rename to app/Images/frog6.png diff --git a/Images/frog7.png b/app/Images/frog7.png similarity index 100% rename from Images/frog7.png rename to app/Images/frog7.png diff --git a/Images/frog8.png b/app/Images/frog8.png similarity index 100% rename from Images/frog8.png rename to app/Images/frog8.png diff --git a/Images/frog9.png b/app/Images/frog9.png similarity index 100% rename from Images/frog9.png rename to app/Images/frog9.png diff --git a/Images/froggy.png b/app/Images/froggy.png similarity index 100% rename from Images/froggy.png rename to app/Images/froggy.png diff --git a/Images/lotus-flower.png b/app/Images/lotus-flower.png similarity index 100% rename from Images/lotus-flower.png rename to app/Images/lotus-flower.png diff --git a/app/README.md b/app/README.md new file mode 100644 index 0000000..494c274 --- /dev/null +++ b/app/README.md @@ -0,0 +1,75 @@ +# 🐸 Frog Hunter – Memory Game + +Frog Hunter is a browser-based memory game developed as part of the **Foundation Project at Hack Your Future**. + +The game is inspired by the classic Memory Game, where players find all matching pairs of cards by flipping them two at a time. The focus of this project is to create a smooth, intuitive, and enjoyable gameplay experience, while demonstrating incremental development and frontend-backend integration. + +--- + +## 🎮 About the Game + +Players interact with a grid of frog-themed cards. Key mechanics: + +- Cards start face down +- Players can reveal two cards at a time +- If the cards match, they remain revealed +- If they do not match, they flip back after a short delay +- The game ends when all matching pairs are found +- A timer starts when the first card is revealed +- A counter tracks how many cards have been revealed + +The game logic and interactions are designed to be clear, responsive, and easy to understand on both desktop and mobile devices. + +--- + +## 🛠️ Technologies & Approach + +The game is built with: + +- **HTML** - structure of the game board and interface +- **CSS** - layout, animations, and responsive design +- **JavaScript** - game logic, card flipping, and state handling +- **Express.js & SQLite** – backend API for storing and retrieving card data +- **Git & GitHub** - version control and collaboration + +# Development Approach + +- The project follows a sprint-based incremental approach. +- Initially, cards were hardcoded in the frontend. +- Later, the game was refactored to fetch cards from a backend API connected to a SQLite database. +- Game state (matched cards, flipped cards, timer) is managed entirely in JavaScript, keeping the backend simple and focused on data retrieval. + +--- + +## 📂 Project Structure + +/Final Project +├── app/ +│ ├── Images/ # Card images +│ ├── index.html # Game structure +│ ├── styles.css # Styles and animations +│ └── script.js # Game logic, fetches data from backend +└── server/ +├── index.js # Express server +├── database.db # SQLite database with card data +├── package.json # Dependencies and scripts +└── script-2.sql # SQL script to create and populate cards table + +The structure is intentionally simple, emphasizing core concepts such as DOM manipulation, state management, and API integration. + +--- + +## Notes + +- Card images and metadata are served from the backend for better scalability. +- Game logic is decoupled from data, so new cards can be added without modifying JS code. +- The frontend is responsive; the grid and cards scale with screen size, although some buttons may need minor tweaks for smaller screens. + +--- + +## 👩🏻‍💻👩🏼‍💻 Team + +This project is developed as a pair-programming exercise, emphasizing collaboration, communication, and shared ownership: + +- **Paloma Cardozo** +- **Iryna Lopatina** diff --git a/index.html b/app/index.html similarity index 94% rename from index.html rename to app/index.html index 575c875..3feebff 100644 --- a/index.html +++ b/app/index.html @@ -16,7 +16,7 @@

src="Images/frog-hunter.png" alt="Person dressed as a frog" class="frog-icon" /> - Froggy Pairs + Frog Hunter Person dressed as a frog