Merge pull request confluentinc#200 from gianlucanatali/gn-pacman-v3

Streaming Pacman V2 - ksqlDB only

streaming-pacman/.gitignore

@@ -1,32 +1,7 @@
 .vscode/**/*.*
 
-terraform/aws/cert.pem
-terraform/aws/ccloud.auto.tfvars
-terraform/aws/cloud.auto.tfvars
-terraform/aws/alexa.auto.tfvars
-terraform/aws/.terraform
-terraform/aws/terraform.tfstate
-terraform/aws/terraform.tfstate.backup
-terraform/aws/.terraform.tfstate.lock.info
+stack-configs
+logs
 
-terraform/gcp/cert.pem
-terraform/gcp/ccloud.auto.tfvars
-terraform/gcp/cloud.auto.tfvars
-terraform/gcp/credentials.json
-terraform/gcp/.terraform
-terraform/gcp/terraform.tfstate
-terraform/gcp/terraform.tfstate.backup
-terraform/gcp/.terraform.tfstate.lock.info
-
-terraform/azr/cert.pem
-terraform/azr/ccloud.auto.tfvars
-terraform/azr/cloud.auto.tfvars
-terraform/azr/.terraform
-terraform/azr/terraform.tfstate
-terraform/azr/terraform.tfstate.backup
-terraform/azr/.terraform.tfstate.lock.info
-
-redis-sink/go.sum
-scoreboard/go.sum
-pipeline/ksql-server.properties
-scoreboard/ccloud.properties
+streaming-pacman_start.log
+streaming-pacman_stop.log

streaming-pacman/config/.gitignore

@@ -0,0 +1,2 @@
+# This fill will contains user credentials and keys
+demo.cfg

streaming-pacman/config/demo.cfg.example

@@ -0,0 +1,7 @@
+export AWS_ACCESS_KEY="<AWS_ACCESS_KEY>"
+export AWS_SECRET_KEY="<AWS_SECRET_KEY>"
+
+# These are optional configs
+# export S3_BUCKET_NAME="ksqldbpacman"
+# export SCHEMA_REGISTRY_GEO="eu"
+# export CLUSTER_REGION="eu-west-2"

streaming-pacman/create_ksqldb_app.sh

@@ -0,0 +1,70 @@
+#!/bin/bash
+
+#################################################################
+# Initialization
+#################################################################
+
+PRJ_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null && pwd )"
+UTILS_DIR="${PRJ_DIR}/utils"
+export EXAMPLE="streaming-pacman"
+
+# Source library
+source $UTILS_DIR/helper.sh
+source $UTILS_DIR/ccloud_library.sh
+
+# Source demo-specific configurations
+source config/demo.cfg
+
+#################################################################
+# Source CCloud configurations
+#################################################################
+DELTA_CONFIGS_DIR=delta_configs
+source $DELTA_CONFIGS_DIR/env.delta
+
+#################################################################
+# Confluent Cloud ksqlDB application
+#################################################################
+echo -e "\nConfluent Cloud ksqlDB application\n"
+ccloud::validate_ksqldb_up "$KSQLDB_ENDPOINT" || exit 1
+
+# Create required topics and ACLs
+for TOPIC in $TOPICS_TO_CREATE
+do
+  echo -e "\n# Create new Kafka topic $TOPIC"
+  ccloud kafka topic create "$TOPIC"   
+done
+
+ksqlDBAppId=$(ccloud ksql app list | grep "$KSQLDB_ENDPOINT" | awk '{print $1}')
+ccloud ksql app configure-acls $ksqlDBAppId $TOPICS_TO_CREATE
+
+for TOPIC in $TOPICS_TO_CREATE
+do
+  ccloud kafka acl create --allow --service-account $(ccloud service-account list | grep $ksqlDBAppId | awk '{print $1;}') --operation WRITE --topic $TOPIC      
+done
+
+# Submit KSQL queries
+echo -e "\nSubmit KSQL queries\n"
+properties='"ksql.streams.auto.offset.reset":"earliest","ksql.streams.cache.max.bytes.buffering":"0"'
+while read ksqlCmd; do
+  echo -e "\n$ksqlCmd\n"
+  response=$(curl -X POST $KSQLDB_ENDPOINT/ksql \
+       -H "Content-Type: application/vnd.ksql.v1+json; charset=utf-8" \
+       -u $KSQLDB_BASIC_AUTH_USER_INFO \
+       --silent \
+       -d @<(cat <<EOF
+{
+  "ksql": "$ksqlCmd",
+  "streamsProperties": {$properties}
+}
+EOF
+))
+  echo $response
+  if [[ ! "$response" =~ "SUCCESS" ]]; then
+    echo -e "\nERROR: KSQL command '$ksqlCmd' did not include \"SUCCESS\" in the response.  Please troubleshoot."
+    exit 1
+  fi
+done <statements.sql
+echo -e "\nSleeping 20 seconds after submitting KSQL queries\n"
+sleep 20
+
+exit 0

