1/* GCompris - ScoreItem.qml
2 *
3 * SPDX-FileCopyrightText: 2017 Johnny Jazeix <jazeix@gmail.com>
4 *
5 * Authors:
6 *   Pulkit Gupta <pulkitgenius@gmail.com> (main code)
7 *   Johnny Jazeix <jazeix@gmail.com> (refactorisation)
8 *
9 *   SPDX-License-Identifier: GPL-3.0-or-later
10 */
11import QtQuick 2.9
12import GCompris 1.0
13
14/**
15 * A QML component to visualize number of wins.
16 * @ingroup components
17 *
18 * ScoreItem consists of player score (@ref playerScore)
19 * and player image (@ref playerImageSource).
20 * Mostly used in multi-player activities.
21 *
22 * @inherit QtQuick.Item
23 */
24Item {
25    id: scoreItem
26
27    /**
28     * type:int
29     * Id of the player.
30     */
31    property int player: 1
32
33    /**
34     * type:string
35     * Source of background image to display.
36     *
37     * @sa backgroundImage.source
38     */
39    property string backgroundImageSource
40
41    /**
42     * type:string
43     * Source of player image to display.
44     *
45     * @sa playerImage.source
46     */
47    property string playerImageSource
48
49    /**
50     * type:int
51     * Count of score(i.e. number of wins).
52     *
53     * @sa scoreLabel.text
54     */
55    property int playerScore
56
57    /**
58     * type:int
59     * Holds the point from which the player image
60     * is scaled on x-axis.
61     *
62     * @sa scaleTransform.origin.x
63     */
64    property int playerScaleOriginX
65
66    /**
67     * type:int
68     * Holds the point from which the player image
69     * is scaled on y-axis.
70     *
71     * @sa scaleTransform.origin.y
72     */
73    property int playerScaleOriginY
74
75    /**
76     * Emitted when the win animation should be started.
77     *
78     * Triggers scale, rotation animation and increases playerScore count.
79     */
80    signal win
81
82    /**
83     * Emitted when the player turn should be started.
84     *
85     * Triggers scale and rotation animation.
86     */
87    signal beginTurn
88
89    /**
90     * Emitted when the player turn should be ended.
91     *
92     * Triggers shrink and rotation animation on player image.
93     */
94    signal endTurn
95
96    /**
97     * type:bool
98     * Wether it is player's turn.
99     */
100    property bool playersTurn: false
101
102    /**
103     * type:alias
104     * allow to access properties of playerItem
105     * Usually you'll need set its source, height, anchors.leftMargin and anchors.bottom.margin
106     */
107    property alias playerItem: playerItem
108
109    onBeginTurn: {
110        scaleAnimation.start()
111        playersTurn = true
112    }
113
114    onEndTurn: {
115        playersTurn = false
116        scaleAnimation.stop()
117        playerImageRotate.stop()
118        playerImage.rotation = 0
119        shrinkAnimation.start()
120        backgroundRectangle.state = "second"
121    }
122
123    onWin: {
124        scaleAnimation.start()
125        backgroundRectangle.state = "win"
126        playerScore ++;
127    }
128
129    PropertyAnimation {
130        id: scaleAnimation
131        target: scaleTransform
132        properties: "scale"
133        from: 1.0
134        to: 1.4
135        duration: 500
136        onStarted: {
137            backgroundRectangle.state = "first"
138            playerImageRotate.start()
139        }
140    }
141
142    PropertyAnimation {
143        id: shrinkAnimation
144        target: scaleTransform
145        properties: "scale"
146        from: 1.4
147        to: 1.0
148        duration: 500
149    }
150
151    SequentialAnimation {
152        id: playerImageRotate
153        loops: Animation.Infinite
154        NumberAnimation {
155            target: playerImage
156            property: "rotation"
157            from: -30; to: 30
158            duration: 750
159            easing.type: Easing.InOutQuad
160        }
161        NumberAnimation {
162            target: playerImage
163            property: "rotation"
164            from: 30; to: -30
165            duration: 750
166            easing.type: Easing.InOutQuad
167        }
168    }
169
170    Rectangle {
171        id: backgroundRectangle
172        anchors.fill: parent
173        radius: 15
174        state: "second"
175
176        Image {
177            id: backgroundImage
178            source: backgroundImageSource
179            sourceSize.height: height * 1.4
180            sourceSize.width: width * 1.4
181            anchors.fill: parent
182            anchors.margins: parent.height * 0.04
183
184            Image {
185                id: playerImage
186                source: playerImageSource
187                fillMode: Image.PreserveAspectFit
188                height: parent.height*0.8
189                sourceSize.height: height * 1.4
190                x: parent.width*0.06
191                anchors.verticalCenter: parent.verticalCenter
192                Image {
193                    id: playerItem
194                    source: "qrc:/gcompris/src/core/resource/empty.svg"
195                    fillMode: Image.PreserveAspectFit
196                    height: 0
197                    sourceSize.height: height * 1.4
198                    anchors.bottom: parent.bottom
199                    anchors.left: parent.left
200                    anchors.leftMargin: 0
201                    anchors.bottomMargin: 0
202                }
203            }
204            GCText {
205                id: scoreLabel
206                x: parent.width * 0.65
207                anchors.verticalCenter: parent.verticalCenter
208                height: parent.height * 0.8
209                width: parent.width * 0.3
210                horizontalAlignment: Text.AlignHCenter
211                verticalAlignment: Text.AlignVCenter
212                color: "#2a2a2a"
213                fontSizeMode: Text.Fit
214                text: playerScore
215            }
216        }
217
218        states: [
219        State {
220            name: "first"
221            PropertyChanges {
222                target: backgroundRectangle
223                color: "#80ffffff"
224            }
225            PropertyChanges {
226                target: playerImage
227                source: playerImageSource
228            }
229            PropertyChanges {
230                target: playerItem
231                visible: true
232            }
233        },
234        State {
235            name: "second"
236            PropertyChanges {
237                target: backgroundRectangle
238                color: "transparent"
239            }
240            PropertyChanges {
241                target: playerImage
242                source: playerImageSource
243            }
244            PropertyChanges {
245                target: playerItem
246                visible: true
247            }
248        },
249        State {
250            name: "win"
251            PropertyChanges {
252                target: playerImage
253                source: "qrc:/gcompris/src/core/resource/win.svg"
254            }
255            PropertyChanges {
256                target: playerItem
257                visible: false
258            }
259            PropertyChanges {
260                target: backgroundRectangle
261                color: "#80ffffff"
262            }
263        }
264        ]
265
266        transform: Scale {
267            id: scaleTransform
268            property real scale: 1
269            origin.x: playerScaleOriginX
270            origin.y: playerScaleOriginY
271            xScale: scale
272            yScale: scale
273        }
274    }
275}
276