better css, add debug

.gitignore

@@ -3,4 +3,4 @@
 db.sqlite3
 **/migrations/**
 /profiles/static/avatars/*
-!/profiles/static/avatars/default
+!/profiles/static/avatars/default.env

README.md

@@ -22,10 +22,17 @@ pip install -r requirements.txt
 ```
 - Setup database
 ```
-python manage.py runserver makemigrations profiles games
+python manage.py makemigrations games
-python manage.py migrate profiles games
+python manage.py makemigrations profiles
+python manage.py runserver makemigrations chat
+python manage.py migrate
 ```
 - Start the developpement server
 ```
 python manage.py runserver 0.0.0.0:8000
 ```
+
+coc nvim
+```
+pip install django-stubs
+```

accounts/views/logged.py

@@ -15,4 +15,4 @@ class LoggedView(APIView):
 	def get(self, request: HttpRequest):
 		if (request.user.is_authenticated):
 			return Response({'id': request.user.pk}, status=status.HTTP_200_OK)
-		return Response('false', status=status.HTTP_200_OK)
+		return Response('false', status=status.HTTP_200_OK)

accounts/views/register.py

@@ -15,4 +15,4 @@ class RegisterView(APIView):
 			if user:
 				login(request, user)
 				return Response("user created", status=status.HTTP_201_CREATED)
-		return Response(status=status.HTTP_400_BAD_REQUEST)
+		return Response(status=status.HTTP_400_BAD_REQUEST)

chat/admin.py

@@ -1,3 +1,6 @@
 from django.contrib import admin
+from .models import ChannelModel, MemberModel, MessageModel
 
-# Register your models here.
+admin.site.register(ChannelModel)
+admin.site.register(MemberModel)
+admin.site.register(MessageModel)

chat/consumers.py

@@ -1,10 +1,24 @@
 import json
 from channels.generic.websocket import WebsocketConsumer
 from asgiref.sync import async_to_sync
+from .models import MemberModel, MessageModel
+import time
 
 class ChatConsumer(WebsocketConsumer):
 	def connect(self):
-		self.room_group_name = 'test'
+		channel_id : str = self.scope['path'].split('/')[3]
+
+		self.room_group_name = 'chat' + channel_id
+
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		if MemberModel.objects.filter(member_id=user.pk, channel_id=int(channel_id)).count() != 1:
+			return
+
+		if (self.channel_layer == None):
+			return
 
 		async_to_sync(self.channel_layer.group_add)(
 			self.room_group_name,
@@ -14,23 +28,58 @@ class ChatConsumer(WebsocketConsumer):
 		self.accept()
 
 
-	def receive(self, text_data):
+	def receive(self, text_data=None, bytes_data=None):
+		if text_data == None:
+			return
+
 		text_data_json = json.loads(text_data)
 		message = text_data_json['message']
 
+		channel_id : int = int(self.scope['path'].split('/')[3])
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		if MemberModel.objects.filter(member_id=user.pk, channel_id=channel_id).count() != 1:
+			return
+
+		if (self.channel_layer == None):
+			return
+
+		print(message)
+
+		message_time : int = int(time.time() * 1000)
 		async_to_sync(self.channel_layer.group_send)(
 			self.room_group_name,
 			{
 				'type':'chat_message',
-				'message':message
+				'author_id':user.pk,
+				'content':message,
+				'time':message_time,
 			}
 		)
+		
+		new_message = MessageModel()
+		new_message.channel_id = channel_id
+		new_message.author_id = user.pk
+		new_message.content = message
+		new_message.time = message_time
+		new_message.save()
+
 
 	def chat_message(self, event):
-		message = event['message']
+
+		channel_id : int = int(self.scope['path'].split('/')[3])
+		user = self.scope["user"]
+		if (user.is_anonymous or not user.is_authenticated):
+			return
+
+		if MemberModel.objects.filter(member_id=user.pk, channel_id=channel_id).count() != 1:
+			return
 
 		self.send(text_data=json.dumps({
 			'type':'chat',
-			'username':self.scope["user"].username,
+			'author_id':event['author_id'],
-			'message':message
+			'content':event['content'],
+			'time': event['time'],
 		}))

chat/models.py

@@ -1,3 +1,24 @@
 from django.db import models
+from django.db.models import IntegerField
+from django.contrib.auth.models import User
+from django.contrib import admin
 
 # Create your models here.
+class ChannelModel(models.Model):
+	pass
+
+class MemberModel(models.Model):
+	member_id = IntegerField(primary_key=False)
+	channel_id = IntegerField(primary_key=False)
+
+	def __str__(self):
+		return "member_id: " + str(self.member_id) + ", channel_id: " + str(self.channel_id)
+
+class MessageModel(models.Model):
+	channel_id = IntegerField(primary_key=False)
+	author_id = IntegerField(primary_key=False)
+	content = models.CharField(max_length=255)
+	time = IntegerField(primary_key=False)
+
+	def __str__(self):
+		return "author_id: " + str(self.author_id) + ", channel_id: " + str(self.channel_id) + ", content: " + self.content

chat/routing.py

@@ -2,5 +2,5 @@ from django.urls import re_path
 from . import consumers
 
 websocket_urlpatterns = [
-	re_path(r'ws/socket-server/', consumers.ChatConsumer.as_asgi())
+	re_path(r'ws/chat/(?P<chat_id>\d+)/$', consumers.ChatConsumer.as_asgi())
 ]

chat/serializers.py

@@ -0,0 +1,8 @@
+from rest_framework import serializers
+from .models import ChannelModel
+
+class ChannelSerializer(serializers.ModelSerializer):
+
+    class Meta:
+        model = ChannelModel
+        fields = []

chat/urls.py

@@ -0,0 +1,10 @@
+from django.urls import path
+from django.conf import settings
+from django.conf.urls.static import static
+
+from . import views
+
+urlpatterns = [
+    path("<int:pk>", views.ChatView.as_view(), name="chat_page"),
+    path("", views.ChatsView.as_view(), name="chats_page"),
+]

chat/views.py

@@ -1,3 +1,100 @@
-from django.shortcuts import render
+from rest_framework.views import APIView
+from rest_framework.response import Response
+from rest_framework import authentication, permissions, status
+from rest_framework.authentication import SessionAuthentication
+from .models import ChannelModel, MemberModel, MessageModel
+from django.core import serializers
 
-# Create your views here.
+class ChatView(APIView):
+	permission_classes = (permissions.IsAuthenticated,)
+	authentication_classes = (SessionAuthentication,)
+	
+	def get(self, request, pk):
+		if (ChannelModel.objects.filter(pk=pk)):
+			return Response({'channel_id': pk})
+		else:
+			return Response("Channel doesn't exist")
+
+	def delete(self, request, pk):
+
+		ChannelModel.objects.filter(pk=pk).delete()
+		MessageModel.objects.filter(pk=pk).delete()
+		MemberModel.objects.filter(pk=pk).delete()
+
+		return Response({'channel_id': pk})
+
+	"""
+	def post(self, request, pk):
+		channel = ChannelModel.objects.filter(pk=pk)
+		message = request.data.get("message", [])
+		print(message)
+		if (message == []):
+			return Response('No message', status=status.HTTP_400_BAD_REQUEST)
+
+		new_message = MessageModel()
+		new_message.channel_id = message["channel_id"]
+		new_message.author_id = message["author_id"]
+		new_message.content = message["content"]
+		new_message.time = message["time"]
+		new_message.save()
+
+		messages = MessageModel.objects.filter(channel_id=pk)
+		messages = serializers.serialize("json", messages) 
+		return Response({'messages':messages}, status=status.HTTP_200_OK)
+	"""
+
+
+class ChatsView(APIView):
+	def post(self, request):
+
+		data: dict = request.data
+		users_id = request.data.get("users_id", [])
+		if len(users_id) < 2:
+			return Response('Not enought members to create the channel', status=status.HTTP_400_BAD_REQUEST)
+		if users_id[0] == users_id[1]:
+			return Response('Same member', status=status.HTTP_400_BAD_REQUEST)
+
+		for user_id1 in users_id:
+			for member1 in MemberModel.objects.filter(member_id=user_id1):
+				for user_id2 in users_id:
+					if user_id1 == user_id2:
+						continue
+					for member2 in MemberModel.objects.filter(member_id=user_id2):
+						if (member1.channel_id == member2.channel_id):
+							messages = MessageModel.objects.filter(channel_id=member1.channel_id).order_by("time")
+							messages = serializers.serialize("json", messages) 
+							return Response({'channel_id': member1.channel_id, 'messages':messages}, status=status.HTTP_200_OK)
+							
+		new_channel = ChannelModel()
+		new_channel.save()	
+
+		for user_id in users_id:
+
+			new_member = MemberModel()
+			new_member.channel_id = new_channel.pk
+			new_member.member_id = user_id
+			new_member.save()
+
+		return Response({'channel_id': new_channel.pk}, status=status.HTTP_201_CREATED)
+
+	def delete(self, request):
+
+		data: dict = request.data
+		users_id = request.data.get("users_id", [])
+
+		#print(list(MemberModel.objects.all()))
+
+		for user_id1 in users_id:
+			for member1 in MemberModel.objects.filter(member_id=user_id1):
+				for user_id2 in users_id:
+					if user_id1 == user_id2:
+						break
+					for member2 in MemberModel.objects.filter(member_id=user_id2):
+						if (member1.channel_id == member2.channel_id):
+							MessageModel.objects.filter(channel_id=member1.channel_id).delete()
+							member1.delete()
+							member2.delete()
+							ChannelModel.objects.get(pk=member1.channel_id).delete()
+							return Response("Channel removed", status=status.HTTP_200_OK)
+
+		return Response("Channel doesn't exist", status=status.HTTP_404_NOT_FOUND)

frontend/static/css/accounts/register.css

@@ -9,4 +9,4 @@
     margin-right: auto;
 	margin-top: 90px;
     border: 15px black solid;
-}
+}

frontend/static/css/index.css

@@ -1,7 +1,7 @@
 body {
-    margin: 10;
+    margin: 20px;
     font-family: 'Quicksand', sans-serif;
-    font-size: 18px;
+    font-size: 60px;
 }
 
 a {

frontend/static/css/me.css

@@ -16,4 +16,4 @@
 #app .profile
 {
 	background-color: green;
-}
+}

frontend/static/css/search.css

@@ -0,0 +1,99 @@
+#app img
+{
+	max-height: 3em;
+	max-width: 3em;
+}
+
+#app ul
+{
+	font-size: 0.75em;
+	margin: 0.25em 0 0 0;
+	padding: 0 0 0 0;
+	list-style-type: none;
+	max-height: 80vh;
+	overflow: auto;
+}
+
+#app li
+{
+	margin: 0.25em 0.25em 0 0;
+}
+
+#app #chats {
+	overflow: hidden;
+	display: flex;
+	text-align: left;
+}
+#app #users {
+	margin: 0em 1.0em 0em 0.05em;
+}
+
+#app #chat {
+	position: relative;
+	max-height: 86vh;
+	width: 100vh;
+	/*border: 2px	solid green;*/
+	overflow: hidden;
+}
+
+#app #members {
+	font-size: 1em;
+}
+
+#app #add_chat_off {
+	text-decoration: underline;
+}
+
+#app #messages {
+	max-height: 50em;
+	overflow: scroll;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	font-size: 0.6em;
+}
+
+#app #input_user{
+	color: green;
+	width: 8.5em;
+	height: 1.1em;
+	font-size: 0.75em;
+	border: none;
+	outline: none;
+	border-bottom: 0.15em solid green;
+}
+
+#app #input_chat{
+	position: sticky;
+	bottom: 0;
+	/*width: calc(100% - 8px);*/
+	width: 100%;
+	border: none;
+	outline: none;
+	border-bottom: 0.2em solid green;
+	caret-color: green;
+	color: green;
+	font-size: 0.65em;
+}
+
+#app #you {
+	text-align: left;
+	position: relative;
+	max-width: 48%;
+	left: 0.5em;
+	margin: 0.5em 0 0 0;
+	color: green;
+
+	word-wrap: break-word;
+}
+
+#app #other {
+	text-align: right;
+	position: relative;
+	max-width: 48%;
+	margin: 0.5em 0 0 auto;
+	right: 0.5em;
+	color: red;
+
+	/* permet le retour à la ligne à la place de dépasser*/
+	word-wrap: break-word;
+}

