GamesListDelegateBackground.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import "../../../../../../base_qml/common/components/effects"

Item {
    id: backgroundItem

    property real backgroundRadius: 4
    property string listElementName: "cash-tables"
    property color listElementBackgroundColor: "#ff0000"

    implicitWidth: 302
    implicitHeight: 84

    Rectangle {
        id: backgroundShadow

        anchors.fill: parent

        layer.enabled: true
        layer.effect: RectangularGlow {
            anchors.fill: backgroundShadow
            glowRadius: 8
            color: Qt.rgba(0, 0, 0, 0.5)
        }
    }

    Rectangle {
        id: backgroundImageContainer

        anchors.fill: parent

        radius: backgroundItem.backgroundRadius
        color: listElementBackgroundColor

        SpriteSequence {
            id: image

            width: parent.width
            height: parent.height


            Sprite {
                id: sprite

                frameDuration: 300.0
                frameSync: false
                frameWidth: 600.0
                frameHeight: 166.0
                frameCount: 200.0

                source: Qt.resolvedUrl( "../../../../../../qml/mobile/forms/lobby/home/gameslist/sprite/gameslist-" + listElementName + "-background.png" )
            }
        }

        clip: true

        layer.enabled: true
        layer.effect: SEOpacityMaskEffect {
            source: backgroundImageContainer
            maskSource: Rectangle {
                width: backgroundImageContainer.width
                height: backgroundImageContainer.height
                radius: backgroundImageContainer.radius
            }
        }
    }

    Rectangle {
        id: backgroundBorder

        anchors.fill: parent

        radius: parent.backgroundRadius
        border.width: 1
        border.color: Qt.rgba(1.0, 1.0, 1.0, 0.3)
        color: "transparent"
    }
}