Django javascript онлайн соединение с сокетом?
Изучая Django/socket, я бросил себе вызов небольшой онлайн-игрой 1v1 с картами памяти.
На данный момент код позволяет создать целевую страницу, затем создать/присоединиться к комнате. В комнате представлена игра в карты памяти с чатом.
Моя следующая проблема заключается в том, что карта памяти не одинакова для комнаты, похоже, что рандом генерируется 2 раза, даже если игрок находится в одной комнате
Если у вас есть какие-либо подсказки, советы, я буду благодарен. (не профессионал и не студент, просто делаю это для чистого удовольствия, извините, если следующий код содержит ошибки)
Вот мой код HTML :
Вот Base.Htlm
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Who will win ! </title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="{% static 'css/TEST2BINGOQUIZZ.css' %}">
</head>
<body>
{% block content %} {% endblock content %}
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha512-B4skI5FiLurS86aioJx9VfozI1wjqrn6aTdJH+YQUmCZum/ZibPBTX55k5d9XM6EsKePDInkLVrN7vPmJxc1qA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
{% block script %}{% endblock script %}
</body>
</html>
Вот consummers.py
Вот model.py
from django.db import models
#this table will only exists when there are people in room
#once all the users are gone this will be deleted
class BingoRoom(models.Model):
room_name = models.CharField(max_length=50)
def __str__(self) -> str:
return self.room_name
class TrackPlayers(models.Model):
username = models.CharField(max_length=50)
room = models.ForeignKey(BingoRoom, on_delete=models.CASCADE)
Здесь находится routing.py
from django.urls import path
from .consumers import BingoConsumer, OnlineRoomConsumer
websocket_urlpatterns = [
path(r'ws/clicked/<room_name>/', BingoConsumer.as_asgi(), name="clicked"),
path(r'ws/online-rooms/', OnlineRoomConsumer.as_asgi())
]
Вот urls.py
from django.urls import path
from . import views
urlpatterns =[
path("",views.index,name='index'),
#path("games",views.games,name='games'),
path('room', views.CreateRoomView, name="create_room"),
path('<str:room_name>/', views.bingoView, name="bingo"),
path('room/check_room/<room_name>/', views.roomExist, name="check_room"),
]
Вот мнения
from django.http import JsonResponse
from django.shortcuts import render
from .models import BingoRoom
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import re
def index(request,):
return render(request,"home.html")
'''
def games(request):
return render(request, "memoryquizz2.html")
'''
# Create your views here.
def CreateRoomView(request):
return render(request, 'create_room.html')
def bingoView(request, room_name):
if not re.match(r'^[\w-]*$', room_name):
return render(request, 'error.html')
return render(request, 'memoryquizz2.html')
@csrf_exempt
def roomExist(request, room_name):
print(room_name)
return JsonResponse({
"room_exist": BingoRoom.objects.filter(room_name=room_name).exists()
})
Здесь находится script.js
const cards = document.querySelectorAll(".card");
var grid = document.querySelector(".wrapper");
const items = [...document.querySelector(".wrapper").children];
let matched = 0;
let cardOne, cardTwo;
let disableDeck = false;
function flipCard({target: clickedCard}) {
if(cardOne !== clickedCard && !disableDeck) {
clickedCard.classList.add("flip");
if(!cardOne) {
return cardOne = clickedCard;
}
cardTwo = clickedCard;
disableDeck = true;
let cardOneImg = cardOne.querySelector(".back-view img").src,
cardTwoImg = cardTwo.querySelector(".back-view img").src;
matchCards(cardOneImg, cardTwoImg);
}
}
function matchCards(img1, img2) {
if(img1 === img2) {
matched++;
if(matched == 8) {
setTimeout(() => {
return shuffleCard();
}, 1000);
}
cardOne.removeEventListener("click", flipCard);
cardTwo.removeEventListener("click", flipCard);
cardOne = cardTwo = "";
return disableDeck = false;
}
setTimeout(() => {
cardOne.classList.add("shake");
cardTwo.classList.add("shake");
}, 400);
setTimeout(() => {
cardOne.classList.remove("shake", "flip");
cardTwo.classList.remove("shake", "flip");
cardOne = cardTwo = "";
disableDeck = false;
}, 1200);
}
function shuffleCard() {
matched = 0;
disableDeck = false;
cardOne = cardTwo = "";
let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8];
arr.sort(() => Math.random() > 0.5 ? 1 : -1);
cards.forEach((card, i) => {
card.classList.remove("flip");
let imgTag = card.querySelector(".back-view img");
imgTag.src = `/static/images/img-${arr[i]}.png`;
card.addEventListener("click", flipCard);
});
}
shuffleCard();
cards.forEach(card => {
card.addEventListener("click", flipCard);
});
Здесь находится create a room.js
Вот bingo_socket.js
Здесь находится bingo-sec.js
const username = localStorage.getItem("username")
if(!username){
const name = prompt('Your Name ')
localStorage.setItem("username",name)
}
const userdiv = document.getElementById("userdiv")
userdiv.textContent=u
Здесь находится TEST2BINGOQUIZZ.css