bug fixes, ws rate limit, new graph

3 years ago · 5387401156
parent a3e56fa753
commit 5387401156
5 changed files with 87 additions and 47 deletions
--- a/client.go
+++ b/client.go
@ -8,6 +8,7 @@ import (
 	"time"

 	"github.com/gorilla/websocket"
+	"golang.org/x/time/rate"
 )

 // code adapted from the gorilla websocket chat demo code
@ -49,6 +50,8 @@ type Client struct {
 	username string

 	auth bool
+
+	limiter rate.Limiter
 }

 type Auth struct {
@ -70,6 +73,7 @@ func (c *Client) readPump() {
 	c.conn.SetReadLimit(maxMessageSize)
 	c.conn.SetReadDeadline(time.Now().Add(pongWait))
 	c.conn.SetPongHandler(func(string) error { c.conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })
+	c.limiter = *rate.NewLimiter(1, 5)
 	for {
 		_, message, err := c.conn.ReadMessage()
 		if err != nil {
@ -78,6 +82,10 @@ func (c *Client) readPump() {
 			}
 			break
 		}
+		if !c.limiter.Allow() {
+			c.send <- []byte("{\"type\":\"chaterror\",\"error\":\"You are sending messages too quickly\"}")
+			continue
+		}
 		var v Auth
 		err = json.Unmarshal(message, &v)
 		if err == nil {
--- a/frontend/src/components/BetBox.vue
+++ b/frontend/src/components/BetBox.vue
@ -5,13 +5,15 @@
            <div id="until">{{ until }}</div>
        </div>
        <div id="BetGraph">
-            <div class="pie animate pie-base" :style="tailsStyle"></div>
-            <div class="pie animate start-no-round pie-overlap" :style="headsStyle"></div>
+            <div class="spin">
+                <div class="tails-pie pie animate pie-base" :style="tailsStyle"></div>
+                <div class="heads-pie pie animate pie-overlap" :style="headsStyle"></div>
+            </div>
                <div class="data-overlap" id="data">
-                    <div id="headsInfo" class="percent heads">{{ headsPercent }}%</div>
-                    <div id="headsPool" class="pool heads"> {{ headsPool }}gp</div>
-                    <div id="tailsInfo" class="percent tails">{{ tailsPercent }}%</div>
-                    <div id="tailsPool" class="pool tails">{{ tailsPool }}gp</div>
+                    <div id="headsInfo" class="percent heads" :class="{ unfocused: User.bet == 'tails' }">{{ headsPercent }}%</div>
+                    <div id="headsPool" class="pool heads" :class="{ unfocused: User.bet == 'tails' }"> {{ headsPool }}gp</div>
+                    <div id="tailsInfo" class="percent tails" :class="{ unfocused: User.bet == 'heads' }">{{ tailsPercent }}%</div>
+                    <div id="tailsPool" class="pool tails" :class="{ unfocused: User.bet == 'heads' }">{{ tailsPool }}gp</div>
                </div>
        </div>
        <div id="lower" v-show="userStore().username != ''">
@ -168,34 +170,22 @@ onMounted(() => {
  position:absolute;
  border-radius:50%;
 }
-.pie:before {
+.heads-pie:before {
  inset:0;
  background:
-    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
 }
-.pie:after {
-  inset:calc(50% - var(--b)/2);
-  background:var(--c);
-  transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
-}
-.animate {
-  animation:p 1s .5s both;
-}
-.start-no-round:before {
+.tails-pie:before {
  inset:0;
  background:
-    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
 }
-.start-no-round:after {
-  inset:calc(50% - var(--b)/2);
-  background:var(--c);
-  transform:rotate(calc(var(--p)*3.6deg - 90deg)) translate(calc(var(--w)/2 - 50%));
+.animate {
+  animation:p 1s .5s both;
 }
@-moz-keyframes p{
  from{--p:0}
@ -211,7 +201,7 @@ onMounted(() => {
 }
 .data-overlap {
    position:relative;
-    bottom:305px;
+    bottom:304px;
    left: 50px;
    background-color: #001d3d;
    width: 250px;
@ -238,6 +228,12 @@ onMounted(() => {
 .tails {
    color:#dc2f91;
 }
+.heads.unfocused {
+    color:#7a661b;
+}
+.tails.unfocused {
+    color:#6b214b;
+}
 .pool.heads {
    padding-bottom: 2em;
 }
@ -264,4 +260,15 @@ onMounted(() => {
    background-clip: text;
    color: transparent;
 }
+.spin {
+    animation: rotation 20s infinite linear;
+}
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
+}
 </style>
--- a/frontend/src/components/ChatBox.vue
+++ b/frontend/src/components/ChatBox.vue
@ -40,24 +40,18 @@ const ChatColors = {

 const _CHAT_MAX_HISTORY = 75;

-onMounted(() => {
-    let log = document.getElementById("ChatWindow")
+
 function appendLog(item) {
+    var log = document.getElementById("ChatWindow")
    var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
    log.appendChild(item);
    if (doScroll) {
        log.scrollTop = log.scrollHeight - log.clientHeight;
    }
 }
-    WS.addEventListener("message",  function (evt) {
-        let MSGs = evt.data.split('\n')
-            MSGs.forEach((i) => {
-                let wsMsg = JSON.parse(i)
-            if (wsMsg.type == "chat") {
-                chatQueue.enqueue(wsMsg)
-                if (chatQueue.length  >= _CHAT_MAX_HISTORY) {
-                    chatQueue.dequeue()
-                }
+
+function updateChat() {
+    var log = document.getElementById("ChatWindow")
    log.innerHTML = ""
    for (let message of Object.values(chatQueue.elements)) {
        var item = document.createElement("div")
@ -65,20 +59,51 @@ onMounted(() => {
        fromUser.style = `color: ${message.color};`
        fromUser.innerText = message.username
        item.appendChild(fromUser)
+        if ('points' in message) {
            let chatScore = document.createElement("span")
            chatScore.innerText = `(${message.points})`
            chatScore.style = `color: ${message.color};font-family: 'Helvetica';font-size: 12px;`
            item.appendChild(chatScore)
-                    let chatMsg = document.createTextNode(`: ${message.message}`)
+        }
+        let chatMsg
+        if (!('msgcolor' in message)) {
+            //message['msgcolor'] = '#f3f9f8'
+        }
+        chatMsg = document.createElement("span")
+        chatMsg.style = `color: ${message.msgcolor};`
+        chatMsg.innerText = `: ${message.message}`
        item.appendChild(chatMsg)
        appendLog(item)
    }
 }
+
+onMounted(() => {
+    
+    WS.addEventListener("message",  function (evt) {
+        let MSGs = evt.data.split('\n')
+            MSGs.forEach((i) => {
+                let wsMsg = JSON.parse(i)
+            if (wsMsg.type == "chat") {
+                chatQueue.enqueue(wsMsg)
+                if (chatQueue.length  >= _CHAT_MAX_HISTORY) {
+                    chatQueue.dequeue()
+                }
+                updateChat()
+            } else if (wsMsg.type == 'chaterror') {
+                chatQueue.enqueue({
+                    username: 'Not Sent',
+                    color: '#555',
+                    message: wsMsg.error,
+                    msgcolor: '#555'
+                })
+                updateChat()
+            }
        })
    })
 })

 function sendChat() {
+    if (chat.value == '') { return }
    if (chat.value.startsWith("/color")) {  
        let newColor = chat.value.split(" ")[1]
        if (newColor in ChatColors) {
--- a/frontend/vue.config.js
+++ b/frontend/vue.config.js
@ -6,7 +6,7 @@ module.exports = defineConfig({
 module.exports = {
  devServer: {
    host: "localhost",
-    port: 8000,
+    port: 8080,
    proxy: {
      "/": {
        target: "http://localhost:8000",
--- a/main.go
+++ b/main.go
@ -12,7 +12,7 @@ import (

 /*
 	0.0.4
-		- added rate limiting
+		- added rate limiting for http and ws
 		- added captcha for account creation
 		- added WebSocket authentication
 		- fixed BetInput bugs (NaN, decimals)