Implémentation du jeu dans svelte HOPE

srcs/requirements/svelte/api_front/public/game/audio.ts

@@ -1,16 +0,0 @@
-
-import * as c from "./constants.js"
-
-export const soundPongArr: HTMLAudioElement[] = [];
-export const soundRoblox = new Audio("http://localhost:8080/sound/roblox-oof.ogg");
-
-export function initAudio(muteFlag: boolean)
-{
-	for	(let i = 0; i <= 32; i++) {
-		soundPongArr.push(new Audio("http://localhost:8080/sound/pong/"+i+".ogg"));
-		soundPongArr[i].volume = c.soundPongVolume;
-		soundPongArr[i].muted = muteFlag;
-	}
-	soundRoblox.volume = c.soundRobloxVolume;
-	soundRoblox.muted = muteFlag;
-}

srcs/requirements/svelte/api_front/public/game/class/Event.ts

@@ -1,107 +0,0 @@
-
-import * as en from "../enums.js"
-
-/* From Server */
-class ServerEvent {
-	type: en.EventTypes;
-	constructor(type: en.EventTypes = 0) {
-		this.type = type;
-	}
-}
-
-class EventAssignId extends ServerEvent {
-	id: string;
-	constructor(id: string) {
-		super(en.EventTypes.assignId);
-		this.id = id;
-	}
-}
-
-class EventMatchmakingComplete extends ServerEvent {
-	side: en.PlayerSide;
-	constructor(side: en.PlayerSide) {
-		super(en.EventTypes.matchmakingComplete);
-		this.side = side;
-	}
-}
-
-class EventGameUpdate extends ServerEvent {
-	playerLeft = {
-		y: 0
-	};
-	playerRight = {
-		y: 0
-	};
-	ballsArr: {
-		x: number,
-		y: number,
-		dirX: number,
-		dirY: number,
-		speed: number
-	}[] = [];
-	wallTop? = {
-		y: 0
-	};
-	wallBottom? = {
-		y: 0
-	};
-	lastInputId = 0;
-	constructor() { // TODO: constructor that take GameComponentsServer maybe ?
-		super(en.EventTypes.gameUpdate);
-	}
-}
-
-class EventScoreUpdate extends ServerEvent {
-	scoreLeft: number;
-	scoreRight: number;
-	constructor(scoreLeft: number, scoreRight: number) {
-		super(en.EventTypes.scoreUpdate);
-		this.scoreLeft = scoreLeft;
-		this.scoreRight = scoreRight;
-	}
-}
-
-class EventMatchEnd extends ServerEvent {
-	winner: en.PlayerSide;
-	constructor(winner: en.PlayerSide) {
-		super(en.EventTypes.matchEnd);
-		this.winner = winner;
-	}
-}
-
-
-/* From Client */
-class ClientEvent {
-	type: en.EventTypes; // readonly ?
-	constructor(type: en.EventTypes = 0) {
-		this.type = type;
-	}
-}
-
-class ClientAnnounce extends ClientEvent {
-	role: en.ClientRole;
-	clientId: string;
-	matchOptions: en.MatchOptions;
-	constructor(role: en.ClientRole, matchOptions: en.MatchOptions, clientId: string = "") {
-		super(en.EventTypes.clientAnnounce);
-		this.role = role;
-		this.clientId = clientId;
-		this.matchOptions = matchOptions;
-	}
-}
-
-class EventInput extends ClientEvent {
-	input: en.InputEnum;
-	id: number;
-	constructor(input: en.InputEnum = en.InputEnum.noInput, id: number = 0) {
-		super(en.EventTypes.clientInput);
-		this.input = input;
-		this.id = id;
-	}
-}
-
-export {
-	ServerEvent, EventAssignId, EventMatchmakingComplete,
-	EventGameUpdate, EventScoreUpdate, EventMatchEnd,
-	ClientEvent, ClientAnnounce, EventInput
-}

srcs/requirements/svelte/api_front/public/game/class/GameArea.ts

@@ -1,38 +0,0 @@
-
-import * as c from ".././constants.js"
-
-class GameArea {
-	keys: string[] = [];
-	handleInputInterval: number = 0;
-	gameLoopInterval: number = 0;
-	drawLoopInterval: number = 0;
-	canvas: HTMLCanvasElement;
-	ctx: CanvasRenderingContext2D;
-	constructor() {
-		this.canvas = document.createElement("canvas");
-		this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
-		this.canvas.width = c.CanvasWidth;
-		this.canvas.height = c.CanvasWidth / c.CanvasRatio;
-		let container = document.getElementById("canvas_container");
-		if (container)
-			container.insertBefore(this.canvas, container.childNodes[0]);
-	}
-	addKey(key: string) {
-		key = key.toLowerCase();
-		var i = this.keys.indexOf(key);
-		if (i == -1)
-			this.keys.push(key);
-	}
-	deleteKey(key: string) {
-		key = key.toLowerCase();
-		var i = this.keys.indexOf(key);
-		if (i != -1) {
-			this.keys.splice(i, 1);
-		}
-	}
-	clear() {
-		this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-	}
-}
-
-export {GameArea}

srcs/requirements/svelte/api_front/public/game/class/GameComponents.ts

@@ -1,65 +0,0 @@
-
-import * as c from "../constants.js"
-import * as en from "../../shared_js/enums.js"
-import { VectorInteger } from "./Vector.js";
-import { Rectangle, MovingRectangle, Racket, Ball } from "./Rectangle.js";
-import { random } from "../utils.js";
-
-class GameComponents {
-	wallTop: Rectangle | MovingRectangle;
-	wallBottom: Rectangle | MovingRectangle;
-	playerLeft: Racket;
-	playerRight: Racket;
-	ballsArr: Ball[] = [];
-	constructor(options: en.MatchOptions)
-	{
-		const pos = new VectorInteger;
-
-		// Rackets
-		pos.assign(0+c.pw, c.h_mid-c.ph/2);
-		this.playerLeft = new Racket(pos, c.pw, c.ph, c.racketSpeed);
-		pos.assign(c.w-c.pw-c.pw, c.h_mid-c.ph/2);
-		this.playerRight = new Racket(pos, c.pw, c.ph, c.racketSpeed);
-	
-		// Balls
-		let ballsCount = 1;
-		if (options & en.MatchOptions.multiBalls) {
-			ballsCount = c.multiBallsCount;
-		}
-		pos.assign(-c.ballSize, -c.ballSize); // ball out =)
-		while (this.ballsArr.length < ballsCount) {
-			this.ballsArr.push(new Ball(pos, c.ballSize, c.ballSpeed, c.ballSpeedIncrease))
-		}
-		this.ballsArr.forEach((ball) => {
-			ball.dir.x = 1;
-			if (random() > 0.5) {
-				ball.dir.x *= -1;
-			}
-
-			ball.dir.y = random(0, 0.2);
-			if (random() > 0.5) {
-				ball.dir.y *= -1;
-			}
-
-			ball.dir = ball.dir.normalized();
-		});
-
-		// Walls
-		if (options & en.MatchOptions.movingWalls) {
-			pos.assign(0, 0);
-			this.wallTop = new MovingRectangle(pos, c.w, c.wallSize, c.movingWallSpeed);
-			(<MovingRectangle>this.wallTop).dir.y = -1;
-			pos.assign(0, c.h-c.wallSize);
-			this.wallBottom = new MovingRectangle(pos, c.w, c.wallSize, c.movingWallSpeed);
-			(<MovingRectangle>this.wallBottom).dir.y = 1;
-		}
-		else {
-			pos.assign(0, 0);
-			this.wallTop = new Rectangle(pos, c.w, c.wallSize);
-			pos.assign(0, c.h-c.wallSize);
-			this.wallBottom = new Rectangle(pos, c.w, c.wallSize);
-		}
-	}
-}
-
-export {GameComponents}

