VidPuzzle

# 🎥 VidPuzzle – The Video Jigsaw Puzzle Game

A captivating video jigsaw puzzle game built with **Phaser.js** that runs directly within **Reddit posts** using the **Devvit platform**.  
Players solve puzzles by dragging, dropping, and rotating 9 looping video tiles to reconstruct a complete scene in motion.

---

## 🚀 Inspiration

Traditional jigsaw puzzles rely on static images — we wanted to **bring them to life**.  
Short video clips (like GIFs or Reels) contain motion cues that make puzzles more dynamic and satisfying.  
By combining **video playback**, **puzzle logic**, and **Reddit integration**, VidPuzzle creates a new kind of quick, visual, and social mini-game playable right inside posts.

---

## 🧩 What It Does

VidPuzzle challenges players to **reassemble a scrambled video** divided into 9 looping clips.  
Each piece plays continuously, offering hints about its correct position and rotation.  
Players can **drag, drop, and rotate** tiles to restore the full moving video.  

When solved:
- The nine tiles merge into one seamless clip  
- Completion time is displayed  
- Local best scores are stored for replay and improvement  

---

## 🛠️ How We Built It

- **Frontend:** Built with **Phaser.js** for rendering, animation, and interaction logic  
- **Backend:** Uses **Devvit’s integrated runtime** for Reddit post embedding and storage  
- **IDE:** Fully developed in **Kiro IDE** with `.kiro/specs.json` to handle asset schema and runtime hooks  
- **Architecture:** Multi-scene system — Splash → Gameplay → Completion  
- **Storage:** LocalStorage for personal scores; Devvit Storage API ready for future leaderboards  
- **Deployment:** Packaged as a **Devvit Web app**, playable directly inside Reddit posts on mobile & desktop

---

## ⚙️ Challenges We Faced

- Synchronizing **nine HTML5 video elements** for smooth playback  
- Adapting to **Reddit’s iframe and viewport limits**  
- Managing **drag + rotation logic** consistency across touch & mouse  
- Maintaining **60fps performance** under Devvit’s sandbox  
- Understanding **Kiro’s directory and hook system** for Phaser integration  

---

## 🏆 Accomplishments

- Built the **first playable video-based jigsaw puzzle** on Reddit  
- Achieved **seamless drag-drop and rotation** without third-party dependencies  
- Added **fallback color tiles** for asset failure cases  
- Created **responsive layouts** optimized for both Reddit Web & App  
- Demonstrated **end-to-end Kiro workflow** for the “Best Kiro Developer Experience” category

---

## 💡 What We Learned

- How **Devvit Web + Kiro** simplify Reddit-native development  
- Deep **Phaser scene management** and **video texture** control  
- How to build **graceful fallbacks** for embedded games  
- The power of micro-interactions in improving **player engagement**  
- How to balance **performance and creativity** in constrained environments  

---

## 🔮 What’s Next

- Add **global leaderboards** using Reddit OAuth + Devvit Storage  
- Create **daily community puzzles** from trending Reddit videos  
- Enable **multiplayer “speed-solve” challenges**  
- Allow users to **upload short clips** that automatically become puzzles  
- Release **VidPuzzle as an open-source Devvit template** for community use  

---

## 🧠 Tags

`#RedditHackathon` `#Kiro` `#Phaser` `#GameDev` `#WebApp` `#Devvit` `#VideoPuzzle`