added formating to front

front/Dockerfile

@@ -11,6 +11,6 @@ ENTRYPOINT npm install; \
 	elif [[ $NODE_ENV == "debug"  ]]; then \
     npm run dev; \
   elif [[ $NODE_ENV == "check" ]]; then \
-    npm run check; echo "=== FINISH ==="\
+    npm run format && npm run check; echo "=== FINISH ==="\
   else echo "Nothing to do for that NODE_ENV context."; \
   fi;

front/volume/package-lock.json

@@ -14,6 +14,8 @@
         "vite": "^4.1.0"
       },
       "devDependencies": {
+        "prettier": "^2.8.4",
+        "prettier-plugin-svelte": "^2.9.0",
         "svelte-check": "^2.10.3",
         "tslib": "^2.5.0",
         "typescript": "^4.9.3"
@@ -1017,6 +1019,31 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prettier": {
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-2.9.0.tgz",
+      "integrity": "sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==",
+      "dev": true,
+      "peerDependencies": {
+        "prettier": "^1.16.4 || ^2.0.0",
+        "svelte": "^3.2.0"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",

front/volume/package.json

@@ -7,17 +7,20 @@
     "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview --host",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write --plugin-search-dir=. 'src/**/*.{js,ts,html,svelte}'"
   },
   "devDependencies": {
+    "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.9.0",
     "svelte-check": "^2.10.3",
     "tslib": "^2.5.0",
     "typescript": "^4.9.3"
   },
   "dependencies": {
-    "svelte": "^3.55.1",
-    "vite": "^4.1.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.2",
     "@tsconfig/svelte": "^3.0.0",
-    "@sveltejs/vite-plugin-svelte": "^2.0.2"
+    "svelte": "^3.55.1",
+    "vite": "^4.1.0"
   }
 }