srcs/requirements/svelte/api_front/public/game/class/GameComponentsClient.ts

@@ -1,114 +0,0 @@
-
-import * as c from "../constants.js"
-import * as en from "../../shared_js/enums.js"
-import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
-import { TextElem, TextNumericValue } from "./Text.js";
-import { RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line } from "./RectangleClient.js";
-import { GameComponents } from "../../shared_js/class/GameComponents.js";
-import { MovingRectangle } from "../../shared_js/class/Rectangle.js";
-
-class GameComponentsExtensionForClient extends GameComponents {
-	wallTop: RectangleClient | MovingRectangleClient;
-	wallBottom: RectangleClient | MovingRectangleClient;
-	playerLeft: RacketClient;
-	playerRight: RacketClient;
-	ballsArr: BallClient[];
-	constructor(options: en.MatchOptions, ctx: CanvasRenderingContext2D)
-	{
-		super(options);
-
-		// Rackets
-		const basePL = this.playerLeft;
-		const basePR = this.playerRight;
-		this.playerLeft = new RacketClient(
-		basePL.pos, basePL.width, basePL.height, basePL.baseSpeed,
-		ctx, "white");
-		this.playerRight = new RacketClient(
-		basePR.pos, basePR.width, basePR.height, basePR.baseSpeed,
-		ctx, "white");
-
-		// Balls
-		const newBallsArr: BallClient[] = [];
-		this.ballsArr.forEach((ball) => {
-			newBallsArr.push(new BallClient(ball.pos, ball.width, ball.baseSpeed, ball.speedIncrease,
-			ctx, "white")
-			);
-		});
-		this.ballsArr = newBallsArr;
-
-		// Walls
-		if (options & en.MatchOptions.movingWalls)
-		{
-			const baseWT = <MovingRectangle>this.wallTop;
-			const baseWB = <MovingRectangle>this.wallBottom;
-
-			this.wallTop = new MovingRectangleClient(baseWT.pos, baseWT.width, baseWT.height, baseWT.baseSpeed,
-			ctx, "grey");
-			(<MovingRectangleClient>this.wallTop).dir.assign(baseWT.dir.x, baseWT.dir.y);
-			
-			this.wallBottom = new MovingRectangleClient(baseWB.pos, baseWB.width, baseWB.height, baseWB.baseSpeed,
-			ctx, "grey");
-			(<MovingRectangleClient>this.wallBottom).dir.assign(baseWB.dir.x, baseWB.dir.y);
-		}
-		else
-		{
-			const baseWT = this.wallTop;
-			const baseWB = this.wallBottom;
-			this.wallTop = new RectangleClient(baseWT.pos, baseWT.width, baseWT.height,
-			ctx, "grey");
-			this.wallBottom = new RectangleClient(baseWB.pos, baseWB.width, baseWB.height,
-			ctx, "grey");
-		}
-	}
-}
-
-
-class GameComponentsClient extends GameComponentsExtensionForClient {
-	midLine: Line;
-	scoreLeft: TextNumericValue;
-	scoreRight: TextNumericValue;
-	text1: TextElem;
-
-	w_grid_mid: RectangleClient;
-	w_grid_u1: RectangleClient;
-	w_grid_d1: RectangleClient;
-	h_grid_mid: RectangleClient;
-	h_grid_u1: RectangleClient;
-	h_grid_d1: RectangleClient;
-	constructor(options: en.MatchOptions, ctx: CanvasRenderingContext2D)
-	{
-		super(options, ctx);
-		let pos = new VectorInteger;
-		// Scores
-		pos.assign(c.w_mid-c.scoreSize*1.6, c.scoreSize*1.5);
-		this.scoreLeft = new TextNumericValue(pos, c.scoreSize, ctx, "white");
-		pos.assign(c.w_mid+c.scoreSize*1.1, c.scoreSize*1.5);
-		this.scoreRight = new TextNumericValue(pos, c.scoreSize, ctx, "white");
-		this.scoreLeft.value = 0;
-		this.scoreRight.value = 0;
-		
-		// Text
-		pos.assign(0, c.h_mid);
-		this.text1 = new TextElem(pos, Math.floor(c.w/8), ctx, "white");
-	
-		// Dotted Midline
-		pos.assign(c.w_mid-c.midLineSize/2, 0+c.wallSize);
-		this.midLine = new Line(pos, c.midLineSize, c.h-c.wallSize*2, ctx, "white", 15);
-	
-		// Grid
-		pos.assign(0, c.h_mid);
-		this.w_grid_mid = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
-		pos.assign(0, c.h/4);
-		this.w_grid_u1 = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
-		pos.assign(0, c.h-c.h/4);
-		this.w_grid_d1 = new RectangleClient(pos, c.w, c.gridSize, ctx, "darkgreen");
-		pos.assign(c.w_mid, 0);
-		this.h_grid_mid = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
-		pos.assign(c.w/4, 0);
-		this.h_grid_u1 = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
-		pos.assign(c.w-c.w/4, 0);
-		this.h_grid_d1 = new RectangleClient(pos, c.gridSize, c.h, ctx, "darkgreen");
-	}
-}
-
-export {GameComponentsClient}

srcs/requirements/svelte/api_front/public/game/class/InputHistory.ts

