boek / chessheatmap Goto Github PK

From our design notes, we want to store previous queries in our database so we don't have to redundantly ping the chess.com public API. We will only store data for years that are less than the current year.

For the year view:

• Grid of 365 shown for full years
• Squares/days where no games were played are white

I think we mentioned we want white squares for days where the user didn't play. I'll put the work for this on this feature branch 👍🏻 One possible solution could be to modify the OrderedGames object to include every date in the given year. Then we could modify the HeatmapView to display empty squares for the dates that do not have any games.

On GitHub's current year view, they do show empty squares:

Then, on our profile cards we could show the rolling dates like GitHub does here:

This can be tackled after #7 is merged in. We'll probably want to use state properties and bindings to tell the "Root View" and its children what the color should be. It'll be green by default 👍🏻🟢

We could optional size variable on the HeatmapView. This is so that the "Compare Stats" view can render a heatmap with smaller squares to fit the screen. If not passed a size, the heatmap squares will default to the standard length/width.

Something like this:

struct MyView: View {
    let size: Int?
    
    var body: some View {
        Text("Size: \(size ?? 10)")
    }
}

// Usage examples
MyView() // Displays "Size: 10"
MyView(size: 20) // Displays "Size: 20"
MyView(size: nil) // Displays "Size: 10"

We'd like to make navigation between the views. The default will be the Profiles view as shown in the Figma spec.

Some good resources for my reference later:

• NavigationView with SwiftUI (probably not since not as customizable) - https://www.youtube.com/watch?v=IopCl8sOyFA&t=20s
• Custom Swift navigation using state properties and bindings (looking good!) - https://www.youtube.com/watch?v=R_KZwX-yP4o