Merge pull request #279 from ijun17/feautre-fe-pair-design

[FE] 페어 디자인

FE/src/api/socket/socket.ts

@@ -29,17 +29,15 @@ type SocketInterface = {
 };
 
 class SocketService {
-  private socket: SocketInterface;
+  private socket: SocketInterface | null;
   private url: string;
-  private handlers: (() => void)[];
   private handlerMap: Partial<
     Record<SocketEvent, ((data: SocketDataMap[SocketEvent]['response']) => void)[]>
   > = {};
 
   constructor(url: string) {
-    this.socket = io() as SocketInterface;
+    this.socket = null;
     this.url = url;
-    this.handlers = [];
   }
 
   async connect(header: { 'create-room'?: string; 'game-id'?: string }) {
@@ -52,6 +50,7 @@ class SocketService {
       // 소켓 연결
       this.socket = io(this.url, { query: header }) as SocketInterface;
       await new Promise<void>((resolve, reject) => {
+        if (!this.socket) return;
         this.socket.on('connect', () => resolve());
         this.socket.on('error', () => reject());
       });
@@ -60,36 +59,38 @@ class SocketService {
   }
 
   initHandler() {
-    this.handlers.forEach((h) => h());
+    if (!this.socket) return;
+    const socket = this.socket;
     Object.entries(this.handlerMap).forEach(([event, handlers]) =>
-      handlers.forEach((h) => this.socket.on(event, h))
+      handlers.forEach((h) => socket.on(event, h))
     );
     this.socket.onAny((eventName, ...args) => {
       console.log(`SOCKET[${eventName}]`, ...args);
     });
   }
 
   disconnect() {
-    if (this.isActive()) this.socket.disconnect();
+    if (this.socket && this.isActive()) this.socket.disconnect();
   }
 
   isActive() {
     return this.socket && this.socket.connected;
   }
 
   on<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]['response']) => void) {
-    if (this.isActive()) this.socket.on(event, callback);
+    if (this.socket && this.isActive()) this.socket.on(event, callback);
     if (!this.handlerMap[event]) this.handlerMap[event] = [];
     this.handlerMap[event].push(callback);
   }
 
   off<T extends SocketEvent>(event: T, callback: (data: SocketDataMap[T]['response']) => void) {
     if (!this.handlerMap[event]) return;
-    if (this.isActive()) this.socket.off(event, callback);
+    if (this.socket && this.isActive()) this.socket.off(event, callback);
     this.handlerMap[event] = this.handlerMap[event].filter((e) => e !== callback);
   }
 
   emit<T extends SocketEvent>(event: T, data: SocketDataMap[T]['request']) {
+    if (!this.socket) return;
     this.socket.emit(event, data);
   }
 
@@ -112,10 +113,12 @@ class SocketService {
   }
 
   kickRoom(gameId: string, kickPlayerId: string) {
+    if (!this.socket) return;
     this.socket.emit(SocketEvents.KICK_ROOM, { gameId, kickPlayerId });
   }
 
   chatMessage(gameId: string, message: string) {
+    if (!this.socket) return;
     this.socket.emit(SocketEvents.CHAT_MESSAGE, { gameId, message });
   }
 }

FE/src/assets/lottie/gameCreate.json

