attashe · December 21, 2020 12:09
diff --git a/multiplayer.py b/multiplayer.py
 import json
 import time
 from flask import Flask, render_template
 from flask_socketio import SocketIO, send, emit
 from server import State, Player
 import numpy as np

 app = Flask(__name__, static_folder='./static')
 app.config['SECRET_KEY'] = 'secret!'
 socketio = SocketIO(app, cors_allowed_origins='*')

 player_dict = {}


 # GAME CONSTANTS
 # ======================
 STEP = 50

 # ======================
 def dumper(obj):
    try:
        return obj.toJSON()
    except:
        return obj.__dict__


 @app.route("/")
 def hello():
    # return render_template('multiplayer_index.html')
    with open('./templates/multiplayer_index.html', mode='r') as f:
        s = f.readlines()
    html_string = ''.join(s)
    return html_string

 @socketio.on('login')
 def login(data):
    player = Player(data['username'])
    player_dict[data['username']] = player
    State.state['users'].append(player)
    emit('message', json.dumps({'username': data['username'], 'message': 'Was logged'}))


 @socketio.on('get_state')
 def get_state():
    emit('set_state', json.dumps(State.state, default=dumper, indent=2))


 @socketio.on('up')
 def up(data):
    player_dict[data['username']].y += STEP


 @socketio.on('down')
 def down(data):
    player_dict[data['username']].y -= STEP


 @socketio.on('right')
 def right(data):
    player_dict[data['username']].x += STEP


 @socketio.on('left')
 def left(data):
    player_dict[data['username']].x -= STEP


 if __name__ == '__main__':
    socketio.run(app, host='127.0.0.1', port=5001)