frontend/static/js/api/chat/channel.js

@@ -0,0 +1,77 @@
+import {Message} from "./message.js"
+
+class Channel {
+	constructor(client, channel_id, members_id, messages, reload) {
+		this.client = client;
+		this.channel_id = channel_id;
+		this.members_id = members_id;
+		this.messages = [];
+		if (messages != undefined)
+			this.updateMessages(messages);
+
+		this.connect(reload);
+	}
+
+	// reload = function to use when we receive a message
+	async connect(reload) {
+		let url = `ws://${window.location.host}/ws/chat/${this.channel_id}/`;
+
+		this.chatSocket = new WebSocket(url);
+		this.chatSocket.onmessage = (event) =>{
+			let data = JSON.parse(event.data)
+
+			this.messages.push(new Message(
+				this.channel_id,
+				data.author_id,
+				data.content,
+				data.time,
+			));
+
+			reload();
+		};
+	}
+
+	async disconnect() {
+		this.chatSocket.close();
+	}
+
+	updateMessages(messages) {
+		messages = JSON.parse(messages);
+		let new_messages = [];
+
+		messages.forEach((message) => {
+			message = message["fields"];
+			new_messages.push(new Message(
+				message["channel_id"],
+				message["author_id"],
+				message["content"],
+				message["time"],
+			));
+		});
+
+		//console.log(new_messages);
+		this.messages = new_messages;
+		return new_messages;
+	}
+
+	async sendMessageChannel(message) {
+
+		if (this.chatSocket == undefined)
+			return;
+
+		this.chatSocket.send(JSON.stringify({
+			'message':message
+		}));
+	}
+
+	async deleteChannel() {
+		let response = await this.client._delete("/api/chat/" + this.channel_id, {
+		});
+
+		let data = await response.json();
+		return data;
+	}
+
+}
+
+export {Channel}

