Retro 365 Games - SharePoint SPFx WebPart

Merry Christmas and Happy Holidays!

Summary

A festive SharePoint Framework (SPFx) solution featuring 14 classic arcade games wrapped in a nostalgic 1980s CRT monitor aesthetic. Created to celebrate 25 years of SharePoint (2001-2026).

Whether you're taking a quick break between meetings, hosting a team competition, or just feeling nostalgic for the golden age of arcade gaming - Retro 365 Games has something for everyone. Multiplayer games feature old-school local co-op where players share the same keyboard - just like the good old days!

Live Preview: retro365games.com

Full SPFx Release: December 2025

Compatibility

⚠️ Important
Every SPFx version is optimally compatible with specific versions of Node.js. In order to be able to build this sample, you need to ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

This solution is optimally compatible with the following environment configuration:

Applies to

• SharePoint Framework
• Microsoft 365 tenant

Get your own free development tenant by subscribing to Microsoft 365 developer program

Features

This solution demonstrates the following capabilities:

Games Included (14 Total)

Click on any game below to expand and see details, screenshots, and controls

Classic Arcade Games (12)

🐍 Snake - Christmas Lights

• Players: 1-4 (Solo or Multiplayer)
• Controls: Arrow keys to change direction
• Goal: Collect ornaments and Christmas lights while growing your snake
• Features: Multiple game modes, customizable light patterns (classic/rainbow/strobe/chase/pulse), head shapes, trail effects
• Difficulty: ⭐ Easy

🧱 Breakout - Santa's Sleigh

• Players: 1
• Controls: Left/Right arrows or mouse to move paddle
• Goal: Break all the Microsoft 365 app blocks using Santa's sleigh as your paddle
• Features: M365 app icon blocks (Teams, SharePoint, OneDrive, etc.), snowball projectile, multiple lives
• Difficulty: ⭐ Easy

🎁 Tetris - Gift Stacking

• Players: 1
• Controls: Up/Space to rotate, Down for soft drop, Left/Right to move
• Goal: Stack Microsoft product blocks (Azure, VM, AI, SQL, etc.) and clear lines
• Features: Speed increases 25% per level, Christmas light border, special SharePoint-themed tetrominoes
• Difficulty: ⭐ Easy

👾 Space Invaders - Snowman Attack

• Players: 1
• Controls: Left/Right to move, Space to shoot
• Goal: Defend against waves of snowman invaders using Santa's sleigh
• Features: Snowman enemy formations, Christmas tree shields with M365 labels, candy cane bullets, boss battles
• Difficulty: ⭐⭐ Medium

🎯 Gorillas - Santa vs Krampus

• Players: 1 (VS AI) or 2 (VS Player)
• Controls: Angle slider + power slider + Space to throw
• Goal: Hit your opponent with snowballs by adjusting angle and power, accounting for wind
• Features: Santa vs Krampus showdown, city skyline, wind physics, 4 weapon types (Normal, Explosive, Homing, Bouncy), power-ups on buildings
• Difficulty: ⭐⭐ Medium

🍪 Pac-Man - Santa's Cookie Run

• Players: 1
• Controls: Arrow keys to navigate maze
• Goal: Collect all cookies while avoiding elf ghosts in the Christmas maze
• Features: 3 difficulty levels with progressive maze sizes (Easy/Medium/Hard), red/green gift block walls, elf ghosts, power pellets
• Difficulty: ⭐⭐ Medium

🐸 Frogger - Elf Crossing

• Players: 1
• Controls: Arrow keys to move elf
• Goal: Guide your elf across busy roads and icy rivers to fill all 6 Christmas trees at the top
• Features: SharePoint-themed vehicles (SP, SPS, KQL, BIT, MOSS, WSS3), floating gift platforms on ice, 83-second timer
• Difficulty: ⭐⭐ Medium

🚀 Asteroids - Sleigh in Space

• Players: 1
• Controls: Arrow keys to rotate/thrust, Space to shoot
• Goal: Pilot Santa's sleigh through space, destroying ice asteroids labeled with M365 products
• Features: 4 weapon types (Single, Spread x5, Laser x2, Swarm x2), hyperspace escape, ice asteroids with product labels
• Difficulty: ⭐⭐⭐ Hard

🦍 Donkey Kong - Christmas Climb