@@ -1,16 +0,0 @@
-
-import * as en from "../../shared_js/enums.js"
-import * as ev from "../../shared_js/class/Event.js"
-
-class InputHistory {
-	input: en.InputEnum;
-	id: number;
-	deltaTime: number;
-	constructor(inputState: ev.EventInput, deltaTime: number) {
-		this.input = inputState.input;
-		this.id = inputState.id;
-		this.deltaTime = deltaTime;
-	}
-}
-
-export {InputHistory}

srcs/requirements/svelte/api_front/public/game/class/Rectangle.ts

@@ -1,144 +0,0 @@
-
-import { Vector, VectorInteger } from "./Vector.js";
-import { Component, Moving } from "./interface.js";
-import * as c from "../constants.js"
-
-class Rectangle implements Component {
-	pos: VectorInteger;
-	width: number;
-	height: number;
-	constructor(pos: VectorInteger, width: number, height: number) {
-		this.pos = new VectorInteger(pos.x, pos.y);
-		this.width = width;
-		this.height = height;
-	}
-	collision(collider: Rectangle): boolean {
-		const thisLeft = this.pos.x;
-		const thisRight = this.pos.x + this.width;
-		const thisTop = this.pos.y;
-		const thisBottom = this.pos.y + this.height;
-		const colliderLeft = collider.pos.x;
-		const colliderRight = collider.pos.x + collider.width;
-		const colliderTop = collider.pos.y;
-		const colliderBottom = collider.pos.y + collider.height;
-		if ((thisBottom < colliderTop)
-		|| (thisTop > colliderBottom)
-		|| (thisRight < colliderLeft)
-		|| (thisLeft > colliderRight)) {
-			return false;
-		}
-		else {
-			return true;
-		}
-	}
-}
-
-class MovingRectangle extends Rectangle implements Moving {
-	dir: Vector = new Vector(0,0);
-	speed: number;
-	readonly baseSpeed: number;
-	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number) {
-		super(pos, width, height);
-		this.baseSpeed = baseSpeed;
-		this.speed = baseSpeed;
-	}
-	move(delta: number) { // Math.floor WIP until VectorInteger debug
-		// console.log(`delta: ${delta}, speed: ${this.speed}, speed*delta: ${this.speed * delta}`);
-		// this.pos.x += Math.floor(this.dir.x * this.speed * delta);
-		// this.pos.y += Math.floor(this.dir.y * this.speed * delta);
-		this.pos.x += this.dir.x * this.speed * delta;
-		this.pos.y += this.dir.y * this.speed * delta;
-	}
-	moveAndCollide(delta: number, colliderArr: Rectangle[]) {
-		this._moveAndCollideAlgo(delta, colliderArr);
-	}
-	protected _moveAndCollideAlgo(delta: number, colliderArr: Rectangle[]) {
-		let oldPos = new VectorInteger(this.pos.x, this.pos.y);
-		this.move(delta);
-		if (colliderArr.some(this.collision, this)) {
-			this.pos = oldPos;
-		}
-	}
-}
-
-class Racket extends MovingRectangle {
-	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number) {
-		super(pos, width, height, baseSpeed);
-	}
-	moveAndCollide(delta: number, colliderArr: Rectangle[]) {
-		// let oldPos = new VectorInteger(this.pos.x, this.pos.y); // debug
-		this._moveAndCollideAlgo(delta, colliderArr);
-		// console.log(`y change: ${this.pos.y - oldPos.y}`);
-	}
-}
-
-class Ball extends MovingRectangle {
-	readonly speedIncrease: number;
-	ballInPlay: boolean = false;
-	constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number) {
-		super(pos, size, size, baseSpeed);
-		this.speedIncrease = speedIncrease;
-	}
-	bounce(collider?: Rectangle) {
-		this._bounceAlgo(collider);
-	}
-	protected _bounceAlgo(collider?: Rectangle) {
-		/* Could be more generic, but testing only Racket is enough,
-		because in Pong collider can only be Racket or Wall. */
-		if (collider instanceof Racket) {
-			this._bounceRacket(collider);
-		}
-		else {
-			this._bounceWall();
-		}
-	}
-	moveAndBounce(delta: number, colliderArr: Rectangle[]) {
-		this.move(delta);
-		let i = colliderArr.findIndex(this.collision, this);
-		if (i != -1)
-		{
-			this.bounce(colliderArr[i]);
-			this.move(delta);
-		}
-	}
-	protected _bounceWall() { // Should be enough for Wall
-		this.dir.y = this.dir.y * -1;
-	}
-	protected _bounceRacket(racket: Racket) {
-		this._bounceRacketAlgo(racket);
-	}
-	protected _bounceRacketAlgo(racket: Racket) {
-		this.speed += this.speedIncrease;
-
-		let x = this.dir.x * -1;
-
-		const angleFactorDegree = 60;
-		const angleFactor = angleFactorDegree / 90;
-		const racketHalf = racket.height/2;
-		const ballMid = this.pos.y + this.height/2;
-		const racketMid = racket.pos.y + racketHalf;
-
-		let impact = ballMid - racketMid;
-		const horizontalMargin = racketHalf * 0.15;
-		if (impact < horizontalMargin && impact > -horizontalMargin) {
-			impact = 0;
-		}
-		else if (impact > 0) {
-			impact = impact - horizontalMargin;
-		}
-		else if (impact < 0) {
-			impact = impact + horizontalMargin;
-		}
-
-		let y = impact / (racketHalf - horizontalMargin) * angleFactor;
-
-		this.dir.assign(x, y);
-		// Normalize Vector (for consistency in speed independent of direction)
-		if (c.normalizedSpeed) {
-			this.dir = this.dir.normalized();
-		}
-		// console.log(`x: ${this.dir.x}, y: ${this.dir.y}`);
-	}
-}
-
-export {Rectangle, MovingRectangle, Racket, Ball}

srcs/requirements/svelte/api_front/public/game/class/RectangleClient.ts