frontend/static/js/api/chat/channels.js

@@ -0,0 +1,46 @@
+import {Channel} from "./channel.js"
+import {Message} from "./message.js"
+
+class Channels {
+	constructor(client) {
+		this.client = client;
+	}
+
+	async createChannel(users_id, reload) {
+		
+		let null_id = false;
+		users_id.forEach(user_id => {
+			if (user_id == null)
+				null_id = true;
+		});
+		if (null_id)
+			return console.log(users_id, "createChannel error, null id;");
+
+		let response = await this.client._post("/api/chat/", {
+			users_id:users_id
+		});
+
+		let data = await response.json();
+		let exit_code = await response.status;
+		if (exit_code >= 300)
+			return undefined;
+
+		let messages = undefined;
+		if (exit_code == 200)
+			messages = data.messages;
+		return new Channel(this.client, data.channel_id, users_id, messages, reload);
+	}
+
+	async deleteChannel(users_id) {
+		let response = await this.client._delete("/api/chat/", {
+			users_id:users_id
+		});
+
+		let data = await response.json();
+		console.log(response.status)
+		return data;
+	}
+
+}
+
+export {Channels}

frontend/static/js/api/chat/message.js

@@ -0,0 +1,10 @@
+class Message {
+	constructor(channel_id, author_id, content, time) {
+		this.channel_id = channel_id;
+		this.author_id = author_id;
+		this.content = content;
+		this.time = time;
+	}
+}
+
+export {Message}

