VCNV ui

frontend/.gitignore

@@ -150,3 +150,5 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+src/p2b64.b64

frontend/src/components/PillTag.svelte

@@ -70,7 +70,6 @@
 
     .pilltag {
         position: absolute;
-        transform: translateY(-3em);
         overflow: hidden;
         font-size: 1.5em;
         display: flex;

frontend/src/components/TextAnswer.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import PillTag from "./PillTag.svelte";
+
+    export let name: string;
+    export let time: number;
+    export let content: string;
+    export let verdict: boolean | null;
+</script>
+
+<div class="container" class:wrong={!verdict && verdict !== null}>
+    <div class="nametag">
+        <PillTag text={name} />
+    </div>
+    <div class="answerbox box">
+        <p class="prompt">{content}</p>
+        <span class="time">{time.toFixed(2).padStart(5, "0")}</span>
+    </div>
+</div>
+
+<style>
+    .wrong {
+        opacity: 40%;
+    }
+
+
+    .time {
+        /* position: absolute; */
+        font-size: var(--font-small);
+        font-weight: bold;
+        transform: translateY(-20px);
+        font-family: var(--font-monospace);
+    }
+
+    .answerbox {
+        width: 40vw;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding-bottom: 15px;
+        padding-left: 25px;
+        padding-top: 15px;
+        padding-right: 25px;
+        border-radius: var(--radius-1);
+    }
+
+    .answerbox p {
+        margin-top: 30px;
+    }
+
+    .nametag {
+        transform: translateY(-40px) translateX(-20px);
+    }
+
+</style>

frontend/src/components/VCNVLine.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    export let content: string;
+    export let status: "hidden" | "selected" | "shown" | "disabled";
+    export let tag: string;
+</script>
+
+<div class="line">
+    <div class="letter disabled tag">{tag}</div>
+    {#each content as lett}
+        <div class="letter" class:selected={status == "selected"} class:shown={status == "shown"} class:disabled={status == "disabled"}>{lett}</div>
+    {/each}
+</div>
+
+<style>
+    .line {
+        display: flex;
+        flex-direction: row;
+        column-gap: 15px;
+    }
+
+    .tag {
+        margin-right: 30px;
+    }
+
+    .letter {
+        /* TODO - allow theming with variables */
+        background-color: #7379a2;
+        text-transform: uppercase;
+        width: 48px;
+        height: 48px;
+        border-radius: 13px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+    }
+
+    .selected {
+        /* TODO - allow theming with variables */
+        background-color: #6979ea;
+    }
+
+    .shown {
+        /* TODO - allow theming with variables */
+        background-color: #9ca6ec;
+    }
+
+    .disabled {
+        background-color: var(--bg-dark-1);
+    }
+
+</style>

frontend/src/components/VCNVMain.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+    import VcnvLine from "./VCNVLine.svelte";
+    import PillTag from "./PillTag.svelte";
+    import type { StateManager } from "$lib";
+    import type { Readable } from "svelte/store";
+    export let states: Readable<any>;
+</script>
+
+<div class="top">
+    <div class="left">
+        <div class="up box">
+            {#each $states.current_key as {content, status, tag}}
+                <VcnvLine {content} {status} {tag} ></VcnvLine>
+            {/each}
+        </div>
+        <div class="qbox box">
+            <div class="ptag"><PillTag text="Hàng 1" /></div>
+            <p class=prompt>{$states.prompt}</p>
+            <div class="timerbar">timerbar</div>
+        </div>
+    </div>
+    <div class="picontainer">
+        <div class="annc">CHƯỚNG NGẠI VẬT CÓ {$states.key_length} CHỮ CÁI</div>
+        <img src="data:image/png;base64, {$states.image}" class="picture" alt="" />
+    </div>
+</div>
+
+<style>
+    .box {
+        padding: 40px;
+    }
+
+    .annc {
+        height: 60px;
+        background-color: var(--accent);
+        border-radius: var(--radius-1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: var(--shadow-s);
+        font-weight: bold;
+    }
+
+    .top {
+        display: flex;
+        flex-direction: row;
+        gap: 60px;
+    }
+
+    .qbox {
+        width: 40vw;
+        height: 100%;
+    }
+
+    .picontainer {
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+    }
+
+    .timerbar {
+        margin-top: 2rem;
+        margin-bottom: -15px;
+    }
+
+    .picture {
+        box-shadow: 7px 10px 33px 3px #00000040;
+        height: 100%;
+        border-radius: var(--radius-1);
+        overflow: hidden;
+    }
+
+    .left {
+        display: flex;
+        flex-direction: column;
+        gap: 60px;
+    }
+
+    .up {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+    }
+
+    .ptag {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: inherit;
+        height: 60px;
+        transform: translateY(-4.5rem);
+    }
+</style>

frontend/src/components/VCNVShowAnswer.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { Readable } from "svelte/store";
+    import PillTag from "./PillTag.svelte";
+    import TextAnswer from "./TextAnswer.svelte";
+
+    export let states: Readable<any>;
+</script>
+
+<div class="container">
+    {#each $states.answers as {time, name, content, verdict}}
+        <TextAnswer {time} {name} {content} {verdict} />
+    {/each}
+</div>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        gap: 70px;
+    }
+
+</style>

frontend/src/lib/index.ts

@@ -3,7 +3,7 @@
 export const ORG_NAME: string = "CBN Shitposter Association · THPT Chuyên Bắc Ninh";
 export const SHOW_NAME: string = "Đáy xã hội 2";
 
-import { PacketType, type Packet, type _PacketValue, type _PacketVariant } from "client";
+import type { PacketType, Packet, _PacketValue, _PacketVariant } from "client";
 type CBHandle<T extends PacketType> = (packet: Packet<T>) => void
 type CBHandleAll = (packet: _PacketVariant) => void
 
@@ -47,7 +47,7 @@ export class Connection {
         obj.globalCB = []
         obj.ws.onmessage = ((me) => {
             let packet: Packet<PacketType> = Peeker.ClientHandle.parse(me.data)
-            if (packet.variant == PacketType.Part) {
+            if (packet.variant == Peeker.PacketType.Part) {
                 // @ts-ignore: can never happen
                 obj.currentPart = packet.value.name;
             }

frontend/src/routes/game/vcnv/+page.svelte

@@ -1,25 +1,80 @@
 <script lang="ts">
     import { Peeker, Connection, GameMaster } from "$lib";
     import { onMount } from "svelte";
-    import { readable, type Readable } from "svelte/store";
+    import { readable, writable, type Readable } from "svelte/store";
     import Load from "../../../components/Load.svelte";
+    import TitleBar from "../../../components/TitleBar.svelte";
+    import DATA from "../../../p2b64.b64?raw";
+    import VcnvMain from "../../../components/VCNVMain.svelte";
+    import VcnvShowAnswer from "../../../components/VCNVShowAnswer.svelte";
 
     let conn: Connection;
     let gm: GameMaster;
     let states: Readable<any> = readable({
-
-    })
-
-    onMount(async () => {
-        conn = await Connection.create();
-        gm = await GameMaster.create(conn);
-        states = gm.states
+        current_key: [
+            {status: "shown", content: "mrbeast", tag: "1"},
+            {status: "shown", content: "trump", tag: "2"},
+            {status: "shown", content: "ohio", tag: "3"},
+            {status: "shown", content: "しかせんべい", tag: "4"}
+        ],
+        prompt: "Đây là những lời nhận xét của Hoài Thanh - Hoài Chân về ai: \"chỉ tiên sinh là người của hai thế kỷ. Tiên sinh sẽ đại biểu cho một lớp người để chứng giám công việc lớp người kế tiếp. Ở địa vị ấy còn có ai xứng đáng hơn tiên sinh\"?",
+        key_length: 69,
+        image: DATA,
+        show_key: false,
+        answers: [
+            {time: 29.5,name: "MrBeast", content: "IELT", verdict: null},
+            {time: 1.3,name: "Joe Biden", content: "O-O-O", verdict: true},
+            {time: 69.42,name: "Trump", content: "d4d5", verdict: false},
+            {time: 2,name: "herobrine", content: "sasfsf", verdict: null}
+        ]
     });
+
+    // onMount(async () => {
+    //     conn = await Connection.create();
+    //     gm = await GameMaster.create(conn);
+    //     states = gm.states;
+    // });
 </script>
 
 <title>Vượt chướng ngại vật - Đường đua xanh</title>
 <div class="bg">
-    <Load until={gm !== undefined}>
-
-    </Load>
+    <!-- <Load until={gm !== undefined}> -->
+    <TitleBar activity="Vượt chướng ngại vật" />
+    <div class="center-box">
+        <div class="main">
+            <VcnvMain {states} />
+        </div>
+        <div class="answers hidden">
+            <VcnvShowAnswer {states} />
+        </div>
+        <div class="bottom">scoreboard</div>
+    </div>
+    <!-- </Load> -->
 </div>
+
+<style>
+    .hidden {
+        display: none;
+    }
+    .bg {
+        width: 100vw;
+        height: 100vh;
+        overflow: hidden;
+        background: var(--bg-gradient);
+    }
+
+    .center-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100vw;
+        height: 100%;
+        flex-direction: column;
+        transform: translateY(40px);
+    }
+
+    .bottom {
+        margin-top: 30px;
+    }
+
+</style>

frontend/static/global.css

@@ -17,13 +17,14 @@
     --radius-2: 32px;
     --bg-gradient: linear-gradient(119deg, #222441 0%, #363d7a 101%);
     --shadow-ss: 0 2px 5px 4px #00000040;
-    --shadow-s: 0 4px 4px 4px #00000040;
+    --shadow-s: 0 4px 4px 0 #00000040;
     --shadow-l: 0 4px 20px 4px #00000040;
     --font: "Plus Jakarta Sans", "SF Pro Text", "SF Pro Display", "Segoe UI Variable", "Arial",
         sans-serif;
     --font-monospace: "SF Mono", "Liga SFMono Nerd Font", "JetBrains Mono", "Consolas", monospace;
+    --font-small: 1rem;
     --font-normal: 1.5rem;
-    --font-large: 2.5rem
+    --font-large: 2rem;
 }
 
 .box {
@@ -45,6 +46,7 @@
     font-weight: bold;
     text-align: left;
     color: var(--text);
+    line-height: 1.2;
 }
 
 .tag {

frontend/vite.config.ts

@@ -1,7 +1,9 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
 import wasm from "vite-plugin-wasm";
+import topLevelAwait from "vite-plugin-top-level-await";
 
 export default defineConfig({
-    plugins: [sveltekit(), wasm()]
+    plugins: [sveltekit(), wasm(), topLevelAwait()],
+    assetsInclude: ["**/*.b64"],
 });

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": { "vite-plugin-top-level-await": "^1.4.4", "vite-plugin-wasm": "^3.3.0" },
+  "devDependencies": {
+    "vite-plugin-wasm-esm": "^1.0.1"
+  }
+}