• Players: 1
• Controls: Arrows to move/climb, Space to jump
• Goal: Save Christmas! Climb candy cane ladders while avoiding obstacles thrown by Krampus
• Features: Krampus as the boss, candy cane ladders, Christmas light decorations, power-ups, gift collection, snow effects
• Difficulty: ⭐⭐⭐ Hard

🛸 Galaga - Christmas Squadron

• Players: 1
• Controls: Left/Right to move, Space to shoot
• Goal: Destroy waves of festive enemies in formation attacks
• Features: Wave-based gameplay, festive enemies with M365 labels (SPP, DON, COD, PRG, XB, VM), gingerbread man enemies, formation dive attacks
• Difficulty: ⭐⭐⭐ Hard

🏒 Ice Hockey - Christmas Puck

• Players: 1 (VS Computer) or 2 (VS Player - local multiplayer)
• Controls: W/S for Player 1, Arrow Up/Down for Player 2
• Goal: Score goals against your opponent - first to 11 wins!
• Features: Christmas light border, frozen pond rink, candy cane paddles, AI opponent with 3 difficulty levels, 2-player local multiplayer
• Difficulty: ⭐⭐ Medium

🚀 Missile Command - Village Defense

• Players: 1
• Controls: Mouse to aim, Click to fire
• Goal: Defend your Christmas village from incoming missiles
• Features: Colorful Christmas village with houses, targeting crosshair, wave-based enemy attacks, falling snow
• Difficulty: ⭐⭐ Medium

Custom SharePoint Games (2)

💻 SPO-DOS Quiz - SharePoint Trivia

• Players: 1
• Controls: Mouse clicks to answer questions
• Goal: Answer SharePoint trivia questions before time runs out (240s default, 100 questions per game from a pool of 170)
• Features: Authentic DOS terminal aesthetic, 4 color themes (GREEN/AMBER/WHITE/APPLE), Blue Screen of Death on wrong answers, A:\> command prompt, configurable timer
• Difficulty: ⭐⭐ Medium

🏰 SharePoint Empire - Text Adventure

• Players: 1
• Controls: Type commands and press Enter (e.g., "go north", "take key", "talk to admin")
• Goal: Navigate through 24 rooms, interact with 17 NPCs, complete quests in a SharePoint-themed text adventure
• Features: Natural language parser (powered by Compromise NLP), inventory system, quest tracking, save/load functionality (3 slots + autosave), rich storytelling
• Difficulty: ⭐⭐ Medium

SPFx Web Part

• Full game selector with 14 games
• Retro CRT monitor frame (Commodore PET 2001 style)
• Configurable difficulty (Easy, Medium, Hard)
• Sound controls with volume slider
• High score tracking via localStorage

Codebase Stats

Metric	Count
Lines of code	33,400+
TypeScript/TSX files	73
Game classes	14
Quiz questions	170
Interfaces	135

Technical Highlights

• ✅ TypeScript - Fully typed codebase
• ✅ Canvas 2D - Game rendering
• ✅ Web Audio API - Sound effects and volume control
• ✅ localStorage - High scores and settings persistence
• ✅ Retro Audio - CRT power on/off, floppy disk sounds

Solution

Solution	Author(s)
react-sharepoint-christmas	Nello D'Andrea

Version history

Version	Date	Comments
1.0.0	December 2025	Initial release

Prerequisites

• SharePoint Online tenant
• Node.js v18.17.1 or v22.x (LTS versions)
• Site Collection Administrator permissions
• Access to SharePoint App Catalog

Minimal Path to Awesome

Quick Deployment

# Clone this repository
git clone https://github.com/ferrarirosso/retro365games.git
cd retro365games

# Install dependencies
npm install

# Trust development certificate (first time only)
gulp trust-dev-cert

# Build for production
gulp clean
gulp bundle --ship
gulp package-solution --ship

# Deploy the package generated at
# sharepoint/solution/react-sharepoint-christmas.sppkg

Deployment

1. Build the package (if you skipped the quick-deployment commands above):

   npm install
   gulp bundle --ship
   gulp package-solution --ship

