feat: add world without me feature and boxed letters language puzzle

[ridds-io]

Feature Overview

Feature Name: World Without Me & Boxed Letters Language Puzzle
Author: Riddhima Deshmukh --> ridds-io

Problem

Students need engaging, multi-disciplinary tools to build their skills:

1. Language/Spatial Reasoning: Students need interactive ways to practice vocabulary, spelling, and cognitive flexibility beyond standard flashcards.
2. Concept Relevance: Students often struggle to see the real-world value of abstract mathematical concepts, leading to disengagement.

Solution (Feature Description)

Introduced two major features to enhance interactive learning:

Boxed Letters Puzzle Game

A new interactive word puzzle designed to test vocabulary and spatial reasoning.

• The Board: 12 letters arranged around a square (3 per side).
• Core Rules: Players form words by connecting letters. Consecutive letters cannot share the same side of the board.
• Chain Constraint: Each new word must begin with the last letter of the previously played word.
• Goal: Use all 12 letters, optimally within 4 to 6 words.
• Live Validation: Words are verified in real-time using a Free Dictionary API, which also provides word definitions upon completion (with an offline fallback).

A World Without Me - Concept Relevance Dictionary

An imaginative content dictionary that explains the real-world impact of mathematical concepts.

• Engaging Content: Over 40 entries spanning Arithmetic, Algebra, Geometry, Calculus, and more, answering the question: "What if this concept never existed?"
• Rich Metadata: Each entry includes a punchy headline, descriptive body, an emoji, an animationType (e.g., 'collapse', 'chaos'), and an impactLevel (funny, serious, catastrophic).
• Modular Design: Easily extensible dictionary format where new concepts can be added by simply adding an object entry.

User Interaction & Style

• Boxed Letters: Features a dynamic SVG-based interactive board. Visual highlights include animated dashed lines for the current word path, persistent solid lines for played words, and shake animations for invalid moves (e.g., picking a letter on the same side). Includes a rewarding completion screen showing word definitions.
• World Without Me: Provides structured, thematic content designed to trigger specific CSS animations and emotional impact levels in the UI, making the learning experience highly engaging.

Technical Implementation & Architecture

• Boxed Letters: Uses React state to manage complex validation rules and game progression. Integrates with an external REST API (api.dictionaryapi.dev) for real-time dictionary lookups. Custom SVG rendering logic handles coordinate mapping for letter nodes and connection lines.
• World Without Me: Implemented as a robust, static JS dictionary (WORLD_WITHOUT_ME) mapping concept keys to metadata. Includes a safe getter (getWorldWithoutMe) with console warnings and null fallbacks to gracefully handle missing topics without breaking the UI.

Technical & Quality Checklist

• SRS Alignment: Implements the requested vocabulary puzzle and conceptual relevance tools.
• Metacognitive/Pedagogical Scaffolding: Combines spatial constraints with language retrieval (Boxed Letters), and anchors abstract math in real-world consequences (World Without Me).
• Error Handling: Dictionary API includes a catch block to allow offline play. getWorldWithoutMe handles unknown keys safely.

Verification & Acceptance Criteria

1. Manual Validation Steps

Boxed Letters:

• Step 1: Open the Boxed Letters game from the language dashboard.
• Step 2: Attempt to select two letters on the same side and verify the shake animation/error message.
• Step 3: Complete a puzzle and verify that the completion screen shows the words and their definitions.
• Step 4: Disconnect from the internet and verify that words can still be added via the offline fallback.

World Without Me:

• Step 1: Trigger a math concept screen in the app.
• Step 2: Verify that the correct headline, body text, and emoji are displayed.
• Step 3: Pass an invalid topic key to getWorldWithoutMe and verify it returns null and logs a warning instead of crashing.

2. Local Build & Tests

• Checked that npm run dev builds successfully without warnings.

Feature Demo

Boxed Letters:

World Without Me:

[Vaibhav-sa30]

It seems a lot of older code files are being re-introduced in this PR. Kindly, resolve the merge conflicts by syncing your local repo with the upstream and update your PR as per review comments.

[Vaibhav-sa30]

