codyparker / channels-obstruction Goto Github PK

A simple game of Obstruction created to explore Django + Django Channels + ReactJS

License: MIT License

JavaScript 32.96% Python 50.26% CSS 1.90% HTML 14.87%

django-channels django-framework reactjs

channels-obstruction's Introduction

channels-obstruction

A simple game of Obstruction created to explore Django + Django Channels + ReactJS Blog Post and Tutorial at: http://www.codyparker.com/django-channels-with-react

Synopsis

I started this project to explore the Django Channels, which is an upcoming core app that adds asynchronous WebSocket support to the wonderful Django Framework. Channels makes it very easy to build "real-time" apps in pure Django and Python, providing a great way to develop applications that require features such as "real-time" collaboration or chat for example.

Obstruction is a 2-player pen and paper game which involves players taking turns claiming free spots on a grid. The spot they choose, and all surrounding spots are then claimed for that player and can no longer be claimed by another player. The play continues back-and-forth until there are no free spots to claim. The last player to successfully claim a spot, wins the game.

This project also uses React to handle the reactive, client-side components. I picked React because I like it, but it could be swapped out with Angular/Vue/Knockout/etc....

Features

Full game functionality:
- Authentication - Signup / Login
- Game Lobby with live updating list of available games
- Ability to create a game that will show up in other users' availiable games list
- Gameboard that enforces Obstruction rules and allows players to take turns and see the results in real-time
- Game log that tracks all moves and reports them live as they occur
- Players can chat in the game log
Lobby and Gameboard are made up of ReactJS components on the client-side
Examples of how to mix standard Django templating with ReactJS
Webpack integration to create separate bundles needed for different parts of the application
Django Rest Framework used to help serialize data needed by React as well as provides API endpoints for client-side data calls
Mixed use of DRF, standard Django context sent from the view, as well as communication through channels to demostrate multiple ways to interact with data and the Django backend

Requirements

Django >= 1.9
Django Channels
Django Rest Framework
Django Webpack Loader
Node & Node Package Manager

Installation

Fork and clone this repository
Create a Python virtual environemnt
In that environment, run pip install -r requirements.txt inside your project
Install node modules with npm install
Create the local database with python manage.py migrate
Run webpack to build the components with npm run webpack
Run Django development server on port 8080 - python manage.py runserver 8080

License

MIT License

channels-obstruction's People

Contributors

Stargazers

Watchers

channels-obstruction's Issues

Can't get it to work

Hi
I was trying to run the application and I'm facing this issue. It just shows lets play at /lobby after login.

How do I get it to work?
Thanx

Wepack error

When I try to run webpack with --config webpack.config.js I recieve this error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
 - configuration.resolve.extensions[0] should not be empty.

Installation: OSError (file was missing)

fixed it with: ./node_modules/.bin/webpack --config webpack.config.js

pls update the installation guide. thx!

unexpected keyword argument 'channel_layer'

Hi Cody, I hope you can help me with this issue:

Django version 1.9, using settings 'channels_obstruction.settings' Starting Channels development server at http://127.0.0.1:8080/ Channel layer default (asgiref.inmemory.ChannelLayer) Quit the server with CONTROL-C. 2019-12-04 11:06:35,145 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.receive 2019-12-04 11:06:35,146 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.receive 2019-12-04 11:06:35,146 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.receive 2019-12-04 11:06:35,146 - INFO - worker - Listening on channels http.request, websocket.connect, websocket.receive Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x7fe5fbb312f0> Traceback (most recent call last): File "/home/paracartoon/game/lib64/python3.6/site-packages/django/utils/autoreload.py", line 226, in wrapper fn(*args, **kwargs) File "/home/paracartoon/game/lib64/python3.6/site-packages/channels/management/commands/runserver.py", line 83, in inner_run ws_protocols=getattr(settings, 'CHANNELS_WS_PROTOCOLS', None), TypeError: __init__() got an unexpected keyword argument 'channel_layer'

Seems like version conflict, however in my project Django, Channels and asgiref versions comply with yours.

Error running webpack

When I try to setup the project "out-of-the-box" and run node_modules/.bin/webpack I get the following error:

    new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
    ^

TypeError: webpack.NoEmitOnErrorsPlugin is not a constructor
    at Object.<anonymous> (C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\webpack.config.js:18:5)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at module.exports (C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\node_modules\webpack\bin\convert-argv.js:80:13)
    at Object.<anonymous> (C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\node_modules\webpack\bin\webpack.js:39:40)

I tried to resolve this by removing the offending line (18: new webpack.NoEmitOnErrorsPlugin()). That allows it to progress further but then fails to recognise the .jsx files. See for example:

Hash: c823a8b044190d0ff507
Version: webpack 1.15.0
Time: 1499ms
                        Asset    Size  Chunks             Chunk Names
 game-c823a8b044190d0ff507.js  774 kB       0  [emitted]  game
lobby-c823a8b044190d0ff507.js  774 kB       1  [emitted]  lobby
    + 183 hidden modules

ERROR in ./templates/components/lobby/index.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./LobbyBase.jsx in C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby
resolve file
  C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx.js doesn't exist
  C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx.jsx doesn't exist
resolve directory
  C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx\package.json doesn't exist (directory description file)
  C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx is not a directory (directory default file)
[C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx.js]
[C:\Users\pedro\Documents\dev\contrib\src\channels-obstruction\templates\components\lobby\LobbyBase.jsx.jsx]
 @ ./templates/components/lobby/index.jsx 7:17-43

The file LobbyBase.jsx exists in ...\templates\components\lobby

I'm new to node so all help is appreciated

Thanks

PTav