frontend/static/js/api/client.js

@@ -2,6 +2,7 @@ import { Account } from "./account.js";
 import { MatchMaking } from "./matchmaking.js";
 import { Profile } from "./profile.js";
 import { Profiles } from "./profiles.js";
+import { Channels } from './chat/channels.js';
 
 function getCookie(name)
 {
@@ -22,6 +23,9 @@ class Client
 		this.profiles = new Profiles(this);
 		this.matchmaking = new MatchMaking(this);
 		this._logged = undefined;
+
+		this.channels = new Channels(this);
+		this.channel = undefined;
 	}
 
 	async isAuthentificate()
@@ -124,4 +128,4 @@ class Client
 	}
 }
 
-export {Client}
+export {Client}

frontend/static/js/api/matchmaking.js

@@ -18,17 +18,12 @@ class MatchMaking
 		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)
 		};
 	}

frontend/static/js/index.js

@@ -1,16 +1,18 @@
+import { Client } from "./api/client.js";
+
 import LoginView from "./views/accounts/LoginView.js";
 import Dashboard from "./views/Dashboard.js";
-import Settings from "./views/Settings.js";
+import Search from "./views/Search.js";
-import Chat from "./views/Chat.js";
 import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
+import GameView from "./views/Game.js"
+
+import PageNotFoundView from './views/PageNotFoundView.js' 
 
-import { Client } from "./api/client.js";
 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)
