-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fixed it: apparently an anonymous class caused the issue
- Loading branch information
1 parent
7e1ccd0
commit f8cfd7c
Showing
4 changed files
with
246 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
client/src/main/kotlin/com/zegreatrob/coupling/client/demo/DemoPageFrame.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| package com.zegreatrob.coupling.client.demo | ||
|
|
||
| import com.zegreatrob.coupling.action.pairassignmentdocument.DeletePairAssignmentsCommand | ||
| import com.zegreatrob.coupling.action.pairassignmentdocument.SpinCommand | ||
| import com.zegreatrob.coupling.client.aboutPageContent | ||
| import com.zegreatrob.coupling.client.components.Controls | ||
| import com.zegreatrob.coupling.client.components.DispatchFunc | ||
| import com.zegreatrob.coupling.client.components.external.reactmarkdown.Markdown | ||
| import com.zegreatrob.coupling.client.components.pairassignments.PairAssignments | ||
| import com.zegreatrob.coupling.client.components.party.PartyConfigContent | ||
| import com.zegreatrob.coupling.client.components.pin.PinConfigContent | ||
| import com.zegreatrob.coupling.client.components.player.PlayerConfigContent | ||
| import com.zegreatrob.coupling.client.components.spin.PrepareSpinContent | ||
| import com.zegreatrob.coupling.model.CouplingSocketMessage | ||
| import com.zegreatrob.coupling.model.pin.Pin | ||
| import com.zegreatrob.minreact.add | ||
| import com.zegreatrob.minreact.nfc | ||
| import com.zegreatrob.testmints.action.async.SuspendAction | ||
| import emotion.react.css | ||
| import js.core.jso | ||
| import kotlinx.browser.document | ||
| import popper.core.ReferenceElement | ||
| import popper.core.modifier | ||
| import popper.core.modifiers.Arrow | ||
| import popper.core.modifiers.Offset | ||
| import react.ChildrenBuilder | ||
| import react.MutableRefObject | ||
| import react.Props | ||
| import react.dom.html.ReactHTML.div | ||
| import react.popper.UsePopperOptions | ||
| import react.popper.usePopper | ||
| import react.useLayoutEffect | ||
| import react.useRef | ||
| import react.useState | ||
| import web.cssom.Auto | ||
| import web.cssom.Color | ||
| import web.cssom.None | ||
| import web.cssom.Position | ||
| import web.cssom.vw | ||
| import web.html.HTMLElement | ||
|
|
||
| external interface DemoPageFrameProps : Props { | ||
| var state: DemoAnimationState | ||
| } | ||
|
|
||
| val DemoPageFrame by nfc<DemoPageFrameProps> { (state) -> | ||
| val popperRef = useRef<HTMLElement>() | ||
| val arrowRef = useRef<HTMLElement>() | ||
|
|
||
| val (referenceElement, setReferenceElement) = useState<ReferenceElement?>(null) | ||
|
|
||
| val popperInstance = usePopper(referenceElement, popperRef.current, popperOptions(arrowRef, state)) | ||
|
|
||
| useLayoutEffect(state) { | ||
| val className = state.descriptionSelector | ||
| val element: ReferenceElement? = if (className.isNotBlank()) { | ||
| document.querySelector(className).unsafeCast<ReferenceElement>() | ||
| } else { | ||
| null | ||
| } | ||
| setReferenceElement(element) | ||
| popperInstance.forceUpdate?.invoke() | ||
| } | ||
|
|
||
| div { | ||
| popperDiv(popperRef, arrowRef, state, popperInstance) | ||
| div { | ||
| css { | ||
| position = Position.absolute | ||
| backgroundColor = Color("#e3002b61") | ||
| width = 100.vw | ||
| marginLeft = Auto.auto | ||
| marginRight = Auto.auto | ||
| } | ||
| +"-- DEMO MODE -- ALL BUTTONS WILL NOT WORK -- DON'T GET IT TWISTED --" | ||
| } | ||
|
|
||
| div { | ||
| css { pointerEvents = None.none } | ||
| when (state) { | ||
| is Start -> aboutPageContent { Markdown { +state.text } } | ||
| is ShowIntro -> aboutPageContent { Markdown { +state.text } } | ||
| is MakeParty -> partyConfigFrame(state) | ||
| is AddPlayer -> playerConfigFrame(state) | ||
| is AddPin -> pinConfigFrame(state) | ||
| is CurrentPairs -> pairAssignmentsFrame(state) | ||
| is PrepareToSpin -> prepareSpinFrame(state) | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private fun popperOptions(arrowRef: MutableRefObject<HTMLElement>, state: DemoAnimationState): UsePopperOptions = jso { | ||
| this.placement = state.placement | ||
| this.modifiers = arrayOf( | ||
| Arrow.modifier { | ||
| this.options = jso { | ||
| this.element = arrowRef.current | ||
| } | ||
| }, | ||
| Offset.modifier { | ||
| this.options = jso { offset = Offset(0.0, 10.0) } | ||
| }, | ||
| ) | ||
| } | ||
|
|
||
| private fun ChildrenBuilder.partyConfigFrame(state: MakeParty) { | ||
| PartyConfigContent(state.party, true, {}, {}, {}) | ||
| } | ||
|
|
||
| private fun ChildrenBuilder.prepareSpinFrame(state: PrepareToSpin) { | ||
| val (party, players, pins) = state | ||
| PrepareSpinContent(party, players, pins, pins.map(Pin::id), {}, {}, {}) | ||
| } | ||
|
|
||
| private fun ChildrenBuilder.playerConfigFrame(state: AddPlayer) = add( | ||
| PlayerConfigContent(state.party, state.newPlayer, state.players, {}, {}, {}), | ||
| ) | ||
|
|
||
| private fun ChildrenBuilder.pinConfigFrame(state: AddPin) = | ||
| PinConfigContent(state.party, state.newPin, state.pins, {}, {}, {}) | ||
|
|
||
| private fun ChildrenBuilder.pairAssignmentsFrame(state: CurrentPairs) = add( | ||
| PairAssignments( | ||
| state.party, | ||
| state.players, | ||
| state.pairAssignments, | ||
| { }, | ||
| Controls(noOpDispatchFunc) {}, | ||
| CouplingSocketMessage("", emptySet()), | ||
| state.allowSave, | ||
| ), | ||
| ) | ||
|
|
||
| private val noOpDispatchFunc = NoOpDispatcherDispatchFunc() | ||
|
|
||
| class NoOpDispatcherDispatchFunc : DispatchFunc<NoOpDispatcher> { | ||
| override fun <C : SuspendAction<NoOpDispatcher, R>, R> invoke( | ||
| commandFunc: () -> C, | ||
| response: (R) -> Unit, | ||
| ): () -> Unit = {} | ||
| } | ||
|
|
||
| interface NoOpDispatcher : | ||
| DeletePairAssignmentsCommand.Dispatcher, | ||
| SpinCommand.Dispatcher |
95 changes: 95 additions & 0 deletions
95
client/src/main/kotlin/com/zegreatrob/coupling/client/demo/PopperDiv.kt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| package com.zegreatrob.coupling.client.demo | ||
|
|
||
| import com.zegreatrob.coupling.client.components.external.reactmarkdown.Markdown | ||
| import emotion.react.css | ||
| import popper.core.Popper | ||
| import popper.core.modifiers.Arrow | ||
| import react.ChildrenBuilder | ||
| import react.MutableRefObject | ||
| import react.dom.html.ReactHTML.div | ||
| import react.popper.PopperInstance | ||
| import web.cssom.Color | ||
| import web.cssom.Display | ||
| import web.cssom.FontWeight | ||
| import web.cssom.Globals | ||
| import web.cssom.NamedColor | ||
| import web.cssom.None | ||
| import web.cssom.Padding | ||
| import web.cssom.Position | ||
| import web.cssom.Visibility | ||
| import web.cssom.deg | ||
| import web.cssom.integer | ||
| import web.cssom.px | ||
| import web.cssom.rotate | ||
| import web.cssom.string | ||
| import web.html.HTMLElement | ||
| import kotlin.js.Json | ||
|
|
||
| fun ChildrenBuilder.popperDiv( | ||
| popperRef: MutableRefObject<HTMLElement>, | ||
| arrowRef: MutableRefObject<HTMLElement>, | ||
| state: DemoAnimationState, | ||
| popperInstance: PopperInstance, | ||
| ) = div { | ||
| css { | ||
| if (state.description.isBlank()) display = None.none | ||
| } | ||
| div { | ||
| css { | ||
| background = Color("#333333eb") | ||
| color = NamedColor.white | ||
| fontWeight = FontWeight.bold | ||
| padding = Padding(4.px, 8.px) | ||
| fontSize = 24.px | ||
| borderRadius = 20.px | ||
| width = 400.px | ||
| zIndex = integer(200) | ||
| display = Display.inlineBlock | ||
|
|
||
| "h2" { | ||
| fontSize = 30.px | ||
| } | ||
| } | ||
| ref = popperRef | ||
| style = popperInstance.styles[Popper] | ||
|
|
||
| +popperInstance.attributes[Popper] | ||
| Markdown { +state.description } | ||
| if (state.showReturnButton) { | ||
| returnToCouplingButton() | ||
| } | ||
| div { | ||
| css { | ||
| visibility = Visibility.hidden | ||
| position = Position.absolute | ||
| width = 8.px | ||
| height = 8.px | ||
| background = Globals.inherit | ||
| when ( | ||
| popperInstance.attributes[Popper] | ||
| ?.unsafeCast<Json>() | ||
| ?.get("data-popper-placement") | ||
| ) { | ||
| "top" -> bottom = (-4).px | ||
| "bottom", "bottom-start" -> top = (-4).px | ||
| "left" -> right = (-4).px | ||
| "right" -> left = (-4).px | ||
| } | ||
| before { | ||
| position = Position.absolute | ||
| width = 8.px | ||
| height = 8.px | ||
| background = Globals.inherit | ||
| visibility = Visibility.visible | ||
| content = string("''") | ||
| transform = rotate(45.deg) | ||
| top = 0.px | ||
| left = 0.px | ||
| } | ||
| } | ||
| ref = arrowRef | ||
| style = popperInstance.styles[Arrow] | ||
| +popperInstance.attributes[Arrow] | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters