6 Commits

Author SHA1 Message Date
63e1520e6a add: ball respawn timeout 2023-12-12 18:25:16 +01:00
754e5867f2 welp I guess we're done 2023-12-12 15:58:50 +01:00
ca6dba2763 add: ball angle calculations 2023-12-12 12:10:48 +01:00
aa35514c44 do u guys wanna see my balls ? 2023-12-10 11:05:00 +01:00
12056554fc game: moving paddle :) 2023-12-05 12:18:34 +01:00
c2317d5404 la putain de sa mere 2023-12-04 16:51:24 +01:00
50 changed files with 349 additions and 533 deletions

2
.gitignore vendored
View File

@ -2,5 +2,3 @@
*.pyc *.pyc
db.sqlite3 db.sqlite3
**/migrations/** **/migrations/**
/profiles/static/avatars/*
!/profiles/static/avatars/default

View File

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

View File

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

View File

@ -13,7 +13,7 @@ class EditView(APIView):
authentication_classes = (SessionAuthentication,) authentication_classes = (SessionAuthentication,)
def get(self, request: HttpRequest): def get(self, request: HttpRequest):
return Response({"username": request.user.username, "id": request.user.pk}) return Response({"username": request.user.username})
def patch(self, request: HttpRequest): def patch(self, request: HttpRequest):
data: dict = request.data data: dict = request.data

View File

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

View File

@ -20,4 +20,4 @@ class LoginView(APIView):
if user is None: if user is None:
return Response({'user': ['Username or password wrong.']}, status.HTTP_200_OK) return Response({'user': ['Username or password wrong.']}, status.HTTP_200_OK)
login(request, user) login(request, user)
return Response({'id': user.pk}, status=status.HTTP_200_OK) return Response('user connected', status=status.HTTP_200_OK)

View File

@ -3,7 +3,6 @@ from ..serializers.register import RegisterSerialiser
from rest_framework.views import APIView from rest_framework.views import APIView
from rest_framework.response import Response from rest_framework.response import Response
from django.http import HttpRequest from django.http import HttpRequest
from django.contrib.auth import login
class RegisterView(APIView): class RegisterView(APIView):
permission_classes = (permissions.AllowAny,) permission_classes = (permissions.AllowAny,)
@ -13,6 +12,5 @@ class RegisterView(APIView):
if serializer.is_valid(raise_exception=True): if serializer.is_valid(raise_exception=True):
user = serializer.create(data) user = serializer.create(data)
if user: if user:
login(request, user)
return Response("user created", status=status.HTTP_201_CREATED) 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)

View File

@ -1,19 +0,0 @@
#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;
}

View File

@ -1,11 +0,0 @@
#app #avatar
{
height: 100px;
width: 100px;
}
#app #username
{
height: 100px;
width: 100px;
}

View File

@ -1,11 +0,0 @@
#app .item img
{
height: 100px;
width: 100px;
}
#app .item a
{
height: 100px;
width: 100px;
}

View File

@ -23,13 +23,7 @@ class Account
let response = await this.client._delete("/api/accounts/delete", {password: password}); let response = await this.client._delete("/api/accounts/delete", {password: password});
let response_data = await response.json(); let response_data = await response.json();
if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'})) if (response_data === "user deleted")
{
this.client._logged = false;
return null;
}
console.log(response_data)
if (response_data == "user deleted")
this.client._logged = false; this.client._logged = false;
return response_data; return response_data;
} }
@ -41,7 +35,7 @@ class Account
if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'})) if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
{ {
this.client._logged = false; console.log("error, client is not logged");
return null; return null;
} }
return response_data; return response_data;
@ -49,13 +43,13 @@ class Account
async update(data, password) async update(data, password)
{ {
data.current_password = password; data.password = password;
let response = await this.client._patch_json("/api/accounts/edit", data); let response = await this.client._patch_json("/api/accounts/edit", data);
let response_data = await response.json(); let response_data = await response.json();
if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'})) if (JSON.stringify(response_data) == JSON.stringify({'detail': 'Authentication credentials were not provided.'}))
{ {
this.client._logged = false; console.log("error, client is not logged");
return null; return null;
} }
return response_data; return response_data;

View File

@ -1,14 +1,11 @@
import { Account } from "./account.js"; import { Account } from "./account.js";
import { MatchMaking } from "./matchmaking.js";
import { Profile } from "./profile.js";
import { Profiles } from "./profiles.js";
function getCookie(name) function getCookie(name)
{ {
let cookie = {}; let cookie = {};
document.cookie.split(';').forEach(function(el) { document.cookie.split(';').forEach(function(el) {
let split = el.split('='); let split = el.split('=');
cookie[split[0].trim()] = split.slice(1).join("="); cookie[split[0].trim()] = split.slice(1).join("=");
}) })
return cookie[name]; return cookie[name];
} }
@ -19,8 +16,6 @@ class Client
{ {
this._url = url; this._url = url;
this.account = new Account(this); this.account = new Account(this);
this.profiles = new Profiles(this);
this.matchmaking = new MatchMaking(this);
this._logged = undefined; this._logged = undefined;
} }
@ -78,26 +73,12 @@ class Client
return response; return response;
} }
async _patch_file(uri, file)
{
let response = await fetch(this._url + uri, {
method: "PATCH",
headers: {
"X-CSRFToken": getCookie("csrftoken"),
},
body: file,
});
return response;
}
async login(username, password) async login(username, password)
{ {
let response = await this._post("/api/accounts/login", {username: username, password: password}) let response = await this._post("/api/accounts/login", {username: username, password: password})
let data = await response.json(); let data = await response.json();
if (data.id != undefined) if (data == "user connected")
{ {
this.me = new Profile(this)
await this.me.init(data.id)
this.logged = true; this.logged = true;
return null; return null;
} }
@ -114,13 +95,7 @@ class Client
{ {
let response = await this._get("/api/accounts/logged"); let response = await this._get("/api/accounts/logged");
let data = await response.json(); let data = await response.json();
return data === "True";
if (data.id !== undefined)
{
this.me = new Profile(this)
await this.me.init(data.id)
}
return data.id !== undefined;
} }
} }

View File

@ -1,42 +0,0 @@
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}

View File

@ -1,35 +0,0 @@
class Profile
{
constructor (client, username = undefined, avatar_url = undefined, user_id = undefined)
{
this.client = client;
this.username = username;
this.avatar_url = avatar_url
this.user_id = user_id
}
async init(user_id)
{
let response = await this.client._get(`/api/profiles/${user_id}`);
let response_data = await response.json();
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.user_id}`, form_data);
let response_data = await response.json()
return response_data;
}
async setData (data)
{
}
}
export {Profile}

View File

@ -1,30 +0,0 @@
import { Profile } from "./profile.js";
class Profiles
{
constructor (client)
{
this.client = client
}
async all()
{
let response = await this.client._get("/api/profiles/");
let response_data = await response.json();
let profiles = []
response_data.forEach((profile) => {
profiles.push(new Profile(this.client, profile.username, profile.avatar_url, profile.user_id))
});
return profiles;
}
async getProfile(user_id)
{
let profile = new Profile(this.client);
await profile.init(user_id);
return profile;
}
}
export {Profiles}

View File

@ -1,17 +1,18 @@
import LoginView from "./views/accounts/LoginView.js"; import LoginView from "./views/accounts/LoginView.js";
import Dashboard from "./views/Dashboard.js"; import Dashboard from "./views/Dashboard.js";
import Posts from "./views/Posts.js";
import PostView from "./views/PostView.js";
import Settings from "./views/Settings.js"; import Settings from "./views/Settings.js";
import Chat from "./views/Chat.js"; import Chat from "./views/Chat.js";
import HomeView from "./views/HomeView.js"; import HomeView from "./views/HomeView.js";
import RegisterView from "./views/accounts/RegisterView.js"; import RegisterView from "./views/accounts/RegisterView.js";
import LogoutView from "./views/accounts/LogoutView.js"; import LogoutView from "./views/accounts/LogoutView.js";
import GameView from "./views/Game.js"
import { Client } from "./api/client.js"; import { Client } from "./api/client.js";
import AbstractRedirectView from "./views/AbstractRedirectView.js"; import AbstractRedirectView from "./views/AbstractRedirectView.js";
import MeView from "./views/MeView.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) let client = new Client(location.protocol + "//" + location.host)
@ -33,11 +34,11 @@ const navigateTo = async (uri) => {
history.pushState(null, null, uri); history.pushState(null, null, uri);
}; };
const router = async (uri) => { const router = async (uri = "") => {
const routes = [ const routes = [
{ path: "/", view: Dashboard }, { path: "/", view: Dashboard },
{ path: "/profiles", view: ProfilesView}, { path: "/posts", view: Posts },
{ path: "/profiles/:id", view: ProfilePageView }, { path: "/posts/:id", view: PostView },
{ path: "/settings", view: Settings }, { path: "/settings", view: Settings },
{ path: "/login", view: LoginView }, { path: "/login", view: LoginView },
{ path: "/logout", view: LogoutView }, { path: "/logout", view: LogoutView },
@ -45,7 +46,7 @@ const router = async (uri) => {
{ path: "/chat", view: Chat }, { path: "/chat", view: Chat },
{ path: "/home", view: HomeView }, { path: "/home", view: HomeView },
{ path: "/me", view: MeView }, { path: "/me", view: MeView },
{ path: "/matchmaking", view: MatchMakingView }, { path: "/game", view: GameView },
]; ];
// Test each route for potential match // Test each route for potential match
@ -86,7 +87,7 @@ const router = async (uri) => {
return 0; return 0;
}; };
window.addEventListener("popstate", function() {router(location.pathname)}); window.addEventListener("popstate", router);
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
document.body.addEventListener("click", e => { document.body.addEventListener("click", e => {

View File

@ -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();
}
}

View File

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

View File

@ -1,30 +0,0 @@
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();
}
}

View File

@ -12,19 +12,14 @@ export default class extends AbstractAuthentificateView
{ {
if (this.fill() === null) if (this.fill() === null)
return; return;
document.getElementById("save-account-button").onclick = this.acccount_save; document.getElementById("save-button").onclick = this.save;
document.getElementById("delete-account-button").onclick = this.account_delete_accounts; document.getElementById("delete-button").onclick = this.delete_accounts;
} }
async fill() async fill()
{ {
let data = await client.account.get(); let data = await client.account.get();
if (data === null)
{
navigateTo("/login")
return;
}
document.getElementById("username").value = data.username; document.getElementById("username").value = data.username;
} }
@ -71,12 +66,7 @@ export default class extends AbstractAuthentificateView
if (response_data === null) if (response_data === null)
{ {
navigateTo("/login"); navigateTo(super.redirect_url);
return;
}
else if (response_data === "data has been alterate")
{
navigateTo("/me");
return; return;
} }
@ -91,40 +81,22 @@ export default class extends AbstractAuthentificateView
if (error_display != null) if (error_display != null)
error_display.innerHTML = response_data[error_field]; error_display.innerHTML = response_data[error_field];
}); });
let avatar = document.getElementById("avatar");
if (avatar.files[0] !== undefined)
{
let form_data = new FormData();
form_data.append("file", avatar.files[0]);
await client.me.change_avatar(form_data)
}
} }
async getHtml() async getHtml()
{ {
return ` return `
<link rel="stylesheet" href="static/css/me.css">
<h1>ME</h1> <h1>ME</h1>
<div class="account"> <input type=text placeholder="username" id="username">
<h3>Account</h3> <span id="error_username"></span>
<input type="text" placeholder="username" id="username"> <input type=password placeholder="new password" id="new_password">
<span id="error_username"></span> <span id="error_new_password"></span>
<input type=password placeholder="new password" id="new_password"> <input type=password placeholder="current password" id="current_password">
<span id="error_new_password"></span> <span id="error_current_password"></span>
<input type=password placeholder="current password" id="current_password"> <input type="button" value="Save" id="save-button">
<span id="error_current_password"></span> <span id="error_save"></span>
<input type="button" value="Save Credentials" id="save-account-button"> <input type="button" value="Delete" id="delete-button">
<span id="error_save"></span> <span id="error_delete"></span>
<input type="button" value="Delete Account" id="delete-account-button">
<span id="error_delete"></span>
</div>
<div class="profile">
<h3>Profile</h3>
<input type="file" id="avatar" accept="image/png, image/jpeg">
<input type="button" value="Save profile" id="save-profile-button">
<span id="error_save"></span>
</div>
<a href="/logout" class="nav__link" data-link>Logout</a> <a href="/logout" class="nav__link" data-link>Logout</a>
`; `;
} }

View File

@ -0,0 +1,15 @@
import AbstractView from "./AbstractView.js";
export default class extends AbstractView {
constructor(params) {
super(params, "Viewing Post");
this.postId = params.id;
}
async getHtml() {
return `
<h1>Post</h1>
<p>You are viewing post #${this.postId}.</p>
`;
}
}

View File

@ -0,0 +1,14 @@
import AbstractView from "./AbstractView.js";
export default class extends AbstractView {
constructor(params) {
super(params, "Posts");
}
async getHtml() {
return `
<h1>Posts</h1>
<p>You are viewing the posts!</p>
`;
}
}

View File

@ -1,5 +1,5 @@
import { client, navigateTo } from "../../index.js"; import { client, navigateTo } from "../../index.js";
import AbstractNonAuthentifiedView from "../AbstractNonAuthentified.js"; import AbstractAuthentifiedView from "../AbstractNonAuthentified.js";
async function register() async function register()
{ {
@ -14,6 +14,7 @@ async function register()
return; return;
} }
["username", "user", "password"].forEach(error_field => { ["username", "user", "password"].forEach(error_field => {
let error_display = document.getElementById(`error_${error_field}`); let error_display = document.getElementById(`error_${error_field}`);
if (error_display != null) if (error_display != null)
@ -27,7 +28,7 @@ async function register()
}); });
} }
export default class extends AbstractNonAuthentifiedView { export default class extends AbstractAuthentifiedView {
constructor(params) { constructor(params) {
super(params, "Register", "/home"); super(params, "Register", "/home");
} }

View File

@ -1,29 +0,0 @@
import AbstractView from "../AbstractView.js";
import { client } from "../../index.js"
export default class extends AbstractView {
constructor(params) {
super(params, "Profile ");
this.user_id = params.id;
}
async postInit()
{
let profile = await client.profiles.getProfile(this.user_id);
let username_element = document.getElementById("username");
username_element.href = `/profiles/${this.user_id}`;
username_element.appendChild(document.createTextNode(profile.username));
let avatar_element = document.getElementById("avatar");
avatar_element.src = profile.avatar_url;
}
async getHtml() {
return `
<link rel="stylesheet" href="/static/css/profiles/profile.css">
<img id="avatar"/>
<a id="username"></a>
`;
}
}

View File

@ -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>
`;
}
}

View File

@ -10,7 +10,8 @@
<body> <body>
<nav class="nav"> <nav class="nav">
<a href="/" class="nav__link" data-link>Dashboard</a> <a href="/" class="nav__link" data-link>Dashboard</a>
<a href="/profiles" class="nav__link" data-link>Profiles</a> <a href="/posts" class="nav__link" data-link>Posts</a>
<a href="/settings" class="nav__link" data-link>Settings</a>
<a href="/login" class="nav__link" data-link>Login</a> <a href="/login" class="nav__link" data-link>Login</a>
<a href="/register" class="nav__link" data-link>Register</a> <a href="/register" class="nav__link" data-link>Register</a>
<a href="/chat" class="nav__link" data-link>Chat</a> <a href="/chat" class="nav__link" data-link>Chat</a>

View File

View File

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

View File

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

View File

@ -1,14 +0,0 @@
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()

View File

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

View File

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

View File

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

View File

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

View File

@ -1,48 +0,0 @@
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)

View File

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

View File

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

View File

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

View File

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

View File

@ -3,15 +3,11 @@ from django.db import models
from django.contrib.auth.models import User from django.contrib.auth.models import User
from django.db.models.signals import post_save from django.db.models.signals import post_save
from django.dispatch import receiver from django.dispatch import receiver
from django.conf import settings
def upload_to(instance, filename: str):
return f"./profiles/static/avatars/{instance.pk}.{filename.split('.')[1]}"
# Create your models here. # Create your models here.
class ProfileModel(models.Model): class ProfileModel(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE) user = models.ForeignKey(User, on_delete=models.CASCADE)
avatar_url = models.ImageField(upload_to=upload_to, default="./profiles/static/avatars/default.avif") #blank=True, null=True) title = models.CharField(max_length=40)
@receiver(post_save, sender=User) @receiver(post_save, sender=User)
def on_user_created(sender, instance, created, **kwargs): def on_user_created(sender, instance, created, **kwargs):

View File

@ -1,11 +0,0 @@
from rest_framework import serializers
from .models import ProfileModel
class ProfileSerializer(serializers.ModelSerializer):
username = serializers.ReadOnlyField(source='user.username')
avatar_url = serializers.ImageField(required=False)
class Meta:
model = ProfileModel
fields = ["username", "avatar_url", "user_id"]

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

1
profiles/status_code.py Normal file
View File

@ -0,0 +1 @@
PROFILE_NOT_FOUND = "Profile Not Found"

View File

@ -1,11 +1,7 @@
from django.urls import path from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from . import viewsets from . import views
urlpatterns = [ urlpatterns = [
path("<int:pk>", viewsets.ProfileViewSet.as_view({'get': 'retrieve', 'patch': 'partial_update'}), name="profile_page"), path("<int:pk>", views.ProfileView.as_view(), name="profile_page"),
path("", viewsets.ProfileViewSet.as_view({'get': 'list'}), name="profiles_list"), ]
#path("me", viewsets.ProfileViewSet.as_view(), name="my_profile_page"),
] + static("/static/avatars/", document_root="./avatars")

19
profiles/views.py Normal file
View File

@ -0,0 +1,19 @@
from django.http import HttpRequest
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import permissions, status
from .models import ProfileModel
# Create your views here.
class ProfileView(APIView):
permission_classes = (permissions.AllowAny,)
def get(self, request: HttpRequest, pk: int):
profile: ProfileModel = ProfileModel.objects.get(pk=pk)
if (profile is None):
return Response(status=status.HTTP_404_NOT_FOUND)
return Response(status=status.HTTP_200_OK, data={'name': profile.user.username,
'title': profile.title})

View File

@ -1,44 +0,0 @@
from rest_framework import permissions
from rest_framework.parsers import MultiPartParser, FormParser
from rest_framework import permissions, status
from rest_framework import viewsets
from rest_framework.response import Response
from django.http import HttpRequest
from django.db.models import QuerySet
from .serializers import ProfileSerializer
from .models import ProfileModel
class ProfileViewSet(viewsets.ModelViewSet):
queryset = ProfileModel.objects.all
serializer_class = ProfileSerializer
parser_classes = (MultiPartParser, FormParser)
permission_classes = (permissions.IsAuthenticatedOrReadOnly,)
def retrieve(self, request: HttpRequest, pk=None):
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)
for profile in serializer.data:
profile["avatar_url"] = profile["avatar_url"][profile["avatar_url"].find("static") - 1:]
return Response(serializer.data)
def perform_create(self, serializer):
serializer.save(user=self.request.user)
def perform_update(self, serializer):
query: QuerySet = ProfileModel.objects.filter(pk=self.request.user.pk)
if (not query.exists()):
return Response("profile not found", status=status.HTTP_400_BAD_REQUEST)
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 != "./profiles/static/avatars/default.avif"):
profile.avatar_url.storage.delete(profile.avatar_url.name)
profile.avatar_url = avatar
profile.save()

View File

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

View File

@ -10,8 +10,6 @@ For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/ https://docs.djangoproject.com/en/4.2/ref/settings/
""" """
import os
from pathlib import Path from pathlib import Path
# Build paths inside the project like this: BASE_DIR / 'subdir'. # Build paths inside the project like this: BASE_DIR / 'subdir'.
@ -43,8 +41,6 @@ INSTALLED_APPS = [
'channels', 'channels',
'daphne', 'daphne',
'matchmaking.apps.MatchmakingConfig',
'games.apps.GamesConfig',
'accounts.apps.AccountsConfig', 'accounts.apps.AccountsConfig',
'profiles.apps.ProfilesConfig', 'profiles.apps.ProfilesConfig',
'frontend.apps.FrontendConfig', 'frontend.apps.FrontendConfig',