@@ -1,141 +0,0 @@
-
-import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
-import { Component, GraphicComponent, Moving } from "../../shared_js/class/interface.js";
-import { Rectangle, MovingRectangle, Racket, Ball } from "../../shared_js/class/Rectangle.js";
-import { soundPongArr } from "../audio.js"
-import { random } from "../utils.js";
-
-function updateRectangle(this: RectangleClient) {
-	this.ctx.fillStyle = this.color;
-	this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
-}
-
-function clearRectangle(this: RectangleClient, pos?: VectorInteger) {
-	if (pos)
-		this.ctx.clearRect(pos.x, pos.y, this.width, this.height);
-	else
-		this.ctx.clearRect(this.pos.x, this.pos.y, this.width, this.height);
-}
-
-class RectangleClient extends Rectangle implements GraphicComponent {
-	ctx: CanvasRenderingContext2D;
-	color: string;
-	update: () => void;
-	clear: (pos?: VectorInteger) => void;
-	constructor(pos: VectorInteger, width: number, height: number,
-			ctx: CanvasRenderingContext2D, color: string)
-	{
-		super(pos, width, height);
-		this.ctx = ctx;
-		this.color = color;
-		this.update = updateRectangle;
-		this.clear = clearRectangle;
-	}
-	// update() {
-	// 	this.ctx.fillStyle = this.color;
-	// 	this.ctx.fillRect(this.pos.x, this.pos.y, this.width, this.height);
-	// }
-	// clear(pos?: VectorInteger) {
-	// 	if (pos)
-	// 		this.ctx.clearRect(pos.x, pos.y, this.width, this.height);
-	// 	else
-	// 		this.ctx.clearRect(this.pos.x, this.pos.y, this.width, this.height);
-	// }
-}
-
-class MovingRectangleClient extends MovingRectangle implements GraphicComponent {
-	ctx: CanvasRenderingContext2D;
-	color: string;
-	update: () => void;
-	clear: (pos?: VectorInteger) => void;
-	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number,
-			ctx: CanvasRenderingContext2D, color: string)
-	{
-		super(pos, width, height, baseSpeed);
-		this.ctx = ctx;
-		this.color = color;
-		this.update = updateRectangle;
-		this.clear = clearRectangle;
-	}
-}
-
-class RacketClient extends Racket implements GraphicComponent {
-	ctx: CanvasRenderingContext2D;
-	color: string;
-	update: () => void;
-	clear: (pos?: VectorInteger) => void;
-	constructor(pos: VectorInteger, width: number, height: number, baseSpeed: number,
-			ctx: CanvasRenderingContext2D, color: string)
-	{
-		super(pos, width, height, baseSpeed);
-		this.ctx = ctx;
-		this.color = color;
-		this.update = updateRectangle;
-		this.clear = clearRectangle;
-	}
-}
-
-class BallClient extends Ball implements GraphicComponent {
-	ctx: CanvasRenderingContext2D;
-	color: string;
-	update: () => void;
-	clear: (pos?: VectorInteger) => void;
-	constructor(pos: VectorInteger, size: number, baseSpeed: number, speedIncrease: number,
-		ctx: CanvasRenderingContext2D, color: string)
-	{
-		super(pos, size, baseSpeed, speedIncrease);
-		this.ctx = ctx;
-		this.color = color;
-		this.update = updateRectangle;
-		this.clear = clearRectangle;
-	}
-	bounce(collider?: Rectangle) {
-		this._bounceAlgo(collider);
-		soundPongArr[ Math.floor(random(0, soundPongArr.length)) ].play();
-	}
-	/* protected _bounceRacket(collider: Racket) {
-		this._bounceRacketAlgo(collider);
-		soundRoblox.play();
-	} */
-}
-
-function updateLine(this: Line) {
-	this.ctx.fillStyle = this.color;
-	let pos: VectorInteger = new VectorInteger;
-	let i = 0;
-	while (i < this.segmentCount)
-	{
-		// for Horizontal Line
-		// pos.y = this.pos.y;
-		// pos.x = this.pos.x + this.segmentWidth * i;
-		pos.x = this.pos.x;
-		pos.y = this.pos.y + this.segmentHeight * i;
-		this.ctx.fillRect(pos.x, pos.y, this.segmentWidth, this.segmentHeight);
-		i += 2;
-	}
-}
-
-class Line extends RectangleClient {
-	gapeCount: number = 0;
-	segmentCount: number;
-	segmentWidth: number;
-	segmentHeight: number;
-	constructor(pos: VectorInteger, width: number, height: number,
-			ctx: CanvasRenderingContext2D, color: string, gapeCount?: number)
-	{
-		super(pos, width, height, ctx, color);
-		this.update = updateLine;
-		if (gapeCount)
-			this.gapeCount = gapeCount;
-		this.segmentCount = this.gapeCount * 2 + 1;
-
-		this.segmentWidth = this.width;
-		this.segmentHeight = this.height / this.segmentCount;
-
-		// for Horizontal Line
-		// this.segmentWidth = this.width / this.segmentCount;
-		// this.segmentHeight = this.height;
-	}
-}
-
-export {RectangleClient, MovingRectangleClient, RacketClient, BallClient, Line}

srcs/requirements/svelte/api_front/public/game/class/Text.ts

@@ -1,58 +0,0 @@
-
-import { Vector, VectorInteger } from "../../shared_js/class/Vector.js";
-import { Component } from "../../shared_js/class/interface.js";
-
-// conflict with Text
-class TextElem implements Component {
-	ctx: CanvasRenderingContext2D;
-	pos: VectorInteger;
-	color: string;
-	size: number;
-	font: string;
-	text: string = "";
-	constructor(pos: VectorInteger, size: number,
-			ctx: CanvasRenderingContext2D, color: string, font: string = "Bit5x3")
-	{
-		// this.pos = Object.assign({}, pos); // create bug, Uncaught TypeError: X is not a function
-		this.pos = new VectorInteger(pos.x, pos.y);
-		this.size = size;
-		this.ctx = ctx;
-		this.color = color;
-		this.font = font;
-	}
-	update() {
-		this.ctx.font = this.size + "px" + " " + this.font;
-		this.ctx.fillStyle = this.color;
-		this.ctx.fillText(this.text, this.pos.x, this.pos.y);
-	}
-	clear() {
-		// clear no very accurate for Text 
-		// https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics
-		let textMetric = this.ctx.measureText(this.text);
-		// console.log("textMetric.width = "+textMetric.width);
-		// console.log("size = "+this.size);
-		// console.log("x = "+this.pos.x);
-		// console.log("y = "+this.pos.y);
-		this.ctx.clearRect(this.pos.x - 1, this.pos.y-this.size + 1, textMetric.width, this.size);
-		// +1 and -1 because float imprecision (and Math.floor() with VectorInteger dont work for the moment)
-		// (or maybe its textMetric imprecision ?)
-	}
-}
-
-class TextNumericValue extends TextElem {
-	private _value: number = 0;
-	constructor(pos: VectorInteger, size: number,
-			ctx: CanvasRenderingContext2D, color: string, font?: string)
-	{
-		super(pos, size, ctx, color, font);
-	}
-	get value() {
-		return this._value;
-	}
-	set value(v: number) {
-		this._value = v;
-		this.text = v.toString();
-	}
-}
-
-export {TextElem, TextNumericValue}

srcs/requirements/svelte/api_front/public/game/class/Vector.ts

