How to display a notification on the screen besides using the built in browser "alert()"

jonl

I want to be able to display a message like "Game Over" or "You win" to the user.

Ideally, I would just use a simple alert("You Win!"). However, because of this bug, I cannot do that.

What is the easiest, most "p5.js way" to be able to display a message like "Game Over" to the user that is not an alert() or confirm(), prompt() etc. ?

Chrisir

you can make a new state and say background(0);

and text("......".....

when mousePressed say state=GAME; again

jonl

@Chrisir, thanks! Yes that seems to definitely be possible, but ideally I would want something easier for my students to use. I suppose I could wrap it in a custom function...

GoToLoop

Seems like the issue is that in Chrome/Chromium based browsers, KeyboardEvent's onkeyup() fails to trigger somehow when a modal window action like alert(), confirm() & prompt() is active.

In p5.js, that KeyboardEvent is bound to p5.prototype._onkeypress():
https://GitHub.com/processing/p5.js/blob/master/src/events/keyboard.js#L252

p5.prototype._onkeyup = function (e) {
  var keyReleased = this.keyReleased || window.keyReleased;
  this._setProperty('isKeyPressed', false);
  this._setProperty('keyIsPressed', false);
  downKeys[e.which] = false;

It is inside that callback that the closure object variable downKeys have its keys assigned to false:
downKeys[e.which] = false;

My idea for a fix is to forcibly invoke p5.prototype._onblur() after each modal window action:

p5.prototype._onblur = function (e) {
  downKeys = {};
};

This way downKeys is emptied and keyIsDown() returns false for all keys:

p5.prototype.keyIsDown = function (code) {
  return downKeys[code];
};

jonl

@GoToLoop, that sounds like an awesome idea, it would be amazing if you could make a pull request for that!

GoToLoop

I can't b/c I was personally barred to ever lay a single character in there! 8-}

jonl

LOL, maybe I'll do that this weekend.

GoToLoop

I believe that by simply invoking _onblur() should be able to reach p5.prototype._onblur(). O:-)

GoToLoop

@jonl, here's your online example "fixed": ;) http://JSBin.com/tuzarutone/1/edit?html,js,output

I've just added _onblur() after alert():

setInterval(function () {
  alert('Now let go of the up arrow.'), _onblur(); }, 5000);

blindfish

Yuck. Alert() is really ugly. Trying to render text on a canvas is painful. A more modern approach is to have a DOM element that is displayed over the top of the canvas. There are scripts already out there that implement modal windows like this that could simplify things for your students, but working with DOM elements is a good skill to have, assuming this is relevant to the course you're running...