feat: new character page and new currency (#192)

* chore: some color changes

* feat: new character page and new currency

* chore: some logic on form

* feat: plugin for stream

.vscode/settings.json

@@ -1,6 +1,4 @@
 {
-  "eslint.experimental.useFlatConfig": true,
-
   "prettier.enable": false,
   "editor.formatOnSave": false,
 

package.json

@@ -32,7 +32,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hmbanan666/chat-game-api": "^0.1.15",
+    "@hmbanan666/chat-game-api": "^0.1.17",
     "@paralleldrive/cuid2": "^2.2.2",
     "@radix-ui/colors": "^3.0.0",
     "@twurple/api": "^7.1.0",

src/lib/components/Footer.svelte

@@ -37,11 +37,11 @@
 
     a {
         font-weight: 600;
-        color: var(--color-text);
+        color: inherit;
     }
 
     a:hover {
-        color: var(--color-accent-1);
+        color: var(--green-9);
     }
 
     @media (min-width: 480px) {

src/lib/components/Hamburger.svelte

@@ -32,7 +32,6 @@
 svg {
     min-height: 24px;
     transition: transform 0.2s ease-in-out;
-    color: var(--color-text);
 }
 
 svg line {

src/lib/components/MenuDesktop.svelte

@@ -1,9 +1,12 @@
 <script>
   import Profile from './Profile.svelte'
   import { page } from '$app/stores'
+  import couponSmall from '$lib/assets/website/coupon-64.png'
+  import coinSmall from '$lib/assets/website/coin-64.png'
 
   const locale = $page.data.locale
   const t = $page.data.t
+  const profile = $page.data.profileData
 </script>
 
 <nav>
@@ -27,13 +30,36 @@
 </nav>
 
 <div class='right'>
-  <Profile />
+  <div class='items'>
+    {#if profile?.coins > 0}
+      <div class='currency'>
+        <div class='counter'>{profile.coins}</div> <img src={coinSmall} alt="" width='32' height='32' />
+      </div>
+    {/if}
+
+    {#if profile?.coupons > 0}
+      <div class='currency'>
+        <div class='counter'>{profile.coupons}</div> <img src={couponSmall} alt="" width='32' height='32' />
+      </div>
+    {/if}
+
+    <Profile />
+  </div>
 </div>
 
 <style>
     .right {
         flex-grow: 1;
         flex-basis: 0;
+        margin-left: auto;
+
+        & .items {
+          margin-left: auto;
+          width: fit-content;
+          display: flex;
+          align-items: center;
+          gap: 0.5em;
+        }
     }
 
     nav {
@@ -45,7 +71,7 @@
         display: flex;
         height: 100%;
         align-items: center;
-        color: var(--color-text);
+        color: inherit;
         font-weight: 700;
         font-size: 1rem;
         text-transform: uppercase;
@@ -55,7 +81,7 @@
     }
 
     nav a:hover {
-        color: var(--color-accent-1);
+        color: var(--green-9);
     }
 
     ul {
@@ -77,6 +103,24 @@
     }
 
     li[aria-current='page'] a {
-        color: var(--color-accent-1);
+        color: var(--green-9);
+    }
+
+    .currency {
+        position: relative;
+        display: inline-block;
+
+        & .counter {
+          position: absolute;
+          bottom: -4px;
+          left: 50%;
+          transform: translateX(-50%);
+          color: #fff;
+          font-weight: 700;
+          font-size: 0.8rem;
+          background: var(--bronze-10);
+          padding: 0 0.4em;
+          border-radius: 6px;
+      }
     }
   </style>

src/lib/components/Profile.svelte

@@ -58,7 +58,7 @@
     .wrapper {
         position: relative;
         width: fit-content;
-        margin-left: auto;
+        display: inline-block;
     }
 
     .twitch {

src/lib/game/stream-plugin/customWebSocketService.ts

@@ -0,0 +1,85 @@
+import type { WebSocketMessage } from '@hmbanan666/chat-game-api'
+import type { UnitsOnStream } from '$lib/game/types'
+import { browser } from '$app/environment'
+import { config } from '$lib/config'
+
+export class CustomWebSocketService {
+  socket!: WebSocket
+  messagesPerSecond = 0
+  kbitPerSecond = 0
+  game: UnitsOnStream
+
+  constructor(game: UnitsOnStream) {
+    this.game = game
+
+    if (browser && this.game.options.isSocketOn) {
+      this.#init()
+    }
+  }
+
+  update() {}
+
+  async #handleMessage(message: WebSocketMessage) {
+    if (message.type === 'MESSAGE') {
+      const { text, player } = message.data
+      this.game.handleMessage({ text, playerId: player.id })
+    }
+    // if (message.type === 'RAID_STARTED') {
+    //   this.game.audio.playSound('MARCHING_WITH_HORNS')
+    // }
+    // if (message.type === 'GROUP_FORM_STARTED') {
+    //   this.game.audio.playSound('MARCHING_WITH_HORNS')
+    // }
+    // if (message.type === 'MAIN_QUEST_STARTED') {
+    //   this.game.audio.playSound('MARCHING_WITH_HORNS')
+    // }
+    // if (message.type === 'SCENE_CHANGED') {
+    //   this.game.rebuildScene()
+    // }
+    // if (message.type === 'IDEA_CREATED') {
+    //   this.game.audio.playSound('YEAH')
+    // }
+  }
+
+  #init() {
+    this.socket = new WebSocket(config.websocketUrl ?? '', [this.game.id])
+
+    this.#setMessagesPerSecondHandler()
+
+    this.socket.addEventListener('open', () => {
+      this.socket.send(JSON.stringify({ type: 'GAME_HANDSHAKE', id: this.game.id, profileJWT: this.game.profileJWT }))
+    })
+
+    this.socket.addEventListener('message', (event) => {
+      const message = this.#parse(event.data.toString())
+      if (!message) {
+        return
+      }
+
+      this.messagesPerSecond += 1
+      const bytes = JSON.stringify(message).length
+      this.kbitPerSecond += Math.round((bytes * 8) / 1024)
+
+      void this.#handleMessage(message)
+    })
+  }
+
+  #parse(message: string): WebSocketMessage | undefined {
+    const parsed = JSON.parse(message)
+    if (parsed) {
+      return parsed as WebSocketMessage
+    }
+
+    return undefined
+  }
+
+  #setMessagesPerSecondHandler() {
+    return setInterval(() => {
+      // console.log(
+      //   `${this.messagesPerSecond} msg/s, ${this.kbitPerSecond} kbit/s`,
+      // )
+      this.messagesPerSecond = 0
+      this.kbitPerSecond = 0
+    }, 1000)
+  }
+}