@@ -1,49 +0,0 @@
-
-class Vector {
-	x: number;
-	y: number;
-	constructor(x: number = 0, y: number = 0) {
-		this.x = x;
-		this.y = y;
-	}
-	assign(x: number, y: number) {
-		this.x = x;
-		this.y = y;
-	}
-	normalized() : Vector {
-		const normalizationFactor = Math.abs(this.x) + Math.abs(this.y);
-		return new Vector(this.x/normalizationFactor, this.y/normalizationFactor);
-	}
-}
-
-class VectorInteger extends Vector {
-	// PLACEHOLDER
-	// VectorInteger with set/get dont work (No draw on the screen). Why ?
-}
-
-/* 
-class VectorInteger {
-	// private _x: number = 0;
-	// private _y: number = 0;
-	// constructor(x: number = 0, y: number = 0) {
-	// 	this._x = x;
-	// 	this._y = y;
-	// }
-	// get x(): number {
-	// 	return this._x;
-	// }
-	// set x(v: number) {
-	// 	// this._x = Math.floor(v);
-	// 	this._x = v;
-	// }
-	// get y(): number {
-	// 	return this._y;
-	// }
-	// set y(v: number) {
-	// 	// this._y = Math.floor(v);
-	// 	this._y = v;
-	// }
-}
-*/
-
-export {Vector, VectorInteger}

srcs/requirements/svelte/api_front/public/game/class/interface.ts

@@ -1,21 +0,0 @@
-
-import { Vector, VectorInteger } from "./Vector.js";
-
-interface Component {
-	pos: VectorInteger;
-}
-
-interface GraphicComponent extends Component {
-	ctx: CanvasRenderingContext2D;
-	color: string;
-	update: () => void;
-	clear: (pos?: VectorInteger) => void;
-}
-
-interface Moving {
-	dir: Vector;
-	speed: number; // pixel per second
-	move(delta: number): void;
-}
-
-export {Component, GraphicComponent, Moving}

srcs/requirements/svelte/api_front/public/game/constants copy.ts

@@ -1,26 +0,0 @@
-
-export	const CanvasWidth = 1500;
-export	const CanvasRatio = 1.66666;
-/* ratio 5/3 (1.66) */
-
-export	const w = CanvasWidth;
-export	const h = CanvasWidth / CanvasRatio;
-export	const w_mid = Math.floor(w/2);
-export	const h_mid = Math.floor(h/2);
-export	const pw = Math.floor(w*0.017);
-export	const ph = pw*6;
-export	const ballSize = pw;
-export	const wallSize = Math.floor(w*0.01);
-export	const racketSpeed = Math.floor(w*0.66); // pixel per second
-export	const ballSpeed = Math.floor(w*0.66); // pixel per second
-export	const ballSpeedIncrease = Math.floor(ballSpeed*0.05); // pixel per second
-
-export	const normalizedSpeed = false; // for consistency in speed independent of direction
-
-export	const matchStartDelay = 3000; // millisecond
-export	const newRoundDelay = 1500; // millisecond
-
-// Game Variantes
-export	const multiBallsCount = 3;
-export	const movingWallPosMax = Math.floor(w*0.12);
-export	const movingWallSpeed = Math.floor(w*0.08);

srcs/requirements/svelte/api_front/public/game/constants.ts

@@ -1,18 +0,0 @@
-
-import { w } from "../shared_js/constants.js"
-export * from "../shared_js/constants.js"
-
-export	const midLineSize = Math.floor(w/150);
-export	const scoreSize = Math.floor(w/16); 
-export	const gridSize = Math.floor(w/500);
-
-// min interval on Firefox seems to be 15. Chrome can go lower.
-export	const handleInputIntervalMS = 15; // millisecond
-export	const sendLoopIntervalMS = 15; // millisecond // unused
-export	const gameLoopIntervalMS = 15; // millisecond
-export	const drawLoopIntervalMS = 15; // millisecond
-
-export	const fixedDeltaTime = gameLoopIntervalMS/1000; // second
-
-export	const soundRobloxVolume = 0.3; // between 0 and 1
-export	const soundPongVolume = 0.3; // between 0 and 1

srcs/requirements/svelte/api_front/public/game/draw.ts

@@ -1,51 +0,0 @@
-
-import { pong, gc } from "./global.js"
-import * as c from "./constants.js"
-import * as en from "../shared_js/enums.js"
-import { gridDisplay } from "./handleInput.js";
-
-function drawLoop()
-{
-	pong.clear();
-	
-	if (gridDisplay) {
-		drawGrid();
-	}
-
-	drawStatic();
-
-	gc.text1.update();
-
-	drawDynamic();
-}
-
-function drawDynamic()
-{
-	gc.scoreLeft.update();
-	gc.scoreRight.update();
-	gc.playerLeft.update();
-	gc.playerRight.update();
-	gc.ballsArr.forEach((ball) => {
-		ball.update();
-	});
-}
-
-function drawStatic()
-{
-	gc.midLine.update();
-	gc.wallTop.update();
-	gc.wallBottom.update();
-}
-
-function drawGrid()
-{
-	gc.w_grid_mid.update();
-	gc.w_grid_u1.update();
-	gc.w_grid_d1.update();
-	
-	gc.h_grid_mid.update();
-	gc.h_grid_u1.update();
-	gc.h_grid_d1.update();
-}
-
-export {drawLoop}

srcs/requirements/svelte/api_front/public/game/enums.ts

@@ -1,47 +0,0 @@
-
-enum EventTypes {
-	// Class Implemented
-	gameUpdate = 1,
-	scoreUpdate,
-	matchEnd,
-	assignId,
-	matchmakingComplete,
-
-	// Generic
-	matchmakingInProgress,
-	matchStart,
-	matchNewRound, // unused
-	matchPause, // unused
-	matchResume, // unused
-
-	// Client
-	clientAnnounce,
-	clientPlayerReady,
-	clientInput,
-
-}
-
-enum InputEnum {
-	noInput = 0,
-	up = 1,
-	down,
-}
-
-enum PlayerSide {
-	left = 1,
-	right
-}
-
-enum ClientRole {
-	player = 1,
-	spectator
-}
-
-enum MatchOptions {
-	// binary flags, can be mixed
-	noOption = 0b0,
-	multiBalls = 1 << 0,
-	movingWalls = 1 << 1
-}
-
-export {EventTypes, InputEnum, PlayerSide, ClientRole, MatchOptions}

srcs/requirements/svelte/api_front/public/game/gameLoop.ts

