Warning, /education/marble/examples/cpp/marble-game/GameOptions.qml is written in an unsupported language. File is not indexed.
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 }