Warning, /education/gcompris/src/activities/family/Family.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - family.qml
0002 *
0003 * SPDX-FileCopyrightText: 2016 Rajdeep Kaur <rajdeep.kaur@kde.org>
0004 *
0005 * Authors:
0006 *
0007 * Rajdeep Kaur <rajdeep.kaur@kde.org>
0008 * Rudra Nil Basu <rudra.nil.basu.1996@gmail.com>
0009 *
0010 * SPDX-License-Identifier: GPL-3.0-or-later
0011 */
0012 import QtQuick 2.12
0013 import GCompris 1.0
0014 import QtGraphicalEffects 1.0
0015 import "../../core"
0016 import "family.js" as Activity
0017
0018 ActivityBase {
0019 id: activity
0020
0021 property string mode: "family"
0022
0023 onStart: focus = true
0024 onStop: {}
0025
0026 pageComponent: Image {
0027 id: background
0028 anchors.fill: parent
0029 source: Activity.url + "background.svg"
0030 width: parent.width
0031 height: parent.height
0032 fillMode: Image.PreserveAspectCrop
0033 property bool horizontalLayout: background.width >= background.height
0034
0035 signal start
0036 signal stop
0037
0038 Component.onCompleted: {
0039 activity.start.connect(start)
0040 activity.stop.connect(stop)
0041 }
0042
0043 property real treeAreaWidth: background.horizontalLayout ? background.width * 0.65 : background.width
0044 property real treeAreaHeight: background.horizontalLayout ? background.height : background.height * 0.65
0045
0046 property real nodeWidth: (0.8 * treeAreaWidth) / 5
0047 property real nodeHeight: (0.8 * treeAreaWidth) / 5
0048
0049 property real nodeWidthRatio: nodeWidth / treeAreaWidth
0050 property real nodeHeightRatio: nodeHeight / treeAreaHeight
0051
0052 onWidthChanged: loadDatasetDelay.start()
0053 onHeightChanged: if (!loadDatasetDelay.running) {
0054 loadDatasetDelay.start()
0055 }
0056
0057 /*
0058 * Adding a delay before reloading the datasets
0059 * needed for fast width / height changes
0060 */
0061 Timer {
0062 id: loadDatasetDelay
0063 running: false
0064 repeat: false
0065 interval: 100
0066 onTriggered: Activity.loadDatasets()
0067 }
0068
0069 // Add here the QML items you need to access in javascript
0070 QtObject {
0071 id: items
0072 property Item main: activity.main
0073 property alias background: background
0074 property int currentLevel: activity.currentLevel
0075 property alias bonus: bonus
0076 property alias nodeRepeater: nodeRepeater
0077 property alias answersChoice: answersChoice
0078 property alias edgeRepeater: edgeRepeater
0079 property alias ringRepeator: ringRepeator
0080 property alias dataset: dataset
0081 property string mode: activity.mode
0082 property alias questionTopic: question.questionTopic
0083 property alias selectedPairs: selectedPairs
0084 property alias loadDatasetDelay: loadDatasetDelay
0085 property bool buttonsBlocked: false
0086 property point questionMarkPosition: questionMarkPosition
0087 property point meLabelPosition: meLabelPosition
0088 }
0089
0090 onStart: { Activity.start(items) }
0091 onStop: { Activity.stop() }
0092
0093 FamilyDataset {
0094 id: dataset
0095 }
0096
0097 // handling pair matching for family_find_relative
0098 Item {
0099 id: selectedPairs
0100 property var firstNodePointer: undefined
0101 property var secondNodePointer: undefined
0102
0103 function reset() {
0104 firstNodePointer = undefined
0105 secondNodePointer = undefined
0106 }
0107
0108 function deactivatePairs() {
0109 if (firstNodePointer && secondNodePointer) {
0110 firstNodePointer.changeState("deactivate")
0111 secondNodePointer.changeState("deactivate")
0112 reset()
0113 }
0114 }
0115
0116 function checkResult() {
0117 if (firstNodePointer.weight == (secondNodePointer.weight * -1) && firstNodePointer.weight != 0) {
0118 return true
0119 } else {
0120 return false
0121 }
0122 }
0123
0124 function selectNode(node_) {
0125 if (firstNodePointer && secondNodePointer)
0126 return
0127
0128 if(firstNodePointer == undefined) {
0129 firstNodePointer = node_
0130 firstNodePointer.changeState("activeTo")
0131 } else {
0132 secondNodePointer = node_
0133
0134 if (firstNodePointer == secondNodePointer) {
0135 deactivatePairs()
0136 return
0137 }
0138
0139 secondNodePointer.changeState("activeTo")
0140
0141 // checking results
0142 if (checkResult()) {
0143 bonus.good("lion")
0144 } else {
0145 bonus.bad("lion")
0146 deactivatePairs()
0147 }
0148 }
0149 }
0150 }
0151
0152 Item {
0153 id: board
0154 width: background.width
0155 height: background.height
0156 Rectangle {
0157 id: treeArea
0158 color: "transparent"
0159 width: background.treeAreaWidth
0160 height: background.treeAreaHeight
0161 anchors.horizontalCenter: activity.mode == "find_relative" ? board.horizontalCenter : undefined
0162 anchors.verticalCenter: activity.mode == "find_relative" ? board.verticalCenter : undefined
0163 border.width: 0
0164 Item {
0165 id: treeItem
0166 Repeater {
0167 id: nodeRepeater
0168 model: ListModel {}
0169 delegate:
0170 Node {
0171 id: currentPointer
0172 x: xPosition * treeArea.width
0173 y: yPosition * treeArea.height
0174 z: 30
0175 width: treeArea.width / 5
0176 height: treeArea.width / 5
0177 nodeWidth: currentPointer.width
0178 nodeHeight: currentPointer.height
0179 nodeImageSource: Activity.url + nodeValue
0180 borderColor: "#373737"
0181 borderWidth: 8
0182 color: "transparent"
0183 radius: nodeWidth / 2
0184 state: currentState
0185 weight: nodeWeight
0186
0187 states: [
0188 State {
0189 name: "active"
0190 PropertyChanges {
0191 target: currentPointer
0192 borderColor: "#e1e1e1"
0193 }
0194 },
0195 State {
0196 name: "deactivate"
0197 PropertyChanges {
0198 target: currentPointer
0199 }
0200 },
0201 State {
0202 name: "activeTo"
0203 PropertyChanges {
0204 target: currentPointer
0205 borderColor: "#e77936"
0206 color: "#80f2f2f2"
0207 }
0208 }
0209 ]
0210 }
0211 }
0212
0213 Rectangle {
0214 id: me
0215 visible: dataset.levelElements[bar.level-1].captions[0] !== undefined && activity.mode == "family"
0216 x: items.meLabelPosition.x * treeArea.width
0217 y: items.meLabelPosition.y * treeArea.height
0218
0219 width: treeArea.width / 12
0220 height: treeArea.height / 14
0221
0222 radius: 5
0223 color: "#f2f2f2"
0224 border.color: "#e1e1e1"
0225 GCText {
0226 id: meLabel
0227 text: qsTr("Me")
0228 color: "#555555"
0229 anchors {
0230 horizontalCenter: parent.horizontalCenter
0231 verticalCenter: parent.verticalCenter
0232 }
0233 }
0234 }
0235
0236 Rectangle {
0237 id: questionmark
0238 visible: dataset.levelElements[bar.level-1].captions[1] !== undefined && activity.mode == "family"
0239 x: items.questionMarkPosition.x * treeArea.width
0240 y: items.questionMarkPosition.y * treeArea.height
0241
0242 width: treeArea.width / 14
0243 height: width
0244
0245 radius: width/2
0246 color: "#f2f2f2"
0247 border.color: "#e77936"
0248 GCText {
0249 id: qLabel
0250 text: qsTr("?")
0251 color: "#555555"
0252 anchors {
0253 horizontalCenter: parent.horizontalCenter
0254 verticalCenter: parent.verticalCenter
0255 }
0256 }
0257 }
0258
0259 Repeater {
0260 id: edgeRepeater
0261 model: ListModel {}
0262 delegate: Rectangle {
0263 id: edge
0264 z: 20
0265 opacity: 1
0266 antialiasing: true
0267 transformOrigin: Item.TopLeft
0268 x: _x1 * treeArea.width
0269 y: _y1 * treeArea.height
0270 property var x2: _x2 * treeArea.width
0271 property var y2: _y2 * treeArea.height
0272 width: Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y- y2, 2))
0273 height: 4 * ApplicationInfo.ratio
0274 rotation: (Math.atan((y2 - y)/(x2-x)) * 180 / Math.PI) + (((y2-y) < 0 && (x2-x) < 0) * 180) + (((y2-y) >= 0 && (x2-x) < 0) * 180)
0275 color: "#373737"
0276 }
0277 }
0278
0279 Repeater {
0280 id: ringRepeator
0281 model: ListModel {}
0282 delegate: Image {
0283 id: ring
0284 source: Activity.url + "rings.svg"
0285 width: treeArea.width * 0.05
0286 sourceSize.width: width
0287 fillMode: Image.PreserveAspectCrop
0288 x: ringx * treeArea.width
0289 y: ringy * treeArea.height
0290 z: 40
0291 }
0292 }
0293 }
0294 }
0295
0296 Rectangle {
0297 id: answers
0298 color: "transparent"
0299 width: background.horizontalLayout ? background.width*0.35 : background.width
0300 height: background.horizontalLayout ? background.height : background.height*0.35
0301 anchors.left: background.horizontalLayout ? treeArea.right : board.left
0302 anchors.top: background.horizontalLayout ? board.top: treeArea.bottom
0303 border.width: 0
0304 Rectangle {
0305 width: parent.width * 0.99
0306 height: parent.height * 0.99
0307 anchors.verticalCenter: parent.verticalCenter
0308 anchors.horizontalCenter: parent.horizontalCenter
0309 color: "transparent"
0310
0311 Grid {
0312 id: answersGrid
0313 visible: activity.mode == "family" ? true : false
0314 columns: 1
0315 rowSpacing: 10*ApplicationInfo.ratio
0316 states: [
0317 State {
0318 name: "anchorCenter"; when: background.horizontalLayout
0319 AnchorChanges {
0320 target: answersGrid
0321 anchors.verticalCenter: parent.verticalCenter
0322 anchors.left: parent.left
0323 }
0324 },
0325 State {
0326 name: "anchorTop"; when: !background.horizontalLayout
0327 AnchorChanges {
0328 target: answersGrid
0329 anchors.top: parent.top
0330 anchors.horizontalCenter: parent.horizontalCenter
0331 }
0332 }
0333 ]
0334 Repeater {
0335 id: answersChoice
0336 model: ListModel {}
0337 delegate:
0338 AnswerButton {
0339 id: options
0340 width: answers.width*0.75
0341 height: answers.height*Activity.answerButtonRatio
0342 textLabel: optionn
0343 isCorrectAnswer: textLabel === answer
0344 onCorrectlyPressed: bonus.good("lion")
0345 onIncorrectlyPressed: bonus.bad("lion")
0346 onPressed: items.buttonsBlocked = true
0347 blockAllButtonClicks: items.buttonsBlocked
0348 }
0349 }
0350 }
0351 }
0352 }
0353 }
0354
0355 GCText {
0356 id: question
0357 property string questionTopic
0358 visible: activity.mode == "find_relative" ? true : false
0359 width: background.width
0360 anchors.horizontalCenter: background.horizontalCenter
0361 horizontalAlignment: Text.AlignHCenter
0362 wrapMode: Text.WordWrap
0363 fontSize: smallSize
0364 text: qsTr("Select one of the pairs corresponding to: %1").arg(questionTopic)
0365
0366 Rectangle {
0367 width: parent.width
0368 height: parent.height
0369 anchors.horizontalCenter: parent.horizontalCenter
0370
0371 z: parent.z - 1
0372 radius: 10
0373 border.width: 1
0374
0375 color: "white"
0376 opacity: 0.8
0377 }
0378 }
0379
0380 DialogHelp {
0381 id: dialogHelp
0382 onClose: home()
0383 }
0384
0385 Bar {
0386 id: bar
0387 level: items.currentLevel + 1
0388 content: BarEnumContent { value: help | home | level }
0389 onHelpClicked: {
0390 displayDialog(dialogHelp)
0391 }
0392 onPreviousLevelClicked: Activity.previousLevel()
0393 onNextLevelClicked: Activity.nextLevel()
0394 onHomeClicked: activity.home()
0395 }
0396
0397 Bonus {
0398 id: bonus
0399 onStop: items.buttonsBlocked = false
0400 Component.onCompleted: win.connect(Activity.nextLevel)
0401 }
0402 }
0403 }