20240826 demo panic

resources/web/index.css

@@ -40,7 +40,7 @@ body {
     margin: 0;
     position: relative;
     height: 40vh;
-    width: 98vw;
+    width: 68vw;
     background: #fcc;
 }
 
@@ -49,11 +49,72 @@ body {
     margin-top: 1rem;
     position: relative;
     height: 40vh;
-    width: 98vw;
+    width: 68vw;
     background: #cfc;
 }
 
 .cardspan {
     margin-left: 0.5em;
     border: 1px solid black;
 }
+
+#p1 iframe {
+    position: relative;
+    background: #fcc;
+    left: 0;
+    top: 0;
+    right: 100%;
+    bottom: 100%;
+}
+
+#player-heading {
+    margin: 0;
+}
+
+#player-info {
+    position: relative;
+}
+
+.player-attr {
+    margin-left: 1em;
+}
+
+#player-body {
+    font-size: 0.6rem;
+    overflow-y: auto;
+}
+
+.card {
+    display: inline-block;
+    width: 3rem;
+    height: 5rem;
+    box-sizing: border-box;
+    background: white;
+    border: 1px solid black;
+    border-radius: 0.5em;
+    font-size: 2rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    cursor: pointer;
+}
+
+.selected_true {
+    background: #aca !important;
+}
+
+.card_bot {
+    width: 100%;
+    text-align: right;
+}
+
+.suit2 {
+    color: red;
+}
+
+.suit4 {
+    color: red;
+}
+
+.sent_picks_true {
+    display: none;
+}

resources/web/index.html

@@ -7,12 +7,17 @@
         <div>
             <h1 id="heading">Calpoker</h1>
             <button onclick="exitapp()">Terminate</button>
+            <button onclick="reset()">Reset Simulator</button>
         </div>
         <div id="container">
             <div id="info"> </div>
             <div id="app">
-                <div id="p1"></div>
-                <div id="p2"></div>
+                <div id="p1">
+                    <iframe id="p1" src="player.html?id=1"></iframe>
+                </div>
+                <div id="p2">
+                    <iframe id="p2" src="player.html?id=2"></iframe>
+                </div>
             </div>
         </div>
     </body>

resources/web/index.js

@@ -1,18 +1,6 @@
-let all_selected_cards = [{}, {}];
-
-function set_card_properties(who, collection) {
-    for (let i = 0; i < 8; i++) {
-        let label = `${who}_card${i}`;
-        let card = document.getElementById(label);
-        if (!card) {
-            continue;
-        }
-        let n_string = `_${i}`;
-        if (collection[n_string]) {
-            card.style.background = 'green';
-        } else {
-            card.style.background = 'white';
-        }
+function clear(elt) {
+    for (let node = elt.firstChild; node; node = elt.firstChild) {
+        node.parentNode.removeChild(node);
     }
 }
 
@@ -24,81 +12,29 @@ function check() {
     }).then((json) => {
         if (json.info) {
             const info = document.getElementById('info');
-            info.innerHTML = json.info;
-        }
-        if (json.p1) {
-            const p1 = document.getElementById('p1');
-            p1.innerHTML = json.p1;
+            clear(info);
+            let keys = Object.keys(json.info);
+            let ul = document.createElement('ul');
+            for (let i = 0; i < keys.length; i++) {
+                let key = keys[i];
+                let li = document.createElement('li');
+                let tn = document.createTextNode(`${key}: ${json.info[key]}`);
+                li.appendChild(tn);
+                ul.appendChild(li);
+            }
+            info.appendChild(ul);
         }
-        if (json.p2) {
-            const p2 = document.getElementById('p2');
-            p2.innerHTML = json.p2;
-        }
-
-        set_card_properties('alice', all_selected_cards[0]);
-        set_card_properties('bob', all_selected_cards[1]);
 
         setTimeout(check, 500);
     });
 }
 
-function send_alice_word() {
-    let word = Math.random().toString();
-    return fetch(`alice_word_hash?word=${word}`, {
-        "method": "POST"
-    });
-}
-
-function send_bob_word() {
-    let word = Math.random().toString();
-    return fetch(`bob_word?word=${word}`, {
-        "method": "POST"
-    });
-}
-
-function toggle_card(label, selected_cards, n) {
-    let n_string = `_${n}`;
-    let card = document.getElementById(label);
-    if (!card) {
-        return;
-    }
-    if (selected_cards[n_string]) {
-        card.style.background = 'white';
-        delete selected_cards[n_string];
-    } else {
-        card.style.background = 'green';
-        selected_cards[n_string] = true;
-    }
-    console.log(selected_cards);
-}
-
-function alice_toggle(n) {
-    toggle_card(`alice_card${n}`, all_selected_cards[0], n);
-}
-
-function bob_toggle(n) {
-    toggle_card(`bob_card${n}`, all_selected_cards[1], n);
-}
-
-function set_picks(who, id) {
-    let picks = '';
-    for (let i = 0; i < 8; i++) {
-        let n_string = `_${i}`;
-        picks += (all_selected_cards[id][n_string]) ? '1' : '0';
-    }
-    return fetch(`${who}_picks?cards=${picks}`, {
-        "method": "POST"
+function reset() {
+    return fetch("reset", {"method": "POST"}).then((response) => {
+        console.log("reset...");
     });
 }
 
-function set_alice_picks() {
-    set_picks('alice', 0);
-}
-
-function set_bob_picks() {
-    set_picks('bob', 1);
-}
-
 function exitapp() {
     return fetch("exit", {"method": "POST"}).then((response) => {
         console.log("exiting...");

resources/web/player.html

@@ -0,0 +1,14 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="index.css">
+        <link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
+    </head>
+    <body id="player-body">
+        <h1 id="player-heading"></h1>
+        <h4 id="player-info"></h4>
+        <div id="playspace"></div>
+        <script type="text/javascript" src="player.js"></script>
+        <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
+        <script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
+    </body>
+</html>