added dnd to tutorial mode

src/App.css

@@ -142,6 +142,7 @@ body {
 }
 
 .ghostHand {
+  z-index: 1;
   display: flex;
   position: absolute;
   bottom: 100px;

src/App.tsx

@@ -1,5 +1,3 @@
-import { useState } from 'react'
-
 import { Arithmetic } from './pages/Arithmetic/Arithmetic'
 import { Plotting } from './pages/Plotting/Plotting'
 import { Tutorial } from './pages/Tutorial/Tutorial'
@@ -11,6 +9,7 @@ import { useGameModeContext } from './shared/GameState.constate'
 import { Inventory } from './pages/Inventory/Inventory'
 import { Duel } from './pages/Duel/Duel'
 import { MainMenu } from './pages/MainMenu/MainMenu'
+import { GhostPreviewProvider } from './shared/GhostPreview.constate'
 
 function App() {
   const { gameMode } = useGameModeContext()
@@ -23,28 +22,38 @@ function App() {
           display: gameMode === GAME_MODES.TUTORIAL ? 'block' : 'none'
         }}
       >
-        <Tutorial />
+        <GhostPreviewProvider>
+          <Tutorial />
+        </GhostPreviewProvider>
       </div>
-      {gameMode === GAME_MODES.MAIN_MENU && (<div
-        style={{
-          display: gameMode === GAME_MODES.MAIN_MENU ? 'block' : 'none'
-        }}
-      >
-        <MainMenu />
-      </div>)}
+      {gameMode === GAME_MODES.MAIN_MENU && (
+        <div
+          style={{
+            display: gameMode === GAME_MODES.MAIN_MENU ? 'block' : 'none'
+          }}
+        >
+          <GhostPreviewProvider>
+            <MainMenu />
+          </GhostPreviewProvider>
+        </div>
+      )}
       <div
         style={{
           display: gameMode === GAME_MODES.DUEL_FUNCTION ? 'block' : 'none'
         }}
       >
-        <Duel />
+        <GhostPreviewProvider>
+          <Duel />
+        </GhostPreviewProvider>
       </div>
       <div
         style={{
           display: gameMode === GAME_MODES.ARITHMETICS ? 'block' : 'none'
         }}
       >
-        <Arithmetic />
+        <GhostPreviewProvider>
+          <Arithmetic />
+        </GhostPreviewProvider>
       </div>
       <div
         style={{

src/components/AdditionView/AdditionView.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { CardType } from '../../math/arithmetic'
+import { CardType } from '../../math/CardType'
 
 interface AdditionViewProps {
   className?: string

src/components/CardTypeView/CardTypeView.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { CardType } from '../../math/arithmetic'
+import { CardType } from '../../math/CardType'
 import { formatNumber } from '../../math/utils'
 import { AdditionView } from '../AdditionView/AdditionView'
 
@@ -10,6 +10,8 @@ interface CardTypeViewProps {
   noAddition?: boolean
   style?: CSSProperties
   handleCardClick?: () => void
+  handleMouseDown?: (card: CardType) => void
+  handleMouseUp?: (card: CardType) => void
 }
 
 export const CardTypeView: FC<CardTypeViewProps> = ({
@@ -18,7 +20,9 @@ export const CardTypeView: FC<CardTypeViewProps> = ({
   noAddition = false,
   className = 'card',
   style = {},
-  handleCardClick
+  handleCardClick = () => {},
+  handleMouseDown = () => {},
+  handleMouseUp = () => {}
 }) => {
   const count = card.getCount()
   const description = card.getDescription()
@@ -30,9 +34,17 @@ export const CardTypeView: FC<CardTypeViewProps> = ({
     }
   }
 
+  const handleDown = () => {
+    handleMouseDown(card)
+  }
+
+  const handleUp = () => {
+    handleMouseUp(card)
+  }
+
   return (
     <>
-      <div onClick={handleClick} style={style} className={className}>
+      <div onClick={handleClick} onMouseDown={handleDown} onMouseUp={handleUp} style={style} className={className}>
         <div className='mainText'>{formatNumber(Number(count))}</div>
         {noAddition === false && <AdditionView card={card} />}
       </div>

src/components/CardsChain/CardsChain.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode } from 'react'
-import { CardType } from '../../math/arithmetic'
+import { CardType } from '../../math/CardType'
 
 interface CardsChainProps {
   chain: CardType[]

src/components/GhostPreview/GhostPreview.tsx

@@ -0,0 +1,65 @@
+import { CSSProperties, FC, useEffect, useRef } from "react"
+import { CardType } from "../../math/CardType"
+import { CardsHand } from "../CardsHand/CardsHand"
+
+interface GhostPreviewProps {
+  card: CardType
+  deck: Array<CardType>
+}
+
+export const GhostPreview: FC<GhostPreviewProps> = ({ card, deck }) => {
+  const cardRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const mouseMoveHandler = (e: MouseEvent) => {
+      if (!card) return
+      if (!cardRef.current) return
+      const x = e.pageX
+      const y = e.pageY
+      const newposX = x - 60
+      const newposY = y + 60
+      cardRef.current.style.transform = `matrix(1.2, 0, 0, 1.2, ${newposX},${newposY})`
+      cardRef.current.style.rotate = `0deg`
+      cardRef.current.style.visibility = `visible`
+    }
+    document.addEventListener('mousemove', mouseMoveHandler)
+    return () => {
+      document.removeEventListener('mousemove', mouseMoveHandler)
+    }
+  }, [card])
+
+  return (
+    <CardsHand
+      className={['ghostHand']}
+      keys={deck.map((x) => x.getId().toString())}
+      styles={deck.map((x) => {
+        const isSelected = x.getId().toString() === card?.getId().toString()
+        return isSelected ? { position: 'fixed', top: '0px', left: '0px', rotate: '0deg' } : {}
+      })}
+    >
+      {deck
+        // .filter((x) => x.getDescription() !== selectedCard?.getDescription())
+        .map((x) => {
+          const isSelected = x.getId().toString() === card?.getId().toString()
+          const style: CSSProperties = {
+            // scale: isSelected ? '1.2' : '1',
+            zIndex: isSelected ? 200 : '',
+            // visibility: isSelected ? 'visible' : 'hidden',
+            visibility: 'hidden',
+            position: isSelected ? 'absolute' : 'relative'
+          }
+          return (
+            <div
+              key={x.getId().toString()}
+              className='card hideCard ghostCard'
+              style={style}
+              ref={isSelected ? cardRef : null}
+            >
+              {card.getDescription()}
+            </div>
+          )
+        })}
+    </CardsHand>
+  )
+  // return null
+}

src/components/NavigatorTypeView/NavigatorTypeView.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from 'react'
-import { CardType } from '../../math/arithmetic'
+import { CardType } from '../../math/CardType'
 import { formatNumber } from '../../math/utils'
 import { ItemTypes } from '../../shared/constants'
 import { AdditionView } from '../AdditionView/AdditionView'

src/math/Attacher.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from './arithmetic'
+import { IComputable } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Attacher extends CardType implements IComputable {
   constructor(count?: number) {

src/math/CardType.ts

@@ -0,0 +1,50 @@
+interface CardTypeProps {
+  name: string
+}
+
+interface ICardType {
+  setCount(count: number): void
+  getId(): number
+  getName(): string
+  getDescription(): string
+  getCount(): string
+}
+
+export class CardType implements ICardType {
+  private id: number
+  private name: string
+  private count: number
+  constructor({ name }: CardTypeProps) {
+    this.name = name
+    this.count = 0
+    this.id = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER)
+  }
+
+  setCount(count: number) {
+    this.count = count
+  }
+
+  getId() {
+    return this.id
+  }
+
+  setName(name: string) {
+    this.name = name
+  }
+
+  getName() {
+    return this.name.toString()
+  }
+
+  getCount() {
+    return this.count.toString()
+  }
+
+  getDescription() {
+    return this.name
+  }
+
+  getIsInteractive() {
+    return false
+  }
+}

src/math/Cosinusator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 import { FormulaeCardType } from './formulae'
 
 export class Cosinusator extends FormulaeCardType {

src/math/Denominator.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from "./arithmetic"
+import { IComputable } from "./arithmetic"
+import { CardType } from './CardType'
 
 export class Denominator extends CardType implements IComputable {
   constructor() {

src/math/Differencator.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from './arithmetic'
+import { IComputable } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Differencator extends CardType implements IComputable {
   constructor() {

src/math/FNumberator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 import { FormulaeCardType } from './formulae'
 
 export class FNumberator extends FormulaeCardType {

src/math/Linenator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 import { FormulaeCardType } from './formulae'
 
 export class Linenator extends FormulaeCardType {

src/math/Multiplicator.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from './arithmetic'
+import { IComputable } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Multiplicator extends CardType implements IComputable {
   constructor() {

src/math/Navigator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Navigator extends CardType {
   constructor(name = 'Navigator') {

src/math/Numberator.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from './arithmetic'
+import { IComputable } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Numberator extends CardType implements IComputable {
   constructor(count?: number) {
@@ -12,6 +13,10 @@ export class Numberator extends CardType implements IComputable {
     return this.getCount();
   }
 
+  getDescription() {
+    return this.getCount();
+  }
+
   calculate(x: number, y: number): number {
     return x - y
   }

src/math/Sinusator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 import { FormulaeCardType } from './formulae'
 
 export class Sinusator extends FormulaeCardType {

src/math/Squarerator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 import { FormulaeCardType } from './formulae'
 
 export class Squarerator extends FormulaeCardType {

src/math/Summator.ts

@@ -1,4 +1,5 @@
-import { CardType, IComputable } from './arithmetic'
+import { IComputable } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Summator extends CardType implements IComputable {
   constructor() {

src/math/Switcher.ts

@@ -1,4 +1,5 @@
-import { CardType, IChangable, IComputable, SwitcherValue } from './arithmetic'
+import { IChangable, IComputable, SwitcherValue } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Switcher extends CardType implements IComputable, IChangable<SwitcherValue> {
   private switcherValue: SwitcherValue = SwitcherValue.DIFFERENCATOR

src/math/Unknownator.ts

@@ -1,4 +1,4 @@
-import { CardType } from './arithmetic'
+import { CardType } from './CardType'
 
 export class Unknownator extends CardType {
   constructor() {