streaming-pacman/pacman/game/css/pacman.css

@@ -498,4 +498,34 @@ h3 {
 	#message { 
 		top: 347px;
 	}
-}
+}
+
+/* iPhone XR 1792x828px at 326ppi
+@media only screen 
+    and (device-width : 414px) 
+    and (device-height : 896px) 
+    and (-webkit-device-pixel-ratio : 2) { 
+		#panel, #home { 
+			zoom: 105%;
+		}
+}
+
+/ iPhone XS 2436x1125px at 458ppi 	
+@media only screen 
+    and (device-width : 375px) 
+    and (device-height : 812px) 
+    and (-webkit-device-pixel-ratio : 3) { 
+		#panel, #home { 
+			zoom: 105%;
+		}
+}
+
+/ iPhone XS Max 2688x1242px at 458ppi 
+@media only screen 
+    and (device-width : 414px) 
+    and (device-height : 896px) 
+    and (-webkit-device-pixel-ratio : 3) { 
+		#panel, #home { 
+			zoom: 105%;
+		}
+} */

streaming-pacman/pacman/game/js/game.js

@@ -45,7 +45,9 @@ function initGame(newGame) {
 	// player knows how far behind he/she might
 	// be if compared to the best player.
 
-	loadHighestScore(function(hgs) {
+	var player = window.name;
+
+	loadHighestScore(player, function(hgs) {
 		HIGHSCORE = hgs?hgs:HIGHSCORE;
 		if (HIGHSCORE === 0) {
 			$('#highscore span').html("00");
@@ -56,10 +58,11 @@ function initGame(newGame) {
 
 	// Creates a web worker that continuously update
 	// the value of the highest score every five seconds.
-	highScoreWorker = new Worker("/game/js/highscore-worker.js");
-	highScoreWorker.onmessage = function(event) {
-		HIGHSCORE = event.data;
-	};
+	//GN Disable the worker
+	// highScoreWorker = new Worker("/game/js/highscore-worker.js");
+	// highScoreWorker.onmessage = function(event) {
+	// 	HIGHSCORE = event.data;
+	// };
 
 	var lastScore = 0;
 	var lastLevel = 0;
@@ -70,25 +73,28 @@ function initGame(newGame) {
 		return;
 	}
 
-	var request = new XMLHttpRequest();
-    request.onreadystatechange = function() {
-        if (this.readyState == 4) {
-			if (this.status == 200) {
-				var result = JSON.parse(this.responseText);
-				if (result != undefined || result != null) {
-					lastScore = result.scoreboard.score;
-					lastLevel = result.scoreboard.level;
-				}
-			}
-			lastScore = lastScore == undefined ? 0 : lastScore;
-			lastLevel = lastLevel == undefined ? 0 : lastLevel;
-			doInitGame(newGame, lastScore, lastLevel);
-		}
-	};
-	var player = window.name;
-	var uri = SCOREBOARD_API + '?player=' + player
-	request.open('POST', uri, true);
-	request.send();
+	//TODO ? This code was reading the last score and level to reuse it, not sure this is what I want though... player should start from scracth
+	// var request = new XMLHttpRequest();
+    // request.onreadystatechange = function() {
+    //     if (this.readyState == 4) {
+	// 		if (this.status == 200) {
+	// 			var result = JSON.parse(this.responseText);
+	// 			if (result != undefined || result != null) {
+	// 				lastScore = result.scoreboard.score;
+	// 				lastLevel = result.scoreboard.level;
+	// 			}
+	// 		}
+	// 		lastScore = lastScore == undefined ? 0 : lastScore;
+	// 		lastLevel = lastLevel == undefined ? 0 : lastLevel;
+	// 		doInitGame(newGame, lastScore, lastLevel);
+	// 	}
+	// };
+
+
+	// var uri = SCOREBOARD_API + '?player=' + player
+	// request.open('POST', uri, true);
+	// request.send();
+	doInitGame(newGame, lastScore, lastLevel);
 
 }
 
@@ -359,7 +365,7 @@ function lifes(l) {
 	record.game.lives = LIFES
 	record.game.level = LEVEL
 
-	produceRecord('USER_GAME', record);
+	produceRecordUserGame(record);
 
 }
 
@@ -386,11 +392,11 @@ function gameover() {
 	// Emit event 'USER_LOSSES' event
 	var record = {};
 	record.user = window.name;
-	produceRecord('USER_LOSSES', record);
+	produceRecordUserLosses(record);
 
 	// Terminate the web worker that
 	// updates the highest score value
-	highScoreWorker.terminate();
+	//highScoreWorker.terminate();
 
 }
 
@@ -451,44 +457,27 @@ function score(s, type) {
 	record.game.lives = LIFES
 	record.game.level = LEVEL
 
-	produceRecord('USER_GAME', record);
+	produceRecordUserGame(record);
 
 }
 
-function produceRecord(topic, record) {
 
-	var contentType = "application/json";
-	var url = EVENT_HANDLER_API + "?topic=" + topic;
-	var json = JSON.stringify(record);
+function produceRecordUserGame(record) {
 
-	// The verification below is only
-	// necessary while the application
-	// is being migrated to serverless,
-	// since some implementations still
-	// rely on REST Proxy to emmit the
-	// game events.
-
-	if (CLOUD_PROVIDER == "GCP" || CLOUD_PROVIDER == "AZR") {
+	var topic = "USER_GAME"
+	var ksqlQuery =`INSERT INTO ${topic} (USER, GAME) VALUES ('${record.user}', STRUCT(SCORE:=${record.game.score},LIVES:=${record.game.lives},LEVEL:=${record.game.level}));`
 
-		// Fallback to the format that REST Proxy
-		// requires in order to emmit the events.
+	const request = new XMLHttpRequest();
+	sendksqlDBStmt(request, ksqlQuery);
 
-		contentType = "application/vnd.kafka.json.v2+json";
-		url = EVENT_HANDLER_API + "/topics/" + topic;
+}
 
-		var recordHolder = {};
-		recordHolder.value = record;
-		var recordsHolder = {};
-		recordsHolder.records = [recordHolder];
-		json = JSON.stringify(recordsHolder);
+function produceRecordUserLosses(record) {
 
-	}
+	var topic = "USER_LOSSES"
+	var ksqlQuery =`INSERT INTO ${topic} (USER) VALUES ('${record.user}');`
 
 	const request = new XMLHttpRequest();
-	request.open("POST", url, true);
-	request.setRequestHeader("Content-Type", contentType);
-	request.send(json);
-
-	record
+	sendksqlDBStmt(request, ksqlQuery);
 
 }

streaming-pacman/pacman/game/js/scoreboard-worker.js

@@ -1,13 +1,18 @@
+importScripts('env-vars.js');
 importScripts('shared.js');
 
 var scoreboard;
 
 function getScoreboard() {
-	getScoreboardJson(function(sc) {
-		scoreboard = sc?sc:scoreboard;
-		postMessage(scoreboard);	
+	loadSummaryStats(function(highestScore, usersSet) {
 
+		getScoreboardJson(function(sc) {
+			scoreboard = sc?sc:scoreboard;
+			postMessage(scoreboard);	
+
+		}, usersSet);
 	});
+
 	setTimeout("getScoreboard()", 1000);
 }
 

streaming-pacman/pacman/game/js/scoreboard.js

@@ -1,9 +1,14 @@
 function loadScoreboardPage() {
-	getScoreboardJson(function(playersScores) {
-		var headers = ["Rank","Name", "Score", "Level", "Losses"];
-		document.getElementById('scoreboard').innerHTML = json2table(playersScores, 'table', headers);
-		window.localStorage.setItem("playersScores", JSON.stringify(playersScores));
+	loadSummaryStats(function(highestScore, usersSet) {
+
+		getScoreboardJson(function(playersScores) {
+			var headers = ["Rank","Name", "Score", "Level", "Losses"];
+			document.getElementById('scoreboard').innerHTML = json2table(playersScores, 'table', headers);
+			window.localStorage.setItem("playersScores", JSON.stringify(playersScores));	
+
+		}, usersSet);
 	});
+
 }
 
 function json2table(json, classes, headers) {