Ufdjrw

I am a beginner full-stack web developer.

I helped build a game-cast app for ping-pong using the MEAN stack, SVG.js, and sockets. GitHub link: https://github.com/ChristopherRoySchneider/pingpong

In the app, a "game-caster" is in charge of emitting "game events" via sockets that other users of the site can see live. These game events can consist of, among other bits of data, an SVG circle element drawn on an SVG rectangle element (representing the ping-pong table) that shows where the ping-pong ball last landed on a score.

The user watching a match can choose which game of that particular match he or she would like to view via a drop-down menu. The app then draws all the previous balls on the table for the game chosen.

I am having trouble figuring out how to delete previously drawn ping-pong balls from the table when a user changes the game viewed. Currently, all previously drawn balls remain on the table.

I have tried to use the SVG.js clear() method to clear the table when the user chooses a different game. This works, but then redraws the table underneath where the old table used to be.

Here's the branch in which I'm attempting to squash this bug:
https://github.com/ChristopherRoySchneider/pingpong/tree/table-redraw

In ngOnChanges, I have the following code:

ngOnChanges() 
 this.draw.clear();
 this.makeTable();
 this.game = this.match.games[this.gameIndex];
 this.drawPreviousBalls(this.game);

Here is the makeTable function:

 makeTable() 
 this.draw = SVG('drawing').size(640, 356);
 this.table = this.draw.rect(640, 356).attr(
 'fill': '#022b6d',
 'stroke': '#fff',
 'stroke-width': 10
 );
 this.centerLine = this.draw.line([[0, 178], [640, 178]]).stroke(
 'color': '#fff',
 'width': 5
 )
 this.net = this.draw.line([[320, 0], [320, 356]]).stroke(
 'color': '#fff',
 'width': 5
 )
 

And my drawPreviousBalls function, which calls a drawBall function:

 drawPreviousBalls(game: Game) 
 for (let gameEvent of game.game_events) 
 if (gameEvent.x) 
 this.drawBall(gameEvent.x, gameEvent.y);
 
 
 

 drawBall(x: number, y: number) 
 this.x = x;
 this.y = y;

 if(this.draw)
 this.ball = this.draw.circle(10).attr(
 cx: this.x,
 cy: this.y,
 fill: '#fff'
 );
 
 

Any help would be greatly appreciated!

You don't need to keep redrawing the table. It's a static size, so just draw it once and leave it.

What I would do is make an SVG group element (<g>) that you keep all your ball elements in.

this.balls = this.draw.group();

Then before you redraw all your balls in their new positions, just do

this.balls.clear();

Ie.

drawPreviousBalls(game: Game) 
 this.balls.clear();
 for (let gameEvent of game.game_events) 
 if (gameEvent.x) 
 this.drawBall(gameEvent.x, gameEvent.y);
 
 



drawBall(x: number, y: number) 
 this.x = x;
 this.y = y;

 if (this.draw) 
 this.ball = this.balls.circle(10).attr(
 cx: this.x,
 cy: this.y,
 fill: '#fff'
 );