fix: set more compatible with server

frontend/game/package.json

@@ -12,6 +12,8 @@
     "react-redux": "^7.2.3",
     "react-scripts": "4.0.3",
     "redux": "^4.0.5",
+    "socket.io": "^4.1.2",
+    "socket.io-client": "^4.1.2",
     "source-map-explorer": "^2.5.2",
     "superagent": "^6.1.0",
     "web-vitals": "^1.1.1"
@@ -52,6 +54,6 @@
     ]
   },
   "devDependencies": {
-    "@web-lite/api-types": "1.1.1"
+    "@web-lite/api-types": "^1.1.1"
   }
 }

frontend/game/public/weblite.manifest.json

@@ -3,12 +3,10 @@
   "id": "5f945d356cb1bf0d609c860a",
   "instantiable": true,
   "searchable": true,
-  "fullscreen": true,
   "inline": false,
   "notifMessage": "نقطه به نقطه انتظار برای دیدن تو",
   "servIndexes": {
-    "main": "index",
-    "fullscreen": "index"
+    "main": "index"
   },
   "version": "1.11.15"
 }

frontend/game/src/components/header/header.js

@@ -3,9 +3,12 @@ import * as React from 'react'
 import useStyle from './header.style'
 // localiztion
 import t from './header.local'
+import { useSelector } from 'react-redux'
+import { roomIsWaitingView, statusView } from '../../scenes/_slice/game.slice'
 
 export default function Header(props) {
   const classes = useStyle()
+  const status = useSelector(statusView)
 
-  return <div className={classes.root}>{t.title}</div>
+  return <div className={classes.root}>{t[status]}</div>
 }

frontend/game/src/components/header/header.local.js

@@ -1,4 +1,7 @@
 export default {
   name: 'header',
-  title: 'نقطه‌بازی',
+  connected: 'نقطه‌بازی',
+  waiting: 'در انتظار حریف...',
+  connecting: 'در حال اتصال...',
+  disconnected: 'اتصال قطع شد!',
 }

frontend/game/src/components/header/header.style.js