2. Upload sharepoint/solution/react-sharepoint-christmas.sppkg to your tenant App Catalog (https://yourtenant-admin.sharepoint.com) and choose Make this solution available to all sites in the organization.
3. On any modern site, edit a page, add the Christmas Arcade web part, and configure the on-screen controls (game, difficulty, music, quiz duration, etc.).

Configuration

Web Part

All gameplay settings live directly inside the web part's toolbar (game picker, difficulty, quiz duration, sound toggles, etc.) and persist to localStorage. The property pane is intentionally kept minimal—so authors can make tweaks while staying on the page.

Game Controls

Game	Controls
Snake	Arrow keys to change direction
Breakout	Left/Right arrows or mouse to move paddle
Tetris	Up/Space to rotate, Down for soft drop
Space Invaders	Left/Right to move, Space to shoot
Gorillas	Angle slider + power slider + Space to throw
Pac-Man	Arrow keys to navigate maze
Frogger	Arrow keys to move elf
Asteroids	Arrow keys to rotate/thrust, Space to shoot
Donkey Kong	Arrows to move/climb, Space to jump
Galaga	Left/Right to move, Space to shoot
Ice Hockey	W/S for Player 1, Arrow Up/Down for Player 2
Missile Command	Mouse to aim, Click to fire
Quiz	Mouse clicks to answer questions
SharePoint Empire	Type commands and press Enter

Architecture

File Structure

src/
├── shared/
│   ├── games/                  # 14 game implementations
│   │   ├── snake/
│   │   ├── breakout/
│   │   ├── tetris/
│   │   ├── spaceInvaders/
│   │   ├── gorillas/
│   │   ├── pacman/
│   │   ├── frogger/
│   │   ├── asteroids/
│   │   ├── donkeykong/
│   │   ├── galaga/
│   │   ├── missilecommand/
│   │   ├── icehockey/
│   │   ├── spodosquiz/        # Quiz game
│   │   └── sharepointempire/  # Text adventure RPG
│   ├── services/
│   │   ├── AudioManager.ts    # Web Audio API management
│   │   ├── EventBus.ts        # Pub/sub pattern
│   │   └── StorageService.ts  # localStorage wrapper
│   ├── types/
│   │   └── GameTypes.ts       # IGame interface
│   └── data/
│       └── sharepointQuizStructured.ts  # 170 quiz questions
└── webparts/
    └── christmasArcade/
        ├── ChristmasArcadeWebPart.ts
        └── components/
            └── ChristmasArcade.tsx

Core Patterns

IGame Interface - All games implement:

interface IGame {
  init(): void;
  start(): void;
  pause(): void;
  resume(): void;
  reset(): void;
  update(deltaTime: number): void;
  render(ctx: CanvasRenderingContext2D): void;
  destroy(): void;
  getScore(): number;
  getLevel(): number;
  getState(): GameState;
}

EventBus - Games emit events:

• GAME_START, GAME_PAUSE, GAME_RESUME
• GAME_OVER, SCORE_CHANGED, LEVEL_UP

AudioManager - Handles browser autoplay policies

Troubleshooting

Common Issues

Issue: Web part doesn't appear

• Verify package is deployed to App Catalog
• Check "Make available to all sites" was selected
• Wait 5-10 minutes for propagation
• Clear browser cache

Issue: Sound not playing

• Click anywhere on page first (browser autoplay policy)
• Check sound is enabled in properties
• Verify volume is above 0
• Check browser isn't muted

Credits & Third-Party Licenses

Audio Attribution:

• Floppy disk boot sound: "Floppy disk drive - write" by MrAuralization via Freesound #259291 licensed under CC BY 4.0. Audio was trimmed to 10 seconds and downmixed for in-app playback.
• CRT power sound: "CRT turn on" by Coolshows101sound via Freesound #709462 licensed under CC BY 4.0. Used for monitor power on/off effects in immersive mode.

References

• Getting started with SharePoint Framework
• Microsoft 365 Patterns and Practices

Help

If you encounter any issues, create a new issue on this repository.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Vintage Monitor Frame

This SharePoint solution features a generic vintage portable computer monitor frame inspired by 1980s-era portable computing designs. The monitor frame is a creative CSS-based artistic interpretation created for nostalgic and aesthetic purposes only. No specific brand or trademark is referenced or used.

---

Celebrating 25 Years of SharePoint (2001-2026) 🎉

🎄 Merry Christmas and Happy Coding! 🎅

Built with ❤️ by Nello D'Andrea