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