@@ -9,7 +9,7 @@ export default makeStyles(theme => ({
     color: 'black',
     cursor: 'pointer',
     gridArea: 'header',
-    fontSize: '40px',
+    fontSize: '30px',
     height: '80px',
     width: '90vmin',
     textAlign: 'center',

frontend/game/src/components/paper/paper.js

@@ -7,26 +7,41 @@ import Dot from '../dot'
 import Xline from '../xline'
 import Yline from '../yline'
 import Rectangle from '../rectangle'
+import { useSelector } from 'react-redux'
+import {
+  paperColumnNumberView,
+  paperRowNumberView,
+  roomLastMoveView,
+} from '../../scenes/_slice/game.slice'
 
-const createElements = () => {
+const createElements = (rowNumber, columnNumber) => {
   const elements = []
-  for (let i = 1; i <= 2 * 6 - 1; i++)
-    for (let j = 1; j <= 2 * 6 - 1; j++) {
+  for (let i = 1; i <= 2 * rowNumber - 1; i++)
+    for (let j = 1; j <= 2 * columnNumber - 1; j++) {
       elements.push({ i, j })
     }
   return elements
 }
 
-export default function Paper(props) {
+export default function Paper() {
   const classes = useStyle()
+  const roomLastMove = useSelector(roomLastMoveView)
+  console.log({ roomLastMove })
+  const rowNumber = useSelector(paperRowNumberView)
+  const columnNumber = useSelector(paperColumnNumberView)
 
   return (
     <div className={classes.root}>
-      {createElements().map(({ i, j }) => {
-        if ((i * j) % 2 === 1) return <Dot i={i} j={j} />
-        else if (i % 2 === 1 && j % 2 !== 1) return <Xline i={i} j={j} />
-        else if (i % 2 !== 1 && j % 2 === 1) return <Yline i={i} j={j} />
-        else return <Rectangle i={i} j={j} />
+      {createElements(rowNumber, columnNumber).map(({ i, j }) => {
+        if ((i * j) % 2 === 1) return <Dot i={i} j={j} key={`${i}-${j}`} />
+        else if (i % 2 === 1 && j % 2 !== 1)
+          return <Xline i={i} j={j} key={`${i}-${j}`} />
+        else if (i % 2 !== 1 && j % 2 === 1)
+          return <Yline i={i} j={j} key={`${i}-${j}`} />
+        else
+          return (
+            <Rectangle i={i} j={j} lastMove={roomLastMove} key={`${i}-${j}`} />
+          )
       })}
     </div>
   )

frontend/game/src/components/rectangle/rectangle.js

@@ -3,17 +3,65 @@ import * as React from 'react'
 import useStyle from './rectangle.style'
 // localiztion
 import t from './rectangle.local'
+import {
+  elementColorView,
+  getPlayerHasPermission,
+  playerColorView,
+} from '../../scenes/_slice/game.slice'
+import { useSelector } from 'react-redux'
+import { requestGift, sendBouns } from '../../services/backend/backend.service'
 
-export default function Rectangle({ i, j }) {
+export default function Rectangle({ i, j, lastMove }) {
   const classes = useStyle()
+  let lastLineColor
+  const { i: lastI, j: lastJ, color: lastColor } = lastMove
 
+  //TODO check wether rectangle is colored
+  const playerHasPermission = useSelector(getPlayerHasPermission)
+  const playerColor = useSelector(playerColorView)
+  const topLineColor = useSelector(elementColorView(i - 1, j))
+  const rightLineColor = useSelector(elementColorView(i, j + 1))
+  const leftLineColor = useSelector(elementColorView(i, j - 1))
+  const downLineColor = useSelector(elementColorView(i + 1, j))
+  const background = useSelector(elementColorView(i, j))
+
+  if (i - 1 === lastI && j === lastJ) lastLineColor = topLineColor || ''
+  if (i + 1 === lastI && j === lastJ) lastLineColor = downLineColor || ''
+  if (i === lastI && j - 1 === lastJ) lastLineColor = leftLineColor || ''
+  if (i === lastI && j + 1 === lastJ) lastLineColor = rightLineColor || ''
+  // if (i === 2 && j === 10) console.log(lastLineColor)
+
+  const backgroundColor = background
+    ? `dark${background}`
+    : !!topLineColor && !!rightLineColor && !!leftLineColor && !!downLineColor
+    ? `dark${lastLineColor}`
+    : ''
+
+  if (
+    ((i - 1 === lastI && j === lastJ) ||
+      (i + 1 === lastI && j === lastJ) ||
+      (i === lastI && j - 1 === lastJ) ||
+      (i === lastI && j + 1 === lastJ)) &&
+    !background &&
+    !!topLineColor &&
+    !!rightLineColor &&
+    !!leftLineColor &&
+    !!downLineColor &&
+    playerColor === lastColor
+  ) {
+    // console.log({ playerColor, lastColor, lastLineColor })
+    sendBouns(i, j, playerColor)
+  }
   return (
     <div
       className={classes.root}
       style={{
         gridColumn: `${j - 1} / ${j + 2}`,
         gridRow: `${i - 1} / ${i + 2}`,
+        backgroundColor,
       }}
-    ></div>
+    >
+      <span></span>
+    </div>
   )
 }

frontend/game/src/components/score-board/index.js

@@ -0,0 +1 @@
+export { default } from './score-board'

frontend/game/src/components/score-board/score-board.js

@@ -0,0 +1,64 @@
+import * as React from 'react'
+// style
+import useStyle from './score-board.style'
+import clsx from 'clsx'
+// localiztion
+import t from './score-board.local'
+import { useSelector } from 'react-redux'
+import {
+  getPlayerHasPermission,
+  opponentNameView,
+  opponentScoreView,
+  playerColorView,
+  playerNameView,
+  playerScoreView,
+} from '../../scenes/_slice/game.slice'
+
+export default function ScoreBoard(props) {
+  const classes = useStyle()
+  const playerColor = useSelector(playerColorView)
+  const playerName = useSelector(playerNameView)
+  const playerScore = useSelector(playerScoreView)
+  const opponentName = useSelector(opponentNameView)
+  const opponentScore = useSelector(opponentScoreView)
+  const playerHasPermission = useSelector(getPlayerHasPermission)
+
+  const blueText =
+    playerColor === 'blue'
+      ? `${playerName}: ${playerScore}`
+      : `${opponentName}: ${opponentScore}`
+  const redText =
+    playerColor === 'red'
+      ? `${playerName}: ${playerScore}`
+      : `${opponentName}: ${opponentScore}`
+
+  const isRedActive =
+    playerColor === 'red'
+      ? playerHasPermission
+        ? true
+        : false
+      : playerHasPermission
+      ? false
+      : true
+
+  return (
+    <div className={classes.root}>
+      <div
+        className={clsx(
+          classes.score,
+          isRedActive ? classes.blue : classes.activeBlue,
+        )}
+      >
+        <span>{blueText}</span>
+      </div>
+      <div
+        className={clsx(
+          classes.score,
+          isRedActive ? classes.activeRed : classes.red,
+        )}
+      >
+        <span>{redText}</span>
+      </div>
+    </div>
+  )
+}

frontend/game/src/components/score-board/score-board.local.js

@@ -0,0 +1,3 @@
+export default {
+  name: 'score board',
+}

frontend/game/src/components/score-board/score-board.style.js

@@ -0,0 +1,43 @@
+import { makeStyles } from '@material-ui/core'
+
+export default makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    width: '90vmin',
+    marginBottom: '6px',
+  },
+  blue: {
+    padding: 'auto',
+    backgroundColor: 'rgb(0, 0, 80)',
+    boxShadow: '0 5px rgb(0, 0, 80)',
+    transition: '2s',
+    marginBottom: '6px',
+  },
+  activeBlue: {
+    backgroundColor: 'rgb(0, 0, 235) !important',
+    boxShadow: '0 5px rgb(0, 0, 180) !important',
+    transition: '2s',
+  },
+  red: {
+    padding: 'auto',
+
+    backgroundColor: 'rgb(100, 0, 0)',
+    boxShadow: '0 5px rgb(100, 0, 0)',
+    transition: '2s',
+
+    marginBottom: '6px',
+  },
+  activeRed: {
+    backgroundColor: 'red !important',
+    boxShadow: '0 5px rgb(200, 0, 0) !important',
+    transition: '2s',
+  },
+  score: {
+    textAlign: 'center',
+    textShadow: 'thistle',
+    color: 'white',
+    fontSize: '20px',
+    marginBottom: 0,
+    width: '50%',
+  },
+}))

frontend/game/src/components/send-field/send-field.js

@@ -9,7 +9,7 @@ export default function SendField(props) {
 
   return (
     <div className={classes.root}>
-      <div class={classes.button}>
+      <div className={classes.button}>
         <img alt="فرستادن" src="send-button.svg" className={classes.icon} />
       </div>
       <input className={classes.input} placeholder={t.placeholder} />

frontend/game/src/components/xline/xline.js

@@ -1,24 +1,46 @@
 import * as React from 'react'
 // style
 import useStyle from './xline.style'
-import { useSelector } from 'react-redux'
-import { playerColorView } from '../../scenes/_slice/game.slice'
+import { useDispatch, useSelector } from 'react-redux'
+import {
+  addNewLine,
+  elementColorView,
+  getPlayerId,
+  playerColorView,
+  playerIdView,
+  roomHasPermissionView,
+  roomIsWaitingView,
+  setPlayerLastMove,
+  setRoomLastMove,
+} from '../../scenes/_slice/game.slice'
+import { sendNewLine } from '../../services/backend/backend.service'
 
 export default function Xline({ i, j }) {
+  const dispatch = useDispatch()
+
   const classes = useStyle()
+
+  const playerId = useSelector(playerIdView)
   const playerColor = useSelector(playerColorView)
-  const [backgroundColor, setBackgroundColor] = React.useState('')
+  const lineColor = useSelector(elementColorView(i, j))
+  const isWaiting = useSelector(roomIsWaitingView)
+  const hasPermission = useSelector(roomHasPermissionView)
 
   return (
     <div
       className={classes.root}
       style={{
         gridColumn: `${j - 1} / ${j + 2}`,
         gridRow: `${i}`,
-        backgroundColor,
+        backgroundColor: lineColor,
       }}
       onClick={() => {
-        setBackgroundColor(playerColor)
+        if (!isWaiting && hasPermission && !lineColor) {
+          sendNewLine(i, j, playerColor)
+          dispatch(addNewLine({ i, j, color: playerColor }))
+          dispatch(setPlayerLastMove({ i, j, color: playerColor }))
+          dispatch(setRoomLastMove({ i, j, color: playerColor }))
+        }
       }}
     ></div>
   )