@@ -36,16 +38,15 @@ const navigateTo = async (uri) => {
 const router = async (uri) => {
     const routes = [
         { path: "/", view: Dashboard },
-        { path: "/profiles", view: ProfilesView},
         { path: "/profiles/:id", view: ProfilePageView },
-        { path: "/settings", view: Settings },
         { path: "/login", view: LoginView },
         { path: "/logout", view: LogoutView },
         { path: "/register", view: RegisterView },
-        { path: "/chat", view: Chat },
+        { path: "/search", view: Search },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
         { path: "/matchmaking", view: MatchMakingView },
+        { path: "/game/offline", view: GameView },
     ];
 
     // Test each route for potential match
@@ -60,7 +61,10 @@ const router = async (uri) => {
 
     if (!match) {
         match = {
-            route: routes[0],
+            route: {
+				path: uri,
+				view: PageNotFoundView
+			},
             result: [uri]
         };
     }
@@ -98,4 +102,4 @@ document.addEventListener("DOMContentLoaded", () => {
     router(location.pathname);
 });
 
-export { client, navigateTo }
+export { client, navigateTo }

frontend/static/js/views/Chat.js

@@ -1,56 +0,0 @@
-import AbstractAuthentifiedView from "./AbstractAuthentifiedView.js";
-
-export default class extends AbstractAuthentifiedView {
-    constructor(params) {
-        super(params, "Chat");
-
-		let url = `wss://${window.location.host}/ws/socket-server/`
-
-		this.chatSocket = new WebSocket(url)
-		this.chatSocket.onmessage = function(e){
-			let data = JSON.parse(e.data)
-			console.log('Data:', data)
-			if (data.type === 'chat') {
-				let messages = document.getElementById('messages')
-
-				let username = data.username === null || data.username.length <= 0 ? "NoName" : data.username;
-				messages.insertAdjacentHTML('beforeend', `
-					<div><p>${username}: ${data.message}</p></div>
-				`)
-			}
-
-		}
-    }
-
-	async postInit() {
-		let form = document.getElementById('form')
-		form.addEventListener('submit', (e)=> {
-			e.preventDefault()
-			let message = e.target.message.value
-			this.chatSocket.send(JSON.stringify({
-				'message':message
-			}))
-			form.reset()
-		})
-
-	}
-
-	async leavePage() {
-		this.chatSocket.close();
-	}
-
-    async getHtml() {
-        return `
-			<h1>Chat</h1>
-
-			<form id="form">
-				<input type="text" name="message" />
-			</form>
-
-			<div id="messages">
-
-			</div>
-
-        `;
-    }
-}

frontend/static/js/views/Game.js

@@ -0,0 +1,250 @@
+import AbstractView from './AbstractView.js'
+
+export default class extends AbstractView {
+	constructor(params) {
+		super(params, 'Game');
+		this.game = null;
+	}
+
+	async getHtml() {
+		return `
+			<h1>Game</h1>
+			<button id='startGameButton'>Start Game</button>
+			<button id='stopGameButton'>Stop Game</button>
+		`;
+	}
+
+	async postInit() {
+		document.getElementById('startGameButton').onclick = this.startGame.bind(this);
+		document.getElementById('stopGameButton').onclick = this.stopGame.bind(this);
+	}
+
+	startGame() {
+		if (this.game == null) {
+			document.getElementById('startGameButton').innerHTML = 'Reset Game';
+			this.game = new Game;
+		}
+		else {
+			document.getElementById('app').removeChild(this.game.canvas);
+			this.game.cleanup();
+			this.game = new Game;
+		}
+	}
+
+	stopGame() {
+		if (!this.game)
+			return;
+		document.getElementById('app').removeChild(this.game.canvas);
+		document.getElementById('app').removeChild(this.game.scoresDisplay);
+		this.game.cleanup();
+		this.game = null;
+		document.getElementById('startGameButton').innerHTML = 'Start Game';
+	}
+}
+
+class Game {
+	constructor() {
+		//Global variables
+		this.def = {
+			CANVASHEIGHT: 270,
+			CANVASWIDTH: 480,
+			PADDLEHEIGHT: 70,
+			PADDLEWIDTH: 10,
+			PADDLEMARGIN: 5,
+			PADDLESPEED: 3,
+			BALLRADIUS: 5,
+			BALLSPEED: 2,
+			BALLSPEEDINCR: 0.15,
+			MAXBOUNCEANGLE: 10 * (Math.PI / 12),
+			MAXSCORE: 6
+		};
+
+		this.canvas = document.createElement('canvas');
+		this.canvas.id = 'gameCanvas';
+		this.canvas.width = this.def.CANVASWIDTH;
+		this.canvas.height = this.def.CANVASHEIGHT;
+		this.canvas.style.border = '1px solid #d3d3d3';
+		this.canvas.style.backgroundColor = '#f1f1f1';
+		this.context = this.canvas.getContext('2d');
+		document.getElementById('app').appendChild(this.canvas);
+		this.scoresDisplay = document.createElement('p');
+		this.scoresDisplay.innerHTML = 'Scores: 0 - 0';
+		document.getElementById('app').appendChild(this.scoresDisplay);
+
+		this.players = [
+			{
+				paddle: new Paddle(this.context,
+							this.def.PADDLEMARGIN,
+							this.def),
+				score: 0
+			},
+			{
+				paddle: new Paddle(this.context,
+							this.def.CANVASWIDTH - this.def.PADDLEMARGIN - this.def.PADDLEWIDTH,
+							this.def),
+				score: 0
+			}
+		];
+		this.ballStartSide = 0;
+		this.ballRespawned = false;
+		this.ball = new Ball(this.context, this.def, this.ballStartSide);
+
+		this.interval = setInterval(this.updateGame.bind(this), 10);
+
+		this.keys = [];
+		this.keyUpHandler = this.keyUpHandler.bind(this);
+		this.keyDownHandler = this.keyDownHandler.bind(this);
+		document.addEventListener('keydown', this.keyDownHandler);
+		document.addEventListener('keyup', this.keyUpHandler);
+	}
+
+	cleanup() {
+		clearInterval(this.interval);
+		document.removeEventListener('keydown', this.keyDownHandler);
+		document.removeEventListener('keyup', this.keyUpHandler);
+		this.canvas.style.display = 'none';
+	}
+
+	clear() {
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+
+	updateGame() {
+		//Paddle movement
+		if (this.keys.includes('s') &&
+			this.players[0].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
+				this.players[0].paddle.y += this.def.PADDLESPEED;
+		if (this.keys.includes('w') &&
+			this.players[0].paddle.y > 0 + this.def.PADDLEMARGIN)
+				this.players[0].paddle.y -= this.def.PADDLESPEED;
+
+		if (this.keys.includes('ArrowDown') &&
+			this.players[1].paddle.y + this.def.PADDLEHEIGHT < this.def.CANVASHEIGHT - this.def.PADDLEMARGIN)
+				this.players[1].paddle.y += this.def.PADDLESPEED;
+		if (this.keys.includes('ArrowUp') &&
+			this.players[1].paddle.y > 0 + this.def.PADDLEMARGIN)
+				this.players[1].paddle.y -= this.def.PADDLESPEED;
+
+		//GOOAAAAL
+		if (this.ball.x <= 0)
+			this.updateScore(this.players[0].score, ++this.players[1].score);
+		else if (this.ball.x >= this.def.CANVASWIDTH)
+			this.updateScore(++this.players[0].score, this.players[1].score);
+
+		//Ball collisions
+		if (this.detectCollision(this.players[0].paddle, this.ball))
+			this.calculateBallVelocity(this.players[0].paddle.getCenter().y, this.ball);
+		else if (this.detectCollision(this.players[1].paddle, this.ball))
+			this.calculateBallVelocity(this.players[1].paddle.getCenter().y, this.ball, -1);
+
+		if (this.ball.y - this.ball.radius <= 0)
+			this.ball.vy *= -1;
+		else if (this.ball.y + this.ball.radius >= this.canvas.height)
+			this.ball.vy *= -1;
+
+		if (!this.ballRespawned) {
+			this.ball.x += this.ball.vx;
+			this.ball.y += this.ball.vy;
+		}
+
+		this.clear();
+		this.players[0].paddle.update();
+		this.players[1].paddle.update();
+		this.ball.update();
+	}
+
+	updateScore(p1Score, p2Score) {
+		if (p1Score > this.def.MAXSCORE) {
+			this.scoresDisplay.innerHTML = 'Player 1 wins!! GGS';
+			this.cleanup();
+		}
+		else if (p2Score > this.def.MAXSCORE) {
+			this.scoresDisplay.innerHTML = 'Player 2 wins!! GGS';
+			this.cleanup();
+		} else {
+			this.scoresDisplay.innerHTML = `Scores: ${p1Score} - ${p2Score}`;
+			this.ballStartSide = 1 - this.ballStartSide;
+			this.ball = new Ball(this.context, this.def, this.ballStartSide);
+			this.ballRespawned = true;
+			new Promise(r => setTimeout(r, 300))
+				.then(_ => this.ballRespawned = false);
+		}
+	}
+
+	detectCollision(paddle, ball) {
+		let paddleCenter = paddle.getCenter();
+		let dx = Math.abs(ball.x - paddleCenter.x);
+		let dy = Math.abs(ball.y - paddleCenter.y);
+		if (dx <= ball.radius + paddle.width / 2 &&
+			dy <= ball.radius + paddle.height / 2)
+				return true;
+		return false;
+	}
+
+	calculateBallVelocity(paddleCenterY, ball, side = 1) {
+		let relativeIntersectY = paddleCenterY - ball.y;
+		let normRelIntersectY = relativeIntersectY / this.def.PADDLEHEIGHT / 2;
+		let bounceAngle = normRelIntersectY * this.def.MAXBOUNCEANGLE;
+
+		ball.speed += this.def.BALLSPEEDINCR;
+		ball.vx = ball.speed * side * Math.cos(bounceAngle);
+		ball.vy = ball.speed * -Math.sin(bounceAngle);
+	}
+
+	keyUpHandler(ev) {
+		const idx = this.keys.indexOf(ev.key);
+		if (idx != -1)
+			this.keys.splice(idx, 1);
+	}
+
+	keyDownHandler(ev) {
+		if (!this.keys.includes(ev.key))
+			this.keys.push(ev.key);
+	}
+}
+
+class Paddle {
+	constructor(context, paddleSide, def) {
+		this.width = def.PADDLEWIDTH;
+		this.height = def.PADDLEHEIGHT;
+		this.x = paddleSide;
+		this.y = def.CANVASHEIGHT / 2 - this.height / 2;
+		this.ctx = context;
+		this.update();
+	}
+
+	update() {
+		this.ctx.fillStyle = 'black';
+		this.ctx.fillRect(this.x, this.y, this.width, this.height);
+	}
+
+	getCenter() {
+		return {
+			x: this.x + this.width / 2,
+			y: this.y + this.height / 2
+		};
+	}
+}
+
+class Ball {
+	constructor(context, def, startSide) {
+		this.radius = def.BALLRADIUS;
+		this.speed = def.BALLSPEED;
+		this.x = def.CANVASWIDTH / 2;
+		this.y = def.CANVASHEIGHT / 2;
+		this.vy = 0;
+		if (startSide === 0)
+			this.vx = -this.speed;
+		else
+			this.vx = this.speed;
+		this.ctx = context;
+		this.update();
+	}
+
+	update() {
+		this.ctx.fillStyle = 'black';
+		this.ctx.beginPath();
+		this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
+		this.ctx.fill();
+	}
+}

frontend/static/js/views/HomeView.js

@@ -10,6 +10,7 @@ export default class extends AbstractAuthentificateView {
         return `
 			<h1>HOME</h1>
             <a href="/matchmaking" class="nav__link" data-link>Play a game</a>
+            <a href="/game/offline" class="nav__link" data-link>Play offline</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

@@ -14,7 +14,6 @@ export default class extends AbstractView {
     async postInit()
     {
         await client.matchmaking.start(game_found)
-        console.log("start matchmaking")
     }
 
     async getHtml() {

frontend/static/js/views/PageNotFoundView.js

@@ -0,0 +1,14 @@
+import AbstractView from "./AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Dashboard");
+    }
+
+	async getHtml() {
+		return `
+			<h1>404 Bozo</h1>
+			<p>Git gud</p>
+		`;
+	}
+}

frontend/static/js/views/Search.js

@@ -0,0 +1,220 @@
+import AbstractView from "./AbstractView.js";
+import {client} from "../index.js";
+import {Message} from "../api/chat/message.js"
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params, "Search");
+    }
+
+	async postInit() {
+
+		let search = document.getElementById("input_user");
+		search.oninput = this.users;
+
+		let chat_input = document.getElementById("input_chat");
+		//chat_input.addEventListener("keydown", this.chat_manager)
+
+		this.last_add_chat = undefined;
+		this.users();
+		this.chat();
+
+	}
+
+	async users() {
+
+		let search = document.getElementById("input_user").value.toLowerCase();
+		
+		let logged = await client.isAuthentificate();
+
+		let users = await client.profiles.all();
+		let list_users = document.getElementById('list_users');
+		list_users.innerHTML = "";
+
+		users.filter(user => user.username.toLowerCase().startsWith(search) == true).forEach((user) => {
+
+			if (user.user_id == null) {
+				console.log("list User one with id null;");
+				return;
+			}
+
+			var new_user = document.createElement("li");
+
+			// username
+			let username = document.createElement("a");
+			username.href = `/profiles/${user.user_id}`;
+			username.appendChild(document.createTextNode(user.username));
+			new_user.appendChild(username);
+
+			// space
+			new_user.appendChild(document.createTextNode(" "));
+
+			// chat
+			if (logged && client.me.user_id != user.user_id) {
+				let add_chat = document.createElement("a");
+				add_chat.id = "add_chat_off";
+				add_chat.onclick = async () => {
+					if (client.channel != undefined) {
+						client.channel.members_id.forEach((member_id) => {
+							if (member_id == user.user_id)
+								client.channel = undefined;
+						});
+
+						if (client.channel == undefined) {
+							add_chat.id = "add_chat_off";
+							this.last_add_chat = undefined;
+							return this.hideChat();
+						}
+
+						client.channel.disconnect();
+					}
+
+					client.channel = await client.channels.createChannel([client.me.user_id , user.user_id], this.chat);
+					this.chat();
+					if (this.last_add_chat != undefined)
+						this.last_add_chat.id = "add_chat_off";
+					this.last_add_chat = add_chat;
+					add_chat.id = "add_chat_on";
+				};
+				add_chat.appendChild(document.createTextNode("Chat"));
+				new_user.appendChild(add_chat);
+				
+				new_user.appendChild(document.createTextNode(" "));
+
+				let block = document.createElement("a");
+				block.addEventListener("click", async () => {
+					if (client.me.user_id != user.user_id) {
+					}
+				});
+				block.appendChild(document.createTextNode("Block"));
+				new_user.appendChild(block);
+			}
+			
+			// break line
+			new_user.appendChild(document.createElement("br"));
+
+			// avatar
+			var img = document.createElement("img");
+			img.src = user.avatar_url;
+			new_user.appendChild(img);
+
+
+			list_users.appendChild(new_user);
+		});
+		//console.log(list_users);
+
+	}
+
+	async chat() {
+
+		let logged = await client.isAuthentificate();
+		let reload = document.getElementById("messages");
+		if (reload != null)
+			reload.remove();
+
+		reload = document.getElementById("members");
+		if (reload != null)
+			reload.remove();
+
+		if (client.channel == undefined || !logged)
+			return ;
+
+		let chats = document.getElementById("chats");
+
+		if (document.getElementById("chat") == null) {
+			let chat = document.createElement("div");
+			chat.id = "chat";
+			chats.appendChild(chat);
+		}
+
+		// div des messages
+		let messages = document.createElement("div");
+		messages.id = "messages";
+		if (document.getElementById("input_chat") == null)
+			chat.appendChild(messages);
+		else
+			document.getElementById("input_chat").before(messages);
+
+		// Input pour rentrer un message
+		if (document.getElementById("input_chat") == null) {
+			let chat_input = document.createElement("input");
+			chat_input.id="input_chat";
+			chat_input.type="text";
+			chat_input.name="message";
+			chat_input.placeholder="message bozo";
+			chat_input.maxLength=255;
+			chat.appendChild(chat_input);
+			
+			chat_input.addEventListener("keydown", async () => {
+				if (event.keyCode == 13 && client.channel != undefined) {
+					//let chat_input = document.getElementById("input_chat");
+					let chat_text = chat_input.value;
+
+					await client.channel.sendMessageChannel(chat_text)
+
+					// Reset
+					chat_input.value = "";
+				}
+			});
+		}
+
+		// nom des membres du chat
+		let users = await client.profiles.all();
+		let members = document.createElement("h2");
+		members.id = "members";
+		let usernames = "";
+		client.channel.members_id.forEach((member_id) => {
+			if (member_id != client.me.user_id) {
+				if (usernames.length > 0)
+					usernames += ", ";
+				usernames += (users.filter(user => user.user_id == member_id)[0].username);
+			}
+		});
+		members.appendChild(document.createTextNode(usernames));
+		messages.before(members);
+
+		// les messages
+		client.channel.messages.forEach((message) => {
+			let text = document.createElement("p");
+			text.appendChild(document.createTextNode(message.content));
+			if (message.author_id == client.me.user_id)
+				text.id = "you";
+			else
+				text.id = "other";
+
+			messages.appendChild(text);
+		});
+
+		// Scroll to the bottom of messages
+		messages.scrollTop = messages.scrollHeight;
+
+	}
+
+	async hideChat() {
+
+		let close = document.getElementById("chat");
+		if (close != null)
+			close.remove();
+
+	}
+
+	async leavePage() {
+		if (client.channel != undefined)
+			client.channel.disconnect();
+		client.channel = undefined
+	}
+
+    async getHtml() {
+        return `
+			<link rel="stylesheet" href="/static/css/search.css">
+
+			<div id="chats">
+				<div id="users">
+					<input id="input_user" type="text" name="message" placeholder="userbozo"/>
+					<ul id="list_users">
+					</ul>
+				</div>
+			</div>
+        `;
+    }
+}

frontend/static/js/views/Settings.js

@@ -1,14 +0,0 @@
-import AbstractView from "./AbstractView.js";
-
-export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Settings");
-    }
-
-    async getHtml() {
-        return `
-            <h1>Settings</h1>
-            <p>Manage your privacy and configuration.</p>
-        `;
-    }
-}

frontend/static/js/views/accounts/RegisterView.js

@@ -52,4 +52,4 @@ export default class extends AbstractNonAuthentifiedView {
 			</div>
         `;
     }
-}
+}

frontend/static/js/views/profiles/ProfilePageView.js

@@ -26,4 +26,4 @@ export default class extends AbstractView {
 		    <a id="username"></a>
         `;
     }
-}
+}

frontend/static/js/views/profiles/ProfilesView.js

@@ -1,40 +0,0 @@
-import AbstractView from "../AbstractView.js";
-import { client } from "../../index.js"
-
-export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Profiles");
-    }
-
-    async postInit()
-    {
-        let profiles = await client.profiles.all()
-		let profile_list_element = document.getElementById("profile-list")
-
-		profiles.forEach((profile) => {
-			let profile_element = document.createElement("div");
-			profile_element.className = "item";
-			
-			let avatar = document.createElement("img");
-			avatar.src = profile.avatar_url;
-
-			let username = document.createElement("a");
-			username.href = `/profiles/${profile.user_id}`;
-			username.appendChild(document.createTextNode(profile.username));
-
-			profile_element.appendChild(avatar);
-			profile_element.appendChild(username);
-
-			profile_list_element.appendChild(profile_element)
-		});
-    }
-
-    async getHtml() {
-        return `
-			<link rel="stylesheet" href="/static/css/profiles/profiles.css">
-		    <div id="profile-list">
-			
-			</div>
-        `;
-    }
-}

frontend/templates/index.html

@@ -10,10 +10,10 @@
 <body>
     <nav class="nav">
         <a href="/" class="nav__link" data-link>Dashboard</a>
-        <a href="/profiles" class="nav__link" data-link>Profiles</a>
+        <a href="/search" class="nav__link" data-link>Search</a>
+        <a href="/home" class="nav__link" data-link>Home</a>
         <a href="/login" class="nav__link" data-link>Login</a>
         <a href="/register" class="nav__link" data-link>Register</a>
-        <a href="/chat" class="nav__link" data-link>Chat</a>
     </nav>
     <div id="app"></div>
 	<script type="module" src="{% static 'js/index.js' %}"></script>

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ft_transcendence",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

requirements.txt

@@ -1,10 +1,30 @@
 asgiref==3.7.2
+attrs==23.1.0
+autobahn==23.6.2
+Automat==22.10.0
+cffi==1.16.0
+channels==4.0.0
+constantly==23.10.4
+cryptography==41.0.7
+daphne==4.0.0
 Django==4.2.6
 django-cors-headers==4.3.0
 django-restapi==0.1.3
 djangorestframework==3.14.0
+hyperlink==21.0.0
+idna==3.6
+incremental==22.10.0
 install==1.3.5
+Pillow==10.1.0
+pyasn1==0.5.1
+pyasn1-modules==0.3.0
+pycparser==2.21
+pyOpenSSL==23.3.0
 pytz==2023.3.post1
+service-identity==23.1.0
+six==1.16.0
 sqlparse==0.4.4
-channels==4.0.0
+Twisted==23.10.0
-daphne
+txaio==23.1.1
+typing_extensions==4.8.0
+zope.interface==6.1

trancendence/asgi.py

@@ -19,7 +19,7 @@ from django.core.asgi import get_asgi_application
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'trancendence.settings')
 
 application = ProtocolTypeRouter({
-	'http':get_asgi_application(),
+    'http':get_asgi_application(),
 	'websocket':AuthMiddlewareStack(
 		URLRouter(
 			chat.routing.websocket_urlpatterns +

trancendence/settings.py

@@ -48,6 +48,7 @@ INSTALLED_APPS = [
     'accounts.apps.AccountsConfig',
     'profiles.apps.ProfilesConfig',
     'frontend.apps.FrontendConfig',
+    'chat.apps.ChatConfig',
     
     'corsheaders',
     'rest_framework',
@@ -150,4 +151,4 @@ STATIC_URL = 'static/'
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
 
-DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

trancendence/urls.py

@@ -21,5 +21,6 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('api/profiles/', include('profiles.urls')),
     path('api/accounts/', include('accounts.urls')),
+    path('api/chat/', include('chat.urls')),
     path('', include('frontend.urls')),
-]
+]