Debugging and adjusting fade-in animation as well as moving message feed uxml into post game uxml

Author: Elfi0Kuhndorf

Assets/Prefabs/UI/UIToolkit/PostGameUICanvasUITK.prefab

@@ -75,7 +75,6 @@ GameObject:
   serializedVersion: 6
   m_Component:
   - component: {fileID: 2100339957089282678}
-  - component: {fileID: 1286002055205536738}
   - component: {fileID: 7623313333782190830}
   m_Layer: 5
   m_Name: MessageFeed
@@ -96,29 +95,9 @@ Transform:
   m_LocalPosition: {x: 0, y: 0, z: 0}
   m_LocalScale: {x: 1, y: 1, z: 1}
   m_ConstrainProportionsScale: 0
-  m_Children:
-  - {fileID: 5886284794912537810}
+  m_Children: []
   m_Father: {fileID: 7855837178462082302}
   m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
---- !u!114 &1286002055205536738
-MonoBehaviour:
-  m_ObjectHideFlags: 0
-  m_CorrespondingSourceObject: {fileID: 0}
-  m_PrefabInstance: {fileID: 0}
-  m_PrefabAsset: {fileID: 0}
-  m_GameObject: {fileID: 5550880791410142769}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  m_PanelSettings: {fileID: 11400000, guid: 30704bc49d34869449e8bfdb3ab57841, type: 2}
-  m_ParentUI: {fileID: 2063287831439623020}
-  sourceAsset: {fileID: 9197481963319205126, guid: 79e0526232b7b2246a02c77f935c2b2a, type: 3}
-  m_SortingOrder: 0
-  m_WorldSpaceSizeMode: 1
-  m_WorldSpaceWidth: 1920
-  m_WorldSpaceHeight: 1080
 --- !u!114 &7623313333782190830
 MonoBehaviour:
   m_ObjectHideFlags: 0
@@ -132,54 +111,3 @@ MonoBehaviour:
   m_Name: 
   m_EditorClassIdentifier: 
   doc: {fileID: 2063287831439623020}
---- !u!1 &8225198564806970540
-GameObject:
-  m_ObjectHideFlags: 0
-  m_CorrespondingSourceObject: {fileID: 0}
-  m_PrefabInstance: {fileID: 0}
-  m_PrefabAsset: {fileID: 0}
-  serializedVersion: 6
-  m_Component:
-  - component: {fileID: 5886284794912537810}
-  - component: {fileID: 6577115012106585769}
-  m_Layer: 5
-  m_Name: MessageItem
-  m_TagString: Untagged
-  m_Icon: {fileID: 0}
-  m_NavMeshLayer: 0
-  m_StaticEditorFlags: 0
-  m_IsActive: 1
---- !u!4 &5886284794912537810
-Transform:
-  m_ObjectHideFlags: 0
-  m_CorrespondingSourceObject: {fileID: 0}
-  m_PrefabInstance: {fileID: 0}
-  m_PrefabAsset: {fileID: 0}
-  m_GameObject: {fileID: 8225198564806970540}
-  serializedVersion: 2
-  m_LocalRotation: {x: -0, y: -0, z: -0, w: 1}
-  m_LocalPosition: {x: 0, y: 0, z: 0}
-  m_LocalScale: {x: 1, y: 1, z: 1}
-  m_ConstrainProportionsScale: 0
-  m_Children: []
-  m_Father: {fileID: 2100339957089282678}
-  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
---- !u!114 &6577115012106585769
-MonoBehaviour:
-  m_ObjectHideFlags: 0
-  m_CorrespondingSourceObject: {fileID: 0}
-  m_PrefabInstance: {fileID: 0}
-  m_PrefabAsset: {fileID: 0}
-  m_GameObject: {fileID: 8225198564806970540}
-  m_Enabled: 1
-  m_EditorHideFlags: 0
-  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
-  m_Name: 
-  m_EditorClassIdentifier: 
-  m_PanelSettings: {fileID: 11400000, guid: 30704bc49d34869449e8bfdb3ab57841, type: 2}
-  m_ParentUI: {fileID: 1286002055205536738}
-  sourceAsset: {fileID: 9197481963319205126, guid: 67ec44aea0b0f484c86c6489932cfcad, type: 3}
-  m_SortingOrder: 0
-  m_WorldSpaceSizeMode: 1
-  m_WorldSpaceWidth: 1920
-  m_WorldSpaceHeight: 1080

