Restructured frontend 💯

2025-02-13 06:45:01 -06:00
parent 04532aaafe
commit 7c3e1fc9e9
8 changed files with 31 additions and 17 deletions
--- a/web/src/script.ls
+++ b/web/src/script.ls
@ -0,0 +1,113 @@
+(->>
+    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 \./card_back.png
+    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
+        play-map = new Map player-state.play.map -> [it.id, it]
+        return { player-state-json, player-state, events-json, events, play-map }
+
+    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!
+    const apply-state$ = ->
+        gen-opponent-cards$ it.opponent_cards_in_hand
+        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.set-attribute \data-text card-data.txt
+                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
+        window.state = 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}"
+                | \y =>
+                    if current-mouse-node?.has-attribute \data-index
+                        fetch "./fade_bottom/#{current-mouse-node.get-attribute \data-index}"
+                | ' ' =>
+                    if current-mouse-node?.has-attribute \data-index
+                        fetch "./play/#{current-mouse-node.get-attribute \data-index}"
+)!