Sorry to spam the channel but having trouble gett...

# compose-desktop

[Sam Michael]

Sorry to spam the channel but having trouble getting my stones on top of the corner now that I am no longer using Material Button. Even if I put the grid in a drawBehind { } scope the stones keep being drawn underneath the grid lines (or all the grid lines are invisible and only the stones can be seen). I tried playing with elevation and zIndex, but the lines and circles are still technically in modifier/canvas of the same Box scope, so i can't seem to get it behind as I would like.

@Composable
private fun tileButton(
    isVisible: MutableState<Boolean> = mutableStateOf(false),
    turn: MutableState<Int> = mutableStateOf(0)
) = Box(
    modifier = Modifier.background(accentAmber).size(60.dp).padding(0.dp).border(0.dp, accentAmber)
        .clickable(onClick = {
            isVisible.value = true
            turn.value += 1
        }).drawBehind {
            drawVerticalLine()
            drawHorizontalLine()
        }.drawWithContent {
            drawCorrectColorCircle(isVisible, turn)
        }) {
}

[Sam Michael]

Wonder what it was about the material button before that enabled the circle to be on top of the gridlines with basically the same code

[Sam Michael]

I guess worst comes to worst a super-hacky way would be to change the portion of the grid line to white but that sounds like a supreme evil and I regret even thinking of it🤣

[Sam Michael]

I guess it has something to do with ButtonDefault.elevation() which gives it some nifty elevation presets

@Composable
fun elevation(
    defaultElevation: Dp = 2.dp,
    pressedElevation: Dp = 8.dp,
    // focused: Dp = 4.dp,
    // hovered: Dp = 4.dp,
    disabledElevation: Dp = 0.dp
): ButtonElevation {
    return remember(defaultElevation, pressedElevation, disabledElevation) {
        DefaultButtonElevation(
            defaultElevation = defaultElevation,
            pressedElevation = pressedElevation,
            disabledElevation = disabledElevation
        )
    }
}

[Albert Chang]

You can use drawWithContent only:

Modifier.drawWithCache { 
    onDrawWithContent { 
        // Draw behind
        drawContent()
        // Draw above
    }
}

Also the order of modifiers matters.

[Albert Chang]

In you case I think instead of using Modifier.background(), Modifier.border(), etc, drawing all these yourself in one modifier is simpler and easier to read.

[Sam Michael]

Thanks for offering help, still unable to get circle above the gridlines, never expected zIndex/elevation issues to get this complicated

[Albert Chang]

That’s why my second reply.

[Sam Michael]

Not sure if I understand correctly, I deleted border and padding modifiers. Not sure what it means to draw all in one modifier. Here is my code so far

Untitled

[Sam Michael]

Thanks again for taking interest, Ideally the stone could be elevated like when I used Material button but without the obvious spaces in between that was caused by using Material button

[Sam Michael]

Ok, finally got it I think, I went back to using material components but switched from Button to Card and reduced elevation to 0.dp which got rid of shadow.
Finally can work on game mechanics!

[Albert Chang]

You can remove the background modifier as well. Drawing the background is as simple as drawRect(color = accentAmber).