Restructured frontend 💯

.gitignore

@@ -1,6 +1,6 @@
 /target
 Rocket.toml
-/static/script.js
-/static/style.css
-/static/style.css.map
-/static/assets
+/web/dynamic/script.js
+/web/dynamic/style.css
+/web/static
+

build

@@ -1,5 +1,5 @@
 #!/usr/bin/env bash
-lsc -bc --no-header -o static/ web-src/script.ls || exit 1
-npx sass web-src/style.scss static/style.css || exit 2
+lsc --no-header -bco web/static/ web/src/script.ls || exit 1
+npx sass --no-source-map web/src/style.scss web/static/style.css || exit 2
 rustfmt src/*.rs || exit 3
 cargo $(basename $0) "${@:1}"

src/main.rs

@@ -238,14 +238,14 @@ fn rocket() -> _ {
     println!("B: {}", b_uuid);
 
     rocket::build()
-        .mount("/", FileServer::from(relative!("static/assets")).rank(0))
+        .mount("/", FileServer::from(relative!("web/static")).rank(0))
         .mount(
-            format!("/{}", a_uuid.hyphenated()),
-            FileServer::from(relative!("static")),
+            format!("/{}/", a_uuid.hyphenated()),
+            FileServer::from(relative!("web/dynamic")),
         )
         .mount(
-            format!("/{}", b_uuid.hyphenated()),
-            FileServer::from(relative!("static")),
+            format!("/{}/", b_uuid.hyphenated()),
+            FileServer::from(relative!("web/dynamic")),
         )
         .mount(
             "/",

web/dynamic/index.html

@@ -11,13 +11,17 @@
         <main>
             <div class="hand" id="opponent-hand"></div>
             <div id="border"></div>
+            <div id="play"></div>
             <div class="hand" id="own-hand"></div>
         </main>
         <aside id="view-card-container">
             <div id="param-container">
                 <span id="param"></span>
             </div>
-            <img src=".." alt="" id="view-card" />
+            <img src="" alt="" id="view-card" />
+            <div id="card-text-container">
+                <span id="card-text"></span>
+            </div>
         </aside>
     </body>
 </html>

web/src/script.ls

@@ -34,7 +34,7 @@
         img = document.create-element \img
         img.src = it
         img
-    const make-blank-card = -> make-card \assets/card_back.jpg
+    const make-blank-card = -> make-card \./card_back.png
     const gen-opponent-cards$ = ->
         diff = it - $opponent-hand.child-element-count
         switch
@@ -50,7 +50,8 @@
         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 }
+        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$ = ->
@@ -60,11 +61,8 @@
         $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
@@ -75,6 +73,7 @@
                 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
@@ -85,6 +84,7 @@
         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
@@ -104,4 +104,10 @@
                 | \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}"
 )!

web/src/style.scss

@@ -89,3 +89,7 @@ aside {
 .my-turn #border {
     background-color: #0ff2;
 }
+
+#play {
+    flex-grow: 1;
+}