fluxtah

@Model
data class CardDesignerState(
    var loadingState: LoadingState = LoadingState.Loaded,
    var card: MemoryCard = MemoryCard(),
    var selectedElement: MemoryCardElement? = null,
    var editElement: MemoryCardElement? = null,
    var layersDropDownOpen: Boolean = false
)

fluxtah

when (val element = state.selectedElement) {
    null -> {
        SurfacePropertyControls(state.card.upSide)
    }
    else -> {
        ElementControls(element)
    }
}

fluxtah

if (cardUuid != null && cardUuid.isNotEmpty()) {
    observe({ repository.getCard(cardUuid) }) {
        state.card = it
        state.loadingState = LoadingState.Loaded
    }
}

fluxtah

@Composable
fun <T> observe(observable: () -> LiveData<T>, result: (T) -> Unit) {
    val thing = stateFor<T?> { null }
    onActive {
        val observer =
            Observer<T> {
                thing.value = it
                result(it)
            }
        with(observable()) {

fluxtah

val onCardSaved = {
    runBlocking {
        repository.saveCard(state.card)
        goto(Destination.HomeScreen)
    }
}

MemsetMainTemplate {
    when (state.loadingState) {
        LoadingState.Loaded -> CardEditorContent(state, onCardSaved)

fluxtah

@Composable
@Preview
fun PianoRollPreview() {
    PianoRoll(PianoKey(F, 0), PianoKey(C, 1))
}

fluxtah

@Composable
fun PianoRoll(from: PianoKey, to: PianoKey) {
    val startsAtF = from.note >= F
    Row {
        for (octave in from.octave..to.octave) {
            PianoRollOctave(startsAtF, true, octave)
        }
    }
}

fluxtah

@Composable
fun PianoRollOctave(startFromF: Boolean = false, showNoteNames: Boolean = false, octave: Int? = 0) {
    Stack {
        Row {
            repeat(7) {
                PianoKey()
            }
        }
        Row {
            if (startFromF) {

fluxtah

Row {
    repeat(7) {
        PianoKey()
    }
}

fluxtah

@Composable
private fun PianoKey() {
    ColoredRect(
        modifier = LayoutPadding(right = 1.dp),
        color = Color.White,
        height = 64.dp,
        width = 16.dp
    )
}