FreeKill/Fk/RoomElement/CardItem.qml

368 lines
7.8 KiB
QML
Raw Normal View History

// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick
import QtQuick.Layouts
import Qt5Compat.GraphicalEffects
import Fk
/* Layout of card:
* +--------+
* num -|5 |
* suit-|s |
* | img |
* | |
* |footnote|
* +--------+
*/
Item {
id: root
width: 93
height: 130
// properties for the view
property string suit: "club"
property int number: 7
property string name: "slash"
property string extension: ""
property string virt_name: ""
2023-07-02 12:39:42 +00:00
property int type: 0
property string subtype: ""
property string color: "" // only use when suit is empty
property string footnote: "" // footnote, e.g. "A use card to B"
property bool footnoteVisible: false
property bool known: true // if false it only show a card back
property bool enabled: true // if false the card will be grey
property alias card: cardItem
property alias glow: glowItem
property var mark: ({})
function getColor() {
if (suit != "")
return (suit == "heart" || suit == "diamond") ? "red" : "black";
else return color;
}
// properties for animation and game system
property int cid: 0
property bool selectable: true
property bool selected: false
property bool draggable: false
property bool autoBack: true
property bool showDetail: false
property int origX: 0
property int origY: 0
2023-07-02 12:39:42 +00:00
property int initialZ: 0
property int maxZ: 0
property real origOpacity: 1
2023-03-18 07:34:42 +00:00
// property bool isClicked: false
property bool moveAborted: false
property alias goBackAnim: goBackAnimation
property int goBackDuration: 500
property bool busy: false // whether there is a running emotion on the card
signal toggleDiscards()
signal clicked()
signal rightClicked()
signal doubleClicked()
signal thrown()
signal released()
signal entered()
signal exited()
signal moveFinished()
signal generalChanged() // For choose general freely
signal hoverChanged(bool enter)
onRightClicked: {
if (!showDetail) return;
roomScene.startCheat("CardDetail", { card: this });
}
RectangularGlow {
id: glowItem
anchors.fill: parent
glowRadius: 8
spread: 0
color: "#88FFFFFF"
cornerRadius: 8
visible: false
}
Image {
id: cardItem
source: known ? SkinBank.getCardPicture(cid || name)
: (SkinBank.CARD_DIR + "card-back")
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
}
Image {
id: suitItem
visible: known
source: (suit !== "" && suit !== "nosuit") ? SkinBank.CARD_SUIT_DIR + suit : ""
x: 3
y: 19
width: 21
height: 17
}
Image {
id: numberItem
visible: known
source: (suit != "" && number > 0) ? SkinBank.CARD_DIR
+ "number/" + root.getColor() + "/" + number : ""
x: 0
y: 0
width: 27
height: 28
}
Image {
id: colorItem
visible: known && (suit === "" || suit === "nosuit")
source: (visible && color !== "") ? SkinBank.CARD_SUIT_DIR + "/" + color : ""
x: 1
}
Rectangle {
id: virt_rect
visible: root.virt_name !== ""
width: parent.width
height: 20
y: 40
color: "snow"
opacity: 0.8
radius: 4
border.color: "black"
border.width: 1
}
Text {
visible: virt_rect.visible
anchors.centerIn: virt_rect
font.pixelSize: 16
font.family: fontLibian.name
font.letterSpacing: -0.6
text: Backend.translate(root.virt_name)
}
Text {
id: footnoteItem
text: footnote
x: 0
y: parent.height - height - 10
width: root.width - x * 2
color: "#E4D5A0"
// color: "white"
visible: footnoteVisible
style: Text.Outline
wrapMode: Text.WrapAnywhere
horizontalAlignment: Text.AlignHCenter
font.family: fontLibian.name
font.pixelSize: 14
// glow.color: "black"
// glow.spread: 1
// glow.radius: 1
//glow.samples: 12
}
Component {
id: cardMarkDelegate
Item {
width: root.width / 2
height: 16
Rectangle {
id: mark_rect
width: mark_text.width + 12
height: 16
// color: "#A50330"
radius: 4
// border.color: "snow"
// border.width: 1
gradient: Gradient {
orientation: Gradient.Horizontal
GradientStop { position: 0.7; color: "#A50330" }
GradientStop { position: 1.0; color: "transparent" }
}
}
Text {
id: mark_text
x: 2
font.pixelSize: 16
font.family: fontLibian.name
font.letterSpacing: -0.6
text: {
let ret = Backend.translate(modelData.k);
if (!modelData.k.startsWith("@@")) {
ret += modelData.v.toString();
}
return ret;
}
color: "white"
style: Text.Outline
styleColor: "purple"
}
}
}
GridLayout {
width: root.width
y: 60
columns: 2
rowSpacing: 1
columnSpacing: 0
Repeater {
model: mark
delegate: cardMarkDelegate
}
}
Rectangle {
visible: !root.selectable
anchors.fill: parent
color: Qt.rgba(0, 0, 0, 0.5)
opacity: 0.7
}
2023-03-18 07:34:42 +00:00
TapHandler {
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.NoButton
gesturePolicy: TapHandler.WithinBounds
2023-03-18 07:34:42 +00:00
onTapped: (p, btn) => {
if (btn === Qt.LeftButton || btn === Qt.NoButton) {
selected = selectable ? !selected : false;
parent.clicked();
} else if (btn === Qt.RightButton) {
parent.rightClicked();
}
}
2023-03-18 07:34:42 +00:00
onLongPressed: {
parent.rightClicked();
}
}
DragHandler {
enabled: draggable
grabPermissions: PointHandler.TakeOverForbidden
2023-03-18 07:34:42 +00:00
xAxis.enabled: true
yAxis.enabled: true
onGrabChanged: (transtition, point) => {
if (transtition !== PointerDevice.UngrabExclusive) return;
parent.released();
if (autoBack)
goBackAnimation.start();
}
2023-03-18 07:34:42 +00:00
}
2023-03-18 07:34:42 +00:00
HoverHandler {
id: hover
onHoveredChanged: {
if (!draggable) return;
if (hovered) {
glow.visible = true;
2023-07-02 12:39:42 +00:00
root.z = root.maxZ ? root.maxZ + 1 : root.z + 1;
2023-03-18 07:34:42 +00:00
} else {
glow.visible = false;
2023-07-02 12:39:42 +00:00
root.z = root.initialZ ? root.initialZ : root.z - 1
}
}
}
ParallelAnimation {
id: goBackAnimation
PropertyAnimation {
target: root
property: "x"
to: origX
easing.type: Easing.OutQuad
duration: goBackDuration
}
PropertyAnimation {
target: root
property: "y"
to: origY
easing.type: Easing.OutQuad
duration: goBackDuration
}
SequentialAnimation {
PropertyAnimation {
target: root
property: "opacity"
to: 1
easing.type: Easing.OutQuad
duration: goBackDuration * 0.8
}
PropertyAnimation {
target: root
property: "opacity"
to: origOpacity
easing.type: Easing.OutQuad
duration: goBackDuration * 0.2
}
}
onStopped: {
if (!moveAborted)
root.moveFinished();
}
}
function setData(data)
{
cid = data.cid;
name = data.name;
suit = data.suit;
number = data.number;
color = data.color;
2023-07-02 12:39:42 +00:00
type = data.type ? data.type : 0
subtype = data.subtype ? data.subtype : "";
virt_name = data.virt_name ? data.virt_name : "";
mark = data.mark ?? {};
}
function toData()
{
const data = {
cid: cid,
name: name,
suit: suit,
number: number,
color: color,
2023-07-02 12:39:42 +00:00
type: type,
subtype: subtype,
virt_name: virt_name,
mark: mark,
};
return data;
}
function goBack(animated)
{
if (animated) {
moveAborted = true;
goBackAnimation.stop();
moveAborted = false;
goBackAnimation.start();
} else {
x = origX;
y = origY;
opacity = origOpacity;
}
}
function destroyOnStop()
{
root.moveFinished.connect(function(){
root.destroy();
});
}
}