Skip to content

Commit

Permalink
Merge pull request #10 from djfumberger/detail
Browse files Browse the repository at this point in the history 
Detail Screen
  • Loading branch information
@djfumberger
djfumberger authored Mar 18, 2021
2 parents 22ff32d + 69c558e commit 5a01205
Show file tree
Hide file tree
Showing 8 changed files with 235 additions and 109 deletions.
1 change: 1 addition & 0 deletions components/ActionButton.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ Item {
font.pixelSize: 14
visible: parent.activeFocus
opacity: 0.5
color: textColor
anchors.bottom: parent.bottom
anchors.bottomMargin: -20
anchors.horizontalCenter: parent.horizontalCenter
Expand Down
103 changes: 82 additions & 21 deletions components/GameDetail.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,76 @@ Item {
property var active: false
property var game: null
property var showFullDescription: false
visible: active
//visible: active

onGameChanged: {
console.log(game.assets.video)
//console.log(game.assets.video)
}

property var mainGenre: {
var g = game.genreList[0]
var s = g.split(',')
return s[0]
}

property var players: {
if (!game) { return "" }
return game.players + " Player" + (game.players > 1 ? "s" : "") + ", "
}

property var releaseDate: {
if (!game) { return "" }
return "Released " + game.releaseYear
}

property var developedBy: {
if (!game) { return "" }
return "Developed By " + game.developer
}

property var textColor: {
return "#333333"
}

property var margin: {
return 32
}

property var introDescription: {
if (!game) { return "" }
return game.description.replace("\n"," ")
}

property var gameIsFavorite: {
if (game) {
return game.modelData.favorite
} else {
return false
}
}
property var gameScreenshot: {
if (game) {
return game.assets.screenshot
} else {
return null
}
}
property var gameVideo: {
if (game) {
return game.assets.video
} else {
return null
}
}
property var textScroll: 10

Keys.onPressed: {
if (api.keys.isCancel(event) && active) {
event.accepted = true
showGameDetail(false)
}
}

/**
* Background
*/
Expand Down Expand Up @@ -78,7 +117,7 @@ Item {
anchors.left: parent.left
anchors.top: parent.top
maximumLineCount: 2
text: game.title
text: game ? game.title : "No Game"
lineHeight: 1.1
color: textColor
font.pixelSize: 24
Expand Down Expand Up @@ -143,14 +182,9 @@ Item {
KeyNavigation.right: actionFavorite
KeyNavigation.down: gameDetailText
Keys.onPressed: {
// Back to Home

// Start Game
if (api.keys.isAccept(event)) {
console.log("play")

var g = gamesItems.get(gameList.currentIndex)
console.log(g.modelData)
g.modelData.launch()
startGame(game.modelData, currentGameDetailIndex)
}
}

Expand All @@ -160,20 +194,18 @@ Item {
textColor: gameDetail.textColor
KeyNavigation.left: actionPlay
KeyNavigation.down: gameDetailText
title: game.modelData.favorite ? "Unfavorite" : "Favorite"
icon: game.modelData.favorite ? "favorite-on" : "favorite-off"
title: gameIsFavorite ? "Unfavorite" : "Favorite"
icon: gameIsFavorite ? "favorite-on" : "favorite-off"
focus: false
height: 40
width: 120

Keys.onPressed: {

// Back to Home
if (api.keys.isAccept(event)) {

// Favorite
if (api.keys.isAccept(event)) {
game.modelData.favorite = !game.modelData.favorite
event.accepted = true;
console.log("fav")
}
}

Expand All @@ -188,8 +220,8 @@ Item {
width: 280
anchors.right: parent.right
anchors.top: parent.top
screenshot: game.assets.screenshot
video: game.assets.video
screenshot: gameScreenshot
video: gameVideo
active: gameDetail.active
}

Expand All @@ -210,6 +242,16 @@ Item {
//height: 100
height: 127

// Rectangle {
// anchors.fill: parent
// anchors.leftMargin: -15
// anchors.rightMargin: -15
// anchors.bottomMargin: -15
// radius: 8
// color: "#000000"
// opacity: parent.activeFocus ? 0.1 : 0.0
// }

Keys.onPressed: {
// Back to Home
if (api.keys.isAccept(event)) {
Expand Down Expand Up @@ -244,7 +286,8 @@ Item {
anchors.leftMargin: parent.left
anchors.rightMargin: parent.right
wrapMode: Text.WordWrap
color: parent.activeFocus ? "#50000000" : textColor
//color: parent.activeFocus ? "#50000000" : textColor
color: textColor
font.pixelSize: 18
font.letterSpacing: -0.1
font.bold: true
Expand Down Expand Up @@ -326,6 +369,17 @@ Item {
height: 480
focus: showFullDescription

property var scrollMoveAmount : 100
Keys.onDownPressed: {
var maxHeight = textElement.paintedHeight - (480 - 50 - 50)

textScroll = Math.max(Math.min(textScroll + scrollMoveAmount, maxHeight), 10)
}

Keys.onUpPressed: {
textScroll = Math.max(textScroll - scrollMoveAmount, 10)
}

Keys.onPressed: {
// Back to Home
if (api.keys.isCancel(event)) {
Expand All @@ -336,6 +390,8 @@ Item {
}
}



Rectangle {
color: theme.background
anchors.fill: parent
Expand All @@ -344,7 +400,7 @@ Item {

Image {
id: boxart
source: game.assets.screenshot
source: gameScreenshot
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
visible: false
Expand All @@ -367,19 +423,24 @@ Item {
// }

Text {
id: textElement
text: game.description
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.leftMargin: 50
anchors.rightMargin: 50
anchors.topMargin: 50
anchors.topMargin: 50 - textScroll
font.pixelSize: 18
font.letterSpacing: -0.35
font.bold: true
wrapMode: Text.WordWrap
maximumLineCount: 2000
lineHeight: 1.2

Behavior on anchors.topMargin {
PropertyAnimation { easing.type: Easing.OutCubic; duration: 200 }
}
}

}
Expand Down
11 changes: 10 additions & 1 deletion components/GameScreenshot.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ Item {
width: parent.width
height: parent.height
property var active: false
onActiveChanged: {
if (video && active) {
videoPlayer.play()
} else {
videoPlayer.stop()
}
}

// Shadow. Using an image for better shadow visuals & performance.
Image {
id: game_box_shadow
Expand All @@ -33,9 +41,10 @@ Item {
}

Video {
id: videoPlayer
anchors.fill: parent
fillMode: Image.PreserveAspectCrop
source: active ? video : null
source: video
autoPlay: true
loops: MediaPlayer.Infinite
}
Expand Down
64 changes: 9 additions & 55 deletions components/GamesList.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ Item {
property alias box_art : game_box_art
property var hideFavoriteIcon : false
property var defaultIndex: 0
property var launchingGame : false
property var items : []
property var indexItems : []
property var showIndex : false
Expand Down Expand Up @@ -83,6 +82,13 @@ Item {

Keys.onPressed: {
// Show / Hide Index
// Details
if (api.keys.isDetails(event)) {
event.accepted = true
showGameDetail(selectedGame, gameView.currentIndex)
return
}

if (api.keys.isAccept(event) && showIndex) {
event.accepted = true;
showIndex = false;
Expand Down Expand Up @@ -110,18 +116,6 @@ Item {
onIndexChanged(gameView.currentIndex, items.count)
}

Timer {
id: timer
}

function delay(delayTime, cb) {
timer.interval = delayTime;
timer.repeat = false;
timer.triggered.connect(cb);
timer.start();
}


Rectangle {
id: mainListContent
color: "transparent"
Expand Down Expand Up @@ -275,15 +269,7 @@ Item {
//gameView.currentIndex = 0
onSeeAll()
} else {
currentGameIndex = index
launchSound.play()
launchingGame = true

setCollectionListIndex(index)

delay(400, function() {
modelData.launch()
})
startGame(modelData, index)
}
return;
}
Expand Down Expand Up @@ -355,39 +341,7 @@ Item {
}

}

/**
Loading Overlay
*/
Rectangle {
id: loading_overlay
opacity: 0.0
color: "#000000"
anchors {
fill: parent
bottomMargin: -100
topMargin: -100
}
states: [

State{
name: "default"; when: !launchingGame
PropertyChanges { target: loading_overlay; opacity: 0.0}
},

State{
name: "active"; when: launchingGame
PropertyChanges { target: loading_overlay; opacity: 1.0}
}

]

transitions: Transition {
NumberAnimation { properties: "opacity"; easing.type: Easing.Out; duration: 350 }
}
z: 2002
}


Rectangle {
id: game_detail
visible: true
Expand Down
Loading

0 comments on commit 5a01205

Please sign in to comment.