---
tags: mstu5003, project 002, html, css, bootstrap, group work, collab, final, Fa2023
---

---
# Project 002: Final

[Project Guidelines](https://docs.google.com/document/d/1mYbFyzxMYcx_LIS5mnhbmESWnvGh_DfqJuJV1HON3RI/edit)

* **Giles** (section-001)
* **Melissa** (section-010)
* **Yuri** (section-003)

---
[Idea Bank](https://docs.google.com/document/d/1Yj-fTHvMJJpcA1mZMxn1OT-AJ3PIkKrkV2Boa0E3iL8/edit?usp=sharing)
:::success
### OUR PROJECT

To view our work, visit the following links:
- **CodePen Project**:
- [Final - Static images](https://codepen.io/mdd2167/pen/xxBKRZM)
- [Final - Animated Images](https://codepen.io/mdd2167/pen/zYbOoqM)
- **Prototype**: [Concept Board](https://app.conceptboard.com/board/n454-phxs-rtqh-177y-54z5)
- **Presentation**: [Slide Deck](https://www.canva.com/design/DAF3WX6n4Cg/t1PdIvLidTDqGxNbSp_jJA/edit?utm_content=DAF3WX6n4Cg&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
- **Iterations**
:::spoiler
**Past Versions**
*Below are links to some earlier versions & tinkers we created.*
[v6 Base ](https://codepen.io/mdd2167/pen/BaMYzQp)
[v7.1 JS ](https://codepen.io/gb2839/pen/NWoOZwO?editors=1010)
[Doodle 4](https://codepen.io/mdd2167/pen/OJdQMGd?editors=1010) | [HackMD]([HackMD](https://hackmd.io/8szWOKypTJ-1c1QDPxiP4Q?view))

**Tinkers**
[Equipping](https://codepen.io/gb2839/pen/xxMrZpM?editors=1010)
[Card Template](https://codepen.io/mdd2167/pen/JjxgEgL?editors=1000)
[Page 1 Style](https://codepen.io/mdd2167/pen/NWoQpRx?editors=1000)
[Page 2 Style](https://codepen.io/mdd2167/pen/NWoQpRx?editors=1000)
[Page 3 Style](https://codepen.io/mdd2167/pen/eYxqgyz)

**Other**
[Brainstorming document](https://docs.google.com/document/d/1Yj-fTHvMJJpcA1mZMxn1OT-AJ3PIkKrkV2Boa0E3iL8/edit)

:::

### PROBLEM & SOLUTION
**Target audience + problem**

Gamers and developers need an accessible, customizable RPG-style game that offers engaging, interactive experiences and a versatile platform for playing, testing, and tweaking gameplay variables.

**Solution**

Our solution is an interactive dungeon experience, with customizable character equipment, opporutnity for strategic thinking, engaging enemies, and a developer-friendly platform for gameplay experimentation. It is built on a solid foundation - a robust, clean, maintainable code architecture - that provides for a smooth user and developer experience. Visually, both versions offer an immersive HD experience.

### USER INTERFACE


This is a short overveiw of how a user would interact with the page. Full explanation of code not included, as the description would be too lengthy.

| User Action | Computer Response |
| ----------- | ----------------- |
| **PAGE 1** |
|Select a mission / hero | Visual interactions like grow upon hover or a green box to show selection. Character stats updated based on mission seleciton.|
|Click button | Begin game |
| **PAGE 2** | |
| Click up/down arrows| Numbers appear to show time spent working towards goal. Time increases total wealth earned, which will be spent on the next page.|
| Click **enter dungeon** button | Continue to next page |
| Click **view high score** button | Top 10 scores appear |
| **SCORE BOARD** |
| Click **return** button | Return to Page 2: Input time |
| **PAGE 3** |
| Select equipment | Visual interaction by selecting radio buttons & number in **🤑Cost** box updates to show total price. |
| Click button | **Result A:** '*Not enough wealth*' notfication. **Result B:** Update total wealth & continue to Page 4: Battle |
| **PAGE 4** |
| [view page] | Random monster + randomly-assigned adjective appears. Each monster has designated stats and the adjective will affect those stats. |
| Option A: Click **fight** | Based on how player's stats compare with the monster's they will receive damage or earn loot. Continues to Page 5: post-battle |
| Option B: Click **flee** | Receive no damage but earn no loot. Continues to Page 5: post-battle |
| [view page] | View outcome of previous battle (escape / earn loot / receive damage ) |
| **PAGE 5** |
| [view page] | New text-box reveals results of the battle. Option to **Continue** or **End your run** |
| Option A: Click **Continue** | Loop back to Page 4 Battle or, if health = 0 continue to Page 6: Finale |
| Option B: Click **End your run** | Continue to Page 6: Finale. |
| **PAGE 6** |
| Option A: Victory | If health remains, this page will appear. Victory graphic appears with a text box stating remaining loot & escape message. |
| Option B: Loss | If health<0, player is slain and loot is not collected. |
| Click **Continue** | Loop back to Page 2: input time. Remaining loot is added to the records on the SCOREBOARD |

### REFLECTION

Throughout the MSTU-5003 course, projects like these have been some of the most valuable learning experiences. Although this project was a massive undertaking, it was also a fun collaborative project! Our three team members have different skill sets, which worked well. We shouldered different responsibilities and consistently used our unique strengths to support one other.

We learned many new skills through this creation process. A few examples include:
- We improved our collaboration by adding comments to explain what all the sections of our code do. This helped us understand and build on each others' work.
- We picked up new coding techniquees, such creating constructers in JS.
- We improved our team managment, learning to effectively communicate, divide of labour, ask for and provide help, elicit feedback, and consistently share resources to stay on the same page.
- We also adopted useful shortcuts and tools in our working platforms, such as adding photos to hackMD or using the minimizing arrows in CodePen to help us debug.
- Learned how to use `z-index` in CSS to layer elements, like poositioning a pop-up notification aboove the page content
- Learned about Bootstrap's segmentation, using 12-column grid system
- We improved our ability to debug and reading through code, both our own and others.
- Through feedback from our professors, we gained a better understanding of the considerations for overall game design, such as the flow, layout,and player experience. For example, using a background colour of green for certain items in our game's marketplace can help players intuitively understand that those items are free.

Yuri note to professor Iva Li:
> During this term I have learned how to be a better coder by: learning new coding skills, organizing projects better, and working in teams.
> Through class study, FCC, the projects, P5js projects in other classes, and self-study I am comfortable working with HTML/CSS/JS. I think more computationally, and I can more easily see patterns like 'arrays' in the nature (The formation of spots and stripes on animal coats).
> In terms of organization, I began using Microsoft VS code for all of my projects. This software is powerful and helps me organize large amounts of code.
> Lastly I learned to work in teams with digital projects. There are different considerations when working on a project mostly virtually, like the dynamics and functions of certain software (CodePen, hack MD), and working with multiple people asynchronously.

We are happy to be finished but also very proud of what we have accomplished in creating the Monster Slayer game.


---
:::info

##### [☑️ CHECKLIST](https://docs.google.com/document/d/1mYbFyzxMYcx_LIS5mnhbmESWnvGh_DfqJuJV1HON3RI/edit)
- [x] ID a target audience + problem (e.g. learning, productivity, experience)
- [x] description
- [x] interactive (button, input, keyboard, etc.)
- [x] Functional JS (interaction + results)
- [x] Documentation (HackMD)
- [x] Links
- [x] Summary of application experience
- [x] Problem + solution
- [x] User Interface
- [x] Reflection
- [x] References, sources
- [x] Presentation slides

:::

#### REFERENCES
**Inspiration**
Text-based video games, e.g.
* Colossal Cave
* Zork Dungeon Master
Adapted into a tool to gamify goal achievement.

**Additional Tools & Resources:**
* Original image sources listed in [Image Directory](https://docs.google.com/document/d/1aoKHa7pOyNmB5c322khO_TlyXQlpBPIhs9EpW77WGfk/edit)
* ComfyUI: https://github.com/comfyanonymous/ComfyUI (AKA Stable Diffusion) Generating animated gifs/images
* Vimage: https://vimageapp.com Scene background animations.
* Anieraser: https://anieraser.media.io/app Watermark removal (from Vimage freeware)
* Unscreen: https://www.unscreen.com Remove backgrounds
* Ezgif: https://ezgif.com Edit gifs
* Audacity: https://www.audacityteam.org Editing sound effects
* imgbb: https://imgbb.com/ Image hosting
* POND5: https://www.pond5.com/ Sound effects
* BenSounds: https://www.bensound.com/royalty-free-music/track/epic theme music