Card.qml 5 KB
Newer Older
1
2
/* GCompris - Card.qml
 *
3
 * Copyright (C) 2016 Akshat Tandon  <akshat.tandon@research.iiit.ac.in>
4
5
 *
 * Authors:
6
 *   Akshat Tandon    <akshat.tandon@research.iiit.ac.in>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation; either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU General Public License for more details.
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program; if not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.1
import GCompris 1.0
import QtGraphicalEffects 1.0
import "../../core"
import "letter-in-word.js" as Activity

Item {
    id: cardItem
30
    //width: cardImage.width
31
    height: wordPic.height + cardImage.height - 30 * ApplicationInfo.ratio
32
    property bool mouseActive: true
33

34
    Image {
35
36
37
38
39
        id: wordPic
        sourceSize.width: cardItem.width -6
        sourceSize.height: cardItem.width -5
        fillMode: Image.PreserveAspectFit
        source: imgurl
40
        z: -5
41
        //visible: index % 2 != 0 ? false : true
42
    }
43

44
45
    Image {
        id: cardImage
46
        anchors.top: wordPic.bottom
47
48
49
        anchors.topMargin: -30 * ApplicationInfo.ratio
        sourceSize.width: cardItem.width - 10
        fillMode: Image.PreserveAspectFit
50
        source: Activity.resUrl2 + "cloud.svg"
51
        z: (state == 'scaled') ? 1 : -1
52
        //visible: index % 2 != 0 ? false : true
53

54
55
56
57
58
59
60
61
62
63
64
65
        GCText {
            id: textItem
            z: 11
            // textData is the rich text with letter found, spelling is the text in the dataset
            text: selected ? textData : spelling
            textFormat: Text.RichText
            font.pointSize: NaN  // need to clear font.pointSize explicitly
            font.pixelSize: spelling.length > 5 ? (spelling.length > 7 ? cardImage.width * 0.19 : cardImage.width * 0.25): cardImage.width * 0.30
            font.bold: true
            style: Text.Outline
            width: cardImage.width
            height: cardImage.height
66
            wrapMode: spelling.indexOf(' ') === -1 ? Text.WrapAnywhere : Text.WordWrap
67
68
69
70
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            styleColor: "#2a2a2a"
            color: "white"
71
        }
72

73
74
75
76
        ParticleSystemStarLoader {
            id: particle
            clip: false
        }
77

78
79
80
81
82
83
84
85
        states:
            State {
                name: "scaled"; when: mouseArea.containsMouse && mouseActive
                PropertyChanges {
                    target: cardItem
                    scale: /*carriageImage.scale * */ 1.2
                    z: 2
                }
86
            }
87

88
89
90
        transitions: Transition {
            NumberAnimation { properties: "scale"; easing.type: Easing.OutCubic }
        }
91

92
93
94
95
        SequentialAnimation {
            id: successAnimation
            running: selected
            loops: Animation.Infinite
96
97
            NumberAnimation {
                target: cardImage
98
                easing.type: Easing.InOutQuad
99
                property: "rotation"
100
101
102
103
                to: 20; duration: 500
            }
            NumberAnimation {
                target: cardImage
104
                easing.type: Easing.InOutQuad
105
                property: "rotation"; to: -20
106
107
                duration: 500
            }
108
109
110
111
112
113
114
115
        }

        SequentialAnimation {
            id: failureAnimation
            NumberAnimation {
                target: colorCardImage
                property: "opacity"
                to: 1; duration: 400
116
            }
117
118
119
120
121
122
            NumberAnimation {
                target: colorCardImage
                property: "opacity"
                to: 0; duration: 200
            }
        }
123

124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
        NumberAnimation {
            id: rotationStop
            running: !selected
            target: cardImage
            property: "rotation"
            to: 0
            duration: 500
            easing.type: Easing.InOutQuad
        }
    }

    Colorize {
        id: colorCardImage
        z: 5
        anchors.fill: cardImage
        source: cardImage
        hue: 0.0
        saturation: 1
        opacity: 0
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: ApplicationInfo.isMobile ? false : true
        onClicked: {
150
151
152
153
154
155
156
157
            select();
        }
    }

    function select() {
        if(mouseActive && !successAnimation.running) {
            if (Activity.checkWord(index)) {
                successAnimation.restart();
158
159
                particle.burst(30);
                textData = spelling.replace(RegExp(Activity.currentLetter, "g"), "<font color=\"green\">"+Activity.currentLetter+"</font>");
160
161
162
            }
            else {
                failureAnimation.restart()
163
164
            }
        }
165
    }
166
}