feat(room page, playing deck component): changed styles for playing c…

…ards input (#22)

closes #21

Co-authored-by: Asman Umbetov <[email protected]>

client/components/TextInput/index.tsx

@@ -11,28 +11,34 @@ type Props = {
   validationError?: string | null
 }
 
-export default function TextInput({ validationError, value, placeholder, onChange, className }:Props) {
+export default function TextInput({
+  validationError,
+  value,
+  placeholder,
+  onChange,
+  className,
+}: Props) {
   const [validationErrorSpring] = useSpring(() => {
-    return validationError 
+    return validationError
       ? {
         from: { opacity: 0, height: 0 },
         to: { opacity: 1, height: 30 },
-        config: config.stiff
+        config: config.stiff,
       }
       : {
         from: { opacity: 1, height: 30 },
         to: { opacity: 0, height: 0 },
-        config: config.stiff
+        config: config.stiff,
       }
   }, [validationError])
   return (
     <div
       className={className}
     >
       <animated.div
-        className='text-danger w-full text-center text-sm'
+        className='w-full text-center text-sm text-danger'
         style={{
-          ...validationErrorSpring
+          ...validationErrorSpring,
         }}
       >
         {validationError || ''}
@@ -41,8 +47,8 @@ export default function TextInput({ validationError, value, placeholder, onChang
         placeholder={placeholder}
         onChange={onChange}
         value={value}
-        className={classNames('text-input', 'border-none', 'outline-none', {
-          'text-input-danger': validationError
+        className={classNames('text-input', 'border-none', 'outline-none', 'text-black', {
+          'text-input-danger': validationError,
         })}
         tabIndex={0}
       />

client/contexts/NotificationContextProvider.tsx

@@ -81,7 +81,7 @@ export default function NotificationContextProvider({ children }: { children: Re
     >
       {children}
       <div
-        className='fixed top-0 w-96 left-2/4 -translate-x-2/4'
+        className='fixed left-2/4 top-0 w-96 -translate-x-2/4'
       >
         {transitions((notifStyles, notif, state) => {
           return (
@@ -134,7 +134,7 @@ function Notification({ text, style, onDismiss, onMouseLeave, onMouseEnter }: No
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={onDismiss}
-      className='cursor-pointer bg-white relative w-96 mt-4 rounded-xl border border-primary-emphasis p-4 shadow-modal text-center'
+      className='relative mt-4 w-96 cursor-pointer rounded-xl border border-primary-emphasis bg-white p-4 text-center text-black shadow-modal'
     >
       {text}
     </animated.div>

client/global.d.ts

@@ -3,5 +3,10 @@ declare module '*.svg' {
   export default content
 }
 
+declare module '*.css' {
+  const content: Record<string, string>
+  export default content
+}
+
 /// <reference types="vite/client" />
 /// <reference types="vite/client" />

client/index.css

@@ -17,6 +17,11 @@ code {
     src: url('../public/Inter/Inter-VariableFont_slnt,wght.ttf') format("truetype");
 }
 
+@font-face {
+    font-family: Bangers;
+    src: url('../public/Bangers/Bangers-Regular.ttf') format("truetype");
+}
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -45,3 +50,4 @@ code {
     @apply shadow-input-border shadow-danger text-2xl px-14 py-4 rounded-3xl block w-full p-2.5 box-border text-center border-none outline-none placeholder-danger focus:shadow-danger focus:shadow-input-border-hover hover:shadow-input-border-hover hover:shadow-danger transition-all;
     }
 }
+

client/pages/room/Room.module.css

@@ -0,0 +1,4 @@
+.background {
+  background: url('../../assets/background.svg');
+  background-size: cover;
+}

client/pages/room/features/PlayingCardsInput.tsx/PlayingCardsInput.module.css

@@ -0,0 +1,20 @@
+.background {
+  background: repeating-linear-gradient(
+    -45deg,
+    #E4E9F8,
+    #E4E9F8 6px,
+    #6076B0 1px,
+    #6076B0 7px
+  )
+}
+
+.card {
+  background: url('../../../../assets/cardBackground.svg');
+  background-size: cover;
+  background-color: #E7ECFC;
+  font-family: Bangers;
+  color: white;
+  text-shadow: 2px 1px 1px #2C4DA8;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: #7893DC;
+}

client/pages/room/features/PlayingCardsInput.tsx/index.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useMemo, useState } from 'react'
+import cn from 'classnames'
 import { animated, useSprings } from '@react-spring/web'
 import { Player } from 'pages/room/types'
 import { useWindowSize } from 'hooks/useWindowSize'
+import styles from './PlayingCardsInput.module.css'
 
 type Props = {
   cards: string[]
@@ -174,9 +176,8 @@ export default function PlayingCardsInput({ onChange, cards, userValue, name }:
   return (
     <>
       {name && (
-        <div
-          className='rounded-tr-xl rounded-tl-xl bg-light-grey px-5 py-2 text-black'
-        >{name}
+        <div className='rounded-tl-xl rounded-tr-xl border border-b-0 border-solid border-black bg-light-grey px-5 py-2 text-black'>
+          {name}
         </div>
       )}
       <div
@@ -187,7 +188,10 @@ export default function PlayingCardsInput({ onChange, cards, userValue, name }:
         }}
       >
         <div
-          className='absolute h-full w-full  rounded-lg rounded-tl-full rounded-tr-full bg-light-grey'
+          className={
+            'playing-cards-input-background absolute h-full  w-full rounded-lg rounded-tl-full rounded-tr-full border-4 border-solid border-primary-idle bg-light-grey ' +
+            styles.background
+          }
         />
         <div
           className='absolute inset-x-2/4 -translate-x-1/2 scale-90 md:top-0'
@@ -204,16 +208,15 @@ export default function PlayingCardsInput({ onChange, cards, userValue, name }:
                 onClick={handleClick(index)}
                 key={index}
                 className={
-                  'z-1 absolute cursor-pointer rounded-lg border border-primary-emphasis bg-white shadow-card'
+                  'z-1 absolute cursor-pointer rounded-lg border border-primary-emphasis bg-white shadow-card ' +
+                  styles.card
                 }
                 style={{
                   ...cardSize,
                   ...springProps,
                 }}
               >
-                <div
-                  className='absolute inset-2/4 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-2xl font-normal text-black'
-                >
+                <div className='absolute inset-2/4 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-2xl font-normal'>
                   {card}
                 </div>
               </animated.div>

client/pages/room/features/PlayingDesk/components/Card.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useState } from 'react'
+import React, { CSSProperties } from 'react'
 import { animated, useSpring } from '@react-spring/web'
 import classNames from 'classnames'
 import ArrowSvg from 'assets/arrow.svg'
@@ -25,9 +25,7 @@ export default function Card({ isRevealed, animationProp, value }: Props) {
         ...animationProp,
       }}
     >
-      {value && !isRevealed && <ArrowSvg
-        className='absolute -top-6 left-1/2 -translate-x-2/4'
-                               />}
+      {value && !isRevealed && <ArrowSvg className='absolute -top-6 left-1/2 -translate-x-2/4' />}
       <animated.div
         className={classNames('card absolute', {
           'bg-primary-emphasis': value,
@@ -52,9 +50,7 @@ export default function Card({ isRevealed, animationProp, value }: Props) {
           rotateY,
         }}
       >
-        <div
-          className='absolute inset-2/4 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-2xl font-normal'
-        >
+        <div className='absolute inset-2/4 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center text-2xl font-normal'>
           {value}
         </div>
       </animated.div>

client/pages/room/features/PlayingDesk/components/EmptyRoomBanner.tsx

@@ -1,35 +1,37 @@
 import { animated, useSpring } from '@react-spring/web'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 export default function EmptyRoomBanner() {
   const [ref, setRef] = useState<HTMLHeadingElement | null>()
 
   const [waitForOthersSpring] = useSpring(() => {
     return {
       from: {
-        backgroundPositionX: 0
+        backgroundPositionX: 0,
       },
       to: {
-        backgroundPositionX: ref ? ref.offsetWidth * 2 : 1 
+        backgroundPositionX: ref ? ref.offsetWidth * 2 : 1,
       },
       config: {
-        duration: 1000
+        duration: 1000,
       },
-      loop: true
-    }}, [ref])
+      loop: true,
+    }
+  }, [ref])
 
   return (
     <animated.h3
-      ref={newRef => setRef(newRef)}
-      className='relative w-auto text-center bg-200% bg-clip-text -top-40 font-semibold text-grey bg-gradient-to-r from-grey from:20% via-primary-emphasis via:100% to-grey to:80%'
+      ref={(newRef) => setRef(newRef)}
+      className='from:20% via:100% to:80% relative -top-40 w-auto bg-gradient-to-r from-grey via-primary-emphasis to-grey bg-200% bg-clip-text text-center font-semibold text-grey'
       style={{
         WebkitTextFillColor: 'transparent',
-        ...waitForOthersSpring
+        WebkitBackgroundClip: 'text',
+        ...waitForOthersSpring,
       }}
     >
-              This room is empty
-      <br/>
-              Wait for others players to join
+      This room is empty
+      <br />
+      Wait for others players to join
     </animated.h3>
   )
 }

client/pages/room/features/PlayingDesk/index.tsx

@@ -18,16 +18,6 @@ type Props = {
 export default function PlayingDesk({ players, userValue, onShowAll, onReset, isRevealed }: Props) {
   const ref = useRef<HTMLDivElement>(null)
 
-  const waitForOthersSpring = useSpring({
-    from: {
-      backgroundPosition: 0,
-    },
-    to: {
-      backgroundPosition: 200,
-    },
-    loop: true,
-  })
-
   useEffect(() => {
     recalculateFromStateForPlayer(players)
   }, [players])
@@ -89,9 +79,7 @@ export default function PlayingDesk({ players, userValue, onShowAll, onReset, is
   }, [canShowAll])
 
   return (
-    <div
-      className='relative flex h-full w-full items-center justify-center'
-    >
+    <div className='relative flex h-full w-full items-center justify-center'>
       <div
         ref={ref}
         className='-mb-20 flex items-center justify-center rounded-3xl bg-light-grey'
@@ -119,9 +107,7 @@ export default function PlayingDesk({ players, userValue, onShowAll, onReset, is
       </div>
       {players.map(({ id, name, value }, index) => {
         return (
-          <React.Fragment
-            key={id}
-          >
+          <React.Fragment key={id}>
             <Card
               value={value}
               isRevealed={isRevealed}
@@ -130,7 +116,7 @@ export default function PlayingDesk({ players, userValue, onShowAll, onReset, is
               }}
             />
             <animated.div
-              className='absolute flex w-36 items-center justify-center rounded-full bg-light-grey py-4 text-black'
+              className='absolute flex w-36 items-center justify-center rounded-full border border-solid border-black bg-light-grey py-4 text-black'
               style={{
                 ...playersSprings[index],
               }}

client/pages/room/index.tsx

@@ -9,6 +9,7 @@ import { socket } from 'sockets/socket'
 import { useParams } from 'react-router-dom'
 import EnterNameModal from 'components/EnterNameModal'
 import { useLocalStorage } from 'hooks/useLocalStorage'
+import styles from './Room.module.css'
 
 export function Room() {
   const { roomName } = useParams<{ roomName: string }>()
@@ -98,12 +99,12 @@ export function Room() {
   }, [])
 
   return (
-    <div
-      className='width-screen flex flex-row overflow-hidden'
-    >
+    <div className={'width-screen flex flex-row overflow-hidden'}>
       <Sidebar />
       <div
-        className='container relative m-auto flex h-screen flex-col items-center justify-between'
+        className={
+          'relative flex h-screen w-full flex-col items-center justify-between ' + styles.background
+        }
       >
         <PlayingDesk
           isRevealed={isRevealed}

public/Bangers/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2010 The Bangers Project Authors (https://github.com/googlefonts/bangers)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.