From: Elijah Cohen Date: Wed, 8 May 2019 08:49:10 +0000 (-0500) Subject: added too much disparate stuff X-Git-Url: https://git.eli173.com/?a=commitdiff_plain;h=0c605a435b5233dcb75715a36aaa593359f1b27d;p=pong_br added too much disparate stuff i need to commit with greater frequency todo: draw overlays, touch input --- diff --git a/NOTES.org b/NOTES.org index 4190283..4c7c08b 100644 --- a/NOTES.org +++ b/NOTES.org @@ -1,2 +1,12 @@ -Pretty close to done. I want to do all input management in the same separate file (incl. mobile &c). Should be nice to compartmentalize that way. I don't need to do all that much for the input, just do key handling, and also try to get an easy touch overlay down. +OKAY + +have an intro page, and then let the 'play' page I already have up be the whole thing. + +I should check referrers, so that if someone links to/goes straight to the 'play' page they get sent back to the page beforehand. Also, this lets me make the 'play' page the whole webapp, which makes for very easy reverse proxy load balancing shenanigans. Plus this kinda enforces a pleasant splash page with directions and whatever. + +At this point it's cleaning and polish. I also /need/ to get the out-of-bounds detection going much better. I think a simple algorithm that just detects the inside of a (convex) polygon (or distance to one) will be good enough, as that's really all there is to this game (and yes, it is always convex). + +Writing this on a plane, so most of this work will be left for later I guess. I can do some nice error checking and game ending and so forth now. + +Oh shit, I have to figure out how to count how many games are ongoing. I'll just use a global variable? Or did I want to do player connections? Actually a global for current games might be pretty reasonable. diff --git a/server/game.js b/server/game.js index 34895ae..decf5cf 100644 --- a/server/game.js +++ b/server/game.js @@ -25,6 +25,19 @@ Game.prototype.getNextFrame = function() { state.id = i; this.players[i].send_data(JSON.stringify(state)); } + + // check for life and death + var dead_ids = state.dead.map(d => d.id); + if(dead_ids.length == state.n-1) { + // game over! tell everyone and end the cycle + clearInterval(this.timeout); + var sum = dead_ids.reduce((x,y) => x+y); + var winner = state.n*(state.n-1)/2 - sum; // note the minus is bc we start at zero yeah? + for(var i=0; i a1) && (ab < a2)) { // check if not already dead (in case multi balls out at same time etc) if(!this.dead.some(x => x.id == ang.id)) { - this.dead.push(new Dead(ang.id)); + var place = this.numPlayers - this.dead.length; + this.dead.push(new Dead(ang.id, place)); /* TODO: socket cleanup for dead player */ } } @@ -124,10 +126,11 @@ GameState.prototype.getState = function() { var thedead = this.dead; var totnum = this.numPlayers; var theobject = {n: totnum, dead: thedead, paddles: newpads, balls: newballs}; + // maybe a proper constructor would be good here... return theobject; } - +// oh can I just trash this? yeah totally todo function nearest_point_on_line(c, ep) { // finds the point on the line defined by ep closest to center c if(ep.f.x == ep.s.x) { diff --git a/web/draw.js b/web/draw.js index a26a31c..1312ccd 100644 --- a/web/draw.js +++ b/web/draw.js @@ -7,18 +7,32 @@ wallcolor = 'rgb(100,100,0)'; pcolor = 'rgb(0,0,200)'; bcolor = 'rgb(100,100,100)'; xcolor = 'rgb(200,0,200)'; +playercolor = 'rgb(0,100,200)'; +var latest_theta = 0; + // main function, given everything from the game state, draws on the given context var draw = function(state, ctx) { clearCanvas(ctx); - + // okay, gotta get the endpoints, then draw the walls, // then draw the balls, // then finally the hard part is the paddles - //console.log(state); var endpoints = genAllEndpoints(state.n, state.dead); + + // set rotation + // check for dead first + var isDead = state.dead.some(d => d.id==state.id); + if(!isDead) { + var rot_ep = endpoints.find(e => e.id == state.id); // has to have smth right? yeah if alive i guess? + var rot_mp = new Coord((rot_ep.f.x+rot_ep.s.x)/2, (rot_ep.f.y+rot_ep.s.y)/2); + var rot_th = Math.atan2(rot_mp.y, rot_mp.x) + Math.PI; + latest_theta = rot_th; + } + ctx.transform(Math.cos(latest_theta),-Math.sin(latest_theta),Math.sin(latest_theta),Math.cos(latest_theta),0,0) // this is to rotate it so that the player paddle is in the right place + var livingzones = endpoints.filter(e => (e.id != -1) && (!state.dead.some(d=>(d.id==e.id)))); var walls = endpoints.filter(e => (e.id==-1) || state.dead.some(d=>(d.id==e.id))); //draw walls @@ -45,6 +59,9 @@ var draw = function(state, ctx) { var pps = getPaddlePoints(paddle, eps); drawLine(ctx, pcolor, pps.f, pps.s); } + if(isDead) { + drawOverlay(ctx, state.dead.find(d => d.id == state.id).place); + } } @@ -91,6 +108,11 @@ var drawLine = function(ctx, color, c1, c2) { ctx.stroke(); ctx.restore(); } + +var drawOverlay = function(ctx, place) { + +} + var clearCanvas = function(ctx) { ctx.save(); diff --git a/web/input.js b/web/input.js index 3dde69f..dbdd725 100644 --- a/web/input.js +++ b/web/input.js @@ -8,9 +8,10 @@ var input = 'x'; function keypressHandler(evt, isdn) { // "is down" (is a keydown) var thekey = 'x'; - if(evt.keyCode == '87') // 'w' + // small but significant note: everything here is rotated by a half circle, so everything is upside-down + if(evt.keyCode == '83') // 's' thekey = 'u'; - else if(evt.keyCode == '83') // 's' + else if(evt.keyCode == '87') // 'w' thekey = 'd'; if(!isdn && thekey==keystate) { @@ -25,6 +26,14 @@ function keypressHandler(evt, isdn) { } } + +function touchHandler(evt) { + // deals with touch events on the canvas, todo when I can get my hands on documentation lol +} + + + + function keySender(ws) { if(keystate != 'x') ws.send(keystate); diff --git a/web/main.js b/web/main.js index 1ff3e8c..024b6ba 100644 --- a/web/main.js +++ b/web/main.js @@ -1,8 +1,9 @@ -var prefixurl = "ws://localhost:6789"; +const prefixurl = "ws://localhost:6789"; -theSocket = null; +var theSocket = null; +var is_dead = false; var module = {}; @@ -34,8 +35,27 @@ var main = function() { // starts everything, gets us going, setup ish // change the 1's to zoom in i think.. todo ctx.setTransform(10, 0, 0, 10, ctx.canvas.width/2, ctx.canvas.height/2); // change to setTransform? ctx.lineWidth = ctx.lineWidth/5; + if(e.data == "w") { + console.log("winner"); + return; + } + else if(e.data == "l") { + console.log("loser"); + return; + } + var state = JSON.parse(e.data); - draw(JSON.parse(e.data), ctx); + if(!is_dead) { + // check for deadness + + var status = state.dead.some(e => e.id == state.id); + if(status) { + // add event listener if dead + canvas.onclick = function(e) {location.reload()} // okay, outside of 'input' file... + } + } + + draw(state, ctx); } document.onkeydown = function(e) {keypressHandler(e, true);}; diff --git a/web/play.html b/web/play.html index fe48506..4ffbef1 100644 --- a/web/play.html +++ b/web/play.html @@ -11,11 +11,12 @@