ItsDrike
57958ed853
Currently, most things were scaled based on the card dimensions, though some things were hard-coded. This commit moves away from all hard-coded sizes in favor of everything relying on card heights. Additionally, it makes the card height itself no longer hard-coded, passing it as a property to most custom structures. The card height itself is now calculated from Main.qml to make sure everything fits within the screen and scales as the window is resized.
115 lines
3.4 KiB
QML
115 lines
3.4 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Solitare
|
|
|
|
ApplicationWindow {
|
|
id: app
|
|
|
|
width: 750
|
|
height: 650
|
|
visible: true
|
|
title: qsTr("Solitare")
|
|
color: "#019934"
|
|
|
|
// Card dimensions calculation:
|
|
//
|
|
// Horizontal space
|
|
// ================
|
|
// The tableau columns take up at most 7*(w*1.125) = 7.875 widths.
|
|
//
|
|
// The first row:
|
|
// * foundation piles: 4*w*1.2 = 4.8 widths.
|
|
// * throwaway pile: 3*(w-w*0.75)+w = 1.75 widths.
|
|
// * draw pile: 1 width
|
|
// * spacing between throwaway & draw pile: 0.25 widths.
|
|
// * spacing between foundations & throwaway pile: 0.25 widths
|
|
//
|
|
// Totalling at: 8.05 card widths.
|
|
//
|
|
// Vertical space
|
|
// ==============
|
|
// * The score bar takes up min(8% app height, 50).
|
|
// * The first row takes up 1.35 card heights.
|
|
// * Margin between first row & tableau: 0.5 card heights.
|
|
// * The tableau height depends on the max amount of cards that can be in a single column.
|
|
// Generally, the column will take up: ((maxCards - 1) * (h-h*0.8))+h = h(0.2 * maxCards + 0.8).
|
|
//
|
|
// A good base assumption is 14 cards, though the cards should dynamically rescale
|
|
// if this amount is surpassed, which is very possible.
|
|
//
|
|
// Totalling at: (0.2 * maxCards + 2.65) card heights, filling up 100% - min(8%, 50) of screen height.
|
|
//
|
|
//
|
|
// Aspect Ratio
|
|
// ============
|
|
// Finally, we need to make sure that the card proportions are preserved,
|
|
// with the height being 1.4x the width.
|
|
property int maxCardsPerColumn: Math.max(GameState.columns.reduce((max, col) => Math.max(max, col.length), 0), 14)
|
|
|
|
property real cardHeight: Math.min((app.height - Math.min(app.height * 0.08, 50)) / (maxCardsPerColumn * 0.2 + 2.65), (app.width / 8.05) * 1.4)
|
|
property real cardWidth: cardHeight / 1.4
|
|
|
|
ScoreBar {
|
|
id: scoreBar
|
|
|
|
height: Math.max(parent.height * 0.08, 50)
|
|
anchors.top: parent.top
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
}
|
|
|
|
// Show the foundation piles, throwaway pile & the draw stack on the first row
|
|
Rectangle {
|
|
id: firstRow
|
|
|
|
height: app.cardHeight * 1.35
|
|
anchors.top: scoreBar.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: "green"
|
|
|
|
Item {
|
|
anchors.fill: parent
|
|
|
|
anchors.leftMargin: app.cardWidth * 0.125
|
|
anchors.rightMargin: app.cardWidth * 0.125
|
|
anchors.topMargin: app.cardHeight * 0.2
|
|
anchors.bottomMargin: app.cardHeight * 0.2
|
|
|
|
// Left side
|
|
FoundationPiles {
|
|
anchors.left: parent.left
|
|
|
|
cardWidth: app.cardWidth
|
|
cardHeight: app.cardHeight
|
|
}
|
|
|
|
// Right side
|
|
Row {
|
|
spacing: app.cardWidth * 0.25
|
|
anchors.right: parent.right
|
|
|
|
ThrowawayPile {
|
|
cardWidth: app.cardWidth
|
|
cardHeight: app.cardHeight
|
|
}
|
|
|
|
DrawPile {
|
|
cardWidth: app.cardWidth
|
|
cardHeight: app.cardHeight
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Tableau {
|
|
anchors.top: firstRow.bottom
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.topMargin: app.cardHeight * 0.5
|
|
|
|
cardWidth: app.cardWidth
|
|
cardHeight: app.cardHeight
|
|
}
|
|
}
|