Fix/games

CHANGELOG.md

@@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `@rarimo/rarime-connector` - bump version to 1.0.0-rc.0
 - Getting identity id's
 
+#### Fixed
+- Sapper game size
+- Words scramble games logic
+
 ## [2.3.0] - 2023-11-17
 #### Changed
 - env files interaction, now .env files are able to bundle in ci

src/common/SapperGame/styles.scss

@@ -30,6 +30,11 @@
   height: toRem(32);
   cursor: pointer;
   background-size: 100%;
+
+  @include respond-to-height(xmedium) {
+    width: toRem(24);
+    height: toRem(24);
+  }
 }
 
 .sapper-game__top-bar {
@@ -49,13 +54,22 @@
   padding: toRem(4) toRem(6);
   font-size: 2.25em;
   flex: 1;
+
+  @include respond-to-height(xmedium) {
+    font-size: 2em;
+  }
 }
 
 .sapper-game__top-bar-smile {
   width: toRem(52);
   height: toRem(52);
   background-size: 100%;
 
+  @include respond-to-height(xmedium) {
+    width: toRem(48);
+    height: toRem(48);
+  }
+
   &:active {
     background-image: url("/static/images/games/face_pressed.svg");
   }

src/common/WordsScrambleGame/WordsScrambleGame.tsx

@@ -8,6 +8,8 @@ import {
   useState,
 } from 'react'
 
+import { Directions } from '@/common/WordsScrambleGame/enums'
+
 import { checkExistsCord, createWordMatrix, mouseMoveAlign } from './helpers'
 import { useStateRef } from './hooks'
 
@@ -23,7 +25,7 @@ type Cell = {
   row: number
   col: number
   color?: number
-  align?: string
+  align?: Directions
 }
 
 interface ICanvasRenderingContext2D extends CanvasRenderingContext2D {
@@ -56,8 +58,8 @@ const successColors: string[] = [
   'rgba(250,217,2,0.65)',
   'rgba(91, 241, 205, 0.6)',
 ]
-const isHorizontalValue = ['left', 'right']
-const isVerticalValue = ['up', 'down']
+const isHorizontalValue = [Directions.Left, Directions.Right]
+const isVerticalValue = [Directions.Up, Directions.Down]
 
 const WordsScrambleGame = ({
   words,
@@ -76,6 +78,7 @@ const WordsScrambleGame = ({
   const [blockHeight, setBlockHeight] = useState(0)
   const [ctx, setCtx] = useState({} as ICanvasRenderingContext2D)
 
+  const [, setDirectionGame, directionGame] = useStateRef<string>('')
   const [, setArrResult, arrResultRef] = useStateRef<string[]>([])
   const [, setArrResultCords, arrResultCordsRef] = useStateRef<Cell[]>([])
   const [, setSuccessfulCords, successfulCordsRef] = useStateRef<Cell[]>([])
@@ -167,16 +170,28 @@ const WordsScrambleGame = ({
       const row = Math.trunc(
         (event.offsetY - defaultPaddingVertical / 2) / ((squareSize + gap) / 2),
       )
-      let direction = 'default'
+      let align = Directions.Default
 
       if (col === cols || row === rows) return
       const cordsState = { col, row }
+      align = mouseMoveAlign(cordsPrevStateRef.current, cordsState)
+      if (align === Directions.Diagonal) return
+      const direction = isVerticalValue.includes(align)
+        ? Directions.Vertical
+        : Directions.Horizontal
       if (
         cordsState.row === cordsPrevStateRef.current.row &&
         cordsState.col === cordsPrevStateRef.current.col
       )
         return
 
+      if (!directionGame.current && align !== Directions.Default) {
+        setDirectionGame(direction)
+      }
+
+      if (align !== Directions.Default && directionGame.current !== direction)
+        return
+
       if (
         checkExistsCord(row, col, arrResultCordsRef.current) &&
         arrResultCordsRef.current.length > 1
@@ -269,20 +284,19 @@ const WordsScrambleGame = ({
           )
           .fill()
         ctx.fillStyle = greenColor
-        direction = mouseMoveAlign(cordsPrevStateRef.current, cordsState)
         ctx.fillRect(
-          isVerticalValue.includes(direction)
+          isVerticalValue.includes(align)
             ? defaultPadding +
                 col * squareSize +
-                (col + (direction === 'down' ? -1 : 0)) * gap
+                (col + (align === Directions.Down ? -1 : 0)) * gap
             : defaultPadding + col * squareSize + col * gap,
-          isHorizontalValue.includes(direction)
+          isHorizontalValue.includes(align)
             ? defaultPaddingVertical +
                 row * squareSize +
-                (row + (direction === 'right' ? -1 : 0)) * gap
+                (row + (align === Directions.Right ? -1 : 0)) * gap
             : defaultPaddingVertical + row * squareSize + row * gap,
-          isVerticalValue.includes(direction) ? squareSize + gap : squareSize,
-          isHorizontalValue.includes(direction) ? squareSize + gap : squareSize,
+          isVerticalValue.includes(align) ? squareSize + gap : squareSize,
+          isHorizontalValue.includes(align) ? squareSize + gap : squareSize,
         )
       }
       _printLetter(col, row)
@@ -294,7 +308,7 @@ const WordsScrambleGame = ({
           col,
           row,
           color: successfulWordsColorNumberIndexRef.current,
-          align: direction,
+          align: align,
         },
       ])
     },
@@ -306,11 +320,13 @@ const WordsScrambleGame = ({
       cols,
       rows,
       cordsPrevStateRef,
+      directionGame,
       arrResultCordsRef,
       _printLetter,
       setCordsPrevState,
       setArrResult,
       setArrResultCords,
+      setDirectionGame,
       successfulCordsRef,
       ctx,
       matrix,
@@ -349,19 +365,19 @@ const WordsScrambleGame = ({
           const square = successfulCordsRef.current.find(
             obj => obj.row === item.row && obj.col === item.col,
           )
-          const direction = square?.align ?? 'default'
+          const direction = square?.align ?? Directions.Default
 
           ctx.fillStyle = successColors[square?.color ?? 0]
           ctx.fillRect(
             isVerticalValue.includes(direction)
               ? defaultPadding +
                   item.col * squareSize +
-                  (item.col + (direction === 'down' ? -1 : 0)) * gap
+                  (item.col + (direction === Directions.Down ? -1 : 0)) * gap
               : defaultPadding + item.col * squareSize + item.col * gap,
             isHorizontalValue.includes(direction)
               ? defaultPaddingVertical +
                   item.row * squareSize +
-                  (item.row + (direction === 'right' ? -1 : 0)) * gap
+                  (item.row + (direction === Directions.Right ? -1 : 0)) * gap
               : defaultPaddingVertical + item.row * squareSize + item.row * gap,
             isVerticalValue.includes(direction) ? squareSize + gap : squareSize,
             isHorizontalValue.includes(direction)
@@ -405,12 +421,12 @@ const WordsScrambleGame = ({
           isVerticalValue.includes(direction)
             ? defaultPadding +
                 col * squareSize +
-                (col + (direction === 'down' ? -1 : 0)) * gap
+                (col + (direction === Directions.Down ? -1 : 0)) * gap
             : defaultPadding + col * squareSize + col * gap,
           isHorizontalValue.includes(direction)
             ? defaultPaddingVertical +
                 row * squareSize +
-                (row + (direction === 'right' ? -1 : 0)) * gap
+                (row + (direction === Directions.Right ? -1 : 0)) * gap
             : defaultPaddingVertical + row * squareSize + row * gap,
           isVerticalValue.includes(direction) ? squareSize + gap : squareSize,
           isHorizontalValue.includes(direction) ? squareSize + gap : squareSize,
@@ -422,12 +438,14 @@ const WordsScrambleGame = ({
         prevState + 1 >= successColors.length ? 0 : prevState + 1,
       )
     }
+    setDirectionGame('')
     setArrResult([])
     setArrResultCords([])
     setCordsPrevState({ col: -1, row: -1 })
   }, [
     fillActiveSquare,
     checkResult,
+    setDirectionGame,
     setArrResult,
     setArrResultCords,
     setCordsPrevState,

src/common/WordsScrambleGame/enums/directions.enum.ts

@@ -0,0 +1,10 @@
+export enum Directions {
+  Right = 'right',
+  Left = 'left',
+  Down = 'down',
+  Up = 'up',
+  Diagonal = 'diagonal',
+  Vertical = 'vertical',
+  Horizontal = 'horizontal',
+  Default = 'default',
+}

src/common/WordsScrambleGame/enums/index.ts

@@ -0,0 +1 @@
+export * from './directions.enum'

src/common/WordsScrambleGame/helpers/index.ts

@@ -1,3 +1,5 @@
+import {Directions} from '@/common/WordsScrambleGame/enums'
+
 type Cell = {
   row: number
   col: number
@@ -109,19 +111,21 @@ export const checkExistsCord = (
 }
 
 export const mouseMoveAlign = (prevState: Cell, state: Cell) => {
-  if (prevState.col === -1 && prevState.row === -1) return 'default'
+  if (prevState.col === -1 && prevState.row === -1) return Directions.Default
+  if (prevState.col !== state.col && prevState.row !== state.row)
+    return Directions.Diagonal
   if (prevState.row !== state.row) {
     if (prevState.row > state.row) {
-      return 'left'
+      return Directions.Left
     } else {
-      return 'right'
+      return Directions.Right
     }
   } else if (prevState.col !== state.col) {
     if (prevState.col > state.col) {
-      return 'up'
+      return Directions.Up
     } else {
-      return 'down'
+      return Directions.Down
     }
   }
-  return 'default'
+  return Directions.Default
 }

src/styles/_mixins.scss

@@ -11,6 +11,9 @@ $media-breakpoints: (
   xlarge2k: 2048px,
   xlarge4k: 4096px,
 );
+$media-breakpoints-height: (
+  xmedium: 768px,
+);
 
 @mixin respond-to ($media) {
   $breakpoint: map.get($media-breakpoints, $media);
@@ -28,6 +31,22 @@ $media-breakpoints: (
   }
 }
 
+@mixin respond-to-height ($media) {
+  $breakpoint: map.get($media-breakpoints-height, $media);
+
+  @if $breakpoint {
+    @media (max-height: ($breakpoint - 1)) {
+      @content;
+    }
+  }
+
+  @else {
+    @media (max-height: ($media - 1)) {
+      @content;
+    }
+  }
+}
+
 @mixin text-ellipsis {
   overflow: hidden;
   white-space: nowrap;