activities/adjacent_numbers/DroppableTile.qml

0001 /* GCompris - DroppableTile.qml
0002  *
0003  * SPDX-FileCopyrightText: 2023 Alexandre Laurent <littlewhite.dev@gmail.com>
0004  * SPDX-License-Identifier: GPL-3.0-or-later
0005  */
0006 import QtQuick 2.12
0007 import QtQml.Models 2.12
0008
0009 import GCompris 1.0
0010 import "../../core"
0011 import "adjacent_numbers.js" as Activity
0012
0013 Rectangle {
0014     signal tileChanged(string newValue)
0015
0016     id: orderingElement
0017     width: 1
0018     height: width
0019     color: value === '?' ? "#80FFFFFF" : "#FFFFFF"
0020     radius: height * 0.1
0021     state: tileState
0022
0023     GCText {
0024         id: valueText
0025         text: value
0026         anchors.centerIn: parent
0027         height: parent.height * 0.6
0028         width: parent.width * 0.6
0029         fontSizeMode: Text.Fit
0030         fontSize: largeSize
0031         verticalAlignment: Text.AlignVCenter
0032         horizontalAlignment: Text.AlignHCenter
0033     }
0034
0035     MouseArea {
0036         anchors.fill: parent
0037         enabled: items.buttonsEnabled
0038         onClicked: {
0039             if (canDrop && value !== '?') {
0040                 tileChanged('?')
0041             }
0042         }
0043     }
0044
0045     DropArea {
0046         id: valueDropArea
0047
0048         anchors.fill: parent
0049
0050         // Drop enabled only for
0051         enabled: canDrop
0052         keys: ""
0053
0054         onDropped: {
0055             tileState = "NONE" // Force reset of the transition animation
0056             tileChanged(drag.source.valueText) // Will put the appropriate state back
0057         }
0058     }
0059
0060     states: [
0061         State {
0062             name: "NONE"
0063             PropertyChanges { target: orderingElement; border.color: canDrop ? "white" : "#373737"; border.width: 0 }
0064         },
0065         State {
0066             name: "ANSWERED"
0067             PropertyChanges { target: orderingElement; border.color: "#327CF4"; border.width: 3 * ApplicationInfo.ratio }
0068         },
0069         State {
0070             name: "RIGHT"
0071             PropertyChanges { target: orderingElement; border.color: "#62BA62"; border.width: 3 * ApplicationInfo.ratio }
0072         },
0073         State {
0074             name: "WRONG"
0075             PropertyChanges { target: orderingElement; border.color: "#D94444"; border.width: 8 * ApplicationInfo.ratio }
0076         }
0077     ]
0078
0079     transitions: [
0080         Transition {
0081             to: "RIGHT"
0082             SequentialAnimation {
0083                 ScriptAction { script: z = 100;}
0084                 PropertyAnimation { target: orderingElement; property: "scale"; to: 1.2; duration: 300; easing.type: Easing.InOutQuad }
0085                 PropertyAnimation { target: orderingElement; property: "scale"; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
0086                 ScriptAction { script: z = 0;}
0087             }
0088         },
0089         Transition {
0090             to: "WRONG"
0091             SequentialAnimation {
0092                 ScriptAction { script: items.questionTilesModel.set(index, { "tileEdited": false, });}
0093                 ScriptAction { script: z = 100;}
0094                 PropertyAnimation { target: orderingElement; property: "border.width"; to: 8 * ApplicationInfo.ratio; duration: 0 }
0095                 RotationAnimation { target: orderingElement; from: 0; to: 25; duration: 100; direction: RotationAnimation.Clockwise }
0096                 RotationAnimation { target: orderingElement; from: 25; to: -25; duration: 100; direction: RotationAnimation.Counterclockwise }
0097                 RotationAnimation { target: orderingElement; from: -25; to: 15; duration: 100; direction: RotationAnimation.Clockwise }
0098                 RotationAnimation { target: orderingElement; from: 15; to: -15; duration: 100; direction: RotationAnimation.Counterclockwise }
0099                 RotationAnimation { target: orderingElement; from: -15; to: 10; duration: 40; direction: RotationAnimation.Clockwise }
0100                 RotationAnimation { target: orderingElement; from: 10; to: 0; duration: 40; direction: RotationAnimation.Counterclockwise }
0101                 ScriptAction { script: z = 0;}
0102                 ScriptAction { script: items.buttonsEnabled = true; }
0103             }
0104         },
0105         Transition {
0106             to: "NONE"
0107             SequentialAnimation {
0108                 PropertyAnimation { target: orderingElement; property: "scale"; to: 1; duration: 0 }
0109                 PropertyAnimation { target: orderingElement; property: "rotation"; to: 0; duration: 0 }
0110             }
0111         }
0112     ]
0113 }