@@ -1,49 +0,0 @@
-
-import * as c from "./constants.js";
-import * as en from "../shared_js/enums.js"
-import { gc, matchOptions, clientInfo } from "./global.js";
-import { wallsMovements } from "../shared_js/wallsMovement.js";
-
-let actual_time: number = Date.now();
-let last_time: number;
-let delta_time: number;
-
-function gameLoop()
-{
-	/* last_time = actual_time;
-	actual_time = Date.now();
-	delta_time = (actual_time - last_time) / 1000; */
-
-	delta_time = c.fixedDeltaTime;
-	// console.log(`delta_gameLoop: ${delta_time}`);
-
-	// interpolation
-	// console.log(`dir.y: ${clientInfo.opponent.dir.y}, pos.y: ${clientInfo.opponent.pos.y}, opponentNextPos.y: ${clientInfo.opponentNextPos.y}`);
-	if (clientInfo.opponent.dir.y != 0 ) {
-		opponentInterpolation(delta_time);
-	}
-
-	// client prediction
-	gc.ballsArr.forEach((ball) => {
-		ball.moveAndBounce(delta_time, [gc.wallTop, gc.wallBottom, gc.playerLeft, gc.playerRight]);
-	});
-
-	if (matchOptions & en.MatchOptions.movingWalls) {
-		wallsMovements(delta_time, gc);
-	}
-}
-
-function opponentInterpolation(delta: number)
-{
-	// interpolation
-	clientInfo.opponent.moveAndCollide(delta, [gc.wallTop, gc.wallBottom]);
-
-	if ((clientInfo.opponent.dir.y > 0 && clientInfo.opponent.pos.y > clientInfo.opponentNextPos.y)
-	||  (clientInfo.opponent.dir.y < 0 && clientInfo.opponent.pos.y < clientInfo.opponentNextPos.y))
-	{
-		clientInfo.opponent.dir.y = 0;
-		clientInfo.opponent.pos.y = clientInfo.opponentNextPos.y;
-	}
-}
-
-export {gameLoop}

srcs/requirements/svelte/api_front/public/game/global.ts

@@ -1,3 +0,0 @@
-
-export {pong, gc, matchOptions} from "./pong.js"
-export {socket, clientInfo} from "./ws.js"

srcs/requirements/svelte/api_front/public/game/handleInput.ts

@@ -1,110 +0,0 @@
-
-import { pong, gc, socket, clientInfo } from "./global.js"
-import * as ev from "../shared_js/class/Event.js"
-import * as en from "../shared_js/enums.js"
-import { InputHistory }  from "./class/InputHistory.js"
-import * as c from "./constants.js";
-
-export let gridDisplay = false;
-
-let actual_time: number = Date.now();
-let last_time: number;
-let delta_time: number;
-
-const inputState: ev.EventInput = new ev.EventInput();
-const inputHistoryArr: InputHistory[] = [];
-
-// test
-/* export function sendLoop()
-{
-	socket.send(JSON.stringify(inputState));
-} */
-
-function handleInput()
-{
-	/* last_time = actual_time;
-	actual_time = Date.now();
-	delta_time = (actual_time - last_time) / 1000; */
-
-	delta_time = c.fixedDeltaTime;
-	// console.log(`delta_time: ${delta_time}`);
-
-	inputState.id = Date.now();
-	inputState.input = en.InputEnum.noInput;
-
-	const keys = pong.keys;
-	if (keys.length !== 0)
-	{
-		if (keys.indexOf("g") != -1)
-		{
-			gridDisplay = !gridDisplay;
-			pong.deleteKey("g");
-		}
-		playerMovements(delta_time, keys);
-	}
-
-	socket.send(JSON.stringify(inputState));
-	// setTimeout(testInputDelay, 100);
-	inputHistoryArr.push(new InputHistory(inputState, delta_time));
-
-	// client prediction
-	if (inputState.input !== en.InputEnum.noInput) {
-		// TODO: peut-etre le mettre dans game loop ?
-		// Attention au delta time dans ce cas !
-		playerMovePrediction(delta_time, inputState.input);
-	}
-}
-
-function playerMovements(delta: number, keys: string[])
-{
-	if (keys.indexOf("w") !== -1 || keys.indexOf("ArrowUp".toLowerCase()) !== -1)
-	{
-		if (keys.indexOf("s") === -1 && keys.indexOf("ArrowDown".toLowerCase()) === -1) {
-			inputState.input = en.InputEnum.up;
-		}
-	}
-	else if (keys.indexOf("s") !== -1 || keys.indexOf("ArrowDown".toLowerCase()) !== -1) {
-		inputState.input = en.InputEnum.down;
-	}
-}
-
-function testInputDelay() {
-	socket.send(JSON.stringify(inputState));
-}
-
-
-function playerMovePrediction(delta: number, input: en.InputEnum)
-{
-	// client prediction
-	const racket = clientInfo.racket;
-	if (input === en.InputEnum.up) {
-		racket.dir.y = -1;
-	}
-	else if (input === en.InputEnum.down) {
-		racket.dir.y = 1;
-	}
-	racket.moveAndCollide(delta, [gc.wallTop, gc.wallBottom]);
-}
-
-function repeatInput(lastInputId: number)
-{
-	// server reconciliation
-	let i = inputHistoryArr.findIndex((value: InputHistory) => {
-		if (value.id === lastInputId) {
-			return true;
-		}
-		return false;
-	});
-
-	// console.log(`inputHistory total: ${inputHistoryArr.length}` );
-	inputHistoryArr.splice(0, i+1);
-	// console.log(`inputHistory left: ${inputHistoryArr.length}` );
-	
-	inputHistoryArr.forEach((value: InputHistory) => {
-		if (value.input !== en.InputEnum.noInput) {
-			playerMovePrediction(value.deltaTime, value.input);
-		}
-	});
-}
-
-export {handleInput, repeatInput}

srcs/requirements/svelte/api_front/public/game/pong.ts

