add giffes

Author: TheOnlyFastCoder2

README.md

@@ -1,39 +1,29 @@
 # Svelte + TypeScript + Vite
-
-**Сайт**: [hikers-bay.vercel.app](https://hikers-bay.vercel.app/)  
-**Видео**: [Смотреть видео](https://drive.google.com/file/d/1dtvia9FmMCbD1kVNiKGhhoNly3w4hElt/view?usp=sharing)  
-**Карта**: [Скачать карту](https://disk.yandex.ru/d/o6s72EUwudpdyA)  
-
-### Управление в конструкторе:
+#### website: https://hikers-bay.vercel.app/
+###### video: https://disk.yandex.ru/i/AideJuDcLOB5Jg
+###### map: https://disk.yandex.ru/d/o6s72EUwudpdyA
 ```
-Наведи курсор на клетку: 
-Shift + ЛКМ: создать клетку  
-Ctrl + ЛКМ: удалить клетку  
-Alt + ЛКМ: удалить все клетки до нужной  
-Двойной клик ЛКМ: открыть инвентарь клетки  
+В конструкторе навведись на клетку: 
+shiftLeft+mouseLeftButton: создать клетку
+CtrlLeft+mouseLeftButton: удалить клетку
+AltLeft+mouseLeftButton: удалить все клетки до нужно
+MouseLeft_DoubleClick: при клике на клетку откроется инвентарь 
 ```
 
-### Возможности:
-
-1. **Создание собственных карт**  
-   Пользователи могут создавать собственные карты с помощью конструктора, добавляя ловушки, оружие и другие элементы.
-
-2. **Сохранение карт**  
-   Есть возможность сохранять созданные карты локально на ПК или на сайте.
-
-3. **Загрузка карт в комнату**  
-   Пользователи могут подгружать карты в игровую комнату.
-
-4. **Настройка количества пользователей**  
-   При создании комнаты можно указать количество пользователей.
-
-5. **Очередность ходов**  
-   При подгрузке комнаты у пользователей появляется возможность ходить по карте по очереди несколько раз (рандомно).
+<ol>
+  <li>Можешь создавать собственную карту с помощью конструктора , к клеткам добавлять ловушки оружия и т.д</li>
+  <li>Есть возможность сохранять эту карту локально на пк или на сайт </li>
+  <li>Можно подгружать карту в комнату </li>
+  <li>При создании комнаты можешь добавлять количество юзеров </li>
+  <li>При подгруздки комнаты - у пользователя появляется возможность ходить по карте по-очерёдно n раз (рандомно) </li>
+  <li>Пользователь может натыкаться на ловушки или бафы, а также собирать оружия </li>
+ <li>Пользователь может дамажить противников и получать за это деньги</li>
+</ol>
 
-6. **Взаимодействие с ловушками и бафами**  
-   Пользователи могут натыкаться на ловушки или получать бафы, а также собирать оружие.
+<img src="https://github.com/user-attachments/assets/a07730f4-82fd-432e-af70-e585bf40fa2f" width="1200"/>
 
-7. **Бой с противниками**  
-   Пользователи могут атаковать противников и зарабатывать деньги за успешные действия.
+### Конструктор
+<img src="/assets/gif/Hikers_constructor.gif" width="1200"/>
 
-![Превью карты](https://github.com/user-attachments/assets/a07730f4-82fd-432e-af70-e585bf40fa2f)
+### Комната
+<img src="/assets/gif/Hikers_room.gif" width="1200"/>

assets/gif/Hikers_constructor.gif

@@ -2,10 +2,10 @@
   import storeCells from "store/stCells";
   import Einity from "utils/game/Enity";
   import { stepBtn } from "utils/game/game.config";
-  import type { CEnity, TDirect, TMode } from "lib/types";
+  import type { CEntity, TDirect, TMode } from "lib/types";
 
   let fill:string = 'green';
-  export let cell:CEnity;
+  export let cell:CEntity;
   export let direct:TDirect|'CENTER';
   export let mode: TMode;
 

assets/gif/Hikers_room.gif

@@ -1,9 +1,9 @@
 <script lang="ts">
   import stCell from "store/stCell";
   import BtnDirection from "./BTNDirection.svelte";
-  import type { CEnity, TMode } from "lib/types";
+  import type { CEntity, TMode } from "lib/types";
 
-  export let cell:CEnity;
+  export let cell:CEntity;
   export let cbToOpenStoreRoles:Function;
 
   let mode:TMode|'NONE' = 'ADD';

src/lib/components/constructor/Cell/BTNDirection.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte";
-  import {type CEnity} from "lib/types";
+  import {type CEntity} from "lib/types";
   import Cell from "./Cell/Cell.svelte";
   import stCells from "store/stCells";
   import Scene from "lib/components/Scene.svelte";
@@ -12,7 +12,7 @@
   import Notification from "lib/ul/Notification.svelte";
 
 
-  let cells:CEnity[];
+  let cells:CEntity[];
   let scene:Scene;
   let notification:Notification;
   let cheatSheet:Notification;

src/lib/components/constructor/Cell/Cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CEnity } from "lib/types";
+    import type { CEntity } from "lib/types";
   import DraggableWin from "lib/ul/DraggableWin.svelte";
   import stCells from "store/stCells";
   import { onMount } from "svelte";
@@ -14,7 +14,7 @@
   export let isConstructor:boolean = true;
   export let toCreateNewMap:Function|undefined = undefined;
   export let cbResetCounter: Function|undefined = undefined;
-  export let cbToLaodMap: ((map:CEnity[]) => boolean) | undefined = undefined;
+  export let cbToLoadMap: ((map:CEntity[]) => boolean) | undefined = undefined;
 
   $: console.log(files)
   $: if (files !== null && files.length > 0) {
@@ -25,9 +25,9 @@
     win.toOpenWin();
   }
 
-  function toLaodMap(key:string, value:string, isComputer: boolean = false) {
+  function toLoadMap(key:string, value:string, isComputer: boolean = false) {
     const toLoad = () => {
-      const map = stCells.getDencryptMap(value);
+      const map = stCells.getDecryptMap(value);
       stCells.setNameMap({name:key, isComputer}); 
         stCells.toLoadMap(
           map,
@@ -41,10 +41,10 @@
     }
 
 
-    if(cbToLaodMap === undefined) toLoad(); 
+    if(cbToLoadMap === undefined) toLoad(); 
     else {
-      const map = stCells.getDencryptMap(value);
-      const trigger = cbToLaodMap(map);
+      const map = stCells.getDecryptMap(value);
+      const trigger = cbToLoadMap(map);
 
       if(trigger) toLoad()
       else {
@@ -61,7 +61,7 @@
     reader.onload = (e) => {
       if(e.target?.result) {
         files = null;
-        toLaodMap(name, e.target.result as string, true);
+        toLoadMap(name, e.target.result as string, true);
       }  
     }
 
@@ -114,7 +114,7 @@
               <div class="StoreOfMap_saved_map">
                 <span>{toFormattedMap(key)}</span>
                 <div class="container">
-                    <button on:click={() => toLaodMap(key, value)} class="StoreOfMap_saved_map_btn">открыть</button>
+                    <button on:click={() => toLoadMap(key, value)} class="StoreOfMap_saved_map_btn">открыть</button>
                     <button on:click={() => toRemoveMap(key, index)} class="StoreOfMap_saved_map_btn">удалить</button>
                 </div>
               </div>
@@ -146,7 +146,7 @@
           <div class="StoreOfMap_saved_map">
             <span>{toFormattedMap(key)}</span>
             <div class="container">
-                <button on:click={() => toLaodMap(key, value)} class="StoreOfMap_saved_map_btn">открыть</button>
+                <button on:click={() => toLoadMap(key, value)} class="StoreOfMap_saved_map_btn">открыть</button>
             </div>
           </div>
         {/if}

src/lib/components/constructor/Constructor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { CEnity } from "lib/types";
+  import type { CEntity } from "lib/types";
 
-  export let cell:CEnity;
+  export let cell:CEntity;
   export let show:'INDEX'|'DIRECTION' = 'INDEX';
   const isVPrev = cell.prevCell?.featureDirection === 'TOP' || cell.prevCell?.featureDirection === 'BOTTOM';
   const isVCurr = cell?.featureDirection === 'TOP' || cell?.featureDirection === 'BOTTOM';

src/lib/components/constructor/windows/StoreOfMap.svelte

@@ -125,7 +125,7 @@
     <div class="container">
       <div class="container __storeOfMap">
         <h2>Выбери Карты</h2>
-        <StoreOfMap isConstructor={false} cbToLaodMap={start}/>
+        <StoreOfMap isConstructor={false} cbToLoadMap={start}/>
       </div>
       <div class="container __characters">
         <StoreOfCharacters/>

src/lib/components/room/Cell.svelte

@@ -2,13 +2,13 @@ import type User from "utils/game/User";
 import Einity from "../utils/game/Enity";
 
 export type CUser = User;
-export type CEnity = Einity;
+export type CEntity = Einity;
 export type TMode = 'ADD'|'REMOVE';
 export type TPage = 'START'|'CONSTRUCTOR'|'ROOM_OFFLINE'|'ROOM_ONLINE';
 export type TDirects = ['RIGHT'?,'LEFT'?,'TOP'?,'BOTTOM'?];
 export type TDirect = 'RIGHT'|'LEFT'|'BOTTOM'|'TOP';
 
-export type TUserAction = (user:CUser, cell:CEnity, currStep:number, timeID: NodeJS.Timeout, map:CEnity[]) => void;
+export type TUserAction = (user:CUser, cell:CEntity, currStep:number, timeID: NodeJS.Timeout, map:CEntity[]) => void;
 export type TCBAction = (apponent?: CUser, cbDamageEffect?:Function) => void|boolean;
 export type TUserDataAction = {cb?:TCBAction, status:boolean, qntyBuffs: number, qntyInventory:number, isShow:boolean, apponents:Function[]};
 

src/lib/components/room/offline/Room.svelte

@@ -1,9 +1,9 @@
 import {writable} from 'svelte/store';
 import type Einity from 'utils/game/Enity';
-import type { CEnity } from 'lib/types';
+import type { CEntity } from 'lib/types';
 
 export function stCell() {
-  const {subscribe, set} = writable<CEnity>();
+  const {subscribe, set} = writable<CEntity>();
 
     return {
       subscribe,

src/lib/types.ts

@@ -1,13 +1,13 @@
 import {writable} from 'svelte/store';
-import type { CEnity } from 'lib/types';
+import type { CEntity } from 'lib/types';
 import crypto from 'crypto-js'
 import Einity from 'utils/game/Enity';
 
 
 const key = 'dcr';
 export type TNameMap = {name:string,isComputer:boolean}|undefined;
 export function stCells() {
-  const {subscribe, update, set} = writable<CEnity[]>([]);
+  const {subscribe, update, set} = writable<CEntity[]>([]);
   const nameMap = writable<TNameMap>();
 
   return {
@@ -36,12 +36,12 @@ export function stCells() {
       this.setNameMap(undefined);
     },
 
-    addChild: (cell:CEnity) => update((store) => {
+    addChild: (cell:CEntity) => update((store) => {
       store.push(cell);
       return store;
     }),
 
-    removeChild: (cell:CEnity) => update((store) => {
+    removeChild: (cell:CEntity) => update((store) => {
       return store.filter((item) => item !== cell);
     }),
 
@@ -62,7 +62,7 @@ export function stCells() {
       return map!;
     },
 
-    getDencryptMap: (str:string) => {
+    getDecryptMap: (str:string) => {
       const decrypt = crypto.AES.decrypt(str, key).toString(crypto.enc.Utf8);
       return JSON.parse(decrypt) as Einity[]
     },
@@ -87,7 +87,7 @@ export function stCells() {
 
     reload: () => update((store) => [...store]), 
 
-    removeAllAfterCell: (cell:CEnity) => {
+    removeAllAfterCell: (cell:CEntity) => {
       update((store) => {
         for(let i = store.length; true; i--) {
           if(cell === store[i]) {

src/store/stCell.ts

@@ -1,5 +1,5 @@
 import {writable} from 'svelte/store';
-import type { CEnity, CUser, TUserAction } from 'lib/types';
+import type { CEntity, CUser, TUserAction } from 'lib/types';
 
 export function stUsers() {
   const {subscribe, update, set} = writable<CUser[]>([]);
@@ -16,7 +16,7 @@ export function stUsers() {
       });
       return users!;
     },
-    reloadPosition: (map:CEnity[]) => {
+    reloadPosition: (map:CEntity[]) => {
       update((users) => {
         users.forEach((user) => {
           const cell = map[user.indCell];
@@ -69,7 +69,7 @@ export function stUsers() {
     },
 
     toDoStep: function (
-      map:CEnity[], user:CUser, qntySteps: number, userActions:TUserAction,
+      map:CEntity[], user:CUser, qntySteps: number, userActions:TUserAction,
       cbListenerMove: (user:CUser) => void, 
       cbResetActiveUser: Function , 
       speed:number = 500

src/store/stCells.ts

@@ -1,5 +1,5 @@
 import toReverseDirection from "utils/toReverseDirection";
-import type {CEnity, TDirect, TDirects } from "lib/types";
+import type {CEntity, TDirect, TDirects } from "lib/types";
 import { ERoles, rounded, stepCell, sizeCell  } from "utils/game/game.config";
 
 export default class Einity {
@@ -14,7 +14,7 @@ export default class Einity {
     public readonly step:number = stepCell;
     public readonly rounded: number = rounded;
 
-    constructor(data?:CEnity) {
+    constructor(data?:CEntity) {
       Object.assign(this, data)
     } 
 

src/store/user/stUsers.ts

@@ -1,4 +1,4 @@
-import type { CEnity, CUser, TCBAction, TUserDataAction } from "lib/types";
+import type { CEntity, CUser, TCBAction, TUserDataAction } from "lib/types";
 import { DataOfRoles, ERoles } from "./game.config";
 import stUsers from "store/user/stUsers";
 import playAudio from "utils/PlayerAudio";
@@ -45,7 +45,7 @@ const cb = (user:CUser, action: ERoles, typeQnty:'qntyBuffs'|'qntyInventory') =>
 }
 
 
-export type TProps = {user:CUser, cell?:CEnity, step?:number, map?:CEnity[]};
+export type TProps = {user:CUser, cell?:CEntity, step?:number, map?:CEntity[]};
 
 export const cbUserActions:Record<ERoles, (props:TProps) => void|TCBAction > = {
 
@@ -237,7 +237,7 @@ export const cbUserActions:Record<ERoles, (props:TProps) => void|TCBAction > = {
 }
 
 const tabooRoles = [ERoles.MONEY, ERoles.POISON, ERoles.POTION, ERoles.PORTAL, ERoles.HANDCUFFS, ERoles.BOMB, ERoles.NEXT ];
-export default (user: CUser, cell:CEnity, currStep:number, timeID: NodeJS.Timeout, map:CEnity[]) => {  
+export default (user: CUser, cell:CEntity, currStep:number, timeID: NodeJS.Timeout, map:CEntity[]) => {  
   if(cell.role && cell.role in cbUserActions && currStep === 0) {
 
     const s = user.actions.HANDCUFFS?.cb!();