FreeKill/Fk/Pages/CardsOverview.qml

309 lines
7.0 KiB
QML

// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Fk.RoomElement
Item {
id: root
property bool loaded: false
Rectangle {
anchors.fill: listView
color: "#88EEEEEE"
radius: 6
}
ListView {
id: listView
clip: true
width: 130
height: parent.height - 20
y: 10
ScrollBar.vertical: ScrollBar {}
model: ListModel {
id: packages
}
highlight: Rectangle { color: "#E91E63"; radius: 5 }
highlightMoveDuration: 500
delegate: Item {
width: listView.width
height: 40
Text {
text: Backend.translate(name)
anchors.centerIn: parent
}
TapHandler {
onTapped: {
listView.currentIndex = index;
}
}
}
onCurrentIndexChanged: { vanishAnim.start(); }
}
GridView {
id: gridView
clip: true
width: root.width - listView.width - cardDetail.width - 16
height: parent.height - 20
y: 10
anchors.left: listView.right
anchors.leftMargin: 8 + (width % 100) / 2
cellHeight: 140
cellWidth: 100
delegate: CardItem {
autoBack: false
property int dupCount: 0
Text {
anchors.right: parent.right
anchors.bottom: parent.bottom
text: parent.dupCount ? ("x" + parent.dupCount.toString()) : ""
font.pixelSize: 36
color: "white"
style: Text.Outline
}
Component.onCompleted: {
const data = modelData;
if (!data.cards) {
name = data.name;
suit = data.suit;
number = data.number;
cid = data.cid;
} else {
name = data.name;
cid = data.cid;
suit = "";
number = 0;
color = "";
dupCount = data.cards.length;
}
}
onClicked: {
cardDetail.cid = modelData.cid;
cardDetail.cards = modelData.cards;
cardDetail.updateCard();
}
}
}
ParallelAnimation {
id: vanishAnim
PropertyAnimation {
target: gridView
property: "opacity"
to: 0
duration: 150
easing.type: Easing.InOutQuad
}
PropertyAnimation {
target: gridView
property: "y"
to: 30
duration: 150
easing.type: Easing.InOutQuad
}
onFinished: {
const pkg = [listView.model.get(listView.currentIndex).name];
const idList = JSON.parse(Backend.callLuaFunction("GetCards", pkg));
const cardList = idList.map(id => JSON.parse(Backend.callLuaFunction
("GetCardData",[id])));
const groupedCardList = [];
let groupedCards = {};
cardList.forEach(c => {
const name = c.name;
if (!groupedCards[name]) {
groupedCardList.push(name);
groupedCards[name] = [];
}
groupedCards[name].push({
cid: c.cid,
suit: c.suit,
number: c.number,
});
});
const model = [];
groupedCardList.forEach(name => {
const cards = groupedCards[name];
if (cards.length === 1) {
model.push({
name: name,
extension: pkg,
suit: cards[0].suit,
number: cards[0].number,
cid: cards[0].cid,
});
} else {
model.push({
name: name,
cid: cards[0].cid,
cards: cards,
})
}
});
gridView.model = model;
appearAnim.start();
}
}
SequentialAnimation {
id: appearAnim
PauseAnimation { duration: 200 }
ParallelAnimation {
PropertyAnimation {
target: gridView
property: "opacity"
to: 1
duration: 150
easing.type: Easing.InOutQuad
}
PropertyAnimation {
target: gridView
property: "y"
from: 20
to: 10
duration: 150
easing.type: Easing.InOutQuad
}
}
}
Rectangle {
id: cardDetail
width: 310
height: parent.height - 20
y: 10
anchors.right: parent.right
anchors.rightMargin: 10
color: "#88EEEEEE"
radius: 8
property int cid: 1
property var cards
function updateCard() {
const data = JSON.parse(Backend.callLuaFunction("GetCardData", [cid]));
const suitTable = {
spade: "♠", heart: '<font color="red">♥</font>',
club: "♣", diamond: '<font color="red">♦</font>',
}
const getNumString = n => {
switch (n) {
case 1:
return "A";
case 11:
return "J";
case 12:
return "Q";
case 13:
return "K";
default:
return n.toString();
}
}
if (!cards) {
detailCard.setData(data);
detailCard.dupCount = 0;
} else {
detailCard.cid = cid;
detailCard.color = "";
detailCard.suit = "";
detailCard.number = 0;
detailCard.dupCount = cards.length;
}
detailCard.known = true;
cardText.clear();
cardText.append(Backend.translate(":" + data.name));
const skills = JSON.parse(Backend.callLuaFunction
("GetCardSpecialSkills", [cid]));
if (skills.length > 0) {
cardText.append("<br/>" + Backend.translate("Special card skills:"));
skills.forEach(t => {
cardText.append("<b>" + Backend.translate(t) + "</b>: "
+ Backend.translate(":" + t));
});
}
if (cards) {
cardText.append("<br/>" + Backend.translate("Every suit & number:"));
cardText.append(cards.map(c => {
return (suitTable[c.suit] + getNumString(c.number))
}).join(", "));
}
}
Flickable {
flickableDirection: Flickable.VerticalFlick
contentHeight: detailLayout.height
width: parent.width - 40
height: parent.height - 40
clip: true
anchors.centerIn: parent
ScrollBar.vertical: ScrollBar {}
ColumnLayout {
id: detailLayout
width: parent.width
CardItem {
id: detailCard
Layout.alignment: Qt.AlignHCenter
cid: 1
known: false
property int dupCount: 0
Text {
anchors.right: parent.right
anchors.bottom: parent.bottom
text: parent.dupCount ? ("x" + parent.dupCount.toString()) : ""
font.pixelSize: 36
color: "white"
style: Text.Outline
}
}
TextEdit {
id: cardText
Layout.fillWidth: true
readOnly: true
selectByKeyboard: true
selectByMouse: false
wrapMode: TextEdit.WordWrap
textFormat: TextEdit.RichText
font.pixelSize: 16
}
}
}
}
Button {
text: Backend.translate("Quit")
anchors.right: parent.right
onClicked: {
mainStack.pop();
}
}
function loadPackages() {
if (loaded) return;
const packs = JSON.parse(Backend.callLuaFunction("GetAllCardPack", []));
packs.forEach((name) => packages.append({ name: name }));
loaded = true;
}
}