mathtrainingstuff/CalculatePage.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import "./"

Page {
    id: calculator

    property var nums: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    property int currIndex: -1

    signal pageOpened()

    onPageOpened: {
        console.log("opened calculator")
        calculator.state = "starting"
    }

    states: [
        State {
            name: "starting"
            PropertyChanges {
                target: calculatorStack
                currPage: calculatorStartPageComp
            }
        },

        State {
            name: "running"
            PropertyChanges {
                target: calculatorStack
                currPage: calculatorGamePageComp
            }
        }
    ]

    StackView {
        id: calculatorStack

        property var currPage;

        anchors.fill: parent

        onCurrPageChanged: {
            calculatorStack.replace(currPage)
        }
        onCurrentItemChanged: {
            calculatorStack.currentItem.pageOpened()
        }

        Component {
            id: calculatorStartPageComp
            Page {
                id: calculatorStartPage
                Label {
                    id: calculatorStartPageHeading
                    anchors {
                        top: parent.top
                        topMargin: parent.height * 0.05
                    }
                    font.pixelSize: parent.height * 0.15
                    text: "Calculator"
                }
                SpinBox {
                    id: calculatorTickInterval
                    from: 1
                    to: 100000
                    stepSize: 1
                    value: 30
                    anchors.horizontalCenter: parent.horizontalCenter
                    editable: true
                    anchors {
                        left: parent.left
                        top: parent.top
                        leftMargin: parent.width * 0.5 - width * 0.5
                        topMargin: parent.height * 0.3 - height * 0.5
                    }

                }
                SpinBox {
                    id: calculatorNumCount
                    from: 1
                    to: 100000
                    stepSize: 1
                    value: 10
                    anchors.horizontalCenter: parent.horizontalCenter
                    editable: true
                    anchors {
                        left: parent.left
                        top: parent.top
                        leftMargin: parent.width * 0.5 - width * 0.5
                        topMargin: parent.height * 0.6 - height * 0.5
                    }
                }
                Button {
                    id: calculatorStartButton
                    text: "start"
                    onClicked: {
                        calculator.start()
                    }
                }
            }
        }

        Component {
            id: calculatorGamePageComp
            Page {
                Label {
                    id: num
                    anchors.centerIn: parent
                    font.pixelSize: calculator.height * 0.6
                    text: calculator.nums[calculator.currIndex]
                }


                ProgressBar {
                    id: prog
                    property int progress: 0
                    anchors {
                        bottom: parent.bottom
                        bottomMargin: parent.height * 0.02
                        left: parent.left
                        leftMargin: parent.width * 0.01
                        right: parent.right
                        rightMargin: parent.width * 0.01
                    }
                    value: progress/100
                    onValueChanged: {
                        console.log(value)
                    }

                    NumberAnimation {
                        id: progAnim
                        target: prog
                        property: "progress"
                        from: 100
                        to: 0
                        duration: tick.interval
                        easing.type: Easing.Linear
                    }
                }

                Timer {
                    id: tick
                    interval: calculatorTickInterval.value
                    repeat: false
                    running: calculator.state === "running"

                    onTriggered: {
                        if(calculator.currIndex+1 <= 9){
                            nextNumber()
                            tick.start()
                        }
                        else {

                        }
                    }

                    onRunningChanged: {
                        if(running){
                            progAnim.start()
                        }
                    }
                }
            }
        }


        replaceExit: Transition {
            NumberAnimation {
                from: 1
                to: 0
                property: "opacity"
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }

        replaceEnter: Transition {
            NumberAnimation {
                from: 0
                to: 1
                property: "opacity"
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    }


    /*-------------------------
    ---------functions---------
    -------------------------*/

    function nextNumber(){
        var randNum = 0
        while(randNum === 0 || randNum === calculator.nums[currIndex]){
            randNum = Math.floor(Math.random() * 9)
        }
        calculator.nums[calculator.currIndex+1] = randNum
        console.log(randNum)
        calculator.currIndex += 1
    }

    function start(){
        calculator.nextNumber()
        calculator.state = "running"
    }
}