10 |
17 | );
18 | }
19 |
20 | export default RootErrorBoundary;
21 |
--------------------------------------------------------------------------------
/web/src/components/cards/blank.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { useMemo } from 'react';
3 | import { getBlankCardURL } from '../../lib/image';
4 | import { cardSizes, UnoCardSizes } from './uno';
5 |
6 | interface BlankCardProps {
7 | size?: UnoCardSizes;
8 | hidden?: boolean;
9 | }
10 |
11 | function BlankCard(props: BlankCardProps): React.ReactElement {
12 | const { size = 'default', hidden } = props;
13 | const imageSrc = useMemo(() => getBlankCardURL(hidden), []);
14 |
15 | return (
16 |
21 | );
22 | }
23 |
24 | export default BlankCard;
25 |
--------------------------------------------------------------------------------
/web/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "/?source=pwa",
3 | "start_url": "/?source=pwa",
4 | "name": "UNO",
5 | "short_name": "UNO",
6 | "description": "UNO multiplyer game",
7 | "theme_color": "#ffffff",
8 | "background_color": "#ffffff",
9 | "display": "standalone",
10 | "icons": [
11 | {
12 | "src": "/favicon.ico",
13 | "sizes": "64x64 32x32 24x24 16x16",
14 | "type": "image/x-icon",
15 | "purpose": "any"
16 | },
17 | {
18 | "src": "/192x192.png",
19 | "sizes": "192x192",
20 | "type": "image/png",
21 | "purpose": "any"
22 | },
23 | {
24 | "src": "/512x512.png",
25 | "sizes": "512x512",
26 | "type": "image/png",
27 | "purpose": "maskable"
28 | }
29 | ]
30 | }
31 |
--------------------------------------------------------------------------------
/web/src/types/game.ts:
--------------------------------------------------------------------------------
1 | export type Hands = Record
18 |
24 | );
25 | }
26 |
27 | export default Won;
28 |
--------------------------------------------------------------------------------
/web/src/components/input.tsx:
--------------------------------------------------------------------------------
1 | interface InputProps {
2 | label: string;
3 | value: string | number;
4 | placeholder?: string;
5 | disabled?: boolean;
6 | onChange?(event: React.ChangeEvent{state?.winner} won! 🎉
20 | 21 | Play again 22 | 23 |
14 |
17 |
25 |
26 | );
27 | }
28 | export default Input;
29 |
--------------------------------------------------------------------------------
/server/lib/notification.py:
--------------------------------------------------------------------------------
1 | from flask_socketio import emit
2 | import lib.events as events
3 |
4 |
5 | class Notification:
6 | def __init__(self, room: str):
7 | self.room = room
8 |
9 | def info(self, message: str) -> None:
10 | emit(events.GAME_NOTIFY, self.format('info', message), to=self.room)
11 |
12 | def success(self, message: str) -> None:
13 | emit(events.GAME_NOTIFY, self.format('success', message), to=self.room)
14 |
15 | def warn(self, message: str) -> None:
16 | emit(events.GAME_NOTIFY, self.format('warn', message), to=self.room)
17 |
18 | def error(self, message: str) -> None:
19 | emit(events.GAME_NOTIFY, self.format('error', message), to=self.room)
20 |
21 | def format(self, notification_type: str, message: str) -> None:
22 | return {'type': notification_type, 'message': str(message)}
23 |
--------------------------------------------------------------------------------
/web/src/types/ws.ts:
--------------------------------------------------------------------------------
1 | import { Card, Hands, Player } from './game';
2 |
3 | export type GameStateResponse = {
4 | hands: Hands;
5 | top_card: Card;
6 | };
7 |
8 | export type GameNotifyResponse = {
9 | type: string;
10 | message: string;
11 | };
12 |
13 | export type GameRoomResponse = {
14 | players: Player[];
15 | };
16 |
17 | export enum GameOverReason {
18 | Won = 'won',
19 | Error = 'error',
20 | InsufficientPlayers = 'insufficient-players',
21 | }
22 |
23 | export type GameOverResponse =
24 | | GameOverWonResponse
25 | | GameOverErrorResponse
26 | | GameOverInsufficientPlayersResponse;
27 |
28 | type GameOverWonResponse = {
29 | reason: GameOverReason.Won;
30 | winner: string;
31 | };
32 |
33 | type GameOverErrorResponse = {
34 | reason: GameOverReason.Error;
35 | };
36 |
37 | type GameOverInsufficientPlayersResponse = {
38 | reason: GameOverReason.InsufficientPlayers;
39 | };
40 |
--------------------------------------------------------------------------------
/web/src/components/cards/stack.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 | import { Card } from '../../types/game';
3 | import BlankCard from './blank';
4 | import UnoCard, { UnoCardSizes } from './uno';
5 |
6 | interface CardStackProps {
7 | className?: string;
8 | card?: Card;
9 | size?: UnoCardSizes;
10 | hidden?: boolean;
11 | onClick?(): void;
12 | }
13 |
14 | function CardStack(props: CardStackProps): React.ReactElement {
15 | const { className, card, size = 'default', hidden, onClick } = props;
16 |
17 | return (
18 | onClick && onClick()}
21 | >
22 | {card &&
27 | );
28 | }
29 |
30 | export default CardStack;
31 |
--------------------------------------------------------------------------------
/web/src/lib/image.ts:
--------------------------------------------------------------------------------
1 | import { Card } from '../types/game';
2 |
3 | /**
4 | * Uno card assets are Public Domain. Free for editorial, educational, commercial,
5 | * and/or personal projects. No attribution required. More info.
6 | *
7 | * Ref: https://creazilla.com/pages/4-license-information
8 | */
9 | export function getCardImageURL(card: Card, hidden?: boolean): string {
10 | if (hidden) {
11 | return new URL('../assets/images/cards/back.svg', import.meta.url).href;
12 | }
13 |
14 | return new URL(
15 | `../assets/images/cards/${card.color}/${card.value}.svg`,
16 | import.meta.url
17 | ).href;
18 | }
19 |
20 | export function getBlankCardURL(hidden?: boolean): string {
21 | if (hidden) {
22 | return new URL('../assets/images/cards/back.svg', import.meta.url).href;
23 | }
24 |
25 | return new URL('../assets/images/cards/blank.svg', import.meta.url).href;
26 | }
27 |
28 | export const logoURL = new URL('../assets/images/logo.svg', import.meta.url)
29 | .href;
30 |
--------------------------------------------------------------------------------
/web/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | html {
8 | font-family: 'Roboto', sans-serif;
9 | }
10 |
11 | body {
12 | margin: 0;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | }
16 |
17 | #root {
18 | display: flex;
19 | height: 100dvh;
20 | width: 100vw;
21 | @apply p-4;
22 | }
23 |
24 | .no-pointer {
25 | cursor: default;
26 | }
27 |
28 | .loader {
29 | @apply border-4;
30 | @apply border-gray-100;
31 | @apply border-t-4;
32 | @apply border-t-black;
33 | @apply h-10;
34 | @apply w-10;
35 | border-radius: 50%;
36 | animation: spin 0.8s linear infinite;
37 | }
38 |
39 | .btn {
40 | font-weight: 500;
41 | }
42 |
43 | @keyframes spin {
44 | 0% {
45 | transform: rotate(0deg);
46 | }
47 | 100% {
48 | transform: rotate(360deg);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/server/lib/parser.py:
--------------------------------------------------------------------------------
1 | from typing import Dict, Any, List, Tuple
2 |
3 |
4 | def parse_data_args(data: Dict[str, Any], args: List[str]) -> List[Any]:
5 | missing_args = []
6 | values = []
7 |
8 | for arg in args:
9 | if arg not in data:
10 | missing_args.append(arg)
11 | else:
12 | values.append(data[arg])
13 |
14 | if missing_args != []:
15 | raise Exception(f'missing args: {", ".join(missing_args)}')
16 |
17 | return values
18 |
19 |
20 | def parse_object(obj) -> Any:
21 | return obj.__dict__
22 |
23 |
24 | def parse_object_list(objects) -> List[Any]:
25 | return [obj.__dict__ for obj in list(objects)]
26 |
27 |
28 | def parse_game_state(state) -> Dict[str, Any]:
29 | (hands, top_card) = state
30 | parsed_hands = {key.id: parse_object_list(
31 | value) for key, value in hands.items()}
32 | parsed_top_card = parse_object(top_card)
33 |
34 | return {
35 | 'hands': parsed_hands,
36 | 'top_card': parsed_top_card
37 | }
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2023 Karan Pratap Singh
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 |
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 |
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/web/src/components/modals/confirm.tsx:
--------------------------------------------------------------------------------
1 | interface ConfirmModalProps {
2 | onConfirm(): void;
3 | }
4 |
5 | function ConfirmModal(props: ConfirmModalProps): React.ReactElement {
6 | const { onConfirm } = props;
7 |
8 | return (
9 | <>
10 |
15 |
16 |
32 |
33 | );
34 | }
35 |
36 | export default ConfirmModal;
37 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [UNO](https://uno-web-4m6k.onrender.com)
2 |
3 | Classic UNO card game implemented with React and Python using [Socket.IO](https://socket.io/) for realtime multiplayer functionality.
4 |
5 | _Note: I made this for fun and personal use, please don't use this code in production._
6 |
7 | ## 📷 Screenshots
8 |
9 |
17 |
31 | Leave Game
18 |Are you sure you want to leave the game?
19 |
20 |
26 |
29 |
30 | 
10 | 
11 |
12 | ## 💻 Development
13 |
14 | **Server**
15 |
16 | ```
17 | $ cd server
18 | $ make start-redis
19 | $ make dev
20 | ```
21 |
22 | _Note: Make sure docker is running._
23 |
24 | **Web**
25 |
26 | ```
27 | $ cd web
28 | $ pnpm install
29 | $ pnpm run dev
30 | ```
31 |
32 | ## 📖 TODO
33 |
34 | - [ ] Better game validation rules
35 | - [ ] Implement game log
36 | - [ ] Host can kick player from room
37 | - [ ] Place chance logic
38 | - [ ] Generate random player name
39 | - [ ] Player can remove a card from hand
40 | - [ ] Migrate to a message broker like NATS?
41 |
--------------------------------------------------------------------------------
/web/src/components/avatar.tsx:
--------------------------------------------------------------------------------
1 | import clsx from 'clsx';
2 |
3 | interface AvatarProps {
4 | className?: string;
5 | name: string;
6 | size?: 'small' | 'default';
7 | type?: 'row' | 'col';
8 | }
9 |
10 | function Avatar(props: AvatarProps): React.ReactElement {
11 | const { className, name, size = 'default', type = 'col' } = props;
12 |
13 | return (
14 |
21 |
38 | );
39 | }
40 |
41 | export default Avatar;
42 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/red/1.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/blue/1.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/green/1.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/yellow/1.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/red/7.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/components/header.tsx:
--------------------------------------------------------------------------------
1 | import { Socket } from 'socket.io-client';
2 | import { logoURL } from '../lib/image';
3 | import { GameConfig } from '../types/game';
4 | import InfoMenu from './menus/info';
5 | import ConfirmModal from './modals/confirm';
6 |
7 | interface HeaderProps {
8 | socket: Socket;
9 | isConnected: boolean;
10 | config: GameConfig;
11 | onLeave(): void;
12 | }
13 |
14 | function Header(props: HeaderProps): React.ReactElement {
15 | const { isConnected, config, onLeave } = props;
16 |
17 | return (
18 |
28 | 
31 |
32 |
35 | {name}
36 |
37 |
19 |
35 | );
36 | }
37 |
38 | export default Header;
39 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/blue/7.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/green/7.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/yellow/7.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "uno",
3 | "private": true,
4 | "version": "1.0.2",
5 | "type": "module",
6 | "license": "MIT",
7 | "scripts": {
8 | "start": "vite",
9 | "dev": "vite --port 3000",
10 | "build": "tsc && vite build",
11 | "preview": "pnpm run build && vite preview --port 3000",
12 | "lint": "prettier --write ."
13 | },
14 | "dependencies": {
15 | "clsx": "1.2.1",
16 | "daisyui": "2.51.4",
17 | "react": "18.2.0",
18 | "react-confetti": "6.1.0",
19 | "react-dom": "18.2.0",
20 | "react-icons": "4.8.0",
21 | "react-router-dom": "6.9.0",
22 | "react-toastify": "9.1.1",
23 | "shortid": "2.2.16",
24 | "socket.io-client": "4.6.1"
25 | },
26 | "devDependencies": {
27 | "@types/react": "18.0.28",
28 | "@types/react-dom": "18.0.11",
29 | "@types/shortid": "0.0.29",
30 | "@vitejs/plugin-react": "3.1.0",
31 | "autoprefixer": "10.4.14",
32 | "postcss": "8.4.21",
33 | "prettier": "2.8.4",
34 | "prettier-plugin-organize-imports": "^3.2.2",
35 | "prettier-plugin-tailwindcss": "0.2.5",
36 | "tailwindcss": "3.2.7",
37 | "typescript": "4.9.3",
38 | "vite": "4.2.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/web/public/worker.js:
--------------------------------------------------------------------------------
1 | const CACHE_NAME = 'uno';
2 |
3 | // Add the routes you want to cache in an offline PWA
4 | const urlsToCache = ['/'];
5 |
6 | // Install a service worker
7 | self.addEventListener('install', event => {
8 | // Perform install steps
9 | event.waitUntil(
10 | caches.open(CACHE_NAME).then(cache => {
11 | console.log('Opened cache');
12 | return cache.addAll(urlsToCache);
13 | })
14 | );
15 | });
16 |
17 | // Cache and return requests
18 | self.addEventListener('fetch', event => {
19 | event.respondWith(
20 | caches.match(event.request).then(response => {
21 | // Cache hit - return response
22 | if (response) {
23 | return response;
24 | }
25 | return fetch(event.request);
26 | })
27 | );
28 | });
29 |
30 | // Update service worker
31 | self.addEventListener('activate', event => {
32 | const cacheWhitelist = [CACHE_NAME];
33 | event.waitUntil(
34 | caches.keys().then(cacheNames => {
35 | return Promise.all(
36 | cacheNames.map(cacheName => {
37 | if (cacheWhitelist.indexOf(cacheName) === -1) {
38 | return caches.delete(cacheName);
39 | }
40 | })
41 | );
42 | })
43 | );
44 | });
45 |
--------------------------------------------------------------------------------
/web/src/app.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import { createBrowserRouter, RouterProvider } from 'react-router-dom';
4 | import { Slide, ToastContainer } from 'react-toastify';
5 | import 'react-toastify/dist/ReactToastify.css';
6 | import RootErrorBoundary from './components/errors/root';
7 | import Home from './pages/home';
8 | import Play from './pages/play';
9 | import Won from './pages/won';
10 | import './styles/global.css';
11 | import { Routes } from './types/routes';
12 |
13 | const router = createBrowserRouter([
14 | {
15 | path: Routes.Home,
16 | element:
20 |
22 |
23 | 
24 |
25 |
26 |
32 |
33 |
15 |
42 | );
43 | }
44 |
45 | export default InfoMenu;
46 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/red/0.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/blue/0.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/green/0.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/yellow/0.svg:
--------------------------------------------------------------------------------
1 |
28 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
20 |
41 |
21 |
40 |
22 | status
23 |
33 |
30 | {isConnected ? 'online' : 'offline'}
31 |
32 | 34 | player {config.name} 35 |
36 |37 | room {config.room} 38 |
39 |
50 |
71 | );
72 | }
73 |
74 | export default Home;
75 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/red/draw-two.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/blue/draw-two.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/green/draw-two.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/yellow/draw-two.svg:
--------------------------------------------------------------------------------
1 |
40 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/black/draw-four.svg:
--------------------------------------------------------------------------------
1 |
64 |
--------------------------------------------------------------------------------
/web/src/components/modals/start.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useSearchParams } from 'react-router-dom';
3 | import shortid from 'shortid';
4 | import { defaultHandSize } from '../../lib/state';
5 | import { GameAction } from '../../types/game';
6 | import Input from '../input';
7 |
8 | interface StartModalProps {
9 | action: GameAction;
10 | onStart(
11 | action: GameAction,
12 | name: string,
13 | room: string,
14 | hand_size: number
15 | ): void;
16 | }
17 |
18 | function StartModal(props: StartModalProps): React.ReactElement {
19 | const { action, onStart } = props;
20 | const [name, setName] = useState
51 |
52 |
67 |
53 |
59 |
65 |
66 |
70 |
109 |
110 | );
111 | }
112 |
113 | export default StartModal;
114 |
--------------------------------------------------------------------------------
/server/lib/state.py:
--------------------------------------------------------------------------------
1 | import logging
2 | import pickle
3 | from typing import Optional, Set
4 |
5 | from core.uno import Game, Player
6 | from lib.env import REDIS_URL
7 | from redis import Redis
8 |
9 | log = logging.getLogger('state')
10 | log.setLevel(logging.INFO)
11 |
12 | GAME_EXPIRATION_TIME = 86_400 # 1 day
13 | ROOM_EXPIRATION_TIME = 86_400 # 1 day
14 |
15 |
16 | class State:
17 | def __init__(self):
18 | self.redis = Redis.from_url(REDIS_URL)
19 |
20 | def allow_player(self, action: str, room: str, player: Player) -> (bool, Optional[str]):
21 | # Validate player
22 | if not player.name or player.name == '':
23 | return (False, f'name cannot be blank')
24 |
25 | if ' ' in player.name:
26 | return (False, f'name should not contain white spaces')
27 |
28 | # Validate room
29 | if room == '':
30 | return (False, f'room should not be empty')
31 |
32 | if action == "Join": # Check if room exists
33 | exists = bool(self.redis.exists(f'players_{room}'))
34 | if not exists:
35 | return (False, f'cannot join game, room {room} does not exist')
36 |
37 | # Validate game
38 | started = bool(self.get_game_by_room(room))
39 | players = self.get_players_by_room(room)
40 |
41 | if len(players) == Game.MAX_PLAYERS_ALLOWED:
42 | return (False, f"room is full, max {Game.MAX_PLAYERS_ALLOWED} players are supported")
43 |
44 | if started:
45 | if player not in players:
46 | return (False, f'cannot join, game in the room {room} has already started')
47 | else:
48 | if player in players:
49 | return (False, f"name {player.name} is already taken for this room, try a different name")
50 |
51 | return (True, None)
52 |
53 | def get_game_by_room(self, room: str) -> Optional[Game]:
54 | obj = self.redis.get(f'game_{room}')
55 | if not obj:
56 | return None
57 |
58 | return pickle.loads(obj)
59 |
60 | def add_game_to_room(self, room: str, game: Game) -> None:
61 | obj = pickle.dumps(game)
62 | self.redis.set(f'game_{room}', obj, ex=GAME_EXPIRATION_TIME)
63 |
64 | def update_game_in_room(self, room: str, game: Game) -> None:
65 | obj = pickle.dumps(game)
66 | self.redis.set(f'game_{room}', obj, ex=GAME_EXPIRATION_TIME)
67 |
68 | def get_players_by_room(self, room: str) -> Set[Player]:
69 | obj = self.redis.get(f'players_{room}')
70 | if not obj:
71 | return set()
72 |
73 | return pickle.loads(obj)
74 |
75 | def add_player_to_room(self, room: str, player: Player) -> None:
76 | log.info(f"adding player {player} to room {room}")
77 |
78 | players = self.get_players_by_room(room)
79 | players.add(player)
80 |
81 | obj = pickle.dumps(players)
82 | self.redis.set(f'players_{room}', obj, ex=ROOM_EXPIRATION_TIME)
83 |
84 | def remove_player_from_room(self, room: str, player: Player) -> None:
85 | log.info(f"removing player {player} from room {room}")
86 |
87 | players = self.get_players_by_room(room)
88 | players.remove(player)
89 |
90 | obj = pickle.dumps(players)
91 | self.redis.set(f'players_{room}', obj, ex=ROOM_EXPIRATION_TIME)
92 |
93 | def delete_all(self, room: str) -> None:
94 | self.delete_room(room)
95 | self.delete_game(room)
96 |
97 | def delete_room(self, room: str) -> None:
98 | self.redis.delete(f'players_{room}')
99 | log.info(f"deleted {room}")
100 |
101 | def delete_game(self, room: str) -> None:
102 | self.redis.delete(f'game_{room}')
103 | log.info(f"deleted game for room {room}")
104 |
--------------------------------------------------------------------------------
/web/src/components/game.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 | import { Socket } from 'socket.io-client';
4 | import { GAME_STATE_REFETCH_INTERVAL } from '../config/game';
5 | import { Card, Events, Hands, Player } from '../types/game';
6 | import { Routes } from '../types/routes';
7 | import {
8 | GameOverReason,
9 | GameOverResponse,
10 | GameStateResponse,
11 | } from '../types/ws';
12 | import Avatar from './avatar';
13 | import CardStack from './cards/stack';
14 | import UnoCard from './cards/uno';
15 | import Loader from './loader';
16 |
17 | interface GameProps {
18 | currentPlayer: Player;
19 | players: Player[];
20 | socket: Socket;
21 | started: boolean;
22 | room: string;
23 | }
24 |
25 | function Game(props: GameProps): React.ReactElement {
26 | const { socket, currentPlayer, players, started, room } = props;
27 | const navigate = useNavigate();
28 |
29 | const [hands, setHands] = useState
71 |
108 | {action}
72 |{action} a game by entering some details
73 | 79 | 86 | {action === GameAction.Host && ( 87 | 92 | )} 93 |
94 |
100 |
106 |
107 |
97 | {/* Other player */}
98 |
157 | );
158 | }
159 |
160 | export default Game;
161 |
--------------------------------------------------------------------------------
/web/src/pages/play.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useMemo, useState } from 'react';
2 | import { RiShareForwardFill } from 'react-icons/ri';
3 | import { useLocation, useNavigate } from 'react-router-dom';
4 | import { toast } from 'react-toastify';
5 | import Avatar from '../components/avatar';
6 | import Game from '../components/game';
7 | import Header from '../components/header';
8 | import Loader from '../components/loader';
9 | import { defaultConfig } from '../config/game';
10 | import { WEB_HTTP_URL } from '../config/web';
11 | import socket from '../lib/socket';
12 | import { validateGameConfig } from '../lib/state';
13 | import { Events, GameConfig, Player } from '../types/game';
14 | import { Routes } from '../types/routes';
15 | import { GameNotifyResponse, GameRoomResponse } from '../types/ws';
16 |
17 | function Play(): React.ReactElement {
18 | const navigate = useNavigate();
19 | const { state } = useLocation();
20 | const isValidState = state && validateGameConfig(state);
21 |
22 | useEffect(() => {
23 | if (!isValidState) {
24 | navigate(Routes.Home);
25 | toast.warn('no active game found, please host or join a game');
26 | }
27 | }, [isValidState]);
28 |
29 | const [isConnected, setIsConnected] = useState
99 |
119 |
120 | {/* Card space */}
121 |
107 |
118 |
108 | {otherCards.map((card: Card, index: number) => (
109 |
117 |
122 |
134 |
135 | {/* Current Player */}
136 |
137 |
156 |
138 |
149 |
139 | {ownCards.map((card: Card, index: number) => (
140 |
148 |
164 |
178 | );
179 | }
180 |
181 | return (
182 |
165 | {players.map((player: Player) => (
166 |
169 | {status}
170 |
173 |
177 |
183 |
191 | );
192 | }
193 |
194 | export default Play;
195 |
--------------------------------------------------------------------------------
/server/app.py:
--------------------------------------------------------------------------------
1 | import logging
2 | from typing import Any
3 |
4 | from flask import Flask, Response, request
5 | from flask_cors import CORS
6 | from flask_socketio import SocketIO, emit, join_room, leave_room
7 |
8 | from lib import env
9 | from lib import events
10 | from core.uno import Game, GameOverReason, Player
11 | from lib.notification import Notification
12 | from lib.parser import parse_data_args, parse_game_state, parse_object_list
13 | from lib.state import State
14 |
15 | logging.basicConfig(format='%(levelname)s[%(name)s]: %(message)s')
16 | log = logging.getLogger(__name__)
17 | log.setLevel(logging.INFO)
18 |
19 | # Server config
20 | app = Flask(__name__)
21 | CORS(app, resources={r"/*": {"origins": env.WEB_URL}})
22 | socketio = SocketIO(app, cors_allowed_origins=env.WEB_URL)
23 |
24 | state = State()
25 |
26 |
27 | @app.get('/healthz')
28 | def healthcheck():
29 | return Response(status=200)
30 |
31 |
32 | @app.post('/api/game/allow')
33 | def allow_player():
34 | try:
35 | action, name, room = parse_data_args(request.json, ['action', 'name', 'room'])
36 | player = Player(name)
37 | allow, reason = state.allow_player(action, room, player)
38 |
39 | return {'allow': allow, 'reason': reason}
40 | except Exception as ex:
41 | log.error(ex)
42 | return {'allow': False, 'reason': str(ex)}
43 |
44 |
45 | @socketio.on(events.PLAYER_JOIN)
46 | def on_join(data):
47 | try:
48 | name, room = parse_data_args(data, ['name', 'room'])
49 |
50 | player = Player(name)
51 | state.add_player_to_room(room, player)
52 | join_room(room)
53 | log.info(f"{player} has joined the room {room}")
54 |
55 | # Start game if game already exists
56 | game = state.get_game_by_room(room)
57 | if game:
58 | emit(events.GAME_START, to=room)
59 |
60 | # Add extra player for debugging
61 | if env.ENVIRONMENT == "debug":
62 | dev_player = Player("developer")
63 | state.add_player_to_room(room, dev_player)
64 |
65 | players = state.get_players_by_room(room)
66 | emit(events.GAME_ROOM, {'players': parse_object_list(players)}, to=room)
67 | except Exception as ex:
68 | log.error(ex)
69 |
70 |
71 | @socketio.on(events.PLAYER_LEAVE)
72 | def on_leave(data):
73 | try:
74 | name, room = parse_data_args(data, ['name', 'room'])
75 |
76 | player = Player(name)
77 |
78 | # Remove player from game
79 | game = state.get_game_by_room(room)
80 | if game:
81 | game.remove_player(player)
82 |
83 | # Remove player from room
84 | state.remove_player_from_room(room, player)
85 | state.update_game_in_room(room, game)
86 |
87 | # Leave the room
88 | leave_room(room)
89 |
90 | log.info(f"{player} has left the room {room}")
91 | Notification(room).error(f'{player.name} has left the game')
92 |
93 | # Delete game if insufficient players
94 | players = state.get_players_by_room(room)
95 | if len(players) < 2:
96 | state.delete_game(room)
97 | emit(events.GAME_OVER, {'reason': GameOverReason.INSUFFICIENT_PLAYERS.value}, to=room)
98 |
99 | emit(events.GAME_ROOM, {'players': parse_object_list(players)}, to=room)
100 | except Exception as ex:
101 | log.error(ex)
102 |
103 |
104 | @socketio.on(events.GAME_START)
105 | def on_game_start(data):
106 | try:
107 | room, hand_size = parse_data_args(data, ['room', 'hand_size'])
108 |
109 | game = state.get_game_by_room(room)
110 | players = state.get_players_by_room(room)
111 |
112 | if not game: # Start a new game
113 | try:
114 | game = Game(room, players, hand_size)
115 | state.add_game_to_room(room, game)
116 | except Exception as ex:
117 | Notification(room).error(ex)
118 | raise Exception("failed to start the game") from ex
119 |
120 | log.info(f"starting a new game in room {room} with players {players}")
121 |
122 | try:
123 | game_state = game.get_state()
124 | emit(events.GAME_START, to=room)
125 | emit(events.GAME_STATE, parse_game_state(game_state), to=room)
126 | except Exception as ex:
127 | Notification(room).error(ex)
128 | raise Exception("failed to get game state") from ex
129 |
130 | except Exception as ex:
131 | log.error(ex)
132 |
133 |
134 | @socketio.on(events.GAME_DRAW)
135 | def on_draw_card(data):
136 | try:
137 | room, player_id = parse_data_args(data, ['room', 'player_id'])
138 |
139 | game = state.get_game_by_room(room)
140 | game.draw(player_id)
141 | game_state = game.get_state()
142 | emit(events.GAME_STATE, parse_game_state(game_state), to=room)
143 | state.update_game_in_room(room, game)
144 | except Exception as ex:
145 | log.error(ex)
146 |
147 |
148 | @socketio.on(events.GAME_PLAY)
149 | def on_play_game(data):
150 | try:
151 | room, player_id, card_id = parse_data_args(data, ['room', 'player_id', 'card_id'])
152 |
153 | game = state.get_game_by_room(room)
154 |
155 | def on_game_over(reason: GameOverReason, data: Any):
156 | nonlocal room
157 |
158 | if reason == GameOverReason.WON:
159 | log.info(f'player {data} won game {room}')
160 | emit(events.GAME_OVER, {'reason': reason.value, 'winner': data.name}, to=room)
161 | state.delete_all(room)
162 |
163 | try:
164 | game.play(player_id, card_id, on_game_over)
165 | except ValueError as e:
166 | log.error(e)
167 |
168 | game_state = game.get_state()
169 | emit(events.GAME_STATE, parse_game_state(game_state), to=room)
170 | state.update_game_in_room(room, game)
171 | except Exception as ex:
172 | log.error(ex)
173 |
174 |
175 | @socketio.on(events.GAME_STATE)
176 | def on_game_state(data):
177 | try:
178 | room = parse_data_args(data, ['room'])[0]
179 |
180 | game = state.get_game_by_room(room)
181 | if game:
182 | game_state = game.get_state()
183 | emit(events.GAME_STATE, parse_game_state(game_state), to=room)
184 | except Exception as ex:
185 | log.error(ex)
186 |
187 |
188 | if __name__ == '__main__':
189 | socketio.run(app, host="0.0.0.0", port=5000)
190 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/black/wild.svg:
--------------------------------------------------------------------------------
1 |
98 |
--------------------------------------------------------------------------------
/server/core/uno.py:
--------------------------------------------------------------------------------
1 | import collections
2 | import random
3 | from enum import Enum
4 | from typing import Any, Callable, DefaultDict, List, Set, Tuple
5 |
6 | from lib.notification import Notification
7 |
8 |
9 | class Player:
10 | def __init__(self, name):
11 | self.id: str = f'player-{name}'
12 | self.name: str = name
13 |
14 | def __repr__(self) -> str:
15 | return f"Player(id={self.id}, name={self.name})"
16 |
17 | def __hash__(self) -> int:
18 | return hash(self.id)
19 |
20 | def __eq__(self, obj) -> bool:
21 | return isinstance(obj, type(self)) and self.id == obj.id
22 |
23 |
24 | class Card:
25 | def __init__(self, color, value):
26 | self.id: str = f'{value}-{color}'
27 | self.color: str = color
28 | self.value: str = value
29 |
30 | def is_special(self) -> bool:
31 | special_cards = set(Deck.DRAW_TWO_CARDS + Deck.REVERSE_CARDS +
32 | Deck.SKIP_CARDS + Deck.DRAW_FOUR_CARDS + Deck.WILD_CARDS)
33 | return self.value in special_cards or self.color == 'black'
34 |
35 | def is_color_special(self) -> bool:
36 | special_cards = set(Deck.DRAW_TWO_CARDS + Deck.REVERSE_CARDS + Deck.SKIP_CARDS)
37 | return self.value in special_cards or self.color != 'black'
38 |
39 | def is_black(self) -> bool:
40 | return self.color == 'black'
41 |
42 | def is_draw_four(self) -> bool:
43 | return self.value == 'draw-four'
44 |
45 | def is_wild(self) -> bool:
46 | return self.value == 'wild'
47 |
48 | def __repr__(self) -> str:
49 | return f'Card(color={self.color}, value={self.value})'
50 |
51 |
52 | class Deck:
53 | SHUFFLE_FREQ = 50
54 | COLORS = ['red', 'blue', 'green', 'yellow']
55 | NUMBER_CARDS = [str(i) for i in (list(range(0, 10)) + list(range(1, 10)))]
56 | DRAW_TWO_CARDS = ['draw-two'] * 2
57 | REVERSE_CARDS = ['reverse'] * 2
58 | SKIP_CARDS = ['skip'] * 2
59 |
60 | DRAW_FOUR_CARDS = ['draw-four'] * 4
61 | WILD_CARDS = ['wild'] * 4
62 | COLOR_CARDS = NUMBER_CARDS + DRAW_TWO_CARDS + REVERSE_CARDS + SKIP_CARDS
63 |
64 | def __init__(self):
65 | color_cards = [Card(color, value) for color in self.COLORS for value in self.COLOR_CARDS]
66 | black_cards = [Card('black', value) for value in (self.DRAW_FOUR_CARDS + self.WILD_CARDS)]
67 |
68 | self.cards: List[Card] = color_cards + black_cards
69 | self.shuffle()
70 |
71 | def get_cards(self) -> List[Card]:
72 | return self.cards
73 |
74 | def shuffle(self):
75 | for _ in range(self.SHUFFLE_FREQ):
76 | random.shuffle(self.cards)
77 |
78 |
79 | class GameOverReason(Enum):
80 | WON = 'won'
81 | ERROR = 'error'
82 | INSUFFICIENT_PLAYERS = 'insufficient-players'
83 |
84 |
85 | class Game:
86 | MIN_PLAYERS_ALLOWED = 2
87 | MAX_PLAYERS_ALLOWED = 2
88 |
89 | def __init__(self, room: str, players: Set[Player], hand_size: int):
90 | self.hands: DefaultDict[Player, List[Card]] = collections.defaultdict(list)
91 | self.players: Set[Player] = players
92 | self.notify = Notification(room)
93 | self.deck = Deck()
94 |
95 | self.validate_players()
96 |
97 | cards = self.deck.get_cards()
98 |
99 | TOTAL_PLAYERS = len(players)
100 | self.remaining_cards: List[Card] = cards[TOTAL_PLAYERS * hand_size:]
101 | player_cards = cards[:TOTAL_PLAYERS * hand_size]
102 |
103 | # Distribute cards (alternatively)
104 | i = 0
105 | while i < len(player_cards):
106 | for player in players:
107 | self.hands[player].append(player_cards[i])
108 | i += 1
109 |
110 | # Pick a top card (skip special cards)
111 | top_card = random.choice(self.remaining_cards)
112 | while top_card.is_special():
113 | top_card = random.choice(self.remaining_cards)
114 |
115 | self.game_stack: List[Card] = [top_card]
116 |
117 | def remove_player(self, player) -> None:
118 | self.players.remove(player)
119 |
120 | def validate_players(self) -> None:
121 | if len(self.players) < self.MIN_PLAYERS_ALLOWED:
122 | raise Exception(f"need at least {self.MIN_PLAYERS_ALLOWED} players to start the game")
123 | return
124 |
125 | def get_state(self) -> Tuple[DefaultDict[Player, List[Card]], Card]:
126 | self.validate_players()
127 | top_card = self.get_top_card()
128 |
129 | return (self.hands, top_card)
130 |
131 | def get_top_card(self) -> Card:
132 | return self.game_stack[-1]
133 |
134 | def transfer_played_cards(self) -> None:
135 | played_cards = self.game_stack[::]
136 | played_cards.pop() # Remove the top card
137 |
138 | random.shuffle(played_cards) # Shuffle played card
139 | self.remaining_cards = played_cards[::]
140 | self.game_stack = [self.get_top_card()]
141 |
142 | def draw(self, player_id: str) -> None:
143 | self.validate_players()
144 |
145 | player = self.find_object(self.players, player_id)
146 | player_cards = self.hands[player]
147 |
148 | if not self.remaining_cards:
149 | self.transfer_played_cards()
150 |
151 | if not self.remaining_cards:
152 | self.notify.warn('deck is empty!')
153 | return
154 |
155 | new_card = self.remaining_cards.pop()
156 | player_cards.append(new_card)
157 |
158 | def play(self, player_id: str, card_id: str, on_game_over: Callable[[GameOverReason, Any], None]) -> None:
159 | self.validate_players()
160 |
161 | player = self.find_object(self.players, player_id)
162 | player_cards = self.hands[player]
163 | card = self.find_object(player_cards, card_id)
164 | top_card = self.get_top_card()
165 |
166 | def execute_hand():
167 | nonlocal player_cards, card
168 |
169 | # Find and remove card from the current player's hand
170 | idx = self.find_object_idx(player_cards, card.id)
171 | player_cards.pop(idx)
172 |
173 | # Insert played card top of the game stack
174 | self.game_stack.append(card)
175 |
176 | if len(player_cards) == 1:
177 | self.notify.success(f"UNO! by {player.name}")
178 |
179 | if len(player_cards) == 0:
180 | on_game_over(GameOverReason.WON, player)
181 |
182 | # Can play any card on top of black cards
183 | if not card.is_black() and top_card.is_black():
184 | execute_hand()
185 | return
186 |
187 | if card.is_black() and top_card.is_black():
188 | # Cannot play wild card on top of draw four and vice-versa
189 | if ((card.is_draw_four() and top_card.is_wild()) or
190 | (card.is_wild() and top_card.is_draw_four())):
191 | self.notify.error(
192 | f"cannot play a {card.value} card on top of a {top_card.value} card")
193 | return
194 | execute_hand()
195 | return
196 |
197 | same_color = card.color == top_card.color
198 | same_value = card.value == top_card.value
199 |
200 | if same_color or same_value:
201 | execute_hand()
202 | return
203 |
204 | if card.is_black():
205 | execute_hand()
206 | return
207 |
208 | def find_object(self, objects, obj_id: str):
209 | objects = list(objects)
210 | idx = self.find_object_idx(objects, obj_id)
211 |
212 | return objects[idx]
213 |
214 | def find_object_idx(self, objects, obj_id: str):
215 | return [obj.id for obj in objects].index(obj_id)
216 |
--------------------------------------------------------------------------------
/web/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/web/src/assets/images/cards/back.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------