add: matchmaking

README.md

@@ -22,8 +22,8 @@ pip install -r requirements.txt
 ```
 - Setup database
 ```
-python manage.py runserver makemigrations profiles
+python manage.py runserver makemigrations profiles games
-python manage.py migrate profiles
+python manage.py migrate profiles games
 ```
 - Start the developpement server
 ```

accounts/views/delete.py

@@ -1,6 +1,7 @@
 from rest_framework.views import APIView
 from rest_framework import permissions, status
 from rest_framework.response import Response
+from django.contrib.auth import logout
 from django.http import HttpRequest
 from rest_framework.authentication import SessionAuthentication
 
@@ -16,4 +17,5 @@ class DeleteView(APIView):
 		if (request.user.check_password(password) == False):
 			return Response({"password": ["Password wrong."]})
 		request.user.delete()
+		logout(request)
 		return Response("user deleted", status=status.HTTP_200_OK)

frontend/static/css/me.css

@@ -0,0 +1,19 @@
+#app .account
+{
+	background-color: red;
+}
+
+#app .account, #app .profile
+{
+	width: 60%;
+	display: flex;
+	margin-left: auto;
+	margin-right: auto;
+	flex-direction: column;
+	flex-wrap: wrap;
+}
+
+#app .profile
+{
+	background-color: green;
+}

frontend/static/js/api/client.js

@@ -1,4 +1,5 @@
 import { Account } from "./account.js";
+import { MatchMaking } from "./matchmaking.js";
 import { Profile } from "./profile.js";
 import { Profiles } from "./profiles.js";
 
@@ -19,6 +20,7 @@ class Client
 		this._url = url;
 		this.account = new Account(this);
 		this.profiles = new Profiles(this);
+		this.matchmaking = new MatchMaking(this);
 		this._logged = undefined;
 	}
 

frontend/static/js/api/matchmaking.js

@@ -0,0 +1,42 @@
+import { client, navigateTo } from "../index.js"
+
+class MatchMaking
+{
+	/**
+	 * @param  {client} client
+	 */
+	constructor(client)
+	{
+		/**
+		 * @type {client}
+		 */
+		this.client = client
+	}
+		
+	async start(func)
+	{
+		if (!await this.client.isAuthentificate())
+			return null;
+		
+		console.log(func)
+		this.callback = func
+		console.log(this.callback)
+
+		let url = `wss://${window.location.host}/ws/matchmaking/`;
+		
+		this._chatSocket = new WebSocket(url);
+		
+		this._chatSocket.onmessage = function (event) {
+			const data = JSON.parse(event.data);
+			console.log(func, data)
+			func(data.game_id)
+		};
+	}
+
+	async stop()
+	{
+		this._chatSocket.close()
+	}
+}
+
+export {MatchMaking}

frontend/static/js/api/profile.js

@@ -8,19 +8,19 @@ class Profile
 		this.user_id = user_id
 	}
 
