1/* GCompris - Carriage.qml
2 *
3 * SPDX-FileCopyrightText: 2014 Holger Kaelberer <holger.k@elberer.de>
4 *
5 * Authors:
6 *   Pascal Georges <pascal.georges1@free.fr> (GTK+ version)
7 *   Bruno Coudoin <bruno.coudoin@gcompris.net> (GTK+ Mostly full rewrite)
8 *   Holger Kaelberer <holger.k@elberer.de> (Qt Quick port)
9 *
10 *   SPDX-License-Identifier: GPL-3.0-or-later
11 */
12
13import QtQuick 2.9
14import GCompris 1.0
15import QtGraphicalEffects 1.0
16import "../../core"
17import "click_on_letter.js" as Activity
18
19Item {
20    id: carriageItem
21    property int nbCarriage
22    property bool isCarriage: index <= nbCarriage
23    property bool clickEnabled
24    property bool isSelected
25    property alias successAnimation: successAnimation
26    property alias failureAnimation: failureAnimation
27    property alias particle: particle
28
29    Image {
30        id: carriageImage
31        sourceSize.width: carriageItem.width
32        fillMode: Image.PreserveAspectFit
33        source: isCarriage ?
34                    Activity.url + "carriage.svg":
35                    Activity.url + "cloud.svg"
36        z: (state == 'scaled') ? 1 : -1
37
38        Rectangle {
39            id: carriageBg
40            visible: isCarriage
41            width: parent.width - 8
42            height: parent.height / 1.8
43            anchors.bottom: parent.top
44            anchors.bottomMargin: - parent.height / 1.5
45            radius: height / 10
46            color: "#f0d578"
47            border.color: "#b98a1c"
48            border.width: 3
49        }
50
51        Rectangle {
52            id: selector
53            z: 9
54            visible: isSelected
55            anchors.fill: parent
56            radius: 5
57            color: "#800000ff"
58        }
59
60        GCText {
61            id: text
62            anchors.horizontalCenter: isCarriage ?
63                                          carriageBg.horizontalCenter :
64                                          parent.horizontalCenter
65            anchors.verticalCenter: isCarriage ?
66                                        carriageBg.verticalCenter :
67                                        parent.verticalCenter
68            z: 11
69            text: letter
70            width: parent.width * 0.9
71            height: parent.height * 0.9
72            horizontalAlignment: Text.AlignHCenter
73            verticalAlignment: Text.AlignVCenter
74            fontSizeMode: Text.Fit
75            minimumPointSize: 7
76            fontSize: largeSize
77            font.bold: true
78            style: Text.Outline
79            styleColor: "#2a2a2a"
80            color: "white"
81        }
82
83        DropShadow {
84            anchors.fill: text
85            cached: false
86            horizontalOffset: 1
87            verticalOffset: 1
88            radius: 3
89            samples: 16
90            color: "#422a2a2a"
91            source: text
92        }
93
94        Image {
95            id: softFailure
96            z: 12
97            source: "qrc:/gcompris/src/activities/tic_tac_toe/resource/cross.svg"
98            width: parent.width
99            height: width
100            anchors.centerIn: text
101            opacity: 0
102            visible: ApplicationInfo.useOpenGL ? false : true
103        }
104
105        MouseArea {
106            id: mouseArea
107            anchors.fill: parent
108            hoverEnabled: ApplicationInfo.isMobile ? false : true
109
110            onClicked: {
111                if(carriageItem.clickEnabled) {
112                    if (Activity.checkAnswer(index)) {
113                        successAnimation.restart();
114                        particle.burst(30)
115                    } else {
116                        failureAnimation.restart()
117                    }
118                }
119            }
120        }
121
122        ParticleSystemStarLoader {
123            z: 10
124            id: particle
125            clip: false
126        }
127
128        states: State {
129            name: "scaled"; when: mouseArea.containsMouse
130            PropertyChanges {
131                target: carriageItem
132                scale: /*carriageImage.scale * */ 1.2
133                z: 2
134            }
135        }
136
137        transitions: Transition {
138            NumberAnimation { properties: "scale"; easing.type: Easing.OutCubic }
139        }
140
141        SequentialAnimation {
142            id: successAnimation
143            NumberAnimation {
144                target: carriageImage
145                easing.type: Easing.InOutQuad
146                property: "rotation"
147                to: 20; duration: 100
148            }
149            NumberAnimation {
150                target: carriageImage
151                easing.type: Easing.InOutQuad
152                property: "rotation"; to: -20
153                duration: 100 }
154            NumberAnimation {
155                target: carriageImage
156                easing.type: Easing.InOutQuad
157                property: "rotation"
158                to: 0; duration: 50
159            }
160        }
161
162        SequentialAnimation {
163            id: failureAnimation
164            NumberAnimation {
165                target: ApplicationInfo.useOpenGL ? color : softFailure
166                property: "opacity"
167                to: 1; duration: 400
168            }
169            NumberAnimation {
170                target: ApplicationInfo.useOpenGL ? color : softFailure
171                property: "opacity"
172                to: 0; duration: 200
173            }
174        }
175    }
176
177    Colorize {
178        id: color
179        z: 5
180        anchors.fill: carriageImage
181        source: carriageImage
182        hue: 0.0
183        saturation: 1
184        opacity: 0
185    }
186}
187