Update skeleton dir

skel/README.md

@@ -2,9 +2,56 @@
 
 Here is how to create a new game.
 
-## Step 1: Copy Skeleton
+## Step 1
 
-This skeleton contains everything you need to get started with a new game.
-There are some directories here worth noting... TODO
+Remove the comments next to the text "NOTE: uncomment this to create a new game" in `lamegames/settings.py`
+Once logged in, this will allow you to see "Skeleton Game" as an option.
 
+## Step 2
 
+Before making any changes, try to understand the structure of `/skel/`.
+Here is what you need to know in simple terms; check out each individual file for more information on how each component works:
+
+1. URLs are defined in `skel/urls.py`, this includes HTTP urls as well as WebSocket connection points.
+  * HTTP responses return from `skel/views.py`.
+  * WebSocket requests return from `skel/consumers.py`.
+2. WebSockets are connected to from the client in `skel/static/games/skel.js`.
+3. Models are defined in `skel/models.py`. None are included by default, but check out the [Django documentation](https://docs.djangoproject.com/en/4.0/topics/db/models/) for further information on how these work.
+4. The HTML template used for the game is defined in `skel/templates/games/skel.html`.
+
+## Step 3
+
+Let's create a brand new game, disconnected from our "skel" fake game.
+For the purposes of this guide `xyz` will be the name of our new game.
+To create a new game, run the command `python manage.py newgame xyz` a new game called `xyz` will now be created; change two things to show your game in action:
+
+1. Add `xyz` to the `INSTALLED_APPS` list in `lamegames/settings.py`.
+2. Add `xyz` to the `GAMES` list in `lamegames/settings.py`.
+
+For 2, check the syntax of how other apps/games are added for an idea of how to do so.
+
+## Step 4
+
+Have fun! Look at django guides as well as examples we have created:
+
+* `rps/` is for Rock-Paper-Scissors
+* `minesweeper/` is for Minesweeper
+* `chat/` is for a simple, open-air chat room defined by a room id.
+
+Check how these examples work for more information, and look into how Django, Django channels and Django models work to create more advanced games.
+Some games (like rock-paper-scissors) will not need such advanced features as models, but they do require knowledge of channels.
+Others (like Minesweeper) require little knowledge of channels due to their single-player nature, but do require some more models so a game may be saved for a user when they come back.
+
+## Step 5
+
+Be creative!
+
+I want to see the following games eventually make it into lamegames:
+
+* Malcana,
+* (simple) Chess,
+* Card games: blackjack, poker and "Uno"-like games.
+* Chinese Chess (where the knight moves 2+2 instead of 2+1).
+* etc.
+
+Make it happen, and be the next contributer!

skel/consumers.py

@@ -0,0 +1,19 @@
+from channels.generic.websocket import WebsocketConsumer
+from common.models import LameUser
+
+class SkelConsumer(WebsocketConsumer):
+    # the first time any user attempts connection to this websocket
+    def connect(self):
+        # accept and activate connection
+        self.accept()
+        # get user from information passed to us via middleware (aka scope)
+        self.user = LameUser.objects.get(username=self.scope['user'].username)
+
+    # sometimes we need to send additional information when a client disconnects, but in the trivial case we can leave it blank like so
+    def disconnect(self, close_code):
+        pass
+
+    # When ANY message is received
+    def receive(self, text_data):
+        # Send message to client
+        self.send("Hello, " + self.user.username + "; this is from the websocket!")

skel/static/games/skel.js

@@ -0,0 +1,18 @@
+const WSProtocol = window.location.protocol === "https:" ? "wss" : "ws";
+const WSocket = new WebSocket(
+    WSProtocol
+    + '://'
+    + window.location.host
+    /* Make sure that this matches a pattern specfiifed in the websocket_urlspatterns list in skel/urls.py */
+    + '/skel/'
+);
+
+/* send some data to the server */
+const test = () => {
+    WSocket.send("Hello world!");
+}
+
+/* Print all messages from the server to the status box */
+WSocket.onmessage = (e) => {
+  write_message(e.data);
+}

skel/templates/games/skel.html

@@ -0,0 +1,21 @@
+{% extends "common/master.html" %}
+{% load static %}
+
+{% block body %}
+<!-- put some sort of HTML board here; Example: -->
+<div id="board">
+  <button id="test" onclick="test();">Test Button</button>
+</div>
+<!--
+{# put some mobile-friendly buttons here, if necessary; example:
+<div>
+  <button onclick="reset_board();">Reset Board</button>
+</div>
+Make sure that any onclick attribute actually calls a function defined in your "skel.js" file.
+-->
+
+<!-- include a status box and history -->
+{% include "games/gamelog.html" %}
+<!-- include some static files (like Javascript) here; example: -->
+<script src="{% static "games/skel.js"%}"></script>
+{% endblock %}

skel/urls.py

@@ -0,0 +1,15 @@
+from django.urls import path, include
+
+from . import views
+from . import consumers
+
+urlpatterns = [
+    # /skel/ sends to the index page (see views.py to see what index does...
+    # make sure name="skel" matches the name in lamegames/settings.py
+    path("", views.index, name="skel"),
+]
+
+websocket_urlpatterns = [
+    # any websocket connection attempting connection at /skel/ will be dealt with by the SkelConsumer object; see more info in consumers.py
+    path("skel/", consumers.SkelConsumer.as_asgi()),
+]

skel/views.py

@@ -1,3 +1,6 @@
 from django.shortcuts import render
 
 # Create your views here.
+def index(request):
+  return render(request, "games/skel.html")
+