Added username storage and inactivity timer
This commit is contained in:
gocivici
parent
86ccf93e09
commit
9814588658
12
backend.js
12
backend.js
@ -37,6 +37,7 @@ const bPlayers = {
|
||||
|
||||
io.on('connection', (socket)=>{
|
||||
console.log('user connected')
|
||||
resetDisconnectTimer();
|
||||
bPlayers[socket.id] = {
|
||||
x:615,
|
||||
y:136,
|
||||
@ -56,10 +57,13 @@ io.on('connection', (socket)=>{
|
||||
})
|
||||
|
||||
socket.on('clickPosition',(coordinates)=>{
|
||||
resetDisconnectTimer();
|
||||
bPlayers[socket.id].clickX = coordinates[0]
|
||||
bPlayers[socket.id].clickY = coordinates[1]
|
||||
bPlayers[socket.id].x = bPlayers[socket.id].clickX
|
||||
bPlayers[socket.id].y = bPlayers[socket.id].clickY
|
||||
|
||||
|
||||
console.log(bPlayers)
|
||||
})
|
||||
|
||||
@ -83,6 +87,11 @@ io.on('connection', (socket)=>{
|
||||
|
||||
console.log(bPlayers)
|
||||
})
|
||||
|
||||
function resetDisconnectTimer(){
|
||||
clearTimeout(socket.inactivityTimeout);
|
||||
socket.inactivityTimeout = setTimeout(() => socket.disconnect(true), 1000 * 60 * 15);
|
||||
}
|
||||
// socket.on('clickPositionX',(coordinates)=>{
|
||||
// bPlayers[socket.id].x = coordinates
|
||||
// console.log(coordinates)
|
||||
@ -101,4 +110,5 @@ setInterval(() =>{
|
||||
|
||||
server.listen((process.env.PORT || 3000),() =>{
|
||||
console.log(`app listening on port ${(process.env.PORT || 3000)}`)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
BIN
public/Down.png
BIN
public/Down.png
Binary file not shown.
|
Before Width: | Height: | Size: 902 B After Width: | Height: | Size: 910 B |
BIN
public/Left.png
BIN
public/Left.png
Binary file not shown.
|
Before Width: | Height: | Size: 851 B After Width: | Height: | Size: 841 B |
BIN
public/Right.png
BIN
public/Right.png
Binary file not shown.
|
Before Width: | Height: | Size: 799 B After Width: | Height: | Size: 841 B |
BIN
public/Up.png
BIN
public/Up.png
Binary file not shown.
|
Before Width: | Height: | Size: 780 B After Width: | Height: | Size: 788 B |
115
public/cafebackground..js
Normal file
115
public/cafebackground..js
Normal file
@ -0,0 +1,115 @@
|
||||
(function(name,data){
|
||||
if(typeof onTileMapLoaded === 'undefined') {
|
||||
if(typeof TileMaps === 'undefined') TileMaps = {};
|
||||
TileMaps[name] = data;
|
||||
} else {
|
||||
onTileMapLoaded(name,data);
|
||||
}
|
||||
if(typeof module === 'object' && module && module.exports) {
|
||||
module.exports = data;
|
||||
}})("cafebackground",
|
||||
{ "compressionlevel":-1,
|
||||
"height":12,
|
||||
"infinite":false,
|
||||
"layers":[
|
||||
{
|
||||
"data":[20, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 23,
|
||||
56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 39, 39, 58, 41,
|
||||
56, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 41,
|
||||
74, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 76, 77,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
110, 111, 112, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 111, 112, 113,
|
||||
128, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 129, 130, 131],
|
||||
"height":12,
|
||||
"id":1,
|
||||
"name":"Tile Layer 1",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":21,
|
||||
"x":0,
|
||||
"y":0
|
||||
},
|
||||
{
|
||||
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 169, 170, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 187, 188, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 205, 206, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
|
||||
"height":12,
|
||||
"id":3,
|
||||
"name":"doorframe",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":21,
|
||||
"x":0,
|
||||
"y":0
|
||||
},
|
||||
{
|
||||
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 444, 0, 0, 0, 0, 0, 0,
|
||||
0, 590, 0, 0, 0, 0, 0, 0, 0, 229, 230, 0, 0, 443, 444, 0, 0, 0, 171, 172, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 247, 248, 0, 0, 741, 742, 0, 0, 0, 189, 190, 735,
|
||||
473, 478, 479, 480, 481, 562, 563, 0, 0, 0, 0, 0, 0, 754, 755, 0, 0, 0, 207, 208, 748,
|
||||
486, 491, 492, 493, 494, 575, 576, 0, 0, 0, 0, 0, 0, 767, 768, 0, 0, 0, 377, 378, 761,
|
||||
743, 744, 374, 375, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
756, 757, 387, 388, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
769, 770, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
440, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
|
||||
453, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484209, 2147484208,
|
||||
466, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2147484222, 2147484221],
|
||||
"height":12,
|
||||
"id":2,
|
||||
"name":"doors and windows",
|
||||
"opacity":1,
|
||||
"type":"tilelayer",
|
||||
"visible":true,
|
||||
"width":21,
|
||||
"x":0,
|
||||
"y":0
|
||||
}],
|
||||
"nextlayerid":4,
|
||||
"nextobjectid":1,
|
||||
"orientation":"orthogonal",
|
||||
"renderorder":"right-down",
|
||||
"tiledversion":"1.10.2",
|
||||
"tileheight":16,
|
||||
"tilesets":[
|
||||
{
|
||||
"firstgid":1,
|
||||
"source":"..\/..\/..\/Tileassets\/TopDownHouse_FloorsAndWalls.tsx"
|
||||
},
|
||||
{
|
||||
"firstgid":163,
|
||||
"source":"..\/..\/..\/Tileassets\/TopDownHouse_DoorsAndWindows.tsx"
|
||||
},
|
||||
{
|
||||
"firstgid":343,
|
||||
"source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState2.tsx"
|
||||
},
|
||||
{
|
||||
"firstgid":577,
|
||||
"source":"..\/..\/..\/Tileassets\/TopDownHouse_SmallItems.tsx"
|
||||
},
|
||||
{
|
||||
"firstgid":641,
|
||||
"source":"..\/..\/..\/Tileassets\/TopDownHouse_FurnitureState1.tsx"
|
||||
}],
|
||||
"tilewidth":16,
|
||||
"type":"map",
|
||||
"version":"1.10",
|
||||
"width":21
|
||||
});
|
||||
@ -55,7 +55,8 @@ class Player extends Sprite {
|
||||
|
||||
}
|
||||
update(){
|
||||
if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-25,this.position.y-100,10)}
|
||||
if(this.message!=''){SpeechBubble(ctx,ctx.measureText(this.message).width-20,20,'hsla(181, 100%, 100%, 0.6)',this.position.x-20,this.position.y-100,10)}
|
||||
// CollisionRect(this,"hsla(141, 100%, 52%, 0.5)")
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.textAlign = "center";
|
||||
@ -65,40 +66,12 @@ class Player extends Sprite {
|
||||
ctx.font = 'normal 15px sans-serif';
|
||||
|
||||
ctx.fillStyle = 'black';
|
||||
ctx.fillText(this.message, this.position.x-5, this.position.y-80,200);
|
||||
ctx.fillText(this.message, this.position.x, this.position.y-80);
|
||||
|
||||
ctx.fill()
|
||||
|
||||
|
||||
function SpeechBubble(ctx, width, height, color, x, y, radius, text)
|
||||
{
|
||||
var maxWidth = 300;
|
||||
var r = radius;
|
||||
var w = (width > maxWidth ? maxWidth : width) + 40;
|
||||
var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10;
|
||||
var pi2 = Math.PI * 2;
|
||||
var ap = w/2-10;
|
||||
var aw = 20;
|
||||
var ah = 10;
|
||||
x = x-(width/2)
|
||||
// Speechbubble create start
|
||||
ctx.beginPath();
|
||||
ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75);
|
||||
ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2);
|
||||
ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25);
|
||||
ctx.lineTo(x+w - ap, y+h);
|
||||
ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah);
|
||||
ctx.lineTo(x+w - ap - aw, y+h);
|
||||
ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
// Speechbubble create end
|
||||
|
||||
// Speechbubble text start
|
||||
// ctx.fillStyle = "#fff";
|
||||
// wrapText(ctx, text, 25, 17, maxWidth, 16);
|
||||
// Speechbubble text end
|
||||
}
|
||||
|
||||
|
||||
//ctx.measureText(this.message).width
|
||||
|
||||
@ -148,3 +121,39 @@ class Player extends Sprite {
|
||||
|
||||
}
|
||||
|
||||
function SpeechBubble(ctx, width, height, color, x, y, radius, text)
|
||||
{
|
||||
var maxWidth = 300;
|
||||
var r = radius;
|
||||
var w = (width > maxWidth ? maxWidth : width) + 40;
|
||||
var h = ((width > maxWidth ? Math.ceil(width / maxWidth) : 1) * height) + 10;
|
||||
var pi2 = Math.PI * 2;
|
||||
var ap = w/2-5;
|
||||
var aw = 10;
|
||||
var ah = 8;
|
||||
x = x-(width/2)
|
||||
// Speechbubble create start
|
||||
ctx.beginPath();
|
||||
ctx.arc(x+r, y+r, r, pi2 * 0.5, pi2 * 0.75);
|
||||
ctx.arc(x+ w - r, y+ r, r, pi2 * 0.75, pi2);
|
||||
ctx.arc(x+w - r,y+ h - r, r, 0, pi2 * 0.25);
|
||||
ctx.lineTo(x+w - ap, y+h);
|
||||
ctx.lineTo(x+w - ap - (aw / 2),y+ h + ah);
|
||||
ctx.lineTo(x+w - ap - aw, y+h);
|
||||
ctx.arc(x+r, y+h - r, r, pi2 * 0.25, pi2 * 0.5);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
// Speechbubble create end
|
||||
|
||||
// Speechbubble text start
|
||||
// ctx.fillStyle = "#fff";
|
||||
// wrapText(ctx, text, 25, 17, maxWidth, 16);
|
||||
// Speechbubble text end
|
||||
}
|
||||
|
||||
function CollisionRect(object,color){
|
||||
ctx.beginPath();
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(object.position.x, object.position.y, object.width, object.height)
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
@ -75,4 +75,4 @@ class Sprite{
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,7 +3,6 @@ const ctx = canvas.getContext('2d')
|
||||
const socket = io()
|
||||
|
||||
|
||||
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
const speed = 2;
|
||||
var frameCount = 10
|
||||
@ -32,7 +31,9 @@ clickCoordinates = [100,100]
|
||||
// background.onload = function(){
|
||||
// ctx.drawImage(background,0,0);
|
||||
// }
|
||||
|
||||
if(!localStorage.getItem('username')){
|
||||
localStorage.setItem('username','Visitor')
|
||||
}
|
||||
// setInterval(player.animate, 50);
|
||||
|
||||
canvas.width = 32 * 21 //672
|
||||
@ -50,13 +51,21 @@ const background1 = new Sprite({
|
||||
imageSrc: './img/baackground.png'
|
||||
})
|
||||
|
||||
|
||||
socket.on('disconnect',(reason)=>{
|
||||
console.log(reason);
|
||||
if (confirm("Kicked to due inactivity, click OK to refresh page") == true) {
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
|
||||
// const player = new Player(100,100,'Görkem')
|
||||
const fPlayers = {}
|
||||
|
||||
socket.on('updatePlayers', (bPlayers) =>{
|
||||
for(const id in bPlayers){
|
||||
const bPlayer = bPlayers[id]
|
||||
|
||||
|
||||
if(!fPlayers[id]){
|
||||
fPlayers[id] = new Player({
|
||||
position:{
|
||||
@ -68,7 +77,7 @@ socket.on('updatePlayers', (bPlayers) =>{
|
||||
clickX:bPlayer.clickX,
|
||||
clickY:bPlayer.clickY,
|
||||
userId:id,
|
||||
username:'Visitor',
|
||||
username:'',
|
||||
message:'',
|
||||
atPosition:true,
|
||||
animationColumn:0,
|
||||
@ -83,6 +92,9 @@ socket.on('updatePlayers', (bPlayers) =>{
|
||||
}
|
||||
|
||||
})
|
||||
fPlayers[socket.id].username = localStorage.getItem('username')
|
||||
socket.emit('username',fPlayers[socket.id].username);
|
||||
|
||||
} else {
|
||||
// if players already exist
|
||||
fPlayers[id].clickX = bPlayer.clickX
|
||||
@ -162,8 +174,10 @@ function animate(){
|
||||
|
||||
|
||||
|
||||
|
||||
animate()
|
||||
|
||||
|
||||
|
||||
canvas.addEventListener('mousedown', function(e) {
|
||||
clickCoordinates = getCursorPosition(canvas, e)
|
||||
|
||||
@ -186,6 +200,7 @@ document.querySelector('#textInput').addEventListener('submit',(event)=>{
|
||||
if(inputValue.includes("/name ")){
|
||||
console.log('namechange')
|
||||
fPlayers[socket.id].username = inputValue.replace("/name ","")
|
||||
localStorage.setItem('username',fPlayers[socket.id].username);
|
||||
socket.emit('username',fPlayers[socket.id].username)
|
||||
}else if(inputValue==='/debug'){
|
||||
if(debugMode) {debugMode=false;}else{debugMode=true;}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user