Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>asynquence CSP: Ping Pong</title>
</head>
<body>
<h1><em>asynquence</em> CSP: Ping Pong</h1>
<div id="table">
    <div id="ping"></div>
    <div id="net"></div>
    <div id="pong"></div>
    <div id="referee"></div>
</div>
<p>
  Built with <a href="https://github.com/getify/asynquence">asynquence</a> and the <a href="https://github.com/getify/asynquence/tree/master/contrib#runner-plugin">runner(..)</a> plugin, for <a href="https://github.com/getify/asynquence/tree/master/contrib#csp-style-concurrency">CSP-style concurrency</a>.
</p>
<p>
  Inspired by (ported from): <a href="https://github.com/ubolonton/js-csp/blob/master/README.md#examples">js-csp</a> and the <a href="http://talks.golang.org/2013/advconc.slide#6">go ping-pong</a> example.
</p>
  <script src="https://unpkg.com/asynquence@latest/asq.js"></script>
<script src="https://unpkg.com/asynquence-contrib@latest/contrib.js"></script>
</body>
</html>
 
#table { position:relative; width:450px; height:250px; border:2px solid #000; }
#net { position:absolute; width:1px; height:100%; left:50%; top:0px; background-color:#000; }
#ping { position:absolute; width:100px; left:20px; top:20px; }
#pong { position:absolute; width:100px; right:20px; top:20px; text-align:right; }
#referee { position:absolute; width:100px; height:30px; left:175px; top:-10px; border:1px solid #000; line-height:30px; text-align:center; font-weight:bold; background-color:#fff; }
 
// noprotect
/* jshint esnext:true */
function message(who, msg) {
    document.getElementById(who).innerHTML += msg + "<br>"
}
function sleep(delay) {
    return ASQ.after(delay);
}
function* player(table) {
    var name = table.messages[0].shift();
    var ball = table.messages[1];
    while (table.messages[2] !== "CLOSED") {
        // hit the ball
        ball.hits++;
        message(name,ball.hits);
        // delay as ball goes back to other player
        yield sleep(500);
        // game still going?
        if (table.messages[2] !== "CLOSED") {
            // ball's now back in other player's court
            yield table;
        }
    }
    message(name,"Game over!");
}
function* referee(table){
    var alarm = false;
    // referee sets an alarm timer for the game on
    // his stopwatch
    setTimeout(function(){ alarm = true; },10000);
    // keep the game going until the stopwatch
    // alarm sounds
    while (!alarm) {
        // let the players keep playing
        yield table;
    }
    // signal to players that the game is over
    table.messages[2] = "CLOSED";
    // what does the referee say?
    yield "Time's up!";
}
ASQ(
    ["ping","pong"], // player names
    { hits: 0 } // the ball
)
.runner(
    referee,
    player,
    player
)
.val(function(msg){
    message("referee",msg);
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
getifypro
0viewers