From da2fba59ddaee800eceee984198da0228fcb5b80 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Wed, 21 Apr 2021 16:08:35 +0200 Subject: added search in new game dialog (not finished) --- components/ui.tsx | 17 ++++++++++++++--- package.json | 1 + pages/game.tsx | 47 ++++++++++++++++++++++++++++++++++++++++++++++- styles/game.css | 20 ++++++++++++++++++++ yarn.lock | 5 +++++ 5 files changed, 86 insertions(+), 4 deletions(-) diff --git a/components/ui.tsx b/components/ui.tsx index 7474240..1e9997a 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -1,4 +1,5 @@ import { ReactNode, useEffect, useState } from 'react'; +import { v4 as uuid } from 'uuid'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; @@ -79,6 +80,7 @@ export function Input(props: { autocomplete?: string; autofocus?: boolean; className?: string; + onChange?: () => void; }) { return ; } -export function SearchBar(props: { label?: string; }) { - return
+export function SearchBar(props: { + label?: string; + search?: (query: string) => void; +}) { + var id = uuid(); + + var getQuery = () => (document.getElementById(id).children[0] as HTMLInputElement).value; + + return
props.search && props.search(getQuery())} /> -
; diff --git a/package.json b/package.json index 75fa8b1..d0e01e0 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "copy-to-clipboard": "^3.3.1", "email-validator": "^2.0.4", "friendly-time": "^1.1.1", + "fuse.js": "^6.4.6", "image-blob-reduce": "^2.2.2", "micromark": "^2.11.4", "next": "^10.0.5", diff --git a/pages/game.tsx b/pages/game.tsx index de2c089..f6c6f5b 100644 --- a/pages/game.tsx +++ b/pages/game.tsx @@ -1,11 +1,13 @@ import Icon from '@mdi/react'; import axios from 'axios'; import copy from 'copy-to-clipboard'; +import Fuse from 'fuse.js'; import { useContext, useEffect, useState } from 'react'; import * as cookies from 'react-cookies'; import { Socket } from 'socket.io-client'; import { SocketContext } from '../components/socketContext'; +import { userInfo } from '../api/api'; import { DialogBox } from '../components/dialogBox'; import { GameBar } from '../components/gameBar'; import { CurrentGameSettings } from '../components/gameSettings'; @@ -15,11 +17,13 @@ import { ToastContext, toastType } from '../components/toast'; import { Button, IconLabelButton, SearchBar } from '../components/ui'; import { VoerBord } from '../components/voerBord'; +import AddIcon from '@material-ui/icons/Add'; import FlagOutlinedIcon from '@material-ui/icons/FlagOutlined'; import LinkRoundedIcon from '@material-ui/icons/LinkRounded'; import RefreshIcon from '@material-ui/icons/Refresh'; import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded'; import { mdiContentCopy } from '@mdi/js'; +import { AccountAvatar } from '../components/account'; function VoerGame(props: { gameID: string; @@ -139,11 +143,28 @@ function GameOutcomeDialog(props: { ; } +function InviteableFriend(props: { user?: userInfo; }) { + return
+ + {props.user?.username} +
; +} + export default function GamePage() { var [gameID, setGameID] = useState(''); var [player1, setPlayer1] = useState(true); var [active, setActive] = useState(false); var [gameIDUrl, setGameIDUrl] = useState(''); + var [friendList, setFriendList] = useState([]); + + var [query, setQuery] = useState(''); + var [visibleFriends, setVisibleFriends] = useState([]); + + var fuse = new Fuse(friendList, { + keys: ['username'], + isCaseSensitive: false, + }); var { io } = useContext(SocketContext); var { toast } = useContext(ToastContext); @@ -173,6 +194,27 @@ export default function GamePage() { setGameID(gameIDUrl); }, []); + useEffect(() => { + axios.request<{ friends: Array; }>({ + method: 'get', + url: '/api/social/list/friends', + }) + .then(response => { + console.log(response.data.friends); + setFriendList(response.data.friends); + }) + .catch(err => { + toast({ message: 'error', type: 'error', description: err.toString() }); + }); + }, []); + + useEffect(() => { + var fuseSearch = fuse.search(query); + var results = fuseSearch.map(res => res.item).slice(0, 5); + + setVisibleFriends(results); + }, [query]); + useEffect(() => { io.on('gameStart', () => setActive(true)); }, []); @@ -246,7 +288,10 @@ export default function GamePage() {

Uitnodigen via link

- +
+ setQuery(q)} /> + {visibleFriends.map(user => )} +
; diff --git a/styles/game.css b/styles/game.css index d482f9b..5954991 100644 --- a/styles/game.css +++ b/styles/game.css @@ -74,3 +74,23 @@ html.dark .newGameDialog .inviteButton.random .icon { color: var(--confirm); } html.dark .newGameDialog .inviteButton.link .icon { color: var(--error); } html.dark .newGameDialog .searchBar .input { background-color: var(--gray-800); } +.inviteFromFriendsList { + overflow-y: visible; + height: 44px; +} + +html.dark .inviteFromFriendsList .inviteableFriend { + background-color: var(--gray-800); +} +.inviteFromFriendsList .inviteableFriend { + margin-top: var(--spacing-small); + overflow: hidden; + cursor: pointer; +} + +.inviteFromFriendsList .inviteableFriend .button { + background-color: transparent; + color: var(--foreground); + padding: 10px; +} + diff --git a/yarn.lock b/yarn.lock index 05ae7bb..3be934e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5922,6 +5922,11 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= +fuse.js@^6.4.6: + version "6.4.6" + resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.4.6.tgz#62f216c110e5aa22486aff20be7896d19a059b79" + integrity sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw== + gauge@~2.7.3: version "2.7.4" resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7" -- cgit v1.2.3