add matchmaking

API/Apps/Game/models.py

@@ -1,22 +1,21 @@
 import uuid
 
 from django.db import models
-
+from django.apps import apps
 from Apps.Profile.models import Profile
-from Apps.Tournament.models import Tournament
-
-
-# Create your models here.
-
-
 class Game(models.Model):
     id = models.UUIDField(primary_key=True,default=uuid.uuid4)
     player1 = models.ForeignKey(Profile, on_delete=models.CASCADE, related_name='player1')
     player2 = models.ForeignKey(Profile, on_delete=models.CASCADE, related_name='player2')
     winner = models.ForeignKey(Profile, on_delete=models.CASCADE, related_name='winner', null=True, blank=True,default=None)
-    tournament = models.ForeignKey(Tournament, on_delete=models.SET_NULL, blank=True, null=True)
     is_finished = models.BooleanField(default=False)
     date = models.DateTimeField(auto_now_add=True)
+
+    @property
+    def tournament(self):
+        Tournament = apps.get_model('Tournament', 'Tournament')
+        return models.ForeignKey(Tournament, on_delete=models.SET_NULL, blank=True, null=True)
+
     def __str__(self):
         return f'{self.player1} vs {self.player2} on {self.date} with Id {self.id}'
 

Backend/Apps/Matchmaking/admin.py

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

Backend/Apps/Matchmaking/apps.py

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

Backend/Apps/Matchmaking/models.py

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

Backend/Apps/Matchmaking/tests.py

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

Backend/Apps/Matchmaking/urls.py

@@ -0,0 +1,9 @@
+
+
+from django.urls import path
+
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='matchmaking'),
+]

Backend/Apps/Matchmaking/views.py

@@ -0,0 +1,5 @@
+from django.shortcuts import render
+
+
+def index(request):
+    return render(request, 'Matchmaking/matchmaking.html')

Backend/Backend/settings.py

@@ -43,7 +43,8 @@
     'Apps.Home.apps.HomeConfig',
     "Apps.Profile.apps.ProfileConfig",
     "Apps.SocialMedia.apps.SocialMediaConfig",
-    "Apps.Game.apps.GameConfig"
+    "Apps.Game.apps.GameConfig",
+    "Apps.Matchmaking.apps.MatchmakingConfig"
 ]
 
 MIDDLEWARE = [

Backend/Backend/urls.py

@@ -24,4 +24,5 @@
     path('profile/', include('Apps.Profile.urls')),
     path('social/', include('Apps.SocialMedia.urls')),
     path('game/', include('Apps.Game.urls')),
+    path('matchmaking/', include('Apps.Matchmaking.urls'))
 ]

Backend/static/scripts/matchmaking.js

@@ -0,0 +1,27 @@
+function handleText() {
+  const BASE_TEXT = "FINDING A MATCH";
+  const text = document.getElementById("matchmaking text");
+  console.log(text);
+  let textIndex = 0;
+  setInterval(() => {
+    text.innerText = BASE_TEXT + ".".repeat(textIndex % 3);
+    textIndex += 1;
+  }, 1000);
+}
+function handleTimer() {
+  const timer = document.getElementById("matchmaking-timer");
+  let time = 0;
+  setInterval(() => {
+    time += 1;
+    let minutes = Math.floor(time / 60);
+    let seconds = time % 60;
+    minutes = minutes < 10 ? "0" + minutes : minutes;
+    seconds = seconds < 10 ? "0" + seconds : seconds;
+    timer.innerText = `${minutes}:${seconds}`;
+  }, 1000);
+}
+async function App() {
+  handleText();
+  handleTimer();
+}
+App();

Backend/static/scripts/spa.js

@@ -545,6 +545,25 @@ const routes = new Map([
         </div>
       </div>
             `
+    }],
+    ['matchmaking',{
+        auth_required: true,
+        url: ['/matchmaking/'],
+        html: `
+              <div
+        class="container-fluid position-relative matchmaking-wrapper"
+        style="padding: 0"
+      >
+        <div class="matchmaking-container">
+          <div class="matchmaking-text-wrapper">
+            <h1 id="matchmaking text">FINDING A MATCH</h1>
+            <button id="close-matchmaking">X</button>
+          </div>
+          <div><h1 id="matchmaking-timer">00:00</h1></div>
+        </div>
+      </div>
+        `
+
     }]
 ]);
 const routeToFile = [
@@ -555,6 +574,7 @@ const routeToFile = [
     [['/home/'], 'home'],
     [['/verification/'], 'verification'],
     [[/game\/([0-9a-fA-F]{8}-[0-9a-fA-F]{4}-4[0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12})/], 'game'],
+    [['/matchmaking/'], 'matchmaking'],
 ]
 const requiredScripts = [
     '/static/components/Notification.js',

Backend/static/styles/matchmaking.css

@@ -0,0 +1,28 @@
+.matchmaking-wrapper {
+  height: 80%;
+  width: 100%;
+  background: url("/static/public/SocialCloud.png") no-repeat;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+}
+.matchmaking-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.matchmaking-text-wrapper {
+  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+  padding: 1rem 2rem;
+  border-radius: 1.5rem;
+  gap: 2rem;
+  display: flex;
+  align-items: center;
+}
+#close-matchmaking {
+  color: red;
+  font-size: 2rem;
+  user-select: none;
+}

Backend/templates/matchmaking/matchmaking.html

@@ -0,0 +1,52 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="{% static 'styles/matchmaking.css' %}" />
+    <link rel="stylesheet" href="{% static 'styles/main.css' %}" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <main class="main">
+    <div class="main-profile-data">
+        <pong-redirect class="inbox-profile-wrapper" id="profile-image-wrapper">
+          <img src="" id="profile-image" alt="" />
+        </pong-redirect>
+        <div class="inbox-wrapper">
+          <input type="checkbox" id="input-button" />
+          <label for="input-button" class="input-label">
+            <img src="{% static 'public/inbox.svg' %}" alt="cannot load" />
+          </label>
+          <ul class="inbox-list" id="inbox-list">
+          </ul>
+        </div>
+      </div>
+      <div
+        class="container-fluid position-relative matchmaking-wrapper"
+        style="padding: 0"
+      >
+        <div class="matchmaking-container">
+          <div class="matchmaking-text-wrapper">
+            <h1 id="matchmaking text">FINDING A MATCH</h1>
+            <button id="close-matchmaking">X</button>
+          </div>
+          <div><h1 id="matchmaking-timer">00:00</h1></div>
+        </div>
+      </div>
+    </main>
+    <script src="{% static 'scripts/spa.js' %}" type="module"></script>
+  </body>
+</html>