-	async init(id)
+	async init(user_id)
 	{
-		let response = await this.client._get(`/api/profiles/${id}`);
+		let response = await this.client._get(`/api/profiles/${user_id}`);
 		let response_data = await response.json();
 
-		this.id = id;
+		this.user_id = user_id;
 		this.username = response_data.username;
 		this.avatar_url = response_data.avatar_url;
 	}
 
 	async change_avatar(form_data)
 	{
-		let response = await this.client._patch_file(`/api/profiles/${this.id}`, form_data);
+		let response = await this.client._patch_file(`/api/profiles/${this.user_id}`, form_data);
 		let response_data = await response.json()
 
 		return response_data;

frontend/static/js/index.js

@@ -11,6 +11,7 @@ import AbstractRedirectView from "./views/AbstractRedirectView.js";
 import MeView from "./views/MeView.js";
 import ProfilePageView from "./views/profiles/ProfilePageView.js";
 import ProfilesView from "./views/profiles/ProfilesView.js";
+import MatchMakingView from "./views/MatchMakingView.js";
 
 let client = new Client(location.protocol + "//" + location.host)
 
@@ -32,7 +33,7 @@ const navigateTo = async (uri) => {
         history.pushState(null, null, uri);
 };
 
-const router = async (uri = "") => {
+const router = async (uri) => {
     const routes = [
         { path: "/", view: Dashboard },
         { path: "/profiles", view: ProfilesView},
@@ -44,6 +45,7 @@ const router = async (uri = "") => {
         { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
+        { path: "/matchmaking", view: MatchMakingView },
     ];
 
     // Test each route for potential match
@@ -84,7 +86,7 @@ const router = async (uri = "") => {
     return 0;
 };
 
-window.addEventListener("popstate", router);
+window.addEventListener("popstate", function() {router(location.pathname)});
 
 document.addEventListener("DOMContentLoaded", () => {
     document.body.addEventListener("click", e => {

frontend/static/js/views/HomeView.js

@@ -9,6 +9,7 @@ export default class extends AbstractAuthentificateView {
     async getHtml() {
         return `
 			<h1>HOME</h1>
+            <a href="/matchmaking" class="nav__link" data-link>Play a game</a>
             <a href="/me" class="nav__link" data-link>Me</a>
             <a href="/logout" class="nav__link" data-link>Logout</a>
         `;

frontend/static/js/views/MatchMakingView.js

@@ -0,0 +1,30 @@
+import { client, navigateTo } from "../index.js";
+import AbstractView from "./AbstractView.js";
+
+function game_found(game_id)
+{
+    navigateTo(`/games/${game_id}`)
+}
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Dashboard");
+    }
+
+    async postInit()
+    {
+        await client.matchmaking.start(game_found)
+        console.log("start matchmaking")
+    }
+
+    async getHtml() {
+        return `
+			<h1>finding<h1>
+        `;
+    }
+
+    async leavePage()
+    {
+		await client.matchmaking.stop();
+    }
+}

frontend/static/js/views/MeView.js

@@ -12,8 +12,8 @@ export default class extends AbstractAuthentificateView
     {
         if (this.fill() === null)
             return;
-        document.getElementById("save-button").onclick = this.save;
+        document.getElementById("save-account-button").onclick = this.acccount_save;
-        document.getElementById("delete-button").onclick = this.delete_accounts;
+        document.getElementById("delete-account-button").onclick = this.account_delete_accounts;
     }
 
     async fill()
@@ -104,22 +104,27 @@ export default class extends AbstractAuthentificateView
     async getHtml()
     {
         return `
+            <link rel="stylesheet" href="static/css/me.css">
 			<h1>ME</h1>
-            <div class="accounts">
+            <div class="account">
+                <h3>Account</h3>
                 <input type="text" placeholder="username" id="username">
                 <span id="error_username"></span>
                 <input type=password placeholder="new password" id="new_password">
                 <span id="error_new_password"></span>
                 <input type=password placeholder="current password" id="current_password">
                 <span id="error_current_password"></span>
+                <input type="button" value="Save Credentials" id="save-account-button">
+                <span id="error_save"></span>
+                <input type="button" value="Delete Account" id="delete-account-button">
+                <span id="error_delete"></span>
             </div>
             <div class="profile">
-                <input type="file" placeholder="username" id="avatar" accept="image/png, image/jpeg">
+                <h3>Profile</h3>
-            </div>
+                <input type="file" id="avatar" accept="image/png, image/jpeg">
-            <input type="button" value="Save" id="save-button">
+                <input type="button" value="Save profile" id="save-profile-button">
                 <span id="error_save"></span>
-            <input type="button" value="Delete" id="delete-button">
+            </div>
-            <span id="error_delete"></span>
             <a href="/logout" class="nav__link" data-link>Logout</a>
         `;
     }

games/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

games/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class GamesConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'games'

games/models.py

@@ -0,0 +1,14 @@
+from django.db import models
+
+# Create your models here.
+class GameModel(models.Model):
+	
+	def create(self, users_id: [int]):
+		self.save()
+		for user_id in users_id:
+			GameMembersModel(game_id=self.pk, member_id=user_id)
+		return self.pk
+
+class GameMembersModel(models.Model):
+	game_id = models.IntegerField()
+	member_id = models.IntegerField()

games/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

games/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

matchmaking/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

matchmaking/apps.py

@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class MatchmakingConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'matchmaking'

matchmaking/consumers.py

@@ -0,0 +1,48 @@
+from channels.generic.websocket import WebsocketConsumer
+
+from django.contrib.auth.models import User
+
+from games.models import GameModel
+
+import json
+
+queue_id: [int] = []
+queue_ws: [WebsocketConsumer] = []
+
+class MatchMaking(WebsocketConsumer):
+
+	def __init__(self, *args, **kwargs):
+		super().__init__(*args, **kwargs)
+		self.channel_name = "matchmaking"
+		self.group_name = "matchmaking"
+
+	def connect(self):
+
+		user: User = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		self.channel_layer.group_add(self.group_name, self.channel_name)
+
+		self.accept()
+
+		global queue_id, queue_ws
+		queue_id.append(user.pk)
+		queue_ws.append(self)
+
+		if len(set(queue_id)) == 2:
+			game_id: int = GameModel().create(set(queue_id))
+			event = {"game_id": game_id}
+			for ws in queue_ws:
+				ws.send(text_data=json.dumps({'game_id': game_id}))
+			queue_id.clear()
+			queue_ws.clear()
+
+		
+	def disconnect(self, close_code):
+		user: User = self.scope["user"]
+		global queue_id, queue_ws
+		if (user.pk in queue_id):
+			queue_ws.pop(queue_id.index(user.pk))
+			queue_id.remove(user.pk)
+		self.channel_layer.group_discard(self.group_name, self.channel_name)

matchmaking/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

matchmaking/routing.py

@@ -0,0 +1,6 @@
+from django.urls import re_path
+from . import consumers
+
+websocket_urlpatterns = [
+	re_path(r'ws/matchmaking/', consumers.MatchMaking.as_asgi())
+]

matchmaking/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

matchmaking/views.py

@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.

profiles/models.py

@@ -11,7 +11,7 @@ def upload_to(instance, filename: str):
 # Create your models here.
 class ProfileModel(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE)
-    avatar_url = models.ImageField(upload_to=upload_to, default="../static/avatars/default.avif") #blank=True, null=True)
+    avatar_url = models.ImageField(upload_to=upload_to, default="./profiles/static/avatars/default.avif") #blank=True, null=True)
 
 @receiver(post_save, sender=User)
 def on_user_created(sender, instance, created, **kwargs):

profiles/viewsets.py

@@ -11,19 +11,19 @@ from .serializers import ProfileSerializer
 from .models import ProfileModel
 
 class ProfileViewSet(viewsets.ModelViewSet):
-    queryset = ProfileModel.objects.all()
+    queryset = ProfileModel.objects.all
     serializer_class = ProfileSerializer
     parser_classes = (MultiPartParser, FormParser)
     permission_classes = (permissions.IsAuthenticatedOrReadOnly,)
 
     def retrieve(self, request: HttpRequest, pk=None):
-        instance = self.get_object()
+        instance = ProfileModel.objects.get(pk=pk)
         instance.avatar_url.name = instance.avatar_url.name[instance.avatar_url.name.find("static") - 1:]
         return Response(self.serializer_class(instance).data,
                         status=status.HTTP_200_OK)
 
     def list(self, request: HttpRequest):
-        serializer = ProfileSerializer(self.queryset, many=True)
+        serializer = ProfileSerializer(self.queryset(), many=True)
         for profile in serializer.data:
             profile["avatar_url"] = profile["avatar_url"][profile["avatar_url"].find("static") - 1:]
         return Response(serializer.data)
@@ -38,7 +38,7 @@ class ProfileViewSet(viewsets.ModelViewSet):
         profile: ProfileModel = ProfileModel.objects.get(pk=self.request.user.pk)
         avatar = self.request.data.get("file", None)
         if (avatar is not None):
-            if (profile.avatar_url.name != "default.avif"):
+            if (profile.avatar_url.name != "./profiles/static/avatars/default.avif"):
                 profile.avatar_url.storage.delete(profile.avatar_url.name)
             profile.avatar_url = avatar
         profile.save()

trancendence/asgi.py

@@ -10,7 +10,9 @@ https://docs.djangoproject.com/en/4.2/howto/deployment/asgi/
 import os
 from channels.routing import ProtocolTypeRouter, URLRouter
 from channels.auth import AuthMiddlewareStack
+
 import chat.routing
+import matchmaking.routing
 
 from django.core.asgi import get_asgi_application
 
@@ -20,7 +22,8 @@ application = ProtocolTypeRouter({
 	'http':get_asgi_application(),
 	'websocket':AuthMiddlewareStack(
 		URLRouter(
-			chat.routing.websocket_urlpatterns
+			chat.routing.websocket_urlpatterns +
+			matchmaking.routing.websocket_urlpatterns
 		)
 	)
 })

trancendence/settings.py

@@ -43,6 +43,8 @@ INSTALLED_APPS = [
 	'channels',
 	'daphne',
 
+    'matchmaking.apps.MatchmakingConfig',
+    'games.apps.GamesConfig',
     'accounts.apps.AccountsConfig',
     'profiles.apps.ProfilesConfig',
     'frontend.apps.FrontendConfig',