Shooty-Arena/web/pages/play.js

// Strict Mode
"use strict";

// Imports
import React, { useEffect, useState, useRef } from "react";
import authentication from "../authentication/authentication.js";
import database from "../database/database.js";
import styles from "../styles/play.module.css";
import Header from "../components/header/header.jsx";
import Title from "../components/title/title.jsx";
import Footer from "../components/footer/footer.jsx";
import io from "socket.io-client";

// Get Server Side Props
export async function getServerSideProps ( ctx ) {
	try {
		let user = ""
		try {
			user = await authentication.getUser(ctx.req, ctx.res)
		} catch (e) {
			user = ""
		}
		if (user=="") {
			return {
				redirect: {
					destination: '/account',
					permanent: false,
				},
			}
		} else {
			var AES256  = require('aes-everywhere');
			const stats = await database.getStats(user)
			await authentication.setGame(ctx.req, ctx.res, AES256.encrypt(`${user},${stats[0].gameRank},${stats[0].elo},${stats[0].kills},${stats[0].deaths}`, 'passphrase = encrypt("Shooty Arena")'))
			return {
				props: {
					loggedIn: true
				}
			}
		}
	} catch {
		return {
			redirect: {
				destination: '/account',
				permanent: false,
			},
		}
	}

}

// Play
export default function Play () {
	// Refs
	const canvasRef = useRef(null);
	let socket = null;
	let menu = true;
	// Use Effect
	useEffect(() => {

		// Load Images
		const image_flat = new Image();
		image_flat.src = "/tiles/flat.png";
		const image_corner = new Image();
		image_corner.src = "/tiles/corner.png";
		const image_background = new Image();
		image_background.src = "/backgrounds/background.png";
		const image_background_light = new Image();
		image_background_light.src = "/backgrounds/backgroundLight.png";
		const image_player_right = new Image();
		image_player_right.src = "/players/right.png";
		const image_player_left = new Image();
		image_player_left.src = "/players/left.png"
		const image_gun_right = new Image();
		image_gun_right.src = "/players/gunRight.png";
		const image_gun_left = new Image();
		image_gun_left.src = "/players/gunLeft.png";

		// Sounds
		const shotSound1 = new Audio("/sounds/shoot.mp3");
		const shotSound2 = new Audio("/sounds/shoot.mp3");
		const shotSound3 = new Audio("/sounds/shoot.mp3");
		const shotSound4 = new Audio("/sounds/shoot.mp3");
		const shotSound5 = new Audio("/sounds/shoot.mp3");
		const shotSound6 = new Audio("/sounds/shoot.mp3");
		const shotSound7 = new Audio("/sounds/shoot.mp3");
		const shotSound8 = new Audio("/sounds/shoot.mp3");
		const shotSound9 = new Audio("/sounds/shoot.mp3");
		const shotSound10 = new Audio("/sounds/shoot.mp3");
		const shotSound11 = new Audio("/sounds/shoot.mp3");
		const shotSound12 = new Audio("/sounds/shoot.mp3");
		const shotSound13 = new Audio("/sounds/shoot.mp3");
		const shotSound14 = new Audio("/sounds/shoot.mp3");
		const shotSound15 = new Audio("/sounds/shoot.mp3");
		const shotSound16 = new Audio("/sounds/shoot.mp3");

		// Jump Sounds
		const jumpSound1 = new Audio("/sounds/jump.mp3");
		const jumpSound2 = new Audio("/sounds/jump.mp3");
		const jumpSound3 = new Audio("/sounds/jump.mp3");
		const jumpSound4 = new Audio("/sounds/jump.mp3");

		// Jump Sounds
		const landSound1 = new Audio("/sounds/land.mp3");
		const landSound2 = new Audio("/sounds/land.mp3");
		const landSound3 = new Audio("/sounds/land.mp3");
		const landSound4 = new Audio("/sounds/land.mp3");
		const landSound5 = new Audio("/sounds/land.mp3");
		const landSound6 = new Audio("/sounds/land.mp3");
		const landSound7 = new Audio("/sounds/land.mp3");
		const landSound8 = new Audio("/sounds/land.mp3");

		// Die Sound
		const dieSound = new Audio("/sounds/die.mp3");

		// Button
		class Button {
			constructor() {
				this.startx = 0;
				this.starty = 0;
				this.x = 400;
				this.y = 300;
			};
			click(canvas, event) {
				const rect = canvas.getBoundingClientRect();
				const x = event.clientX - rect.left;
				const y = event.clientY - rect.top;
				if (x > this.startx && x < this.x) {
					if (y > this.starty && y < this.y) {
						return true;
					};
				};
				return false;
			};
		};

		// Fullscreen
		function openFullscreen ( c ) {
			if (c.requestFullscreen) {
				c.requestFullscreen();
			} else if (c.webkitRequestFullscreen) {
        			c.webkitRequestFullscreen();
			} else if (c.msRequestFullscreen) {
				c.msRequestFullscreen();
			};
		};

		// Canvas
		const canvas = canvasRef.current;
		const ctx = canvas.getContext("2d");
		ctx.canvas.width = 1920;
		ctx.canvas.height = 1080;

		// Draw Images
		function drawImage( ctx, image, x, y, w, h, degrees ){
			ctx.save();
			ctx.translate(x+w/2, y+h/2);
			ctx.rotate(degrees*Math.PI/180.0);
			ctx.translate(-x-w/2, -y-h/2);
			ctx.drawImage(image, x, y, w, h);
			ctx.restore();
		};

		function drawImage2( ctx, image, x, y, w, h, degrees ){
			ctx.save();
			ctx.translate(x, y + 20);
			ctx.rotate(degrees*Math.PI/180.0);
			ctx.translate(-x, -y - 20);
			ctx.drawImage(image, x, y, w, h);
			ctx.restore();
		};

		function drawImage3( ctx, image, x, y, w, h, degrees ){
			ctx.save();
			ctx.translate(x + w, y + 20);
			ctx.rotate(degrees*Math.PI/180.0);
			ctx.translate(-x - w, -y - 20);
			ctx.drawImage(image, x, y, w, h);
			ctx.restore();
		};

		// Data
		const playButton = new Button();
		let map = [];
		let player;
		let players = [];
		let bullets = [];
		let scroll = [0, 0]
		let health = [];
		let directions = [];
		let angles = [];
		let lastClick = [0,0];
		let shotnum = 1;
  		let jc = 1;
		let lc = 1;

		// Draw Timeout
		setInterval(() => {

			// Wipe Screen
			ctx.fillStyle = "#1c1c1c";
			ctx.fillRect(0, 0, 1920 , 1080);

			// Scroll
			let bakc1 = 160 - scroll[0];
			let bakc2 = 160 - scroll[1];
			let b1 = scroll[0];
			let b2 = scroll[1];

			// Backround
			ctx.drawImage(image_background, bakc1, bakc2);

			// Menu
			if (menu == true) {
				ctx.fillStyle = "#FF0000";
				ctx.fillRect(playButton.startx, playButton.starty, playButton.x, playButton.y);

			// Game
			} else {
				// Map
				for (let i = 0; i < map.length; i++) {
					ctx.fillStyle = "#FF0000";
					if (map[i][0] == 1) {
						ctx.drawImage(image_flat, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10));
					} else if (map[i][0] == 2) {
						ctx.drawImage(image_corner, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10));
					} else if (map[i][0] == 3) {
						drawImage(ctx, image_flat, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 90);
					} else if (map[i][0] == 4) {
						drawImage(ctx, image_corner, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 90);
					} else if (map[i][0] == 5) {
						drawImage(ctx, image_flat, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 180);
					} else if (map[i][0] == 6) {
						drawImage(ctx, image_corner, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 180);
					}else if (map[i][0] == 7) {
						drawImage(ctx, image_flat, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 270);
					} else if (map[i][0] == 8) {
						drawImage(ctx, image_corner, parseInt(map[i][1] - scroll[0], 10), parseInt(map[i][2] - scroll[1], 10), 80, 80, 270);
					};
				};

				// Bullets
				for (let i = 0; i < bullets.length; i++ ) {
					ctx.fillStyle = "FF0000";
					ctx.fillRect(bullets[i][1] - scroll[0], bullets[i][2] - scroll[1], 10, 10);
				};

				// Players
				for (let i = 0; i < players.length; i++) {
					ctx.fillStyle = "00FF00";
					for (let y = 0; y < directions.length; y++) {
						if (players[i][0] == directions[y][0]) {
							if (directions[y][1] < 0) {
								ctx.drawImage(image_player_left, players[i][1][0] - b1, players[i][1][1] - b2, 80, 80);
								for (let an = 0; an < angles.length; an ++) {
									if (angles[an][0] == players[i][0]) {
										drawImage3(ctx, image_gun_left, players[i][1][0] - b1 - 45, players[i][1][1] - b2 + 28, 80, 32, 180 + angles[an][1]);
									};
								};
							} else {
								ctx.drawImage(image_player_right, players[i][1][0] - b1, players[i][1][1] - b2, 80, 80);
								for (let an = 0; an < angles.length; an ++) {
									if (angles[an][0] == players[i][0]) {
										drawImage2(ctx, image_gun_right, players[i][1][0] - b1 + 35, players[i][1][1] - b2 + 28, 80, 32, angles[an][1]);
									};
								};	
							};
						};
					};
					// Scroll
					if (players[i] != 0) {
						if (players[i][0] == player) {
							scroll[0] += (players[i][1][0] - scroll[0] - 900)/20;
							scroll[1] += (players[i][1][1] - scroll[1] - 500)/20;
						}
					}
					// Health
					for (let x = 0; x < health.length; x ++) {
						if (players[i][0] == health[x][0]) {
							ctx.fillStyle = "FF0000";
							ctx.fillRect(players[i][1][0] - b1, players[i][1][1] - b2 - 40, 80, 10);
							ctx.fillStyle = "00FF00";
							ctx.fillRect(players[i][1][0] - b1, players[i][1][1] - b2 - 40, health[x][1] * 10, 10);	
						};
					};
				};
				
				// Light
				ctx.drawImage(image_background_light, bakc1, bakc2)

				// Mouse Move
				if (socket != null) {
					let px, py;
					for (let i = 0; i < players.length; i++) {
						if (players[i][0] == player) {
							px = players[i][1][0] + 40 - scroll[0];
							py = players[i][1][1] + 40 - scroll[1];
						};
					};
					let fx = lastClick[0] - px;
					let fy = lastClick[1] - py;
					let angle = Math.atan(fy/fx);
					let deg = (angle * 180) / Math.PI;
					if (lastClick[0] < px) deg += 180;
					if (deg == null || deg == undefined) deg = 0;
					socket.emit("mmove", {
						angle: deg
					});
				};
			};
		}, 20);

		// Inputs
		let inputs = [false, false, false, false, [false, 0, 0]];

		// Click
		function  clickLocation( canvas, evt ) {
			var rect = canvas.getBoundingClientRect();
			let scaleX = canvas.width / rect.width;
			let scaleY = canvas.height / rect.height;
			return {
    			x: (evt.clientX - rect.left) * scaleX,
    			y: (evt.clientY - rect.top) * scaleY
			}
		}

		// Clicks
		canvas.addEventListener("mousedown", (event) => {
			openFullscreen(canvas)
			// No
			if (socket == null) {
				if (playButton.click(canvas, event)) {
					shotSound1.load()
					shotSound2.load()
					shotSound3.load()
					shotSound4.load()
					shotSound5.load()
					shotSound6.load()
					shotSound7.load()
					shotSound8.load()
					shotSound9.load()
					shotSound10.load()
					shotSound11.load()
					shotSound12.load()
					shotSound13.load()
					shotSound14.load()
					shotSound15.load()
					shotSound16.load()
					jumpSound1.load()
					jumpSound2.load()
					jumpSound3.load()
					jumpSound4.load()
					landSound1.load()
					landSound2.load()
					landSound3.load()
					landSound4.load()
					landSound5.load()
					landSound6.load()
					landSound7.load()
					landSound8.load()
					dieSound.load()

					// Fetch Ip
					fetch("http://localhost:3000/api/serverIp").then(res => {return res.json()}).then(data => {

						// Game Server
						socket = io( "http://localhost" + ":5000/")
						menu = false;

						// Mouse Move
						canvas.addEventListener("mousemove", e => {
							let { x,y } = clickLocation(canvas, e);
							lastClick = [x,y];
							let px, py;
							for (let i = 0; i < players.length; i++) {
								if (players[i][0] == player) {
									px = players[i][1][0] + 40 - scroll[0]
									py = players[i][1][1] + 40 - scroll[1]
								};
							};
							let fx = x - px;
							let fy = y - py;
							let angle = Math.atan(fy/fx);
							let deg = (angle * 180) / Math.PI;
							if (x < px) deg += 180;
							if (deg == null || deg == undefined) deg = 0;
							socket.emit("mmove", {
								angle: deg
							});
						});

						// Connect
						socket.on("connect", () => {
							socket.emit("authentication", document.cookie);
						});

						// Map
						socket.on("map", (dat) => {
							map = dat;
						});

						// Users
						socket.on("users", (dat) => {
							console.log("rec")
							players = dat;
						});

						// Player
						socket.on("player", (dat) => {
							player = dat;
						});

						// Bullets
						socket.on("bullets", (dat) => {
							bullets = dat;
						});

						// Health
						socket.on("health", (data) => {
							health = data;
						});

						// Directions
						socket.on("directions", (data) => {
							directions = data;
						});

						// Disc
						socket.on("disc", () => {
							window.location.reload();
						})

						// Ang
						socket.on("ang", (data) => {
							angles = data;
						});

						// Die
						socket.on("die", () => {
							dieSound.volume = 0.5;
							dieSound.play();
						});

						// Ju
						socket.on("ju", () => {
							// Jump Sound
							jumpSound1.volume = 0.025;
							jumpSound2.volume = 0.025;
							jumpSound3.volume = 0.025;
							jumpSound4.volume = 0.025;
							if (jc == 5) jc = 1;
							if (jc == 1) jumpSound1.play();
							if (jc == 2) jumpSound2.play();
							if (jc == 3) jumpSound3.play();
							if (jc == 4) jumpSound4.play();
							jc += 1;
						});

						// La
						socket.on("la", () => {
							// Volume
							landSound1.volume = 0.2
							landSound2.volume = 0.2
							landSound3.volume = 0.2
							landSound4.volume = 0.2
							landSound5.volume = 0.2
							landSound6.volume = 0.2
							landSound7.volume = 0.2
							landSound8.volume = 0.2
							if (lc == 1) landSound1.play();
							if (lc == 2) landSound2.play();
							if (lc == 3) landSound3.play();
							if (lc == 4) landSound4.play();
							if (lc == 5) landSound5.play();
							if (lc == 6) landSound6.play();
							if (lc == 7) landSound7.play();
							if (lc == 8) landSound8.play();
							if (lc == 9) lc = 1;
							lc += 1;
						});

						// Inputs
						setInterval(()=>{
							socket.emit("move", inputs)
						}, 2);
					});
				}
			} else {
				for (let i = 0; i < players.length; i++) {
					if (players[i] != 0) {
						if (players[i][0] == player) {
							let { x, y } = clickLocation(canvas, event);
							let playerX = players[i][1][0] + 40 - scroll[0];
							let playerY = players[i][1][1] + 40 - scroll[1];
							// Shot Sounds
							if (shotnum == 17) shotnum = 1;
							if (shotnum == 1) shotSound1.play();
							if (shotnum == 2) shotSound2.play();
							if (shotnum == 3) shotSound3.play();
							if (shotnum == 4) shotSound4.play();
							if (shotnum == 5) shotSound5.play();
							if (shotnum == 6) shotSound6.play();
							if (shotnum == 7) shotSound7.play();
							if (shotnum == 8) shotSound8.play();
							if (shotnum == 9) shotSound9.play();
							if (shotnum == 10) shotSound10.play();
							if (shotnum == 11) shotSound11.play();
							if (shotnum == 12) shotSound12.play();
							if (shotnum == 13) shotSound13.play();
							if (shotnum == 14) shotSound14.play();
							if (shotnum == 15) shotSound15.play();
							if (shotnum == 16) shotSound16.play();
							shotnum += 1;
							// Click
							socket.emit("click", {
								clickX: x,
								clickY: y,
								dx: x - playerX,
								dy: y - playerY,
								px: players[i][1][0] + 35,
								py: players[i][1][1] + 35
							});
						};
					};
				};
			};
		});

		// Keyboard
		document.addEventListener("keydown", e => {
			if (socket != null) {
				if (e.key == "w") {
					inputs[0] = true;	
				};
				if (e.key == "a") {
					inputs[1] = true;
				};
				if (e.key == "s") {
					inputs[2] = true;
				};
				if (e.key == "d") {
					inputs[3] = true;
				};
			};
		});
		document.addEventListener("keyup", e => {
			if (socket != null) {
				if (e.key == "w") {
					inputs[0] = false;
				};
				if (e.key == "a") {
					inputs[1] = false;
				};
				if (e.key == "s") {
					inputs[2] = false;
				};
				if (e.key == "d") {
					inputs[3] = false;
				};
			};
		});
	}, []);

	// Page
	return (
    	<div>
			<Header/>
      		<Title title = "Play"/>
      		<div className = { styles.play }>
      			<canvas id="myCanvas" width="1920" height="1080" ref = {canvasRef}></canvas>
      		</div>
      		<Footer/>
    	</div>
  	);
};