Skip to content

feat: add engagement band spectrum UI with Minecraft-style presentation - #90

Open
Vedhiga wants to merge 6 commits into
vicharanashala:mainfrom
Vedhiga:feature/progress-bands-ui
Open

feat: add engagement band spectrum UI with Minecraft-style presentation#90
Vedhiga wants to merge 6 commits into
vicharanashala:mainfrom
Vedhiga:feature/progress-bands-ui

Conversation

@Vedhiga

@Vedhiga Vedhiga commented Jul 15, 2026

Copy link
Copy Markdown

Summary

Adds a Minecraft-inspired visual layer for the engagement classification system (Chunks 1-8). Consumes the existing GET /api/engagement/:email and GET /api/admin/engagement/report endpoints — no new backend changes.

Changes

Student Profile

  • Band spectrum card showing all 4 bands in a progression row (Slowing Down → Recovery → Active → Excellent)
  • Active band highlighted with colored glow; unearned bands dimmed (desaturated) for clear visual hierarchy
  • Attendance % and SP/session stats displayed alongside the band

Admin Dashboard

  • New "Engagement" tab showing a block grid grouped by band
  • Filter buttons to toggle individual bands
  • Hover tooltip with student name + classification reason

Color Theory

Band Color Psychology
Slowing Down Terracotta red #C4695C Muted caution — not alarming
Recovery Amber gold #F5B342 Warming up, energy returning
Active Rich green #4CAF50 Steady, healthy growth
Excellent Premium blue #5B9BD5 Aspirational, top tier

Files

  • client/src/components/engagement/BlockIcon.jsx — renders one band as a beveled Minecraft-style block
  • client/src/components/engagement/StudentBandCard.jsx — spectrum card for student profile
  • client/src/components/engagement/AdminBandGrid.jsx — grouped block grid for admin report
  • client/src/styles/minecraft-tokens.css — CSS variables, bevel utility, glow effects
  • client/index.html — Google Fonts link for Press Start 2P
  • client/src/main.jsx — imports + integration points

Notes

  • Pixel font (Press Start 2P) used only for band labels, never for body text
  • Tooltip-on-hover follows Minecraft inventory item tooltip pattern
  • Blocks use 3px beveled borders (light top/left, dark bottom/right) for depth
  • Zero backend changes — purely a frontend presentation layer

Vedhiga added 6 commits July 15, 2026 18:33
- server/engagement/config.js — constants, thresholds, band labels
- server/engagement/fetchData.js — MongoDB fetch + window split
- server/engagement/classifyBand.js — pure band classifier + Recovery detection
- server/routes/engagement.js — GET /api/engagement/:email endpoint
- server/server.js — mount engagement router + GET /api/admin/engagement/report
- CONTEXT.md — document endpoints and classification design
This reverts commit aa58cce, reversing
changes made to f78fee6.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant