activities/magic-hat-minus/Star.qml

0001 /* GCompris - MagicHat.qml
0002  *
0003  * SPDX-FileCopyrightText: 2014 Thibaut ROMAIN <thibrom@gmail.com>
0004  *
0005  * Authors:
0006  *   <Bruno Coudoin> (GTK+ version)
0007  *   Thibaut 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 "magic-hat.js" as Activity
0013
0014
0015 Item {
0016     id: mainItem
0017     property bool isClickable: false
0018     property bool displayBounds: true
0019     property bool selected: false
0020     property string backgroundColor
0021     property Item initialParent
0022     property Item theHat
0023     property Item newTarget
0024     property int barGroupIndex
0025     property int barIndex
0026     property string wantedColor: "1"
0027     state: "Init"
0028
0029     width: 34
0030     height: 34
0031
0032     MouseArea {
0033         id: mouseArea
0034         anchors.fill: parent
0035         enabled: isClickable
0036         hoverEnabled: true
0037         onClicked: {
0038             mainItem.selected = !mainItem.selected
0039             Activity.userClickedAStar(barIndex, mainItem.selected)
0040         }
0041     }
0042
0043     Rectangle {
0044         id: contour
0045         anchors.fill: parent
0046         border.color: "#373737"
0047         border.width: mouseArea.containsMouse ? 2 : 1
0048         opacity: displayBounds ? 1.0 : 0.0
0049         color: mainItem.backgroundColor
0050     }
0051
0052     Image {
0053         id: starImg
0054         source: mainItem.selected ?
0055                     Activity.url + "star-" + wantedColor + ".svg" : Activity.url + "star-0.svg"
0056         width: contour.width - 4
0057         height: width
0058         sourceSize.width: width
0059         anchors.centerIn: contour
0060         fillMode: Image.PreserveAspectFit
0061         opacity: 1
0062         visible: true
0063     }
0064
0065     states: [
0066         State {
0067             name: "Init"
0068             ParentChange {
0069                 target: mainItem
0070                 parent: mainItem.initialParent
0071                 x: 0
0072                 y: 0
0073                 rotation: 0
0074             }
0075             PropertyChanges {
0076                 target: mainItem
0077                 opacity: mainItem.displayBounds ? 1 : 0
0078             }
0079         },
0080         State {
0081             name: "MoveUnderHat"
0082             ParentChange {
0083                 target: mainItem
0084                 parent: mainItem.theHat
0085                 x: 0
0086                 y: 0
0087                 rotation: 180
0088             }
0089             PropertyChanges {
0090                 target: mainItem
0091                 opacity: 1
0092             }
0093         },
0094         State {
0095             name: "MoveToTarget"
0096             ParentChange {
0097                 target: mainItem
0098                 parent: mainItem.newTarget
0099                 x: 0
0100                 y: 0
0101                 rotation: 0
0102             }
0103             PropertyChanges {
0104                 target: mainItem
0105                 opacity: 1
0106             }
0107         }
0108     ]
0109
0110     Behavior on x {
0111         PropertyAnimation {
0112             easing.type: Easing.OutQuad
0113             duration:  1000
0114             onRunningChanged: {
0115                 if(!running) {
0116                     if(mainItem.state == "MoveUnderHat")
0117                         Activity.animation1Finished(mainItem.barGroupIndex)
0118                     else if(mainItem.state == "MoveToTarget")
0119                         Activity.animation2Finished()
0120                 }
0121             }
0122         }
0123     }
0124     Behavior on y {
0125         PropertyAnimation {easing.type: Easing.OutQuad; duration:  1000}
0126     }
0127
0128     Behavior on rotation {
0129         PropertyAnimation {easing.type: Easing.OutQuad; duration:  1000}
0130     }
0131 }