cpp/marble-game/GameOptions.qml

0001 // SPDX-License-Identifier: LGPL-2.1-or-later
0002 //
0003 // SPDX-FileCopyrightText: 2014 Abhinav Gangwar <abhgang@gmail.com>
0004 //
0005
0006
0007 import QtQuick 2.0
0008 import QtQuick.Controls 1.2
0009 import QtQuick.Controls.Styles 1.2
0010
0011 Rectangle {
0012     property alias gameOptionsPanelWidth: gameOptionsPanel.width
0013     property alias gameOptionsPanelHeight: gameOptionsPanel.height
0014
0015     //property real nItemInColumn: gameOptionsPanelLayout.children.size
0016     property real nItemInColumn: 3
0017
0018     property string bcgColor: "#2ecc71"
0019
0020     signal nextButtonClicked()
0021     signal gameClosed()
0022     signal answerDisplayButtonClicked()
0023
0024     // These signals tell which game has been selected by user
0025     signal countryByShapeGameRequested()
0026     signal countryByFlagGameRequested()
0027     signal clickOnThatGameRequested()
0028
0029     signal backButtonClick()
0030
0031     id: gameOptionsPanel
0032     objectName: "gameOptionsPanel"
0033     color: "#d3d7cf"
0034     state: "GAMES_VIEW_HIDDEN"
0035
0036     Column {
0037         id: gameOptionsPanelLayout
0038         anchors.centerIn: parent
0039         spacing: gameOptionsPanel.height/( nItemInColumn * 4 )
0040
0041         CustomButton {
0042             id: countryByShape
0043             buttonWidth: gameOptionsPanel.width*4/5
0044             buttonHeight: gameOptionsPanel.height*2/( nItemInColumn * 5 )
0045             normalColor: "#c266e0"
0046             labelText: qsTr("Identify The Country Shape")
0047             labelColor: "#FFFFFF"
0048             borderColor: "#000000"
0049             onButtonClick: {
0050                 gamesView.currentIndex = 0;
0051                 slider.value = 0;
0052                 gameOptionsPanel.state = "QUESTION_COUNT_QUERY";
0053             }
0054         }
0055
0056         CustomButton {
0057             id: countryByFlag
0058             buttonWidth: gameOptionsPanel.width*4/5
0059             buttonHeight: gameOptionsPanel.height*2/( nItemInColumn * 5 )
0060             normalColor: "#D68533"
0061             labelText: qsTr("Identify The Flag")
0062             labelColor: "#FFFFFF"
0063             borderColor: "#000000"
0064             onButtonClick: {
0065                 gamesView.currentIndex = 1;
0066                 slider.value = 0;
0067                 gameOptionsPanel.state = "QUESTION_COUNT_QUERY";
0068             }
0069         }
0070
0071         CustomButton {
0072             id: clickOnThat
0073             buttonWidth: gameOptionsPanel.width*4/5
0074             buttonHeight: gameOptionsPanel.height*2/( nItemInColumn * 5 )
0075             normalColor: "#5C8533"
0076             labelText: qsTr("Identify The Location of Country")
0077             labelColor: "#FFFFFF"
0078             borderColor: "#000000"
0079             onButtonClick: {
0080                 gamesView.currentIndex = 2;
0081                 slider.value = 0;
0082                 gameOptionsPanel.state = "QUESTION_COUNT_QUERY";
0083             }
0084         }
0085
0086         CustomButton {
0087             id: backButton
0088             buttonWidth: gameOptionsPanel.width*4/5
0089             buttonHeight: gameOptionsPanel.height*2/( nItemInColumn * 5 )
0090             normalColor: "#4D7094"
0091             labelText: qsTr("Main Menu")
0092             labelColor: "#FFFFFF"
0093             borderColor: "#000000"
0094
0095             onButtonClick: {
0096                 backButtonClick()
0097             }
0098         }
0099     }
0100
0101     GamesView {
0102         id: gamesView
0103         objectName: "gamesView"
0104         gamesDisplayWidth: parent.width
0105         gamesDisplayHeight: parent.height
0106     }
0107
0108     Component.onCompleted: {
0109         gamesView.quitGame.connect(gameOptionsPanel.gameQuitRequested);
0110         gamesView.requestNextQuestion.connect(gameOptionsPanel.nextButtonClicked);
0111         gamesView.requestAnswerDisplay.connect(gameOptionsPanel.answerDisplayButtonClicked);
0112
0113         countryByShapeGameRequested.connect(gamesView.initGame);
0114         countryByFlagGameRequested.connect(gamesView.initGame);
0115         clickOnThatGameRequested.connect(gamesView.initGame);
0116     }
0117
0118     Rectangle {
0119         id: questionsCountInput
0120         objectName: "questionsCountInput"
0121         width: parent.width
0122         height: parent.height
0123         anchors.centerIn: parent
0124
0125         color: "#E0FFD1"
0126
0127         Slider {
0128             id: slider
0129             anchors.left: parent.left
0130             anchors.leftMargin: 10
0131             anchors.right: parent.right
0132             anchors.rightMargin: 10
0133             anchors.top: parent.top
0134             anchors.topMargin: parent.height/3
0135             height: parent.height/10
0136             stepSize: 1
0137             minimumValue: 0
0138             maximumValue: 50
0139
0140             style: SliderStyle {
0141                 groove: Rectangle {
0142                     implicitWidth: 200
0143                     implicitHeight: 8
0144                     color: "#6B6B6B"
0145                     radius: 8
0146                 }
0147                 handle: Rectangle {
0148                     anchors.centerIn: parent
0149                     color: control.pressed ? "white" : "lightgray"
0150                     border.color: "gray"
0151                     border.width: 2
0152                     implicitWidth: 30
0153                     implicitHeight: 30
0154                     radius: 15
0155                 }
0156             }
0157         }
0158
0159         Text {
0160             id: numberOfQuestions
0161             objectName: "numberOfQuestions"
0162             anchors.top: slider.bottom
0163             anchors.topMargin: 20
0164             width: parent.width
0165             horizontalAlignment: Text.AlignHCenter
0166             font.pixelSize: parent.height/35
0167             color: "#666666"
0168
0169             text: {
0170                 "Total Questions: " + slider.value
0171             }
0172         }
0173
0174         CustomButton {
0175             id: okButton
0176             objectName: "okButton"
0177             anchors.top: numberOfQuestions.bottom
0178             anchors.topMargin: 20
0179             anchors.left: parent.left
0180             anchors.leftMargin: 15
0181             anchors.right: parent.right
0182             anchors.rightMargin: 15
0183
0184             normalColor: "gray"
0185             labelColor: "white"
0186             borderColor: "#000000"
0187             buttonHeight: parent.height/14
0188             labelText: qsTr("OK")
0189             labelSize: parent.width/8
0190
0191             enabled: slider.value > 0
0192             onButtonClick: {
0193                 gamesView.setMaximumQuestionsCounts( slider.value );
0194                 gameOptionsPanel.state = "GAMES_VIEW_VISIBLE";
0195
0196                 /**
0197                  * Emit signals for game initiation
0198                  * after the user has entered the
0199                  * number of questions he/she wants
0200                  * to attempt.
0201                  */
0202                 if ( gamesView.currentIndex == 0) {
0203                     countryByShapeGameRequested();
0204                 }
0205                 if ( gamesView.currentIndex == 1) {
0206                     countryByFlagGameRequested();
0207                 }
0208                 if ( gamesView.currentIndex == 2) {
0209                     clickOnThatGameRequested();
0210                 }
0211             }
0212         }
0213     }
0214
0215     /*
0216      * This function quits a particular game
0217      * and shows the user available games.
0218      * After that user can also switch to
0219      * main menu where we have "browse map"
0220      * and "play game" option
0221      */
0222     function gameQuitRequested() {
0223         if ( gameOptionsPanel.state == "GAMES_VIEW_VISIBLE" ) {
0224             gameOptionsPanel.state = "GAMES_VIEW_HIDDEN"
0225         }
0226         gameClosed();
0227     }
0228
0229     /*
0230      * The following functions sets the questions
0231      * for different type of games
0232      */
0233     function countryByShapeQuestion( answerOptions, correctAnswer ) {
0234         gamesView.postCountryShapeQuestion( answerOptions, correctAnswer );
0235     }
0236
0237     function countryByFlagQuestion( answerOptions, imageSource, rightAnswer ) {
0238         gamesView.postCountryFlagQuestion( answerOptions, imageSource, rightAnswer );
0239     }
0240
0241     function clickOnThatQuestion( countryName ) {
0242         gamesView.postClickOnThatQuestion( countryName );
0243     }
0244
0245     function displayResult( result ) {
0246         gamesView.displayResult( result );
0247     }
0248
0249     states: [
0250         /*
0251          * State when a particular game is
0252          * shown ( decided on basis of what user has opted
0253          * out of from available games in game menu )
0254          */
0255         State {
0256             name: "GAMES_VIEW_VISIBLE"
0257             PropertyChanges { target: gameOptionsPanelLayout; width: 0; height: 0; visible: false }
0258             PropertyChanges { target: questionsCountInput; width: 0; height: 0; visible: false }
0259             PropertyChanges { target: gamesView; anchors.centerIn:gameOptionsPanel; visible: true }
0260         },
0261
0262         /*
0263          * State when available games are shown.
0264          * User needs to choose any one of the game
0265          * from this menu
0266          */
0267         State {
0268             name: "GAMES_VIEW_HIDDEN"
0269             PropertyChanges { target: gamesView; width: 0; height: 0; visible: false }
0270             PropertyChanges { target: questionsCountInput; width: 0; height: 0; visible: false }
0271             PropertyChanges { target: gameOptionsPanelLayout; anchors.centerIn:gameOptionsPanel; visible: true }
0272         },
0273
0274         /**
0275          * The state displays UI to query
0276          * the user the maximum number of
0277          * questions he/she wants to attempts
0278          */
0279         State {
0280             name: "QUESTION_COUNT_QUERY"
0281             PropertyChanges { target: questionsCountInput; width: gameOptionsPanel.width;
0282                               height: gameOptionsPanel.height; visible: true }
0283             PropertyChanges { target: gameOptionsPanelLayout; width: 0; height: 0; visible: false }
0284             PropertyChanges { target: gamesView; width: 0; height: 0; visible: false }
0285         }
0286     ]
0287
0288     /*
0289      * Let's do some animation !!
0290      */
0291     transitions: [
0292         Transition {
0293             to: "*"
0294             NumberAnimation { target: gameOptionsPanelLayout; properties: "height, width"; duration: 150 }
0295             NumberAnimation { target: gamesView; properties: "height, width"; duration: 150 }
0296         }
0297     ]
0298
0299 }