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