You can either complete the integration of the comics feature in this PR, or remove the related files and submit them in a separate PR. Former is suggested in case you plan to continue working on comic feature. Or else, simply remove them as neither comics.js nor the jpeg asset are imported, referenced, or integrated anywhere else in the application.

Either ways u should remove this 1.7 MB of dead weight.

[jgupta05072003-code]

Hi — thank you for this contribution, and apologies for how long it has been waiting.

This PR currently conflicts with main on client/src/App.jsx. When you have a moment, could you please rebase onto the latest main? We are sequencing the PRs that touch this file (see #181 for the merge order and the reasoning), and unfortunately we cannot slot in a PR that will not merge cleanly — which is why this one has kept being passed over.

To be clear, the underlying problem is on our side, not yours. App.jsx is around 69,800 lines with no router, so every feature PR ends up editing the same few places and colliding with every other one. 21 open PRs are in the same position. We are fixing that properly, and #181 explains how.

If the rebase turns out to be painful or unmanageable, please just say so here and we will help you through it — we would much rather do that than leave your work sitting.

Thanks again for your patience.

One suggestion that may save you time: your App.jsx diff is fairly large (+1640/−1584). If some of that is reformatting rather than your actual feature, splitting the reformatting into a separate commit or PR would make both the rebase and the review a good deal easier. Entirely up to you.

[github-actions]

No description provided.

[jgupta05072003-code]

Thank you for this contribution.

We have not yet done a full review of this pull request, since it currently has a merge conflict with the main branch. Kindly pull the latest main branch into your branch and resolve the conflict at your end.

Also, we could not find a linked issue in the pull request description. Kindly link the issue this pull request is meant to resolve, using "Closes #N", so that it can be tracked properly. If there is no existing issue for this work, kindly open one describing the motivation before we proceed with a review.

Once the conflict is resolved and the issue is linked, we will proceed with a full review.

[github-actions]

⏳ This PR has had requested changes open with no new commits addressing them, for over 24 hours. If this isn't resolved within another 24 hours, this PR will be automatically closed — you're welcome to reopen once it's addressed, or resubmit fresh referencing the same issue.

[github-actions]

⏳ This PR has had an unresolved merge conflict with the base branch for over 24 hours. If this isn't resolved within another 24 hours, this PR will be automatically closed — you're welcome to reopen once it's addressed, or resubmit fresh referencing the same issue.

[github-actions]

🔒 Closing this PR automatically: it has had requested changes open with no new commits addressing them for over 48 hours. This isn't a judgment on the work — it's the 48-hour rule from the PR SOP, applied the same way to every PR. Fix the issue above and open a fresh PR referencing the same Closes #N whenever you're ready.

[github-actions]

⚠️ Parikshak — 2 issues found

• ❌ No linked issue — This PR description does not contain Closes #N (or Fixes #N / Resolves #N) for an issue already on the tracker. Every PR here must map to a listed issue — nothing self-invented. Add the link and this check will re-run automatically on your next push.
• ❌ Merge conflict with the base branch — This PR has a merge conflict against its base branch. Rebase or merge the base in and push again — this is checked automatically, not a judgment call.

This is Parikshak, an automated, comment-only check — it never closes or approves a PR. A human reviewer still makes the final call. See CONTRIBUTING.md for the full contribution rules.

[jgupta05072003-code]

Hi Riddhima,

Reopening this one — sorry it got auto-closed for staleness before we could get it over the line. The feature itself was never in question, it was purely the App.jsx merge conflict that held it up.

Whenever you get a chance, could you rebase this branch onto the latest main? Once that's resolved we'll go ahead with a full review. Happy to help if the rebase turns out tricky given how large App.jsx still is right now.

Thank you for your patience, and for the work that went into this.

[github-actions]

🔒 Closing this PR automatically: it has had an unresolved merge conflict with the base branch for over 48 hours and it has had requested changes open with no new commits addressing them for over 48 hours. This isn't a judgment on the work — it's the 48-hour rule from the PR SOP, applied the same way to every PR. Fix the issue above and open a fresh PR referencing the same Closes #N whenever you're ready.