Assets/Prefabs/UI/UIToolkit/USS/MessageFeed.uss

@@ -45,11 +45,9 @@
     height: 26px;
     translate: -150% 0 0;
     transition-property: translate, opacity;
-    transition-timing-function: ease-out-bounce, ease-in;
-    transition-duration: 2s, 1s;
+    transition-timing-function: ease-in-out-back, ease-in;
+    transition-duration: 0.5s, 1s;
     position: relative;
-    top: -537px;
-    left: 10px;
     overflow: scroll;
     flex-direction: column;
 }
@@ -69,6 +67,8 @@
 #messageList{
     flex-direction: column;
     position: absolute;
+    top: -537px;
+    left: 10px;
 }
 
 /* since we are using absolute position with a list view in this case

Assets/Prefabs/UI/UIToolkit/UXML/PostGameUICanvas.uxml

@@ -1,4 +1,5 @@
 <engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <engine:Template name="MessageFeed" src="project://database/Assets/Prefabs/UI/UIToolkit/UXML/MessageFeed.uxml?fileID=9197481963319205126&amp;guid=79e0526232b7b2246a02c77f935c2b2a&amp;type=3#MessageFeed" />
     <Style src="project://database/Assets/Prefabs/UI/UIToolkit/USS/GeneralUI.uss?fileID=7433441132597879392&amp;guid=36bef7d47f6ca284f8a33439946d6dfe&amp;type=3#GeneralUI" />
     <Style src="project://database/Assets/Prefabs/UI/UIToolkit/USS/MessageFeed.uss?fileID=7433441132597879392&amp;guid=daa8504d262853748b8d7c2a377261a3&amp;type=3#MessageFeed" />
     <engine:VisualElement name="postRoot" style="flex-grow: 1; flex-shrink: 5;">
@@ -9,6 +10,5 @@
         <engine:Button text="return to menu" name="menuBtn" class="menuButton" style="left: 32%; top: 75%; position: absolute;" />
         <engine:Button text="Waiting on host &#10;to play again" name="waitOnHostBtn" class="menuButton" style="position: absolute; top: 60%; left: 32%;" />
     </engine:VisualElement>
-    <!-- should use a custom control here, and this is not even the actual feed you are using in the post game ui -->
-    <engine:ScrollView name="messageFeed" class="message-feed message-item" />
+    <engine:Instance template="MessageFeed" />
 </engine:UXML>

Assets/Scripts/Gameplay/UI/MessageFeed.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections;
 using System.Collections.Generic;
+using System.Diagnostics;
 using UnityEngine;
 using UnityEngine.UIElements;
 using Unity.BossRoom.ConnectionManagement;
@@ -9,6 +10,7 @@
 using Unity.BossRoom.Gameplay.Messages;
 using Unity.BossRoom.Infrastructure;
 using VContainer;
+using Debug = UnityEngine.Debug;
 
 public class MessageFeed : MonoBehaviour
 {
@@ -123,6 +125,7 @@ void Start()
             var newLabel = new Label();
             newLabel.AddToClassList("message");
             newBox.Add(newLabel);
+            Debug.Log("Creating new message box" + newLabel);
 
             // the event when the control get's added to the "UI Canvas"
             newBox.RegisterCallback<AttachToPanelEvent>((e) =>
@@ -195,6 +198,7 @@ void Update()
 
         foreach (var m in _messagesToRemove)
         {
+            Debug.Log($"Removing message: {m.Message}");;
             var fadeOutClassName = "messageBoxFadeOut";
 
             var child = m_MessageContainer.Query<VisualElement>().Class("messageBox")
@@ -229,10 +233,10 @@ IEnumerator ToggleClassWithDelay(VisualElement element, string className, TimeSp
 
 
     // if you bind the itemsource to the list you don't actually have to manually do this
-    private class MessageViewModel
+    class MessageViewModel
     {
-        private readonly TimeSpan _autoDispose;
-        private DateTime _createdAt;
+        readonly TimeSpan _autoDispose;
+        DateTime _createdAt;
 
         public string Message { get; }