Merge pull request #48 from Qwiri/develop

feat: Live-Search + Minor Improvements
Qwiri · Jan 10, 2022 · 0baebee · 0baebee
2 parents 77f6218 + cca0b19
commit 0baebee
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 53 deletions.
diff --git a/backend/go.mod b/backend/go.mod
@@ -4,19 +4,19 @@ go 1.17
 
 require (
 	github.com/apex/log v1.9.0
-	github.com/gofiber/fiber/v2 v2.23.0
-	github.com/gofiber/websocket/v2 v2.0.14
+	github.com/gofiber/fiber/v2 v2.24.0
+	github.com/gofiber/websocket/v2 v2.0.15
 	github.com/stretchr/testify v1.7.0
 )
 
 require (
 	github.com/andybalholm/brotli v1.0.4 // indirect
 	github.com/davecgh/go-spew v1.1.1 // indirect
-	github.com/fasthttp/websocket v1.4.3-rc.10 // indirect
+	github.com/fasthttp/websocket v1.4.4 // indirect
 	github.com/klauspost/compress v1.13.6 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
-	github.com/savsgio/gotils v0.0.0-20210921075833-21a6215cb0e4 // indirect
+	github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	github.com/valyala/fasthttp v1.31.0 // indirect
 	github.com/valyala/tcplisten v1.0.0 // indirect

diff --git a/backend/go.sum b/backend/go.sum
@@ -13,13 +13,19 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/fasthttp/websocket v1.4.3-rc.10 h1:LlOEMGqRyJAJIZ4DSVyEtKjSLBZ7LCZgWAr78VHEh20=
 github.com/fasthttp/websocket v1.4.3-rc.10/go.mod h1:xU7SHrziVFuFx3IO24nLKcu4tm3QykCFXhwtwRk9Xd0=
+github.com/fasthttp/websocket v1.4.4 h1:idpWVCU0JdxOH8xp0vgbvWTw7H7wAtyCfigHRYDSx74=
+github.com/fasthttp/websocket v1.4.4/go.mod h1:Tf1hkwdVG8a4tmcxNdTLcZQJc3r7EOnbCLgdM8wqBmA=
 github.com/fatih/color v1.7.0/go.mod h1:Zm6kSWBoL9eyXnKyktHP6abPY2pDugNf5KwzbycvMj4=
 github.com/fsnotify/fsnotify v1.4.7/go.mod h1:jwhsz4b93w/PPRr/qN1Yymfu8t87LnFCMoQvtojpjFo=
 github.com/go-logfmt/logfmt v0.4.0/go.mod h1:3RMwSq7FuexP4Kalkev3ejPJsZTpXXBr9+V4qmtdjCk=
 github.com/gofiber/fiber/v2 v2.23.0 h1:kcJGMC6SULJ2G7p7mbs+A28cVLOeJSR694jfGyGZqRI=
 github.com/gofiber/fiber/v2 v2.23.0/go.mod h1:MR1usVH3JHYRyQwMe2eZXRSZHRX38fkV+A7CPB+DlDQ=
+github.com/gofiber/fiber/v2 v2.24.0 h1:18rpLoQMJBVlLtX/PwgHj3hIxPSeWfN1YeDJ2lEnzjU=
+github.com/gofiber/fiber/v2 v2.24.0/go.mod h1:MR1usVH3JHYRyQwMe2eZXRSZHRX38fkV+A7CPB+DlDQ=
 github.com/gofiber/websocket/v2 v2.0.14 h1:9xGDX08jBm1N809Q25MT95y0c72XvIguxsYKo3qG8ec=
 github.com/gofiber/websocket/v2 v2.0.14/go.mod h1:movf9ZfhvBRpmZjwdv1u/gCvOPFjwznwqz+x75pYr7I=
+github.com/gofiber/websocket/v2 v2.0.15 h1:ucCrHNlTGWgxIQeEsp3LujDCs/gtGRR96DyzFP8JAE0=
+github.com/gofiber/websocket/v2 v2.0.15/go.mod h1:GlTUuZyhNPeJj96x8q6jmZ/lElfzwBk8LMJwo4Jqc5Q=
 github.com/golang/protobuf v1.2.0/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/protobuf v1.3.1/go.mod h1:6lQm79b+lXiMfvg/cZm0SGofjICqVBUtrP5yJMmIC1U=
 github.com/golang/snappy v0.0.3/go.mod h1:/XxbfmMg8lxefKM7IXC3fBNl/7bRcc72aCRzEWrmP2Q=
@@ -52,6 +58,8 @@ github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZN
 github.com/rogpeppe/fastuuid v1.1.0/go.mod h1:jVj6XXZzXRy/MSR5jhDC/2q6DgLz+nrA6LYCDYWNEvQ=
 github.com/savsgio/gotils v0.0.0-20210921075833-21a6215cb0e4 h1:ocK/D6lCgLji37Z2so4xhMl46se1ntReQQCUIU4BWI8=
 github.com/savsgio/gotils v0.0.0-20210921075833-21a6215cb0e4/go.mod h1:oejLrk1Y/5zOF+c/aHtXqn3TFlzzbAgPWg8zBiAHDas=
+github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899 h1:Orn7s+r1raRTBKLSc9DmbktTT04sL+vkzsbRD2Q8rOI=
+github.com/savsgio/gotils v0.0.0-20211223103454-d0aaa54c5899/go.mod h1:oejLrk1Y/5zOF+c/aHtXqn3TFlzzbAgPWg8zBiAHDas=
 github.com/sergi/go-diff v1.0.0/go.mod h1:0CfEIISq7TuYL3j771MWULgwwjU+GofnZX9QAmXWZgo=
 github.com/smartystreets/assertions v1.0.0/go.mod h1:kHHU4qYBaI3q23Pp3VPrmWhuIUrLW/7eUrw0BU5VaoM=
 github.com/smartystreets/go-aws-auth v0.0.0-20180515143844-0c1422d1fdb9/go.mod h1:SnhjPscd9TpLiy1LpzGSKh3bXCfxxXuqd9xmQJy3slM=

diff --git a/backend/pkg/model/game.go b/backend/pkg/model/game.go
@@ -156,6 +156,8 @@ func (g *Game) SetLeader(client *Client) {
 
 // LeaveClient removes a client from the game and sends a PLAYER_LEAVE message to all other players
 func (g *Game) LeaveClient(client *Client, reason string) {
+	log.Infof("[%s] %s left (leader: %v)", g.ID, client.Name, client.Leader)
+
 	// remove client from game
 	g.Clients.Delete(client)
 
@@ -171,8 +173,10 @@ func (g *Game) LeaveClient(client *Client, reason string) {
 
 	// check if client was a leader
 	if client.Leader {
+		log.Debugf("[%s] %s was a leader. Choosing a new one.", g.ID, client.Name)
 		if leader := g.CreateLeader(); leader != nil {
 			log.Debugf("[%s] New leader for game: %s", g.ID, leader.Name)
+			g.SetLeader(leader)
 		} else {
 			log.Warnf("[%s] Cannot find new leader", g.ID)
 		}

diff --git a/frontend/package.json b/frontend/package.json
@@ -6,7 +6,7 @@
     "build": "rollup -c --environment BUILD:production",
     "buildstaging": "rollup -c --environment BUILD:staging",
     "dev": "rollup -c -w --environment BUILD:development",
-    "start": "sirv public --no-clear --single",
+    "start": "sirv public --no-clear --single --port 5000",
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {

diff --git a/frontend/src/assets/GameEndUser.svelte b/frontend/src/assets/GameEndUser.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { username } from "../store";
+
+    import Avatar from "./Avatar.svelte";
+
+    export let name;
+    export let height = "auto";
+</script>
+
+<div class="avatar">
+    <Avatar user={name} width="auto" {height} />
+    <span class:self={name === $username}>{name}</span>
+</div>
+
+<style lang="scss">
+    .self {
+        color: greenyellow;
+    }
+    .avatar {
+        height: 5rem;
+        width: 5rem;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+</style>
diff --git a/frontend/src/screens/SearchGif.svelte b/frontend/src/screens/SearchGif.svelte
@@ -12,15 +12,9 @@
 
     let submission: string = "";
 
-    const handleEnter = async (e: KeyboardEvent) => {
-        if (e.key !== "Enter") {
-            return;
-        }
-        fetchFirstGifs();
-    };
-
     const fetchFirstGifs = async () => {
-        searchResults = await provider.search(searchQuery);
+        searchResults = []; // #42
+        searchResults = await provider.search(searchQuery, true);
     };
 
     const fetchGifs = async () => {
@@ -42,6 +36,21 @@
             Providers[(Providers.indexOf(provider) + 1) % Providers.length];
         // clear search results
         searchResults = [];
+        fetchFirstGifs();
+    };
+
+    let timer;
+
+    const debounce = (e: KeyboardEvent) => {
+
+        if (e.key === "Enter") {
+            return;
+        }
+
+        clearTimeout(timer);
+        timer = setTimeout(async () => {
+            await fetchFirstGifs();
+        }, 300);
     };
 </script>
 
@@ -61,7 +70,7 @@
                 type="text"
                 class="gyf-bar"
                 placeholder="Search via {provider.name} 🔍"
-                on:keypress={handleEnter}
+                on:keyup="{debounce}"
                 bind:value={searchQuery}
             />
 

diff --git a/frontend/src/screens/lobby/GameEnd.svelte b/frontend/src/screens/lobby/GameEnd.svelte
@@ -2,8 +2,9 @@
     import Avatar from "../../assets/Avatar.svelte";
     import { resetGameValues } from "../../utils";
 
-    import { state, username, stats, players } from "../../store";
+    import { state, username, stats } from "../../store";
     import { GameState } from "../../types";
+    import GameEndUser from "../../assets/GameEndUser.svelte";
 
     let firstPlace = [];
     let secondPlace = [];
@@ -60,10 +61,7 @@
                 </div>
                 <div id="firstPlaceAvatars">
                     {#each firstPlace as name}
-                        <div class="avatar">
-                            <Avatar user={name} width="auto" height="78%" />
-                            {name}
-                        </div>
+                        <GameEndUser {name} height="78%" />
                     {/each}
                 </div>
                 <div class="pointsField">
@@ -89,10 +87,7 @@
                 </div>
                 <div id="secondPlaceAvatars">
                     {#each secondPlace as name}
-                        <div class="avatar">
-                            <Avatar user={name} width="auto" />
-                            {name}
-                        </div>
+                        <GameEndUser {name} />
                     {/each}
                 </div>
                 {#if points[1] !== undefined}
@@ -106,10 +101,7 @@
                 <div id="honorableMentionsBadge" class="badge" />
                 <div id="honorableMentionsAvatars">
                     {#each honorableMentions as name}
-                        <div class="avatar">
-                            <Avatar user={name} width="auto" />
-                            {name}
-                        </div>
+                        <GameEndUser {name} />
                     {/each}
                 </div>
             </div>
@@ -243,18 +235,6 @@
             max-width: 20rem;
         }
 
-        .avatar {
-            height: 5rem;
-            width: 5rem;
-            overflow: hidden;
-            display: flex;
-            flex-direction: column;
-
-            div {
-                height: 78%;
-            }
-        }
-
         .pointsField {
             display: flex;
             flex-direction: column;

diff --git a/frontend/src/screens/search.ts b/frontend/src/screens/search.ts
@@ -1,11 +1,10 @@
-const defaultLimit = 30;
+const defaultLimit = 50;
 
 export interface Provider {
     name: string;
     apiKey: string;
     offset: number;
-    search: (query: string) => Promise<any>;
-    lastQuery: string;
+    search: (query: string, resetOffset?: boolean) => Promise<any>;
 }
 
 export interface SearchResult {
@@ -15,17 +14,15 @@ export interface SearchResult {
 
 export const Giphy: Provider = {
     name: 'Giphy',
-    apiKey: 'epo51yrPMWiwryp1w5xbOEK9gJUpGbIX',
+    apiKey: 'oTXCaDQKRKtGPpOwRTYVvJjs40mHIygr',
     offset: 0,
-    lastQuery: '',
-    search: async function(query: string): Promise<Array<SearchResult>> {
+    search: async function(query: string, resetOffset = false): Promise<Array<SearchResult>> {
 
-        if (!query === this.lastQuery) {
+        if (resetOffset) {
             this.offset = 0;
         }
-        this.lastQuery = query;
 
-        const res: Response = await fetch(`https://api.giphy.com/v1/gifs/search?api_key=${this.apiKey}&q=${query}&limit=${defaultLimit}&offset=${this.offset}`);
+        const res: Response = await fetch(`https://api.giphy.com/v1/gifs/search?api_key=${this.apiKey}&q=${encodeURI(query)}&limit=${defaultLimit}&offset=${this.offset}`);
         const body: any = await res.json();
 
         this.offset += 20;
@@ -46,15 +43,14 @@ export const Tenor: Provider = {
     name: 'Tenor',
     apiKey: 'LIDSRZULELA',
     offset: 0,
-    lastQuery: '',
-    search: async function(query: string): Promise<Array<SearchResult>> {
+    search: async function(query: string, resetOffset = false): Promise<Array<SearchResult>> {
 
-        if (!query === this.lastQuery) {
+        if (resetOffset) {
             this.offset = 0;
         }
         this.lastQuery = query;
 
-        const res: Response = await fetch(`https://g.tenor.com/v1/search?q=${query}&key=${this.apiKey}&limit=${defaultLimit}&pos=${this.offset}`);
+        const res: Response = await fetch(`https://g.tenor.com/v1/search?q=${encodeURI(query)}&key=${this.apiKey}&limit=${defaultLimit}&pos=${this.offset}`);
         const body: any = await res.json();
 
         this.offset = parseInt(body.next);
@@ -74,4 +70,4 @@ export const Tenor: Provider = {
 export const Providers: Array<Provider> = [
     Giphy,
     Tenor,
-];
+];