diff --git a/multiplayer_index.html b/multiplayer_index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js" type="text/javascript"></script>
 </head>
 <body>
 <canvas id="canvas" width="1000px" height="1000px"></canvas>

 <script name="utils">
 function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
 }
 </script>

 <script name="authorization">
 var username = 'user' + getRandomInt(0, 123124123);
 var socket = io();
 socket.on('connect', function() {
    socket.emit('login', {username: username});
 });
 socket.on('message', function(data) {
    data = JSON.parse(data);
    console.log(data.username + ': ', data.message);
 });
 </script>

 <script name="canvas_cycle">
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var state;

 function rgb(r, g, b){
  return ["rgb(",r,",",g,",",b,")"].join("");
 }
 function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
 }

 function update(state) {
 if (state === undefined)
    return;
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 for (index in state.users) {
    player = state.users[index];
    console.log('Player', player);
    ctx.fillStyle = rgb(player.color[0], player.color[1], player.color[2]);
    ctx.fillRect(player.x, player.y, 100, 100);
 }
 }

 function render() {
  // Update and render simulation onto canvas
  requestAnimationFrame(render);
  update(state);
  // setTimeout(() => { update(); }, 100);
 }

 function FpsCtrl(fps, callback) {

    var delay = 1000 / fps,                               // calc. time per frame
        time = null,                                      // start time
        frame = -1,                                       // frame count
        tref;                                             // rAF time reference

    function loop(timestamp) {
        if (time === null) time = timestamp;              // init start time
        var seg = Math.floor((timestamp - time) / delay); // calc frame no.
        if (seg > frame) {                                // moved to next frame?
            frame = seg;                                  // update
            callback({                                    // callback function
                time: timestamp,
                frame: frame
            })
        }
        tref = requestAnimationFrame(loop)
    }

    // play status
    this.isPlaying = false;

    // set frame-rate
    this.frameRate = function(newfps) {
        if (!arguments.length) return fps;
        fps = newfps;
        delay = 1000 / fps;
        frame = -1;
        time = null;
    };

    // enable starting/pausing of the object
    this.start = function() {
        if (!this.isPlaying) {
            this.isPlaying = true;
            tref = requestAnimationFrame(loop);
        }
    };

    this.pause = function() {
        if (this.isPlaying) {
            cancelAnimationFrame(tref);
            this.isPlaying = false;
            time = null;
            frame = -1;
        }
    };
 }

 var fc = new FpsCtrl(24, function(e) {
     // render each frame here
    update(state);
  });

 fc.start()

 function init() {
  console.log('Init');
  render();
 }
 // init()
 </script>
 <script name="server_update">
 socket.on('set_state', function(data) {
    state = JSON.parse(data);
    console.log(state)
 });

 setInterval(function(){
    socket.emit('get_state');
 }, 50);

 document.addEventListener('keydown', function(event) {
    if(event.key == 'ArrowUp') {
        socket.emit('up', {'username': username});
        // alert('Left was pressed');
    }
    else if(event.key == 'ArrowDown') {
        socket.emit('down', {'username': username});
        // alert('Right was pressed');
    }
    else if(event.key == 'ArrowLeft') {
        socket.emit('left', {'username': username});
    }
    else if(event.key == 'ArrowRight') {
        socket.emit('right', {'username': username});
    }
 });
 </script>
 </body>
 </html>
	import json
	import time
	from flask import Flask, render_template
	from flask_socketio import SocketIO, send, emit
	from server import State, Player
	import numpy as np

	app = Flask(__name__, static_folder='./static')
	app.config['SECRET_KEY'] = 'secret!'
	socketio = SocketIO(app, cors_allowed_origins='*')

	player_dict = {}


	# GAME CONSTANTS
	# ======================
	STEP = 50

	# ======================
	def dumper(obj):
	try:
	return obj.toJSON()
	except:
	return obj.__dict__


	@app.route("/")
	def hello():
	# return render_template('multiplayer_index.html')
	with open('./templates/multiplayer_index.html', mode='r') as f:
	s = f.readlines()
	html_string = ''.join(s)
	return html_string

	@socketio.on('login')
	def login(data):
	player = Player(data['username'])
	player_dict[data['username']] = player
	State.state['users'].append(player)
	emit('message', json.dumps({'username': data['username'], 'message': 'Was logged'}))


	@socketio.on('get_state')
	def get_state():
	emit('set_state', json.dumps(State.state, default=dumper, indent=2))


	@socketio.on('up')
	def up(data):
	player_dict[data['username']].y += STEP


	@socketio.on('down')
	def down(data):
	player_dict[data['username']].y -= STEP


	@socketio.on('right')
	def right(data):
	player_dict[data['username']].x += STEP


	@socketio.on('left')
	def left(data):
	player_dict[data['username']].x -= STEP


	if __name__ == '__main__':
	socketio.run(app, host='127.0.0.1', port=5001)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.33.1/plotly.min.js" type="text/javascript"></script>
	</head>
	<body>
	<canvas id="canvas" width="1000px" height="1000px"></canvas>

	<script name="utils">
	function getRandomInt(min, max) {
	min = Math.ceil(min);
	max = Math.floor(max);
	return Math.floor(Math.random() * (max - min)) + min; //Максимум не включается, минимум включается
	}
	</script>

	<script name="authorization">
	var username = 'user' + getRandomInt(0, 123124123);
	var socket = io();
	socket.on('connect', function() {
	socket.emit('login', {username: username});
	});
	socket.on('message', function(data) {
	data = JSON.parse(data);
	console.log(data.username + ': ', data.message);
	});
	</script>

	<script name="canvas_cycle">
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	var state;

	function rgb(r, g, b){
	return ["rgb(",r,",",g,",",b,")"].join("");
	}
	function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve, ms));
	}

	function update(state) {
	if (state === undefined)
	return;
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	for (index in state.users) {
	player = state.users[index];
	console.log('Player', player);
	ctx.fillStyle = rgb(player.color[0], player.color[1], player.color[2]);
	ctx.fillRect(player.x, player.y, 100, 100);
	}
	}

	function render() {
	// Update and render simulation onto canvas
	requestAnimationFrame(render);
	update(state);
	// setTimeout(() => { update(); }, 100);
	}

	function FpsCtrl(fps, callback) {

	var delay = 1000 / fps, // calc. time per frame
	time = null, // start time
	frame = -1, // frame count
	tref; // rAF time reference

	function loop(timestamp) {
	if (time === null) time = timestamp; // init start time
	var seg = Math.floor((timestamp - time) / delay); // calc frame no.
	if (seg > frame) { // moved to next frame?
	frame = seg; // update
	callback({ // callback function
	time: timestamp,
	frame: frame
	})
	}
	tref = requestAnimationFrame(loop)
	}

	// play status
	this.isPlaying = false;

	// set frame-rate
	this.frameRate = function(newfps) {
	if (!arguments.length) return fps;
	fps = newfps;
	delay = 1000 / fps;
	frame = -1;
	time = null;
	};

	// enable starting/pausing of the object
	this.start = function() {
	if (!this.isPlaying) {
	this.isPlaying = true;
	tref = requestAnimationFrame(loop);
	}
	};

	this.pause = function() {
	if (this.isPlaying) {
	cancelAnimationFrame(tref);
	this.isPlaying = false;
	time = null;
	frame = -1;
	}
	};
	}

	var fc = new FpsCtrl(24, function(e) {
	// render each frame here
	update(state);
	});

	fc.start()

	function init() {
	console.log('Init');
	render();
	}
	// init()
	</script>
	<script name="server_update">
	socket.on('set_state', function(data) {
	state = JSON.parse(data);
	console.log(state)
	});

	setInterval(function(){
	socket.emit('get_state');
	}, 50);

	document.addEventListener('keydown', function(event) {
	if(event.key == 'ArrowUp') {
	socket.emit('up', {'username': username});
	// alert('Left was pressed');
	}
	else if(event.key == 'ArrowDown') {
	socket.emit('down', {'username': username});
	// alert('Right was pressed');
	}
	else if(event.key == 'ArrowLeft') {
	socket.emit('left', {'username': username});
	}
	else if(event.key == 'ArrowRight') {
	socket.emit('right', {'username': username});
	}
	});
	</script>
	</body>
	</html>