(->>
    const err = -> console.error it
    const $opponent-hand = document.query-selector '#opponent-hand'
    const $own-hand = document.query-selector '#own-hand'
    const $view-card = document.query-selector '#view-card'
    const $view-card-container = document.query-selector '#view-card-container'
    const $param = document.query-selector '#param'
    const [push-param, pop-param] = (->
        param = ""
        clear-param-timer = 0
        setInterval (->
            clear-param-timer-- if clear-param-timer
            param := "" unless clear-param-timer
            $param.inner-text = param
        ), 100
        const push-param = ->
            param += it
            $param.inner-text = param
            clear-param-timer := 20
        const pop-full-param = ->
            ret = param
            param := ""
            $param.inner-text = param
            if ret == ""
                1
            else
                +ret
        [push-param, pop-full-param]
    )!
    
    const gen-array = -> Array.from { length: it }, (_, i) -> i
    const cards = await fetch \./cards.json .then (.json!) .catch err
    const make-card = ->
        img = document.create-element \img
        img.src = it
        img
    const make-blank-card = -> make-card \assets/card_back.jpg
    const gen-opponent-cards$ = ->
        diff = it - $opponent-hand.child-element-count
        switch
            | diff < 0
                while diff++
                    $opponent-hand.remove-child $opponent-hand.first-child
            | diff > 0
                $opponent-hand.append ...(gen-array diff .map make-blank-card)
            | _
                void
    const get-state = ->>
        player-state-json = await fetch \./get_state .then (.text!) .catch err
        player-state = JSON.parse player-state-json
        events-json = await fetch \/get_events .then (.text!) .catch err
        events = JSON.parse events-json
        return { player-state-json, player-state, events-json, events }

    const show-card$ = (e) ->
        const hide-card$ = ->
            $view-card.style.opacity = 0
            e.target.remove-event-listener \mouseleave hide-card$
        $view-card.src = e.target.get-attribute \data-png
        $view-card.style.opacity = 1
        e.target.add-event-listener \mouseleave hide-card$
    state = await get-state!
    window.state = state
    const apply-state$ = ->
        gen-opponent-cards$ it.opponent_cards_in_hand
        #const my-card-ids = [...$own-hand.children].map ->
        #    it.get-attribute \data-id*/
        if document.body.class-list.contains \my-turn
            document.body.class-list.remove \my-turn if it.you != it.turn_player
        else
            document.body.class-list.add \my-turn if it.you == it.turn_player
        if it.hand.length != $own-hand.children.length
            $own-hand.innerHTML = ''
            it.hand.for-each (card-id, index) ->
                card-data = cards[card-id]
                card = make-card card-data.jpg
                card.set-attribute \data-index index
                card.add-event-listener \mouseenter show-card$
                card.set-attribute \data-png card-data.png
                $own-hand.append-child card
    apply-state$ state.player-state    
        
    set-interval (->>
        const new-state = await get-state!
        unless new-state.player-state-json == state.player-state-json
            apply-state$ new-state.player-state
        state := new-state
    ), 1000
    mouse-x = mouse-y = 0
    document
        ..addEventListener \mousemove ->
            mouse-x = it.client-x
            mouse-y = it.client-y
            if mouse-x > window.inner-width / 2
                $view-card-container.class-list.remove \right
            else
                $view-card-container.class-list.add \right
        ..addEventListener \keyup ->
            current-mouse-node = [...document.query-selector-all \:hover][* - 1]
            switch it.key
                | \c => fetch "./draw/#{pop-param!}"
                | \e => fetch "./pass"
                | \0 \1 \2 \3 \4 \5 \6 \7 \8 \9 => push-param that
                | \t =>
                    if current-mouse-node?.has-attribute \data-index
                        fetch "./fade/#{current-mouse-node.get-attribute \data-index}"
)!