Standard-of-Iron/ui/qml/SettingsPanel.qml

import QtQml 2.15
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.3
import StandardOfIron 1.0

Item {
    id: root

    signal cancelled()

    anchors.fill: parent
    z: 25
    Keys.onPressed: function(event) {
        if (event.key === Qt.Key_Escape) {
            root.cancelled();
            event.accepted = true;
        }
    }
    Component.onCompleted: {
        forceActiveFocus();
    }

    Rectangle {
        anchors.fill: parent
        color: Theme.dim
    }

    Rectangle {
        id: container

        width: Math.min(parent.width * 0.6, 700)
        height: Math.min(parent.height * 0.8, 600)
        anchors.centerIn: parent
        radius: Theme.radiusPanel
        color: Theme.panelBase
        border.color: Theme.panelBr
        border.width: 1
        opacity: 0.98

        ColumnLayout {
            anchors.fill: parent
            anchors.margins: Theme.spacingXLarge
            spacing: Theme.spacingLarge

            RowLayout {
                Layout.fillWidth: true
                spacing: Theme.spacingMedium

                Label {
                    text: qsTr("Settings")
                    color: Theme.textMain
                    font.pointSize: Theme.fontSizeHero
                    font.bold: true
                    Layout.fillWidth: true
                }

                StyledButton {
                    text: qsTr("Close")
                    buttonStyle: "secondary"
                    onClicked: root.cancelled()
                }

            }

            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 1
                color: Theme.border
            }

            ScrollView {
                Layout.fillWidth: true
                Layout.fillHeight: true
                clip: true
                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                ScrollBar.vertical.policy: ScrollBar.AsNeeded

                ColumnLayout {
                    width: container.width - Theme.spacingXLarge * 2
                    spacing: Theme.spacingLarge

                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: Theme.spacingMedium

                        Label {
                            text: qsTr("Audio Settings")
                            color: Theme.textMain
                            font.pointSize: Theme.fontSizeLarge
                            font.bold: true
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 2
                            color: Theme.border
                            opacity: 0.5
                        }

                        GridLayout {
                            Layout.fillWidth: true
                            columns: 2
                            rowSpacing: Theme.spacingMedium
                            columnSpacing: Theme.spacingMedium

                            Label {
                                text: qsTr("Master Volume:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            RowLayout {
                                Layout.fillWidth: true
                                spacing: Theme.spacingSmall

                                Slider {
                                    id: masterVolumeSlider

                                    Layout.fillWidth: true
                                    from: 0
                                    to: 100
                                    value: 100
                                    stepSize: 1
                                    onValueChanged: {
                                        if (typeof game !== 'undefined' && game.audioSystem)
                                            game.audioSystem.setMasterVolume(value / 100);

                                    }
                                }

                                Label {
                                    text: Math.round(masterVolumeSlider.value) + "%"
                                    color: Theme.textSub
                                    font.pointSize: Theme.fontSizeMedium
                                    Layout.minimumWidth: 45
                                }

                            }

                            Label {
                                text: qsTr("Music Volume:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            RowLayout {
                                Layout.fillWidth: true
                                spacing: Theme.spacingSmall

                                Slider {
                                    id: musicVolumeSlider

                                    Layout.fillWidth: true
                                    from: 0
                                    to: 100
                                    value: 100
                                    stepSize: 1
                                    onValueChanged: {
                                        if (typeof game !== 'undefined' && game.audioSystem)
                                            game.audioSystem.setMusicVolume(value / 100);

                                    }
                                }

                                Label {
                                    text: Math.round(musicVolumeSlider.value) + "%"
                                    color: Theme.textSub
                                    font.pointSize: Theme.fontSizeMedium
                                    Layout.minimumWidth: 45
                                }

                            }

                            Label {
                                text: qsTr("SFX Volume:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            RowLayout {
                                Layout.fillWidth: true
                                spacing: Theme.spacingSmall

                                Slider {
                                    id: sfxVolumeSlider

                                    Layout.fillWidth: true
                                    from: 0
                                    to: 100
                                    value: 100
                                    stepSize: 1
                                    onValueChanged: {
                                        if (typeof game !== 'undefined' && game.audioSystem)
                                            game.audioSystem.setSoundVolume(value / 100);

                                    }
                                }

                                Label {
                                    text: Math.round(sfxVolumeSlider.value) + "%"
                                    color: Theme.textSub
                                    font.pointSize: Theme.fontSizeMedium
                                    Layout.minimumWidth: 45
                                }

                            }

                            Label {
                                text: qsTr("Voice Volume:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            RowLayout {
                                Layout.fillWidth: true
                                spacing: Theme.spacingSmall

                                Slider {
                                    id: voiceVolumeSlider

                                    Layout.fillWidth: true
                                    from: 0
                                    to: 100
                                    value: 100
                                    stepSize: 1
                                    onValueChanged: {
                                        if (typeof game !== 'undefined' && game.audioSystem)
                                            game.audioSystem.setVoiceVolume(value / 100);

                                    }
                                }

                                Label {
                                    text: Math.round(voiceVolumeSlider.value) + "%"
                                    color: Theme.textSub
                                    font.pointSize: Theme.fontSizeMedium
                                    Layout.minimumWidth: 45
                                }

                            }

                        }

                    }

                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 1
                        color: Theme.border
                    }

                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: Theme.spacingMedium

                        Label {
                            text: qsTr("Graphics Settings")
                            color: Theme.textMain
                            font.pointSize: Theme.fontSizeLarge
                            font.bold: true
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 2
                            color: Theme.border
                            opacity: 0.5
                        }

                        GridLayout {
                            Layout.fillWidth: true
                            columns: 2
                            rowSpacing: Theme.spacingMedium
                            columnSpacing: Theme.spacingMedium

                            Label {
                                text: qsTr("Graphics Quality:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            StyledComboBox {
                                id: graphicsQualityComboBox

                                Layout.fillWidth: true
                                model: typeof graphicsSettings !== 'undefined' ? graphicsSettings.quality_options : ["Low", "Medium", "High", "Ultra"]
                                currentIndex: typeof graphicsSettings !== 'undefined' ? graphicsSettings.quality_level : 1
                                onActivated: function(index) {
                                    if (typeof graphicsSettings !== 'undefined')
                                        graphicsSettings.quality_level = index;

                                }
                            }

                            Label {
                                text: typeof graphicsSettings !== 'undefined' ? graphicsSettings.get_quality_description() : ""
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                                opacity: 0.7
                                wrapMode: Text.WordWrap
                                Layout.columnSpan: 2
                                Layout.fillWidth: true
                            }

                        }

                    }

                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 1
                        color: Theme.border
                    }

                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: Theme.spacingMedium

                        Label {
                            text: qsTr("Language")
                            color: Theme.textMain
                            font.pointSize: Theme.fontSizeLarge
                            font.bold: true
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 2
                            color: Theme.border
                            opacity: 0.5
                        }

                        GridLayout {
                            Layout.fillWidth: true
                            columns: 2
                            rowSpacing: Theme.spacingMedium
                            columnSpacing: Theme.spacingMedium

                            Label {
                                text: qsTr("Select Language:")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeMedium
                            }

                            StyledComboBox {
                                id: languageComboBox

                                Layout.fillWidth: true
                                model: typeof languageManager !== 'undefined' ? languageManager.availableLanguages : []
                                currentIndex: {
                                    if (typeof languageManager === 'undefined')
                                        return 0;

                                    var idx = languageManager.availableLanguages.indexOf(languageManager.currentLanguage);
                                    return idx >= 0 ? idx : 0;
                                }
                                displayText: {
                                    if (typeof languageManager === 'undefined' || !currentText)
                                        return "";

                                    return languageManager.languageDisplayName(currentText);
                                }
                                onActivated: function(index) {
                                    if (typeof languageManager !== 'undefined' && currentText)
                                        languageManager.setLanguage(currentText);

                                }
                                delegateText: function(data) {
                                    return typeof languageManager !== 'undefined' ? languageManager.languageDisplayName(data) : data;
                                }
                            }

                            Label {
                                text: qsTr("Language changes apply immediately")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                                opacity: 0.7
                                Layout.columnSpan: 2
                            }

                        }

                    }

                    Rectangle {
                        Layout.fillWidth: true
                        Layout.preferredHeight: 1
                        color: Theme.border
                    }

                    ColumnLayout {
                        Layout.fillWidth: true
                        spacing: Theme.spacingMedium

                        Label {
                            text: qsTr("About")
                            color: Theme.textMain
                            font.pointSize: Theme.fontSizeLarge
                            font.bold: true
                        }

                        Rectangle {
                            Layout.fillWidth: true
                            Layout.preferredHeight: 2
                            color: Theme.border
                            opacity: 0.5
                        }

                        ColumnLayout {
                            Layout.fillWidth: true
                            spacing: Theme.spacingSmall

                            Label {
                                text: qsTr("Standard of Iron - RTS Game")
                                color: Theme.textMain
                                font.pointSize: Theme.fontSizeMedium
                                font.bold: true
                            }

                            Label {
                                text: qsTr("Version 1.0.0")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                            }

                            Rectangle {
                                Layout.fillWidth: true
                                Layout.preferredHeight: 1
                                color: Theme.border
                                opacity: 0.3
                                Layout.topMargin: Theme.spacingSmall
                                Layout.bottomMargin: Theme.spacingSmall
                            }

                            Label {
                                text: qsTr("Third-Party Software")
                                color: Theme.textMain
                                font.pointSize: Theme.fontSizeMedium
                                font.bold: true
                            }

                            Label {
                                text: qsTr("This game uses the Qt framework, licensed under the GNU Lesser General Public License v3 (LGPL v3).")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                                wrapMode: Text.WordWrap
                                Layout.fillWidth: true
                            }

                            Label {
                                text: qsTr("Qt is dynamically linked, allowing you to replace Qt libraries with your own versions.")
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                                wrapMode: Text.WordWrap
                                Layout.fillWidth: true
                            }

                            Label {
                                text: "<a href='https://www.gnu.org/licenses/lgpl-3.0.html'>LGPL v3 License</a> | <a href='https://www.qt.io'>Qt Website</a>"
                                color: Theme.textSub
                                font.pointSize: Theme.fontSizeSmall
                                textFormat: Text.RichText
                                onLinkActivated: function(link) {
                                    Qt.openUrlExternally(link);
                                }

                                MouseArea {
                                    anchors.fill: parent
                                    acceptedButtons: Qt.NoButton
                                    cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
                                }

                            }

                        }

                    }

                }

            }

        }

    }

}