Typing game

.devcontainer/requirements/Django/requirements.txt

@@ -7,7 +7,7 @@ Django==5.0.3
 gunicorn==21.2.0
 idna==3.7
 packaging==24.1
-psycopg2==2.9.9
+psycopg2-binary==2.9.9
 pycparser==2.22
 PyJWT==2.8.0
 requests==2.32.3

.devcontainer/requirements/Nginx/conf.d/default.conf

@@ -1,5 +1,5 @@
 upstream django {
-	server app:8000;
+    server app:8000;
 }
 
 map $http_upgrade $connection_upgrade {

pong/config/asgi.py

@@ -11,15 +11,16 @@
 
 from channels.routing import ProtocolTypeRouter, URLRouter
 from channels.security.websocket import AllowedHostsOriginValidator
-from django.urls import path
+from django.urls import re_path
 from django.core.asgi import get_asgi_application
 
 os.environ.setdefault("DJANGO_SETTINGS_MODULE", "config.settings")
 django_asgi_app = application = get_asgi_application()
 
 # import consumers here
-from .consumers import SampleConsumer
 from pong.middleware.auth import ChannelsJWTAuthenticationMiddleware
+from realtime_pong_game.consumers import PlayerConsumer
+from realtime_typing_game.consumers import TypingGmaePlayerConsumer
 
 application = ProtocolTypeRouter(
     {
@@ -28,8 +29,14 @@
             ChannelsJWTAuthenticationMiddleware(
                 URLRouter(
                     [
-                        path("test/", SampleConsumer.as_asgi()),
-                        # path("chat/", PublicChatConsumer.as_asgi()),
+                        re_path(
+                            r"realtime-pong/(?P<room_name>\w+)/$",
+                            PlayerConsumer.as_asgi(),
+                        ),
+                        re_path(
+                            r"realtime-typing/(?P<room_name>\w+)/$",
+                            TypingGmaePlayerConsumer.as_asgi(),
+                        ),
                     ]
                 )
             )

pong/config/settings.py

@@ -39,6 +39,8 @@
     "django.contrib.messages",
     "django.contrib.staticfiles",
     "pong",
+    "realtime_pong_game",
+    "realtime_typing_game",
 ]
 
 MIDDLEWARE = [

pong/pong/static/pong/components/Error.js

@@ -0,0 +1,21 @@
+import { Component } from "../core/component.js";
+
+export class Error extends Component {
+
+    constructor(router, parameters, state) {
+        super(router, parameters, state);
+        this.findElement("button.go-home").onclick = this.onClick;
+    }
+    onClick = () => {
+        this.router.goNextPage("/home");
+    }
+
+    get html() {
+        return (`
+          <h1> Oops  Error occured!</h1>
+          <button class="go-home">go Home</button>
+        `)
+    }
+}
+
+export default Error;

pong/pong/static/pong/components/Home.js

@@ -5,10 +5,20 @@ import { Component } from "../core/component.js";
 export class Home extends Component {
 	constructor(router, params, state) {
 		super (router, params, state);
+        this.findElement("button.go-realtime-pong-button").onclick = this.goRealtimePong
+        this.findElement("button.go-realtime-typing-button").onclick = this.goRealtimeTyping
 		this.findElement("form.signout-form").onsubmit = this.handleSignout;
         this.verifyJwtToken();
 	}
 
+	goRealtimePong = () => {
+		this.router.goNextPage("/pong-game-home");
+	}
+
+    goRealtimeTyping = () => {
+		this.router.goNextPage("/typing-game-home");
+	}
+
     verifyJwtToken = async () => {
         const responseToken = await fetch("/pong/api/v1/auth/token/verify", {
             method: "POST",
@@ -51,6 +61,9 @@ export class Home extends Component {
 	get html() {
 		return (`
 			<h1> signin後の仮ページ </h1>
+			<button class="go-realtime-pong-button">ポングゲーム</button>
+            <br>
+			<button class="go-realtime-typing-button">タイピングゲーム</button>
             <form class="signout-form">
                 <button type="submit">signout</button>
             </form>

pong/pong/static/pong/components/Load.js

@@ -0,0 +1,38 @@
+import { Component } from "../core/component.js";
+
+export class Load extends Component {
+    constructor(router, params, state) {
+        super(router, params, state);
+    }
+
+    verifyAndRefreshToken = async () => {
+        const verifyResponse = await fetch("/pong/api/v1/auth/token/verify", {
+            method: "POST",
+        });
+        if (verifyResponse.ok) {
+            return true;
+        }
+
+        const refreshResponse = await fetch("/pong/api/v1/auth/token/refresh", {
+        method: "POST",
+        });
+        if (refreshResponse.ok) {
+            return true;
+        }
+        throw Error(verifyResponse.statusText);
+    }
+
+    onload = () => {
+        this.verifyAndRefreshToken().then().catch((error)=>{
+            //Go To Error! 
+            this.router.goNextPage("/signin");
+        });
+    }
+
+    get html() {
+        return (`
+        `);
+    }
+}
+
+export default Load;

pong/pong/static/pong/components/PongGame.js

@@ -0,0 +1,106 @@
+import { Component } from "../core/component.js";
+
+export class PongGame extends Component {
+
+    constructor(router, parameters, state) {
+        super(router, parameters, state);
+
+        //setting websocket
+        this.connection = this.getRouteContext("WebSocket");
+        this.connection.onmessage = this.onMessage;
+
+        this.canvas = this.findElement("canvas.ponggame");
+        this.context = this.canvas.getContext('2d');
+        this.grid = 15;
+        this.ball = {
+            x: this.canvas.width / 2,
+            y: this.canvas.height / 2,
+            width: this.grid,
+            height: this.grid
+        };
+        this.leftPaddle = {
+          y: this.canvas.height / 2,
+          size: 80
+        };
+        this.rightPaddle = {
+          y: this.canvas.height / 2,
+          size: 80
+        };
+        document.addEventListener('keydown', (e) =>  {
+          if (e.which === 87) {
+            this.connection.send(JSON.stringify({"sender": "player", "type": "gameKeyEvent", "contents": "keyup-go-up"}));
+          }
+          else if (e.which === 83) {
+            this.connection.send(JSON.stringify({"sender": "player", "type": "gameKeyEvent", "contents": "keyup-go-down"}));
+          }
+        });
+        document.addEventListener('keyup', (e) =>  {
+          if (e.which === 87 || e.which === 83) {
+            this.connection.send(JSON.stringify({"sender": "player", "type": "gameKeyEvent", "contents": "keydown"}));
+          }
+        });
+        requestAnimationFrame(this.loop);
+    }
+
+    onMessage = (event) => {
+		  const message = JSON.parse(event.data);
+      switch (message.type){
+        case "game-objects-moved":
+          this.ball.x = message.contents.ball.x_position;
+          this.ball.y = message.contents.ball.y_position;
+          this.leftPaddle.y = message.contents.player1_paddle;
+          this.rightPaddle.y = message.contents.player2_paddle;
+          break;
+        case "player-scored":
+          document.getElementById("player1-name").innerHTML = message.contents.player1.name
+          document.getElementById("player1-score").innerHTML = message.contents.player1.score
+          document.getElementById("player2-name").innerHTML = message.contents.player2.name
+          document.getElementById("player2-score").innerHTML = message.contents.player2.score
+          break;
+        case "game-ended":
+          this.connection.close();
+          this.goNextPage("/game-home");
+          break;
+
+      }
+
+    }
+
+    loop = () =>  {
+        requestAnimationFrame(this.loop);
+        this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
+        // draw ball
+        this.context.fillRect(this.ball.x, this.ball.y, this.ball.width, this.ball.height);
+        // draw walls
+        this.context.fillStyle = 'black';
+        this.context.fillRect(0, 0, this.canvas.width, this.grid);
+        this.context.fillRect(0, this.canvas.height - this.grid, this.canvas.width, this.canvas.height);
+        // draw player1 paddle
+        this.context.fillRect(0, this.leftPaddle.y - this.leftPaddle.size / 2, this.grid, this.leftPaddle.size);
+        // draw player2 paddle
+        this.context.fillRect(this.canvas.width - this.grid, this.rightPaddle.y - this.rightPaddle.size / 2, this.grid, this.rightPaddle.size);
+        // draw dotted line down the middle
+        for (let i = this.grid; i < this.canvas.height - this.grid; i += this.grid * 2) {
+          this.context.fillRect(this.canvas.width / 2 - this.grid / 2, i, this.grid, this.grid);
+        }
+    }
+
+    get html() {
+        return (`
+            <main class="game">
+              <div class="container">
+                <div class="player1">
+                  <span id="player1-name" class="name">Player 1</span> 
+                  &nbsp;
+                  <span class="score">Score: <span id="player1-score">0</span></span>
+                </div>
+                <div class="player2">
+                  <span id="player2-name" class="name">Player 2</span>
+                  <span class="score">Score: <span id="player2-score">0</span></span>
+                </div>
+              </div>
+              <canvas width="1500" height="585" class="ponggame"></canvas>
+            </main>
+        `)
+    }
+};

pong/pong/static/pong/components/PongGameHome.js

@@ -0,0 +1,61 @@
+import { Component } from "../core/component.js"
+import { Load } from "./Load.js";
+
+export class PongGameHome extends Component {
+	constructor(router, parameters, state) {
+		new Load(router, parameters, state).onload()
+		super(router, parameters, state);
+		this.findElement("form.entering-room-form").onsubmit = this.submitForm;
+
+	}
+
+	onWebSocketOpen = (event) => {
+		this.goNextPage("/pong-game-waiting");
+	}
+
+	onWebSocketClose = (event) => {
+		this.goNextPage("/pong-game-home");
+	}
+
+	onMessage = (event) => {
+		const message = JSON.parse(event.data);
+		switch (message.type) {
+			case 'waiting-for-other-participants':
+				this.goNextPage("/pong-game-waiting");
+				break;
+			case 'all-participants-connected':
+				this.setRouteContext("participants", message.contents);
+				this.goNextPage("/pong-game-room");
+				break;
+			case 'all-participants-ready':
+				this.goNextPage("/pong-game");
+				break;
+		}
+
+	}
+
+	submitForm = (event) => {
+		event.preventDefault();
+		this.setRouteContext("roomID", event.target.elements["room-id"].value);
+		const socketPath = "ws://" + window.location.hostname + ":" + window.location.port + "/realtime-pong/" + event.target.elements["room-id"].value + "/";
+		const connection = new WebSocket(socketPath);
+		this.setRouteContext("WebSocket", connection);
+		connection.onopen = this.onWebSocketOpen;
+		connection.onclose = this.onWebSocketClose;
+		connection.onmessage = this.onMessage;
+	}
+
+	get html() {
+		return (`
+			<h1>Welcome To Realtime Pong !</h1>
+			<form class="entering-room-form">
+				<label for="room-id">Room ID</label>
+				<input id="room-id" type="number" min="1000" max="9999" required><br>
+				<input id="enter-room-submit" name="enter-room" type="submit" value="enter room">
+			</form>
+
+		`);
+	}
+}
+
+export default PongGameHome;

pong/pong/static/pong/components/PongGameRoom.js

@@ -0,0 +1,28 @@
+import {Component} from "../core/component.js"
+import { Load } from "./Load.js";
+
+export class PongGameRoom extends Component {
+	constructor(router, parameters, state) {
+		new Load(router, parameters, state).onload()
+		super(router, parameters, state);	
+		this.findElement("button.ready").onclick = this.onClick
+		this.connection = this.getRouteContext("WebSocket");
+	}
+
+	onClick = () => {
+		this.connection.send(JSON.stringify({"sender": "user", "type": "ready"}));
+	}
+
+	get html() {
+		return (`
+			<h1>game room</h1>
+			<h1>Room member</h1>
+			<h2>${(this.getRouteContext("participants"))[0]}</h2>
+			<h2>${(this.getRouteContext("participants"))[1]}</h2>
+			<label>Are you ready?</label>
+			<button class="ready">I'm ready.</button>
+		`);
+	}
+}
+
+export default PongGameRoom;

pong/pong/static/pong/components/PongGameWaiting.js

@@ -0,0 +1,23 @@
+import {Component} from "../core/component.js"
+import { Load } from "./Load.js";
+
+export class PongGameWaiting extends Component {
+	constructor(router, parameters, state) {
+		new Load(router, parameters, state).onload()
+		super(router, parameters, state);
+        this.connection = this.getRouteContext("WebSocket");
+        this.findElement("button.go-back-to-game-home").onclick = this.onClick;
+	}
+
+    onClick = (event) => {
+        this.connection.close();
+    }
+
+    get html() {
+        return (`
+            <h1>waiting other paricipants...</h1>
+            <h1>Don't reload this page.</h1>
+            <button class="go-back-to-game-home">go back to game home</button>
+        `)
+    }
+}

pong/pong/static/pong/components/TypingGame.js

@@ -0,0 +1,6 @@
+import { Component } from "../core/component.js";
+
+export class TypingGame extends Component {
+
+
+}