fix various bugs with commns

falcolabs · Nov 21, 2024 · bbed52e · bbed52e
1 parent c14e8d8
commit bbed52e
Show file tree

Hide file tree

Showing 39 changed files with 461 additions and 162 deletions.
diff --git a/assets/public/tangtoc/.gitignore b/assets/public/tangtoc/.gitignore
@@ -1 +1,4 @@
 testvid.mp4
+*.png
+*.mp4
+*.jpg
diff --git a/assets/vcnv/key.png b/assets/vcnv/key.png
diff --git a/chick.yaml b/chick.yaml
@@ -13,6 +13,8 @@ wasm:
   - deno run compileRustDev
 
 front:
+  - output=$(python3 syncroot.py $*)
+  - eval $output
   - cd frontend
   - deno run dev
 

diff --git a/config.json b/config.json
@@ -1,30 +1,34 @@
 {
   "listenOn": "localhost:6942",
+  "devServer": {
+    "host": "localhost",
+    "port": 6699
+  },
   "serveDir": "dist",
   "staticDir": "static",
   "checkRPCTypes": true,
   "debug": true,
   "tickSpeed": 60,
   "credentials": [
     {
-      "fullName": "MrBeast",
-      "username": "mrbeast",
-      "accessKey": "joebiden"
+      "fullName": "Bảo Ngọc",
+      "username": "baongoc",
+      "accessKey": "1234"
     },
     {
-      "fullName": "Dr Disrespect",
-      "username": "disrespect",
-      "accessKey": "ytshorts"
+      "fullName": "Thùy An",
+      "username": "thuyan",
+      "accessKey": "1234"
     },
     {
-      "fullName": "Test One",
-      "username": "1",
-      "accessKey": "1"
+      "fullName": "Đại Phong",
+      "username": "daiphong",
+      "accessKey": "1234"
     },
     {
-      "fullName": "ChatGPT",
-      "username": "elonmusk",
-      "accessKey": "chatgpt"
+      "fullName": "Test Player",
+      "username": "1",
+      "accessKey": "1"
     }
   ],
   "game": {

diff --git a/engine/src/net/wspy.rs b/engine/src/net/wspy.rs
@@ -72,8 +72,10 @@ async fn sws(call_mpsc: MessageHandler, listen_on: String, serve_dir: String, st
             get(move |ws, option, connect_info| ws_handler(ws, option, connect_info, call_mpsc)),
         );
 
-    let listener = tokio::net::TcpListener::bind(listen_on).await.unwrap();
-    logging::info("Serving on localhost:6942...");
+    let listener = tokio::net::TcpListener::bind(listen_on.clone())
+        .await
+        .unwrap();
+    logging::info(format!("Serving on {}...", listen_on));
     axum::serve(
         listener,
         app.into_make_service_with_connect_info::<SocketAddr>(),

diff --git a/frontend/client/src/bridge/clientpacket.rs b/frontend/client/src/bridge/clientpacket.rs
@@ -5,8 +5,6 @@ use js_sys::{Object, Reflect};
 use serde_repr::{Deserialize_repr, Serialize_repr};
 use wasm_bindgen::prelude::*;
 
-use crate::console_log;
-
 #[derive(Debug, Clone, Copy, Serialize_repr, Deserialize_repr)]
 #[wasm_bindgen]
 #[allow(unused)]

diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,7 @@
     "compileRustProd": "wasm-pack build ./client --target bundler --out-dir ../node_modules/client --out-name client",
     "compileRustDev": "wasm-pack build ./client --target bundler --out-dir ../node_modules/client --out-name client --debug",
     "watchRust": "cargo watch -i .gitignore -i src/ -C . -s \"deno run compileRust\"",
-    "dev": "deno run compileRustDev && vite dev --force",
+    "dev": "deno run compileRustDev && vite dev --force --host=$HOST --port=$PORT",
     "build": "deno run compileRustProd && vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

diff --git a/frontend/src/components/BareTimer.svelte b/frontend/src/components/BareTimer.svelte
@@ -8,7 +8,12 @@
 
     onMount(() => {
         progress.subscribe((v) => {
-            thumb.style.width = `${v * 100}%`;
+            if (thumb === null) return;
+            if (v >= 1) {
+                thumb.style.width = "100%";
+            } else {
+                thumb.style.width = `${v * 100}%`;
+            }
             thumb.style.display = v <= 0 ? "none" : "block";
         });
     });
@@ -21,6 +26,7 @@
 <style>
     .timerbar {
         width: 100%;
+        max-width: 100%;
         height: 11px;
         border-radius: 9px;
         border: 1px solid var(--border-color);

diff --git a/frontend/src/components/ShowAnswer.svelte b/frontend/src/components/ShowAnswer.svelte
@@ -2,16 +2,23 @@
     import type { Readable } from "svelte/store";
     import PillTag from "./PillTag.svelte";
     import TextAnswer from "./TextAnswer.svelte";
-    import type { PlayerManager } from "$lib";
+    import { PlayerManager, StateManager } from "$lib";
 
-    export let states: Readable<any>;
+    export let states: StateManager;
     export let players: PlayerManager;
+
+    console.log($states.engine_players);
 </script>
 
 <div class="container">
-    {#if $states.answers !== undefined && players.storage.size != 0}
+    {#if $states.answers !== undefined && $states.engine_players.size != 0}
         {#each $states.answers as { time, name, content, verdict }}
-            <TextAnswer {time} name={players.name(name).name} {content} {verdict} />
+            <TextAnswer
+                {time}
+                name={PlayerManager.getDisplayName(name, $states.engine_players)}
+                {content}
+                {verdict}
+            />
         {/each}
     {/if}
 </div>

diff --git a/frontend/src/components/display/KhoiDongDisplay.svelte b/frontend/src/components/display/KhoiDongDisplay.svelte
@@ -4,12 +4,7 @@
     import ScoreBar from "../ScoreBar.svelte";
     import TitleBar from "../TitleBar.svelte";
 
-    import {
-        Connection,
-        GameMaster,
-        PlayerManager,
-        StateManager
-    } from "$lib";
+    import { Connection, GameMaster, PlayerManager, StateManager } from "$lib";
     import TimerBar from "../TimerBar.svelte";
     const STAGE_SEPERATED = 0;
     const STAGE_JOINT = 1;

diff --git a/frontend/src/components/display/TangTocDisplay.svelte b/frontend/src/components/display/TangTocDisplay.svelte
@@ -7,7 +7,9 @@
     import Load from "../Load.svelte";
     import ScoreBar from "../ScoreBar.svelte";
     import type { PlayerManager } from "$lib/player";
+    import type { MediaContent } from "client";
     import BareTimer from "../BareTimer.svelte";
+    import TimerBar from "../TimerBar.svelte";
 
     // @ts-ignore
     export let states: StateManager = writable({
@@ -36,12 +38,11 @@
     onMount(async () => {
         // @ts-ignore
         states.on("preload_list", (l: any) => {
-            Object.entries(l).forEach(async (a) => {
+            Object.entries(l).forEach(async (a: any) => {
                 let qn = JSON.parse(a[0]);
                 // @ts-ignore
                 let media = JSON.parse(a[1]);
                 if (media == null) return;
-                console.log("uri is", media);
                 let r = await fetch(media.uri);
                 blobs[media.uri] = URL.createObjectURL(await r.blob());
             });
@@ -56,7 +57,9 @@
                 if (!s.media_status.playbackPaused) {
                     if (videoElement.paused) {
                         if (videoElement.currentTime == 0) {
-                            states.setTimer(new Peeker.Timer());
+                            let t = new Peeker.Timer();
+                            t.resume();
+                            states.setTimer(t);
                         }
                         await videoElement.play();
                         $timerStore.resume();
@@ -126,7 +129,15 @@
                         <div class="media-placeholder" />
                     {/if}
                 </div>
-                <div class="timer"><BareTimer progress={videoProgress} /></div>
+                <div class="timer">
+                    {#if $states.media != null}
+                        {#if $states.media.mediaType == "video"}
+                            <BareTimer progress={videoProgress} />
+                        {:else}
+                            <TimerBar {states} />
+                        {/if}
+                    {/if}
+                </div>
             {/if}
         </div>
         <div class="scorebar"><ScoreBar {states} /></div>

diff --git a/frontend/src/components/display/VeDichDisplay.svelte b/frontend/src/components/display/VeDichDisplay.svelte
@@ -25,6 +25,9 @@
         stage: STAGE_COMPETE,
         qid: -1
     });
+    let videoElement: HTMLVideoElement;
+    let audioElement: HTMLAudioElement;
+    let imageElement: HTMLImageElement;
     export let players: PlayerManager;
 </script>
 
@@ -33,7 +36,33 @@
     <Load until={gm !== undefined && $states.package !== undefined}>
         <TitleBar activity="Về đích" />
         <div class="center-box">
-            {#if $states.stage == STAGE_CHOOSE}
+            {#if $states.media != null && $states.media_status.visible}
+                {#if $states.media != null}
+                    <div class="media-placeholder" />
+                    {#if $states.media.mediaType == "video"}
+                        <!-- svelte-ignore a11y-media-has-caption -->
+                        <video
+                            class="mmedia mobj"
+                            bind:this={videoElement}
+                            src={$states.media.uri}
+                            autoplay
+                        />
+                    {:else if $states.media.mediaType == "image"}
+                        <img
+                            class="mmedia mobj"
+                            src={$states.media.uri}
+                            alt="Question content"
+                            bind:this={imageElement}
+                        />
+                    {:else if $states.media.mediaType == "audio"}
+                        <audio
+                            class="mmedia mobj"
+                            src={$states.media.uri}
+                            bind:this={audioElement}
+                        />
+                    {/if}
+                {/if}
+            {:else if $states.stage == STAGE_CHOOSE}
                 {#if $states.current_player_username !== ""}
                     <div class="vertical">
                         <PackageChooser {states} />

diff --git a/frontend/src/components/panel/KhoiDong.svelte b/frontend/src/components/panel/KhoiDong.svelte
@@ -33,22 +33,20 @@
     });
 
     onMount(async () => {
-        players.subscribe((p) => {
-            let player_list = Array.from(p.values());
-            if (player_list.length === 0) {
-                return;
-            }
-            $question_placement = {
-                // @ts-ignore
-                [Number(STAGE_SEPERATED)]: {
-                    [player_list[0].identifier]: [0, 1, 2, 3, 4, 5],
-                    [player_list[1].identifier]: [6, 7, 8, 9, 10, 11],
-                    [player_list[2].identifier]: [12, 13, 14, 15, 16, 17],
-                    [player_list[3].identifier]: [18, 19, 20, 21, 22, 23]
-                },
-                [Number(STAGE_JOINT)]: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35]
-            };
-        });
+        let player_list = $states.engine_players;
+        if (player_list.length === 0) {
+            return;
+        }
+        $question_placement = {
+            // @ts-ignore
+            [Number(STAGE_SEPERATED)]: {
+                [player_list[0].identifier]: [0, 1, 2, 3, 4, 5],
+                [player_list[1].identifier]: [6, 7, 8, 9, 10, 11],
+                [player_list[2].identifier]: [12, 13, 14, 15, 16, 17],
+                [player_list[3].identifier]: [18, 19, 20, 21, 22, 23]
+            },
+            [Number(STAGE_JOINT)]: [24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35]
+        };
     });
 
     const setStage = (stage: number) => async () => await states.setNumber("stage", stage);

diff --git a/frontend/src/components/panel/ScoreJudge.svelte b/frontend/src/components/panel/ScoreJudge.svelte
@@ -1,55 +1,59 @@
 <script lang="ts">
     import { type Connection, type StateManager, CallProcedure } from "$lib";
+    import Load from "../Load.svelte";
     import ScorePillSmall from "../ScorePillSmall.svelte";
 
     export let conn: Connection;
     export let states: StateManager;
-    console.log($states.engine_players);
+
+    console.log($states, $states.plusminus);
 </script>
 
 <div class="bar">
     {#if $states.highlighted !== undefined}
         {#each $states.engine_players as player}
-            <div class="scorestack">
-                {#each $states.plusminus.rem as i}
-                    <button
-                        class="btn destructive"
-                        on:click={async () => {
-                            await conn.send(
-                                CallProcedure.name("engine::add_score")
-                                    .string("target", player.identifier)
-                                    .number("value", i)
-                                    .build()
-                            );
-                        }}>{i}</button
-                    >
-                {/each}
-                <ScorePillSmall
-                    activated={$states.highlighted.includes(player.identifier)}
-                    name={player.name}
-                    score={player.score}
-                />
-                {#each $states.plusminus.add as i}
-                    <button
-                        class="btn"
-                        on:click={async () => {
-                            console.log(
-                                CallProcedure.name("engine::add_score")
-                                    .string("target", player.identifier)
-                                    .number("value", i)
-                                    .build()
-                                    .pack()
-                            );
-                            await conn.send(
-                                CallProcedure.name("engine::add_score")
-                                    .string("target", player.identifier)
-                                    .number("value", i)
-                                    .build()
-                            );
-                        }}>+{i}</button
-                    >
-                {/each}
-            </div>
+            <Load until={$states.plusminus !== undefined}>
+                <div class="scorestack">
+                    {#each $states.plusminus.rem as i}
+                        <button
+                            class="btn destructive"
+                            on:click={async () => {
+                                await conn.send(
+                                    CallProcedure.name("engine::add_score")
+                                        .string("target", player.identifier)
+                                        .number("value", i)
+                                        .build()
+                                );
+                            }}>{i}</button
+                        >
+                    {/each}
+                    <ScorePillSmall
+                        activated={$states.highlighted.includes(player.identifier)}
+                        name={player.name}
+                        score={player.score}
+                    />
+                    {#each $states.plusminus.add as i}
+                        <button
+                            class="btn"
+                            on:click={async () => {
+                                console.log(
+                                    CallProcedure.name("engine::add_score")
+                                        .string("target", player.identifier)
+                                        .number("value", i)
+                                        .build()
+                                        .pack()
+                                );
+                                await conn.send(
+                                    CallProcedure.name("engine::add_score")
+                                        .string("target", player.identifier)
+                                        .number("value", i)
+                                        .build()
+                                );
+                            }}>+{i}</button
+                        >
+                    {/each}
+                </div>
+            </Load>
         {/each}
     {/if}
 </div>