roulette-payout/PlayerAreaView.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import roulette

Item {
    anchors {
        left: parent.left
        leftMargin: 10
    }

    Text {
        id: croupier
        text: "Croupier"
    }

    ColumnLayout {
        anchors {
            top: croupier.bottom
            topMargin: 20
        }

        spacing: 60

        /*
         * A repeater can only have one delegate model
         * i.e. it can only have one object template defined in it.
         * To repeat both a Text, and Rectangle AND a TextField, we put them inside an Item
         * and use anchors to sort them inside the Item
         */
        Repeater {
            model: 7

            Item {
                Text {
                    id: label
                    text: "Player " + (index + 1)
                }

                Rectangle {
                    id: indicator
                    color: "red"
                    height: 10
                    width: 10
                    /* 
                     * This check will run once when the object is created, but then only refresh
                     * when the NOTIFY signal for .focusedPlayer is sent
                     */
                    visible: PlayerAreaModel.focusedPlayer == index
                    opacity: 0.5

                    anchors {
                        verticalCenter: inputField.verticalCenter
                        right: inputField.left
                        rightMargin: 5
                    }
                }

                TextField {
                    id: inputField
                    anchors.top: label.bottom
                    anchors.topMargin: 6

                    onTextEdited: PlayerAreaModel.setPlayerName(text, index)
                    onActiveFocusChanged: {
                        /* focusReason 0, 1 and 2 are mouse, tab forward, and tab backward, respectively */
                        if (activeFocus && (focusReason == 0 || focusReason == 1 || focusReason == 2)) {
                            PlayerAreaModel.focusedPlayer = index
                        }
                    }
                }
            }
        }
    }
}