Add minimal notification example

tutorial/godot/src/Main/Demo.gd

@@ -5,6 +5,7 @@ export var user_color := Color.lime
 onready var server_connection := $ServerConnection
 onready var debug_panel := $CanvasLayer/DebugPanel
 onready var chat_box := $CanvasLayer/ChatBox
+onready var notification_list := $CanvasLayer/NotificationList
 
 
 func _ready() -> void:
@@ -66,3 +67,11 @@ func _on_ChatBox_text_sent(text) -> void:
 
 func _on_ServerConnection_chat_message_received(sender_id, text) -> void:
 	chat_box.add_reply(text, "User", user_color)
+
+
+func _on_ServerConnection_user_joined(user) -> void:
+	notification_list.add_notification(user.username, Color.white, false)
+
+
+func _on_ServerConnection_user_left(user) -> void:
+	notification_list.add_notification(user.username, Color.white, true)

tutorial/godot/src/Main/Demo.tscn

@@ -1,4 +1,4 @@
-[gd_scene load_steps=8 format=2]
+[gd_scene load_steps=9 format=2]
 
 [ext_resource path="res://src/Main/Demo.gd" type="Script" id=1]
 [ext_resource path="res://assets/theme/gdquest.theme" type="Theme" id=2]
@@ -7,6 +7,7 @@
 [ext_resource path="res://src/UI/MouseCamera2D.tscn" type="PackedScene" id=5]
 [ext_resource path="res://src/UI/Elements/DebugPanel.gd" type="Script" id=6]
 [ext_resource path="res://src/UI/ChatBox.tscn" type="PackedScene" id=7]
+[ext_resource path="res://src/UI/Components/NotificationList.tscn" type="PackedScene" id=8]
 
 [node name="Demo" type="Node"]
 script = ExtResource( 1 )
@@ -50,5 +51,9 @@ __meta__ = {
 }
 
 [node name="ChatBox" parent="CanvasLayer" instance=ExtResource( 7 )]
+
+[node name="NotificationList" parent="CanvasLayer" instance=ExtResource( 8 )]
 [connection signal="chat_message_received" from="ServerConnection" to="." method="_on_ServerConnection_chat_message_received"]
+[connection signal="user_joined" from="ServerConnection" to="." method="_on_ServerConnection_user_joined"]
+[connection signal="user_left" from="ServerConnection" to="." method="_on_ServerConnection_user_left"]
 [connection signal="text_sent" from="CanvasLayer/ChatBox" to="." method="_on_ChatBox_text_sent"]

tutorial/godot/src/Main/ServerConnection.gd

@@ -1,6 +1,8 @@
 extends Node
 
 signal chat_message_received(sender_id, text)
+signal user_joined(user)
+signal user_left(user)
 
 # Nakama read permissions
 enum ReadPermissions { NO_READ, OWNER_READ, PUBLIC_READ }
@@ -41,6 +43,8 @@ func connect_to_server_async() -> int:
 		_socket.connect("closed", self, "_on_NakamaSocket_closed")
 		# warning-ignore:return_value_discarded
 		_socket.connect("received_channel_message", self, "_on_NamakaSocket_received_channel_message")
+		#warning-ignore: return_value_discarded
+		_socket.connect("received_match_presence", self, "_on_NakamaSocket_received_match_presence")
 		return OK
 	return ERR_CANT_CONNECT
 
@@ -145,3 +149,15 @@ func _on_NamakaSocket_received_channel_message(message: NakamaAPI.ApiChannelMess
 
 	var content: Dictionary = JSON.parse(message.content).result
 	emit_signal("chat_message_received", message.sender_id, content.msg)
+
+
+func _on_NakamaSocket_received_match_presence(new_presences: NakamaRTAPI.MatchPresenceEvent) -> void:
+	for user in new_presences.leaves:
+		#warning-ignore: return_value_discarded
+		_presences.erase(user.user_id)
+		emit_signal("user_left", user)
+
+	for user in new_presences.joins:
+		_presences[user.user_id] = user
+		emit_signal("user_joined", user)
+

tutorial/godot/src/UI/Components/Notification.gd

@@ -0,0 +1,47 @@
+# A notification that scales up to appear on the screen,
+# stays for a few instants, and fades out slowly.
+extends Control
+
+const DURATION_SCALE := 0.25
+const DURATION_VISIBLE := 2.0
+const DURATION_FADE_OUT := 2.0
+
+onready var label: RichTextLabel = $RichTextLabel
+onready var tween: Tween = $Tween
+
+
+func _ready() -> void:
+	rect_pivot_offset = rect_size
+	rect_scale = Vector2.ZERO
+
+
+func setup(username: String, color := Color.white, disconnected := false) -> void:
+	label.bbcode_text = (
+		"[color=#%s]%s[/color] %s"
+		% [color.to_html(false), username, "left" if disconnected else "joined"]
+	)
+# warning-ignore:return_value_discarded
+	tween.interpolate_property(
+		self,
+		"rect_scale",
+		Vector2.ZERO,
+		Vector2.ONE,
+		DURATION_SCALE,
+		Tween.TRANS_LINEAR,
+		Tween.EASE_OUT
+	)
+# warning-ignore:return_value_discarded
+	tween.interpolate_property(
+		self,
+		"modulate",
+		Color.white,
+		Color.transparent,
+		DURATION_FADE_OUT,
+		Tween.TRANS_LINEAR,
+		Tween.EASE_IN_OUT,
+		DURATION_SCALE + DURATION_VISIBLE
+	)
+# warning-ignore:return_value_discarded
+	tween.start()
+	yield(tween, "tween_all_completed")
+	queue_free()

tutorial/godot/src/UI/Components/Notification.tscn

@@ -0,0 +1,30 @@
+[gd_scene load_steps=3 format=2]
+
+[ext_resource path="res://assets/theme/gdquest.theme" type="Theme" id=1]
+[ext_resource path="res://src/UI/Elements/Notification.gd" type="Script" id=2]
+
+[node name="Panel" type="Panel"]
+margin_right = 400.0
+margin_bottom = 120.0
+grow_horizontal = 2
+rect_min_size = Vector2( 400, 120 )
+rect_pivot_offset = Vector2( 400, 120 )
+theme = ExtResource( 1 )
+script = ExtResource( 2 )
+__meta__ = {
+"_edit_use_anchors_": false,
+"_editor_description_": ""
+}
+
+[node name="RichTextLabel" type="RichTextLabel" parent="."]
+margin_left = 10.0
+margin_top = 10.0
+margin_right = 390.0
+margin_bottom = 90.0
+bbcode_enabled = true
+scroll_active = false
+__meta__ = {
+"_edit_use_anchors_": false
+}
+
+[node name="Tween" type="Tween" parent="."]