[eden] marquee text on carousel (grid todo)

Signed-off-by: crueter <crueter@eden-emu.dev>

src/eden/Eden/Main/GameCarousel.qml

@@ -59,27 +59,126 @@ ListView {
 
         radius: 8 * Constants.scalar
 
-        // TODO: marquee
-        Text {
+        Item {
+            id: container
+
+            anchors {
+                bottom: hg.top
+
+                left: hg.left
+                right: hg.right
+            }
+
+            height: txt.contentHeight
+            clip: true
+
             function toTitleCase(str) {
                 return str.replace(/\w\S*/g, text => text.charAt(0).toUpperCase(
                                        ) + text.substring(1).toLowerCase())
             }
 
-            text: hg.item === null ? "" : toTitleCase(hg.item.title)
-            font.pixelSize: 22 * Constants.scalar
-            color: "lightblue"
+            property string text: hg.item === null ? "" : toTitleCase(
+                                                         hg.item.title)
+            property string spacing: "      "
+            property string combined: text + spacing
+            property string display: animate ? combined.substring(
+                                                   step) + combined.substring(
+                                                   0, step) : text
+            property int step: 0
+            property bool animate: txt.contentWidth > hg.width
+
+            Timer {
+                id: marquee
+
+                interval: 150
+                running: false
+                repeat: true
+                onTriggered: {
+                    parent.step = (parent.step + 1) % parent.combined.length
+                    if (parent.step === 0) {
+                        stop()
+                        delay.start()
+                    }
+                }
+            }
+
+            Timer {
+                id: delay
+                interval: 1500
+                repeat: false
+                onTriggered: {
+                    marquee.start()
+                }
+            }
 
-            anchors {
-                bottom: hg.top
+            // fake container to gauge contentWidth
+            Text {
+                id: txt
+                visible: false
+                text: parent.text
+                font.pixelSize: 22 * Constants.scalar
+                font.family: "Monospace"
+
+                onContentWidthChanged: {
+                    if (txt.contentWidth > hg.width) {
+                        container.step = 0
+                        delay.start()
+                    } else {
+                        delay.stop()
+                        marquee.stop()
+                    }
+                }
+            }
 
-                bottomMargin: 10 * Constants.scalar
-                left: hg.left
-                right: hg.right
+            Text {
+                anchors {
+                    fill: parent
+                    leftMargin: 10
+                    rightMargin: 10
+                }
+
+                color: "lightblue"
+                font.pixelSize: 22 * Constants.scalar
+                font.family: "Monospace"
+                text: parent.display
+
+                horizontalAlignment: container.animate ? Text.AlignLeft : Text.AlignHCenter
             }
 
-            horizontalAlignment: Text.AlignHCenter
-            elide: Text.ElideRight
+            Rectangle {
+                anchors.fill: parent
+                z: 2
+
+                gradient: Gradient {
+                    orientation: Gradient.Horizontal
+                    GradientStop {
+                        position: 0.0
+                        color: marquee.running ? Constants.bg : "transparent"
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: 200
+                            }
+                        }
+                    }
+                    GradientStop {
+                        position: 0.1
+                        color: "transparent"
+                    }
+                    GradientStop {
+                        position: 0.9
+                        color: "transparent"
+                    }
+                    GradientStop {
+                        position: 1.0
+                        color: marquee.running ? Constants.bg : "transparent"
+                        Behavior on color {
+                            ColorAnimation {
+                                duration: 200
+                            }
+                        }
+                    }
+                }
+            }
         }
     }