front/volume/src/App.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import Navbar from './components/NavBar.svelte';
-	import Profile from './components/Profile.svelte';
-	import MatchHistory from './components/MatchHistory.svelte';
-	import type { Match } from './components/MatchHistory.svelte';
-	import Friends from './components/Friends.svelte';
-	import type { Friend } from './components/Friends.svelte';
-	import Spectate from './components/Spectate.svelte';
-	import type { SpectateType } from './components/Spectate.svelte';
-	import Play from './components/Play.svelte';
-	import Pong from './components/Pong/Pong.svelte';
-	import Chat from './components/Chat.svelte'
+  import Navbar from "./components/NavBar.svelte";
+  import Profile from "./components/Profile.svelte";
+  import MatchHistory from "./components/MatchHistory.svelte";
+  import type { Match } from "./components/MatchHistory.svelte";
+  import Friends from "./components/Friends.svelte";
+  import type { Friend } from "./components/Friends.svelte";
+  import Spectate from "./components/Spectate.svelte";
+  import type { SpectateType } from "./components/Spectate.svelte";
+  import Play from "./components/Play.svelte";
+  import Pong from "./components/Pong/Pong.svelte";
+  import Chat from "./components/Chat.svelte";
 
   let isProfileOpen = false;
   function clickProfile() {
@@ -20,59 +20,78 @@
     isHistoryOpen = true;
   }
   let matches: Array<Match> = [
-		{ winner: 'Alice', loser: 'Bob', points: -5, rank: '22' },
-		{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' },
-		{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' },
-		{ winner: 'Alice', loser: 'Bob', points: 7, rank: '23' },
-		{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' },
-		{ winner: 'Alice', loser: 'Bob', points: 10, rank: '24' }
+    { winner: "Alice", loser: "Bob", points: -5, rank: "22" },
+    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
+    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
+    { winner: "Alice", loser: "Bob", points: 7, rank: "23" },
+    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
+    { winner: "Alice", loser: "Bob", points: 10, rank: "24" },
   ];
   let isFriendOpen = false;
   function clickFriends() {
     isFriendOpen = true;
   }
   let friends: Array<Friend> = [
-		{ username: 'Alice', status: 'online' },
-		{ username: 'Bob', status: 'online' },
-		{ username: 'Charlie', status: 'offline' },
-		{ username: 'Dave', status: 'offline' },
-		{ username: 'Eve', status: 'in a game' },
-		{ username: 'Frank', status: 'online' }
+    { username: "Alice", status: "online" },
+    { username: "Bob", status: "online" },
+    { username: "Charlie", status: "offline" },
+    { username: "Dave", status: "offline" },
+    { username: "Eve", status: "in a game" },
+    { username: "Frank", status: "online" },
   ];
   let isSpectateOpen = false;
   function clickSpectate() {
     isSpectateOpen = true;
   }
   let spectate: Array<SpectateType> = [
-		{ player1: 'Alice', player2: 'Bob', id: '1' },
-		{ player1: 'Alice', player2: 'Bob', id: '4' },
-		{ player1: 'Alice', player2: 'Bob', id: '6' },
-		{ player1: 'Alice', player2: 'Bob', id: '8' },
-		{ player1: 'Alice', player2: 'Bob', id: '2' },
-		{ player1: 'Alice', player2: 'Bob', id: '3' }
+    { player1: "Alice", player2: "Bob", id: "1" },
+    { player1: "Alice", player2: "Bob", id: "4" },
+    { player1: "Alice", player2: "Bob", id: "6" },
+    { player1: "Alice", player2: "Bob", id: "8" },
+    { player1: "Alice", player2: "Bob", id: "2" },
+    { player1: "Alice", player2: "Bob", id: "3" },
   ];
 </script>
 
 <main>
   <Navbar {clickProfile} {clickHistory} {clickFriends} {clickSpectate} />
   {#if isSpectateOpen}
-		<div on:click={() => (isSpectateOpen = false)} on:keydown={() => (isSpectateOpen = false)}>
+    <div
+      on:click={() => (isSpectateOpen = false)}
+      on:keydown={() => (isSpectateOpen = false)}
+    >
       <Spectate {spectate} />
     </div>
   {/if}
   {#if isFriendOpen}
-		<div on:click={() => (isFriendOpen = false)} on:keydown={() => (isFriendOpen = false)}>
+    <div
+      on:click={() => (isFriendOpen = false)}
+      on:keydown={() => (isFriendOpen = false)}
+    >
       <Friends {friends} />
     </div>
   {/if}
   {#if isHistoryOpen}
-		<div on:click={() => (isHistoryOpen = false)} on:keydown={() => (isHistoryOpen = false)}>
+    <div
+      on:click={() => (isHistoryOpen = false)}
+      on:keydown={() => (isHistoryOpen = false)}
+    >
       <MatchHistory {matches} />
     </div>
   {/if}
   {#if isProfileOpen}
-		<div on:click={() => (isProfileOpen = false)} on:keydown={() => (isProfileOpen = false)}>
-			<Profile username="Alice" wins={10} losses={5} elo={256} rank={23} is2faEnabled={false} />
+    <div
+      on:click={() => (isProfileOpen = false)}
+      on:keydown={() => (isProfileOpen = false)}
+    >
+      <Profile
+        username="Alice"
+        wins={10}
+        losses={5}
+        elo={256}
+        rank={23}
+        is2faEnabled={false}
+      />
     </div>
   {/if}
   <Play />

front/volume/src/app.d.ts

@@ -1,5 +1,4 @@
 declare global {
-  namespace App {
-  }
+  namespace App {}
 }
- export {};
+export {};

front/volume/src/components/Chat.svelte

@@ -1,48 +1,37 @@
 <script lang="ts">
-
   let chatIsOpen = false;
   const toggleChat = () => (chatIsOpen = !chatIsOpen);
-	let newText = '';
+  let newText = "";
 
   let chatMessages = [
     {
-			name: 'Alice',
-			text: 'Hello guys! Happy to see you here!'
+      name: "Alice",
+      text: "Hello guys! Happy to see you here!",
     },
     {
-			name: 'Bob',
-			text: 'Wanna play?'
+      name: "Bob",
+      text: "Wanna play?",
     },
     {
-			name: 'Carl',
-			text: 'cyka blyat'
+      name: "Carl",
+      text: "cyka blyat",
     },
-	]
+  ];
 
   const sendMessage = () => {
-		if (newText !== '')
-		{
+    if (newText !== "") {
       const newMessage = {
-				name: 'You',
-				text: newText
+        name: "You",
+        text: newText,
       };
-			chatMessages = [
-				...chatMessages,
-				newMessage
-			];
-			newText = '';
-		}
+      chatMessages = [...chatMessages, newMessage];
+      newText = "";
     }
-
+  };
 </script>
 
-
-
 <!-- Main chat div, changes style to hide/unhide the chat depending if it's open or closed -->
-<div class={
-	chatIsOpen
-		? 'chat-open chat-container'
-		: 'chat-container'}>
+<div class={chatIsOpen ? "chat-open chat-container" : "chat-container"}>
   <!-- Button to toggle chat -->
   <div class="chat-view-button">
     <button on:click={toggleChat}>
@@ -66,10 +55,7 @@
     </div>
     <!-- Form to send message -->
     <form on:submit|preventDefault={sendMessage}>
-			<input
-				type="text"
-				placeholder="Type a message..."
-				bind:value={newText} />
+      <input type="text" placeholder="Type a message..." bind:value={newText} />
       <button>
         <img src="img/send.png" alt="send" />
       </button>
@@ -77,8 +63,6 @@
   </div>
 </div>
 
-
-
 <style>
   .chat-container {
     position: absolute;

front/volume/src/components/Friends.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" context="module">
   export interface Friend {
     username: string;
-		status: 'online' | 'offline' | 'in a game';
+    status: "online" | "offline" | "in a game";
   }
 </script>
 
@@ -28,7 +28,7 @@
     //     console.log('Failed to add friend');
     // }
     // usernameInput.value = '';
-		alert('Trying to add friend' + username);
+    alert("Trying to add friend" + username);
   }
 </script>
 

front/volume/src/components/NavBar.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
   export let links = [
-		{ text: 'Home', url: 'img/pong.png' },
-		{ text: 'Spectate' },
-		{ text: 'Chat' },
-		{ text: 'History' },
-		{ text: 'Friends' },
-		{ text: 'Profile' }
+    { text: "Home", url: "img/pong.png" },
+    { text: "Spectate" },
+    { text: "Chat" },
+    { text: "History" },
+    { text: "Friends" },
+    { text: "Profile" },
   ];
   export let clickProfile = () => {};
   export let clickHistory = () => {};
@@ -16,35 +16,35 @@
 <nav class="navigation-bar">
   <ul>
     {#each links as link}
-			{#if link.text === 'Spectate'}
+      {#if link.text === "Spectate"}
         <li>
           <button on:click={clickSpectate}>
             <p>Spectate</p>
           </button>
         </li>
       {/if}
-			{#if link.text === 'Friends'}
+      {#if link.text === "Friends"}
         <li>
           <button on:click={clickFriends}>
             <p>Friends</p>
           </button>
         </li>
       {/if}
-			{#if link.text === 'Profile'}
+      {#if link.text === "Profile"}
         <li>
           <button on:click={clickProfile}>
             <img src="img/profileicon.png" alt="profile icon" />
           </button>
         </li>
       {/if}
-			{#if link.text === 'History'}
+      {#if link.text === "History"}
         <li>
           <button on:click={clickHistory}>
             <p>History</p>
           </button>
         </li>
       {/if}
-			{#if link.text === 'Home'}
+      {#if link.text === "Home"}
         <li>
           <a href="/">
             <img src="img/pong.png" alt="home-icon" />

front/volume/src/components/Pong/Ball.ts

@@ -1,11 +1,15 @@
-import { Point, Rect } from './utils';
+import { Point, Rect } from "./utils";
 
 export class Ball {
   rect: Rect;
   speed: Point;
-	color: string | CanvasGradient | CanvasPattern = 'white';
+  color: string | CanvasGradient | CanvasPattern = "white";
 
-	constructor(spawn: Point, size: Point = new Point(20, 20), speed: Point = new Point(10, 2)) {
+  constructor(
+    spawn: Point,
+    size: Point = new Point(20, 20),
+    speed: Point = new Point(10, 2)
+  ) {
     this.rect = new Rect(spawn, size);
   }
 

front/volume/src/components/Pong/Game.ts

@@ -1,11 +1,11 @@
-import { Ball } from './Ball';
-import { GAME_EVENTS } from './constants';
-import type { GameInfo, GameUpdate } from './constants';
-import { Paddle } from './Paddle';
-import { Player } from './Player';
-import { formatWebsocketData, Point } from './utils';
+import { Ball } from "./Ball";
+import { GAME_EVENTS } from "./constants";
+import type { GameInfo, GameUpdate } from "./constants";
+import { Paddle } from "./Paddle";
+import { Player } from "./Player";
+import { formatWebsocketData, Point } from "./utils";
 
-const BG_COLOR = 'black';
+const BG_COLOR = "black";
 
 export class Game {
   canvas: HTMLCanvasElement;
@@ -26,9 +26,15 @@ export class Game {
     this.canvas.width = data.mapSize.x;
     this.canvas.height = data.mapSize.y;
 
-		this.ball = new Ball(new Point(this.canvas.width / 2, this.canvas.height / 2), data.ballSize);
+    this.ball = new Ball(
+      new Point(this.canvas.width / 2, this.canvas.height / 2),
+      data.ballSize
+    );
 
-		const paddle1: Paddle = new Paddle(new Point(data.playerXOffset, this.canvas.height / 2), data.paddleSize);
+    const paddle1: Paddle = new Paddle(
+      new Point(data.playerXOffset, this.canvas.height / 2),
+      data.paddleSize
+    );
     const paddle2: Paddle = new Paddle(
       new Point(this.canvas.width - data.playerXOffset, this.canvas.height / 2),
       data.paddleSize
@@ -40,15 +46,15 @@ export class Game {
 
   start(socket: WebSocket) {
     if (this.my_paddle) {
-			this.canvas.addEventListener('mousemove', (e) => {
+      this.canvas.addEventListener("mousemove", (e) => {
         this.my_paddle.move(e);
         socket.send(
           formatWebsocketData(GAME_EVENTS.PLAYER_MOVE, {
-						position: this.my_paddle.rect.center
+            position: this.my_paddle.rect.center,
           })
         );
       });
-			console.log('Game started!');
+      console.log("Game started!");
     }
   }
 
@@ -73,10 +79,18 @@ export class Game {
     this.ball.draw(this.context);
 
     const max_width = 50;
-		this.context.font = '50px Arial';
-		const text_width = this.context.measureText('0').width;
+    this.context.font = "50px Arial";
+    const text_width = this.context.measureText("0").width;
     const text_offset = 50;
-		this.players[0].drawScore(this.canvas.width / 2 - (text_width + text_offset), max_width, this.context);
-		this.players[1].drawScore(this.canvas.width / 2 + text_offset, max_width, this.context);
+    this.players[0].drawScore(
+      this.canvas.width / 2 - (text_width + text_offset),
+      max_width,
+      this.context
+    );
+    this.players[1].drawScore(
+      this.canvas.width / 2 + text_offset,
+      max_width,
+      this.context
+    );
   }
 }

front/volume/src/components/Pong/Paddle.ts

@@ -1,8 +1,8 @@
-import { Point, Rect } from './utils';
+import { Point, Rect } from "./utils";
 
 export class Paddle {
   rect: Rect;
-	color: string | CanvasGradient | CanvasPattern = 'white';
+  color: string | CanvasGradient | CanvasPattern = "white";
 
   constructor(spawn: Point, size: Point = new Point(6, 100)) {
     this.rect = new Rect(spawn, size);

front/volume/src/components/Pong/Player.ts

@@ -1,4 +1,4 @@
-import type { Paddle } from './Paddle';
+import type { Paddle } from "./Paddle";
 
 export class Player {
   paddle: Paddle;
@@ -13,7 +13,11 @@ export class Player {
     this.paddle.draw(context);
   }
 
-	drawScore(score_position_x: number, max_width: number, context: CanvasRenderingContext2D) {
+  drawScore(
+    score_position_x: number,
+    max_width: number,
+    context: CanvasRenderingContext2D
+  ) {
     context.fillText(this.score.toString(), score_position_x, 50, max_width);
   }
 }

front/volume/src/components/Pong/Pong.svelte

@@ -1,28 +1,35 @@
 <script lang="ts">
-	import { GAME_EVENTS } from './constants';
-	import { Game } from './Game';
-	import { formatWebsocketData } from './utils';
+  import { GAME_EVENTS } from "./constants";
+  import { Game } from "./Game";
+  import { formatWebsocketData } from "./utils";
 
   const FPS = 144;
-	const SERVER_URL = 'ws://localhost:3001';
+  const SERVER_URL = "ws://localhost:3001";
 
   let connected: boolean = false;
   let socket: WebSocket;
-	let username: string = 'John';
-	let otherUsername: string = 'Garfield';
+  let username: string = "John";
+  let otherUsername: string = "Garfield";
 
   //Get canvas and its context
   window.onload = () => {
-		const canvas: HTMLCanvasElement = document.getElementById('pong_canvas') as HTMLCanvasElement;
+    const canvas: HTMLCanvasElement = document.getElementById(
+      "pong_canvas"
+    ) as HTMLCanvasElement;
     if (canvas) {
-			const context: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D;
+      const context: CanvasRenderingContext2D = canvas.getContext(
+        "2d"
+      ) as CanvasRenderingContext2D;
       if (context) {
         setupSocket(canvas, context);
       }
     }
   };
 
-	function setupSocket(canvas: HTMLCanvasElement, context: CanvasRenderingContext2D) {
+  function setupSocket(
+    canvas: HTMLCanvasElement,
+    context: CanvasRenderingContext2D
+  ) {
     socket = new WebSocket(SERVER_URL);
     const game = new Game(canvas, context);
     socket.onmessage = function (e) {
@@ -40,10 +47,10 @@
           setInterval(() => {
             game.draw();
           }, 1000 / FPS);
-					console.log('Game updated!');
+          console.log("Game updated!");
         }
       } else {
-				console.log('Unknown event from server: ' + event);
+        console.log("Unknown event from server: " + event);
       }
     };
     socket.onopen = () => {
@@ -60,7 +67,9 @@
   }
 
   function connectToServer() {
-		socket.send(formatWebsocketData(GAME_EVENTS.REGISTER_PLAYER, { playerName: username }));
+    socket.send(
+      formatWebsocketData(GAME_EVENTS.REGISTER_PLAYER, { playerName: username })
+    );
     setInterval(() => {
       updateGameInfo();
     }, 1000);
@@ -79,14 +88,20 @@
     <br />
     <button
       on:click={() => {
-				socket.send(formatWebsocketData(GAME_EVENTS.CREATE_GAME, { playerNames: [username, otherUsername] }));
+        socket.send(
+          formatWebsocketData(GAME_EVENTS.CREATE_GAME, {
+            playerNames: [username, otherUsername],
+          })
+        );
         updateGameInfo();
       }}
     >
       Create game vs {otherUsername}
     </button>
     <br />
-		<button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.READY))}>Ready</button>
+    <button on:click={() => socket.send(formatWebsocketData(GAME_EVENTS.READY))}
+      >Ready</button
+    >
     <br />
     <br />
   {:else}

front/volume/src/components/Pong/constants.ts

@@ -1,13 +1,13 @@
-import { Point } from './utils';
+import { Point } from "./utils";
 
 export const GAME_EVENTS = {
-	START_GAME: 'START_GAME',
-	READY: 'READY',
-	GAME_TICK: 'GAME_TICK',
-	PLAYER_MOVE: 'PLAYER_MOVE',
-	GET_GAME_INFO: 'GET_GAME_INFO',
-	CREATE_GAME: 'CREATE_GAME',
-	REGISTER_PLAYER: 'REGISTER_PLAYER'
+  START_GAME: "START_GAME",
+  READY: "READY",
+  GAME_TICK: "GAME_TICK",
+  PLAYER_MOVE: "PLAYER_MOVE",
+  GET_GAME_INFO: "GET_GAME_INFO",
+  CREATE_GAME: "CREATE_GAME",
+  REGISTER_PLAYER: "REGISTER_PLAYER",
 };
 
 export interface GameInfo extends GameInfoConstants {
@@ -26,7 +26,7 @@ export const gameInfoConstants: GameInfoConstants = {
   paddleSize: new Point(6, 50),
   playerXOffset: 50,
   ballSize: new Point(20, 20),
-	winScore: 2
+  winScore: 2,
 };
 
 export interface GameUpdate {
@@ -34,4 +34,3 @@ export interface GameUpdate {
   ballPosition: Point;
   scores: number[];
 }
-

front/volume/src/components/Pong/utils.ts

@@ -32,11 +32,19 @@ export class Rect {
     this.size = size;
   }
 
-	draw(context: CanvasRenderingContext2D, color: string | CanvasGradient | CanvasPattern) {
+  draw(
+    context: CanvasRenderingContext2D,
+    color: string | CanvasGradient | CanvasPattern
+  ) {
     const offset: Point = new Point(this.size.x / 2, this.size.y / 2);
 
     context.fillStyle = color;
-		context.fillRect(this.center.x - offset.x, this.center.y - offset.y, this.size.x, this.size.y);
+    context.fillRect(
+      this.center.x - offset.x,
+      this.center.y - offset.y,
+      this.size.x,
+      this.size.y
+    );
   }
 
   //True if `this` rect contains `other` rect in the x-axis
@@ -83,6 +91,6 @@ export class Rect {
 export function formatWebsocketData(event: string, data?: any): string {
   return JSON.stringify({
     event,
-		data
+    data,
   });
 }

front/volume/src/components/Profile.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	export let username = '';
-	export let realname = '';
+  export let username = "";
+  export let realname = "";
   export let wins = 0;
   export let losses = 0;
   export let elo = 0;
@@ -23,15 +23,15 @@
     // else {
     //     console.log('username update failed');
     // }
-		alert('Trying to update username to ' + username);
+    alert("Trying to update username to " + username);
   }
   async function handleAvatarUpload(event: Event) {
     event.preventDefault();
-		alert('Trying to upload avatar');
+    alert("Trying to upload avatar");
   }
   async function handle2fa(event: Event) {
     event.preventDefault();
-		alert('Trying to ' + (is2faEnabled ? 'disable' : 'enable') + ' 2FA');
+    alert("Trying to " + (is2faEnabled ? "disable" : "enable") + " 2FA");
   }
 </script>
 

front/volume/src/main.ts

@@ -1,4 +1,4 @@
-import App from './App.svelte';
+import App from "./App.svelte";
 
 const app = new App({
   target: document.body,