@@ -1,99 +0,0 @@
-
-initDom();
-function initDom() {
-	document.getElementById("play_pong_button").addEventListener("click", init);
-}
-
-import * as c from "./constants.js"
-import * as en from "../shared_js/enums.js"
-import { GameArea } from "./class/GameArea.js";
-import { GameComponentsClient } from "./class/GameComponentsClient.js";
-import { handleInput } from "./handleInput.js";
-// import { sendLoop } from "./handleInput.js";
-import { gameLoop } from "./gameLoop.js"
-import { drawLoop } from "./draw.js";
-import { countdown } from "./utils.js";
-import { initWebSocket } from "./ws.js";
-import { initAudio } from "./audio.js";
-
-
-/* Keys
-	Racket: W/S OR Up/Down
-	Grid On-Off: G
-*/
-
-/* TODO: A way to delay the init of variables, but still use "const" not "let" ? */
-export let pong: GameArea;
-export let gc: GameComponentsClient;
-export let matchOptions: en.MatchOptions = en.MatchOptions.noOption;
-
-function init()
-{
-	console.log("multi_balls:"+(<HTMLInputElement>document.getElementById("multi_balls")).checked);
-	console.log("moving_walls:"+(<HTMLInputElement>document.getElementById("moving_walls")).checked);
-	console.log("sound_on:"+(<HTMLInputElement>document.getElementById("sound_on")).checked);
-
-	let soundMutedFlag = false;
-	if ( (<HTMLInputElement>document.getElementById("sound_off")).checked ) {
-		soundMutedFlag = true;
-	}
-	initAudio(soundMutedFlag);
-
-	if ( (<HTMLInputElement>document.getElementById("multi_balls")).checked ) {
-		matchOptions |= en.MatchOptions.multiBalls;
-	}
-	if ( (<HTMLInputElement>document.getElementById("moving_walls")).checked ) {
-		matchOptions |= en.MatchOptions.movingWalls;
-	}
-
-	document.getElementById("div_game_options").hidden = true;
-
-	pong = new GameArea();
-	gc = new GameComponentsClient(matchOptions, pong.ctx);
-	initWebSocket(matchOptions);
-}
-
-function matchmaking()
-{
-	console.log("Searching an opponent...");
-	gc.text1.clear();
-	gc.text1.pos.assign(c.w/5, c.h_mid);
-	gc.text1.text = "Searching...";
-	gc.text1.update();
-}
-
-function matchmakingComplete()
-{
-	console.log("Match Found !");
-	gc.text1.clear();
-	gc.text1.pos.assign(c.w/8, c.h_mid);
-	gc.text1.text = "Match Found !";
-	gc.text1.update();
-}
-
-function startGame() {
-	gc.text1.pos.assign(c.w_mid, c.h_mid+c.h/4);
-	countdown(c.matchStartDelay/1000, (count: number) => {
-		gc.text1.clear();
-		gc.text1.text = `${count}`;
-		gc.text1.update();
-	}, resumeGame);
-}
-
-function resumeGame()
-{
-	gc.text1.text = "";
-	window.addEventListener('keydown', function (e) {
-		pong.addKey(e.key);
-	});
-	window.addEventListener('keyup', function (e) {
-		pong.deleteKey(e.key);
-	});
-	pong.handleInputInterval = window.setInterval(handleInput, c.handleInputIntervalMS);
-	// pong.handleInputInterval = window.setInterval(sendLoop, c.sendLoopIntervalMS);
-	pong.gameLoopInterval = window.setInterval(gameLoop, c.gameLoopIntervalMS);
-	pong.drawLoopInterval = window.setInterval(drawLoop, c.drawLoopIntervalMS);
-}
-
-
-export {matchmaking, matchmakingComplete, startGame}

srcs/requirements/svelte/api_front/public/game/utils copy.ts

@@ -1,27 +0,0 @@
-
-import { MovingRectangle } from "./class/Rectangle.js";
-
-function random(min: number = 0, max: number = 1) {
-	return Math.random() * (max - min) + min;
-}
-
-function sleep (ms: number) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function clamp(n: number, min: number, max: number) : number
-{
-	if (n < min)
-		n = min;
-	else if (n > max)
-		n = max;
-	return (n);
-}
-
-// Typescript hack, unused
-function assertMovingRectangle(value: unknown): asserts value is MovingRectangle {
-	// if (value !== MovingRectangle) throw new Error("Not a MovingRectangle");
-	return;
-}
-
-export {random, sleep, clamp, assertMovingRectangle}

srcs/requirements/svelte/api_front/public/game/utils.ts

@@ -1,18 +0,0 @@
-
-export * from "../shared_js/utils.js"
-
-function countdown(count: number, callback?: (count: number) => void, endCallback?: () => void)
-{
-	console.log("countdown ", count);
-	if (count > 0) {
-		if (callback) {
-			callback(count);
-		}
-		setTimeout(countdown, 1000, --count, callback, endCallback);
-	}
-	else if (endCallback) {
-		endCallback();
-	}
-}
-
-export {countdown}

srcs/requirements/svelte/api_front/public/game/wallsMovement.ts

@@ -1,20 +0,0 @@
-
-import * as c from "./constants.js";
-import { MovingRectangle } from "../shared_js/class/Rectangle.js";
-import { GameComponents } from "./class/GameComponents.js";
-
-function wallsMovements(delta: number, gc: GameComponents)
-{
-	const wallTop = <MovingRectangle>gc.wallTop;
-	const wallBottom = <MovingRectangle>gc.wallBottom;
-	if (wallTop.pos.y <= 0 || wallTop.pos.y >= c.movingWallPosMax) {
-		wallTop.dir.y *= -1;
-	}
-	if (wallBottom.pos.y >= c.h-c.wallSize || wallBottom.pos.y <= c.h-c.movingWallPosMax) {
-		wallBottom.dir.y *= -1;
-	}
-	wallTop.moveAndCollide(delta, [gc.playerLeft, gc.playerRight]);
-	wallBottom.moveAndCollide(delta, [gc.playerLeft, gc.playerRight]);
-}
-
-export {wallsMovements}

srcs/requirements/svelte/api_front/public/game/ws.ts