@@ -0,0 +1 @@
+{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.0.0","a":"","k":"","d":"","tc":"#FFFFFF"},"fr":30,"ip":0,"op":61,"w":400,"h":400,"ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-17.5,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.43,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[21.18,21.18]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[1,0.180392156863,0.372549019608,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[102.24,-30.66]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[21.18,21.18]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0,0.909803981407,0.964705942191,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[77.99,-6.41]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[21.18,21.18]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.517647058824,0.882353001015,0.239215701234,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[52.54,-30.28]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[21.18,21.18]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.968627510819,0.847058883368,0.133333333333,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[77.99,-54.16]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"gr","it":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-81.83,-55.35],[-81.83,-7.35]],"c":false}}},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":1,"ml":10,"bm":0},{"ty":"fl","c":{"a":0,"k":[1,0.180392156863,0.372549019608,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-105.83,-31.35],[-57.83,-31.35]],"c":false}}},{"ty":"st","c":{"a":0,"k":[1,1,1,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":10},"lc":2,"lj":1,"ml":10,"bm":0},{"ty":"fl","c":{"a":0,"k":[1,0.180392156863,0.372549019608,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":-10,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":10,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":20,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":30,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":40,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":50,"s":[100]},{"t":60,"s":[0]}]},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-17.5,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.43,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[35.66,35.66]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.070588175456,1,0,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[45.86,29.34]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":10,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":20,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":30,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":40,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":50,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":60,"s":[100]},{"t":70,"s":[0]}]},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-17.5,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.43,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[35.66,35.66]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[1,0.180392156863,0.372549019608,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-45.1,29.34]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":-10,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":10,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":20,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":30,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":40,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":50,"s":[100]},{"t":60,"s":[0]}]},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-2.25,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":31,"s":[200,113.43,0],"to":[0,16.48,0],"ti":[0,-15.4,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.43,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"ef":[{"ty":29,"en":1,"ef":[{"ty":0,"v":{"a":0,"k":3}},{"ty":7,"v":{"a":0,"k":1}},{"ty":7,"v":{"a":0,"k":0}}]}],"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[35.66,35.66]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.321568627451,0.411764735802,0.847058883368,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[45.86,29.34]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":10,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":20,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":30,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":40,"s":[100]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":50,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":60,"s":[100]},{"t":70,"s":[0]}]},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-2.25,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":31,"s":[200,113.43,0],"to":[0,16.48,0],"ti":[0,-15.4,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.43,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"ef":[{"ty":29,"en":1,"ef":[{"ty":0,"v":{"a":0,"k":3}},{"ty":7,"v":{"a":0,"k":1}},{"ty":7,"v":{"a":0,"k":0}}]}],"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[35.66,35.66]},"p":{"a":0,"k":[0,0]}},{"ty":"fl","c":{"a":0,"k":[0.321568627451,0.411764735802,0.847058883368,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[-45.1,29.34]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":0,"k":[200,213,0],"x":"var $bm_rt;\n$bm_rt = thisComp.layer('layer').transform.position;"},"a":{"a":0,"k":[0,-44,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[15.3,23.29],[23.29,-15.3],[3.14,-3.8],[0,0],[15.67,0],[0,-27.86],[-27.86,0],[0,0],[0,0],[-0.1,-1.31],[-15.2,0],[-4.48,10.3],[0,3.67],[0,0],[-15.2,0],[0,15.2],[0.1,1.31],[0,0],[0,0],[-8.24,5.42]],"o":[[-15.3,-23.29],[-4.34,2.85],[0,0],[-9.25,-11.2],[-27.86,0],[0,27.86],[0,0],[0,0],[-0.1,1.31],[0,15.2],[11.23,0.31],[1.56,-3.58],[0,0],[0,15.2],[15.2,0],[0.1,-1.31],[0,0],[0,0],[9.87,0.01],[23.29,-15.3]],"v":[[120.37,-57.98],[50.51,-72.45],[39.28,-62.39],[-39.05,-62.39],[-77.97,-80.73],[-128.42,-30.28],[-77.97,20.17],[-73.38,20.17],[-73.38,25.39],[-73.38,29.34],[-45.86,56.86],[-19.86,40.32],[-17.58,29.34],[18.35,29.34],[45.86,56.86],[73.38,29.34],[73.38,25.39],[72.28,20.17],[78.15,20.17],[105.91,11.88]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0,0.090196078431,0.372549019608,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":0,"s":[0]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":5,"s":[15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":15,"s":[-15]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":25,"s":[11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":35,"s":[-11]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":45,"s":[7]},{"i":{"x":[0.83],"y":[0.83]},"o":{"x":[0.17],"y":[0.17]},"t":55,"s":[-6]},{"t":60,"s":[0]}]},"p":{"a":1,"k":[{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":0,"s":[200,212.93,0],"to":[0,-17.5,0],"ti":[0,0,0]},{"i":{"x":0.83,"y":0.83},"o":{"x":0.17,"y":0.17},"t":30,"s":[200,107.93,0],"to":[0,0,0],"ti":[0,-17.5,0]},{"t":60,"s":[200,212.93,0]}]},"a":{"a":0,"k":[0,-44.07,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"a":0,"k":{"i":[[5.72,36.7],[32.88,-0.23],[11.13,-11.64],[0,0],[0,0],[3.37,0],[0,0],[0,-3.37],[0,0],[0,0],[23.76,-22.72],[0.11,-16.1],[0.38,-37.14],[-17.61,-3.3],[-3.33,0],[-4.48,15.56],[-3.94,8.44],[-8.39,18.44],[-0.53,2.07],[0,0],[-19.61,5.09],[-1.9,0.86],[-3.58,-10.18],[-16.22,0.34],[-3.29,0.67],[0,22.2]],"o":[[-0.23,-32.88],[-16.1,0.11],[0,0],[0,0],[0,-3.37],[0,0],[-3.36,0],[0,0],[0,0],[-22.72,-23.76],[-11.64,11.13],[-5.72,36.7],[0,22.2],[3.26,0.67],[16.19,0.3],[3.58,-10.09],[18.44,8.4],[0.88,-1.94],[0,0],[5.09,19.61],[2.02,-0.52],[3.94,8.35],[4.49,15.59],[3.36,0],[17.52,-3.58],[-0.38,-37.14]],"v":[[137.59,-30.83],[77.64,-89.94],[35.04,-71.56],[7.12,-71.56],[7.12,-139.98],[1.02,-146.07],[-0.77,-146.07],[-6.87,-139.98],[-6.87,-71.56],[-35.04,-71.56],[-119.2,-73.43],[-137.59,-30.83],[-146.76,80.06],[-119.98,120.05],[-110.07,121.06],[-75.03,95.2],[-61.09,62.73],[-12.49,44.53],[-10.36,38.51],[10.37,38.51],[55.09,64.81],[61,62.73],[74.94,95.2],[110.07,121.06],[120.07,120.05],[146.76,80.06]],"c":true}}},{"ty":"fl","c":{"a":0,"k":[0,0.592156862745,1,1]},"o":{"a":0,"k":100},"r":1,"bm":0},{"ty":"tr","p":{"a":0,"k":[0,0]},"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"r":{"a":0,"k":0},"o":{"a":0,"k":100},"sk":{"a":0,"k":0},"sa":{"a":0,"k":0}}],"bm":0}],"ip":0,"op":61,"st":0,"bm":0}],"markers":[]}

FE/src/assets/lottie/index.ts

@@ -0,0 +1,6 @@
+import gameCreate from './gameCreate.json';
+import waitRoom from './watiRoom.json';
+import pin from './pin.json';
+import createQuiz from './createQuiz.json';
+
+export { gameCreate, waitRoom, pin, createQuiz };