activities/enumerate/Enumerate.qml

0001 /* GCompris - Enumerate.qml
0002 *
0003 * SPDX-FileCopyrightText: 2014 Thib ROMAIN <thibrom@gmail.com>
0004 *
0005 * Authors:
0006 *   Bruno Coudoin <bruno.coudoin@gcompris.net> (GTK+ version)
0007 *   Thib ROMAIN <thibrom@gmail.com> (Qt Quick port)
0008 *
0009 *   SPDX-License-Identifier: GPL-3.0-or-later
0010 */
0011 import QtQuick 2.12
0012 import GCompris 1.0
0013 import "."
0014
0015 import "../../core"
0016 import "enumerate.js" as Activity
0017
0018 ActivityBase {
0019     id: activity
0020
0021     onStart: { focus: true }
0022     onStop: {}
0023
0024     // When opening a dialog, it steals the focus and re set it to the activity.
0025     // We need to set it back to the answerColumn item in order to have key events.
0026     onFocusChanged: {
0027         if(focus) {
0028             Activity.focusAnswerInput();
0029         }
0030     }
0031
0032     pageComponent: Image {
0033         id: background
0034         anchors.fill: parent
0035         signal start
0036         signal stop
0037         fillMode: Image.PreserveAspectCrop
0038         source: Activity.url + "background.svg"
0039         sourceSize.width: width
0040         sourceSize.height: height
0041
0042         Component.onCompleted: {
0043             dialogActivityConfig.initialize()
0044             activity.start.connect(start)
0045             activity.stop.connect(stop)
0046         }
0047         onStart: { Activity.start(items); keyboard.populate(); }
0048         onStop: { Activity.stop() }
0049
0050         //instruction rectangle
0051         Rectangle {
0052             id: instruction
0053             anchors {
0054                 top: parent.top
0055                 topMargin: 5
0056                 horizontalCenter: parent.horizontalCenter
0057             }
0058             height: instructionTxt.contentHeight * 1.1
0059             width: Math.max(Math.min(parent.width * 0.8, instructionTxt.text.length * 10), parent.width * 0.3)
0060             opacity: 0.8
0061             visible: items.levels
0062             radius: 10
0063             border.width: 2
0064             z: instruction.opacity === 0 ? -10 : 10
0065             border.color: "#DDD"
0066             color: "#373737"
0067
0068             Behavior on opacity { PropertyAnimation { duration: 200 } }
0069
0070             //shows/hides the Instruction
0071             MouseArea {
0072                 anchors.fill: parent
0073                 onClicked: instruction.opacity = instruction.opacity == 0 ? 0.8 : 0
0074             }
0075
0076             GCText {
0077                 id: instructionTxt
0078                 anchors {
0079                     top: parent.top
0080                     topMargin: 5
0081                     horizontalCenter: parent.horizontalCenter
0082                 }
0083                 opacity: instruction.opacity
0084                 z: instruction.z
0085                 fontSize: smallSize
0086                 color: "white"
0087                 text: items.instructionText
0088                 horizontalAlignment: Text.AlignHCenter
0089                 width: parent.width * 0.8
0090                 wrapMode: TextEdit.WordWrap
0091             }
0092         }
0093
0094         Keys.onDownPressed: {
0095             if(++answerColumn.currentIndex >= answerColumn.count)
0096                 answerColumn.currentIndex = 0
0097             Activity.registerAnswerItem(answerColumn.itemAt(answerColumn.currentIndex))
0098         }
0099         Keys.onUpPressed: {
0100             if(--answerColumn.currentIndex < 0)
0101                 answerColumn.currentIndex = answerColumn.count - 1
0102             Activity.registerAnswerItem(answerColumn.itemAt(answerColumn.currentIndex))
0103         }
0104
0105         QtObject {
0106             id: items
0107             property alias background: background
0108             property int currentLevel: activity.currentLevel
0109             property alias bonus: bonus
0110             property alias okButton: okButton
0111             property alias answerColumn: answerColumn
0112             property alias itemListModel: itemList.model
0113             property alias instruction: instruction
0114             property string instructionText: ""
0115             property alias score: score
0116             property alias errorRectangle: errorRectangle
0117             property GCSfx audioEffects: activity.audioEffects
0118             readonly property var levels: activity.datasetLoader.data.length !== 0 ? activity.datasetLoader.data : null
0119             property int mode: 1 // default is automatic
0120             property bool buttonsBlocked: false
0121         }
0122
0123         DropArea {
0124             id: dropableArea
0125             anchors.left: background.left
0126             anchors.bottom: background.bottom
0127             width: background.width
0128             height: background.height
0129             onEntered: instruction.opacity !== 0 ? instruction.opacity = 0 : null
0130         }
0131
0132         Image {
0133             source: Activity.url + 'turtle.svg'
0134             anchors.fill: parent
0135             fillMode: Image.PreserveAspectFit
0136             sourceSize.width: Math.max(parent.width, parent.height)
0137         }
0138
0139         Column {
0140             id: answer
0141             anchors {
0142                 left: parent.left
0143                 top: parent.top
0144                 margins: 10
0145             }
0146             spacing: 5
0147
0148             Repeater {
0149                 id: answerColumn
0150                 property int currentIndex
0151
0152                 onModelChanged: currentIndex = count - 1
0153                 AnswerArea {
0154                     imgPath: modelData
0155                     focus: true
0156                     state: "default"
0157                 }
0158             }
0159
0160             add: Transition {
0161                 NumberAnimation { properties: "x,y"; duration: 200 }
0162             }
0163         }
0164
0165         // Reposition the items to find when whidh or height changes
0166         onWidthChanged: {
0167             for(var i in itemList.model)
0168                 itemList.itemAt(i).positionMe()
0169         }
0170
0171         onHeightChanged: {
0172             for(var i in itemList.model)
0173                 itemList.itemAt(i).positionMe()
0174         }
0175
0176         Repeater {
0177             id: itemList
0178
0179             ItemToEnumerate {
0180                 source: modelData
0181                 main: background
0182             }
0183         }
0184
0185         ErrorRectangle {
0186             id: errorRectangle
0187             anchors.fill: answer
0188             imageSize: okButton.width
0189             function releaseControls() { items.buttonsBlocked = false; }
0190         }
0191
0192         VirtualKeyboard {
0193             id: keyboard
0194             anchors.bottom: parent.bottom
0195             anchors.horizontalCenter: parent.horizontalCenter
0196             enabled: visible && !items.buttonsBlocked
0197
0198             function populate() {
0199                 layout = [ [
0200                     { label: "0" },
0201                     { label: "1" },
0202                     { label: "2" },
0203                     { label: "3" },
0204                     { label: "4" },
0205                     { label: "5" },
0206                     { label: "6" },
0207                     { label: "7" },
0208                     { label: "8" },
0209                     { label: "9" }
0210                 ] ]
0211             }
0212
0213             onKeypress: Activity.currentAnswerItem.appendText(text)
0214
0215             onError: console.log("VirtualKeyboard error: " + msg);
0216         }
0217
0218
0219         DialogChooseLevel {
0220             id: dialogActivityConfig
0221             currentActivity: activity.activityInfo
0222             onSaveData: {
0223                 levelFolder = dialogActivityConfig.chosenLevels
0224                 currentActivity.currentLevels = dialogActivityConfig.chosenLevels
0225                 ApplicationSettings.setCurrentLevels(currentActivity.name, dialogActivityConfig.chosenLevels)
0226             }
0227             onLoadData: {
0228                 if(activityData && activityData["mode"]) {
0229                     items.mode = activityData["mode"];
0230                 }
0231             }
0232             onClose: {
0233                 home()
0234             }
0235             onStartActivity: {
0236                 background.stop()
0237                 background.start()
0238             }
0239         }
0240
0241         Score {
0242             id: score
0243             anchors.top: undefined
0244             anchors.bottom: undefined
0245             anchors.verticalCenter: okButton.verticalCenter
0246             anchors.right: okButton.visible ? okButton.left : background.right
0247             anchors.rightMargin: 10 * ApplicationInfo.ratio
0248             onStop: Activity.nextSubLevel()
0249         }
0250
0251         DialogHelp {
0252             id: dialogHelp
0253             onClose: home()
0254         }
0255
0256         Bar {
0257             id: bar
0258             level: items.currentLevel + 1
0259             anchors.bottom: keyboard.top
0260             content: BarEnumContent { value: help | home | level | activityConfig }
0261             onHelpClicked: {
0262                 displayDialog(dialogHelp)
0263             }
0264             onPreviousLevelClicked: Activity.previousLevel()
0265             onNextLevelClicked: Activity.nextLevel()
0266             onHomeClicked: activity.home()
0267             onActivityConfigClicked: {
0268                  displayDialog(dialogActivityConfig)
0269              }
0270         }
0271
0272         BarButton {
0273             id: okButton
0274             enabled: items.mode === 2 && !items.buttonsBlocked
0275             visible: items.mode === 2
0276             anchors {
0277                 bottom: bar.top
0278                 right: parent.right
0279                 rightMargin: 9 * ApplicationInfo.ratio
0280                 bottomMargin: 9 * ApplicationInfo.ratio
0281             }
0282             source: "qrc:/gcompris/src/core/resource/bar_ok.svg"
0283             sourceSize.width: 80 * ApplicationInfo.ratio
0284             onClicked: Activity.checkAnswers();
0285         }
0286
0287         Keys.onReturnPressed: okButton.visible && okButton.enabled === true ? Activity.checkAnswers() : ""
0288         Keys.onEnterPressed: okButton.visible && okButton.enabled === true ? Activity.checkAnswers() : ""
0289
0290         Bonus {
0291             id: bonus
0292             Component.onCompleted: win.connect(Activity.nextLevel)
0293         }
0294     }
0295 }