@@ -1,182 +0,0 @@
-
-import * as c from "./constants.js"
-import { gc, matchOptions } from "./global.js"
-import * as ev from "../shared_js/class/Event.js"
-import * as en from "../shared_js/enums.js"
-import { matchmaking, matchmakingComplete, startGame } from "./pong.js";
-import { RacketClient } from "./class/RectangleClient.js";
-import { repeatInput } from "./handleInput.js";
-import { soundRoblox } from "./audio.js"
-import { sleep } from "./utils.js";
-import { Vector, VectorInteger } from "../shared_js/class/Vector.js";
-
-class ClientInfo {
-	id = "";
-	side: en.PlayerSide;
-	racket: RacketClient;
-	opponent: RacketClient;
-	opponentNextPos: VectorInteger;
-}
-
-const wsPort = 8042;
-const wsUrl = "ws://" + document.location.hostname + ":" + wsPort + "/pong";
-export let socket: WebSocket; /* TODO: A way to still use "const" not "let" ? */
-export const clientInfo = new ClientInfo();
-
-export function initWebSocket(options: en.MatchOptions)
-{
-	socket = new WebSocket(wsUrl, "json");
-	socket.addEventListener("open", (event) => {
-		socket.send(JSON.stringify( new ev.ClientAnnounce(en.ClientRole.player, options, clientInfo.id) ));
-	});
-	// socket.addEventListener("message", logListener); // for testing purpose
-	socket.addEventListener("message", preMatchListener);
-}
-
-function logListener(this: WebSocket, event: MessageEvent) {
-	console.log("%i: " + event.data, Date.now());
-}
-
-function preMatchListener(this: WebSocket, event: MessageEvent)
-{
-	const data: ev.ServerEvent = JSON.parse(event.data);
-	switch (data.type) {
-		case en.EventTypes.assignId:
-			clientInfo.id = (<ev.EventAssignId>data).id;
-			break;
-		case en.EventTypes.matchmakingInProgress:
-			matchmaking();
-			break;
-		case en.EventTypes.matchmakingComplete:
-			clientInfo.side = (<ev.EventMatchmakingComplete>data).side;
-			if (clientInfo.side === en.PlayerSide.left)
-			{
-				clientInfo.racket = gc.playerLeft;
-				clientInfo.opponent = gc.playerRight;
-			}
-			else if (clientInfo.side === en.PlayerSide.right)
-			{
-				clientInfo.racket = gc.playerRight;
-				clientInfo.opponent = gc.playerLeft;
-			}
-			clientInfo.opponentNextPos = new VectorInteger(clientInfo.opponent.pos.x, clientInfo.opponent.pos.y);
-			clientInfo.racket.color = "darkgreen"; // for testing purpose
-			socket.send(JSON.stringify( new ev.ClientEvent(en.EventTypes.clientPlayerReady) )); // TODO: set an interval/timeout to resend until matchStart response (in case of network problem)
-			matchmakingComplete();
-			break;
-		case en.EventTypes.matchStart:
-			socket.removeEventListener("message", preMatchListener);
-			socket.addEventListener("message", inGameListener);
-			startGame();
-			break;
-	}
-}
-
-function inGameListener(event: MessageEvent)
-{
-	const data: ev.ServerEvent = JSON.parse(event.data);
-	switch (data.type) {
-		case en.EventTypes.gameUpdate:
-			// setTimeout(gameUpdate, 500, data as ev.EventGameUpdate); // artificial latency for testing purpose
-			gameUpdate(data as ev.EventGameUpdate);
-			break;
-		case en.EventTypes.scoreUpdate:
-			scoreUpdate(data as ev.EventScoreUpdate);
-			break;
-		case en.EventTypes.matchEnd:
-			matchEnd(data as ev.EventMatchEnd);
-			break;
-	}
-}
-
-function gameUpdate(data: ev.EventGameUpdate)
-{
-	console.log("gameUpdate");
-
-	if (matchOptions & en.MatchOptions.movingWalls) {
-		gc.wallTop.pos.y = data.wallTop.y;
-		gc.wallBottom.pos.y = data.wallBottom.y;
-	}
-
-	data.ballsArr.forEach((ball, i) => {
-		gc.ballsArr[i].pos.assign(ball.x, ball.y);
-		gc.ballsArr[i].dir.assign(ball.dirX, ball.dirY);
-		gc.ballsArr[i].speed = ball.speed;
-	});
-	/* // Equivalent to
-	gc.ballsArr.forEach((ball, i) => {
-		ball.pos.assign(data.ballsArr[i].x, data.ballsArr[i].y);
-		ball.dir.assign(data.ballsArr[i].dirX, data.ballsArr[i].dirY);
-		ball.speed = data.ballsArr[i].speed;
-	}); */
-
-	const predictionPos = new VectorInteger(clientInfo.racket.pos.x, clientInfo.racket.pos.y); // debug
-
-	if (clientInfo.side === en.PlayerSide.left) {
-		clientInfo.racket.pos.assign(clientInfo.racket.pos.x, data.playerLeft.y);
-	}
-	else if (clientInfo.side === en.PlayerSide.right) {
-		clientInfo.racket.pos.assign(clientInfo.racket.pos.x, data.playerRight.y);
-	}
-
-	// interpolation
-	clientInfo.opponent.pos.assign(clientInfo.opponentNextPos.x, clientInfo.opponentNextPos.y);
-	if (clientInfo.side === en.PlayerSide.left) {
-		clientInfo.opponentNextPos.assign(clientInfo.opponent.pos.x, data.playerRight.y);
-	}
-	else if (clientInfo.side === en.PlayerSide.right) {
-		clientInfo.opponentNextPos.assign(clientInfo.opponent.pos.x, data.playerLeft.y);
-	}
-
-	clientInfo.opponent.dir = new Vector(
-		clientInfo.opponentNextPos.x - clientInfo.opponent.pos.x,
-		clientInfo.opponentNextPos.y - clientInfo.opponent.pos.y
-	);
-
-	if (Math.abs(clientInfo.opponent.dir.x) + Math.abs(clientInfo.opponent.dir.y) !== 0) {
-		clientInfo.opponent.dir = clientInfo.opponent.dir.normalized();
-	}
-
-	// server reconciliation
-	repeatInput(data.lastInputId);
-
-	// debug
-	if (clientInfo.racket.pos.y > predictionPos.y + 1
-	||  clientInfo.racket.pos.y < predictionPos.y - 1)
-	{
-		console.log(
-			`Reconciliation error:
-			server y:         ${data.playerLeft.y}
-			reconciliation y: ${clientInfo.racket.pos.y}
-			prediction y:     ${predictionPos.y}`
-			);
-	}
-}
-
-function scoreUpdate(data: ev.EventScoreUpdate)
-{
-	// console.log("scoreUpdate");
-	if (clientInfo.side === en.PlayerSide.left && data.scoreRight > gc.scoreRight.value) {
-		soundRoblox.play();
-	}
-	else if (clientInfo.side === en.PlayerSide.right && data.scoreLeft > gc.scoreLeft.value) {
-		soundRoblox.play();
-	}
-	gc.scoreLeft.value = data.scoreLeft;
-	gc.scoreRight.value = data.scoreRight;
-}
-
-function matchEnd(data: ev.EventMatchEnd)
-{
-	if (data.winner === clientInfo.side) {
-		gc.text1.pos.assign(c.w*0.415, c.h_mid);
-		gc.text1.text = "WIN";
-	}
-	else {
-		gc.text1.pos.assign(c.w*0.383, c.h_mid);
-		gc.text1.text = "LOSE";
-	}
-	// matchEnded = true;
-}
-
-// export let matchEnded = false;

srcs/requirements/svelte/api_front/public/index.html

@@ -4,7 +4,7 @@
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 
-	<title>Svelte app</title>
+	<title>Potato Pong</title>
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>