https://github.com/webexsamples/lockout-game
https://github.com/webexsamples/lockout-game
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/webexsamples/lockout-game
- Owner: WebexSamples
- License: other
- Created: 2025-03-12T19:57:34.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-05T18:10:24.000Z (10 months ago)
- Last Synced: 2025-06-05T18:44:45.416Z (10 months ago)
- Language: JavaScript
- Size: 4.03 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔐 Lockout Game
**Lockout** game — a Webex-integrated, real-time multiplayer word game inspired by _Codenames_, reimagined with a **hacker vs cybersecurity AI theme**.
Players join teams, take on roles, ready up, and launch into a game session directly within a Webex meeting using **Socket.IO + LobbyContext-powered React frontend**.
---
## 🚀 Gameplay Theme – Lockout
In the digital underworld, two rival hacker groups — **Bluewave** and **Redshift** — compete to extract sensitive data from a hostile AI system known as **Sentinel**.
- 🧠 **Hackers** (Team Leads): Give strategic clues
- 🤖 **AI Agents** (Teammates): Decode clues and extract files
- 💀 **Cybersecurity Traps**: One wrong guess, game over
- 🕸 **Honeypots**: Decoys planted by Sentinel
Only one team will breach the vault. Will you outsmart the AI, or fall into its trap?
---
## 🧩 Architecture Overview
This frontend is a **Vite + React application** using:
- **React Context API** (no Redux, no external state libraries)
- **MUI v6** for component design
- **Socket.IO** for real-time updates
- **Webex Embedded Apps SDK** for user and meeting identity
---
## 🔧 Key Features
| Feature | Description |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| 🔐 **LobbyContext** | All lobby state (participants, roles, team, ready status) is managed globally via React Context |
| 🔄 **WebSocket Updates** | All state changes are real-time via `Socket.IO` |
| 💬 **Team Role Assignment** | One Hacker per team; players can switch teams or roles |
| ✅ **Ready Up System** | Players mark themselves "Ready"; game won't start until conditions are met |
| 🗡 **Self-contained Components** | UI components like `LobbyDetails`, `LobbyParticipants`, and `LobbyActions` are all context-aware and reusable |
| ⚡ **Hot Module Reload Safe** | All context is split properly for HMR support |
---
## 📚 How to Use `LobbyContext` in Components
```js
import { useLobbyContext } from '../context/useLobbyContext';
const MyComponent = () => {
const {
lobby,
user,
joinLobby,
toggleReady,
isUserTeamLead,
updateDisplayName,
} = useLobbyContext();
return
Welcome, {user?.display_name};
};
```
> Must be rendered within a `` scope.
---
## 🧪 Developer Tip – Testing a Component in Isolation
```jsx
import { LobbyContext } from '../context/LobbyContext';
;
```
---
## 🎞 Game Start Conditions (Enforced by Backend)
- ✅ **Each team has one Hacker (team lead)**
- ✅ **Teams are balanced**
- ✅ **All players are Ready**
Optionally, the **Game Host** can use **Force Start** (bypasses balance check but not readiness).
---
## 📜 Contribution Notes
- Use `Grid2` from `@mui/material` with the `size={{ xs, sm }}` prop.
- Follow Prettier config:
```json
{
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"endOfLine": "auto"
}
```
- All Python backend code is formatted via Ruff.
- Context-based code is preferred over prop-drilling or hooks with duplicate state.
---
Made with ❤️ by the Webex Developer Relations Team