import {drawBackground, drawWalls, openingSort, drawBall, drawArrow, drawHole, throttle, getRandomColor} from "./renderingFunctions"
import AssetsLoader from "./assetsLoader";
import AssetsManager from "./assetsManager";
import Texture from "./texture";
import TextureAtlas from "./textureAtlas";
import Stage from "./stage";
import Bitmap from "./bitmap";

/* eslint-disable */
function app() {
  'use strict';

  var socket = io.connect();
  let assetsManager = new AssetsManager();
  let assetsLoader = new AssetsLoader();
  let test = null;
  let bgColor = getRandomColor();
  //let stage = new Stage();

  swip.init({ socket: socket, container: document.getElementById('root') }, function (client) {
    assetsLoader.getInstance().onComplete = onComplete;
    assetsLoader.getInstance().addFile("atari400.png","ground");
    assetsLoader.getInstance().load();
    var converter = client.converter;
    var stage = client.stage;
    var ctx = stage.getContext('2d');

    var state = null;
    var dragPosition = null;
    var dragging = false;

    client.onClick(function (evt) {
      var hole = { x: evt.position.x, y: evt.position.y };
      client.emit('setHole', hole);
    });

    client.onDragStart(function (evt) {
      if (state) {
        var distanceX = evt.position[0].x - state.cluster.data.ball.x;
        var distanceY = evt.position[0].y - state.cluster.data.ball.y;
        var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));

        if (distance < (2 * state.cluster.data.ball.radius)) {
          dragging = true;
          dragPosition = evt.position[0];
        }
      }
    });

    client.onDragMove(function (evt) {
      var distanceX = evt.position[0].x - state.cluster.data.ball.x;
      var distanceY = evt.position[0].y - state.cluster.data.ball.y;
      var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));

      if (dragging) {
        if (distance > 150) {
          dragPosition = {
            x: state.cluster.data.ball.x + (distanceX / distance) * 150,
            y: state.cluster.data.ball.y + (distanceY / distance) * 150
          }
        } else {
          dragPosition = evt.position[0];
        }
      }
    });

    client.onDragEnd(function (evt) {
      if (dragging) {
        dragging = false;
        client.emit('hitBall', {
          speedX: (evt.position[0].x - state.cluster.data.ball.x) / 2,
          speedY: (evt.position[0].y - state.cluster.data.ball.y) / 2
        });
      }
    });

    swip.sensor.onChangeOrientation(throttle(function (evt) {
      client.emit('updateOrientation', {
        rotationX: evt.rotation.x,
        rotationY: evt.rotation.y
      });
    }, 200));


    client.onUpdate(function (evt) {
      state = evt;
      var client = state.client;
      const { currentScreenId, ball, hole } = state.cluster.data;
      ctx.save();
      applyTransform(ctx, converter, client.transform);
      const realColor = currentScreenId === client.id ? bgColor : null;
      drawBackground(ctx, client, realColor);
      drawHole(ctx, hole);

      if (dragging) {
        drawArrow(ctx, ball, dragPosition);
      }

      drawBall(ctx, ball);
      drawWalls(ctx, client);
      if(test) {
        test.render(ctx)
      }

      ctx.restore();
    });
  });

  function applyTransform (ctx, converter, transform) {
    ctx.translate(-converter.toDevicePixel(transform.x), -converter.toDevicePixel(transform.y));
    ctx.scale(converter.toDevicePixel(1), converter.toDevicePixel(1));

  }

  function onComplete() {
    var data = assetsLoader.getInstance().getData();
    // on initialise la racine en lui envoyant la référence vers le canvas
    //stage.getInstance().init(canvas);

    for( var alias in data ){
        assetsManager.getInstance().addImage(data[alias],alias);
    }

    // on crée un nouvel atlas
    var atlas = new TextureAtlas();

    // on lui associe une image qui sera celle partagée par toutes les textures stockée en son sein
    atlas.data = assetsManager.getInstance().getImageByAlias("ground");

    // on crée deux textures différentes, portant un nom différent, ayant chacune la même image
    // mais pas les mêmes portions d'image associées
    atlas.createTexture( "texture_1", 0,0,256,156);

    var texture = atlas.getTextureByName("texture_1"); // on retrouve notre texture
    let bmp = new Bitmap(); // on créer un nouvel objet de type Bitmap
    bmp.texture = texture; // on y associe la texture
    bmp.width = 256/4; // on définie la largeur
    bmp.height = 156/4;//... puis la hauteur
    bmp.x = 200;
    bmp.y = 200;
    test = bmp;
    //bmp.drawOnly(ctx)
    //stage.getInstance().addChild(bmp); // on ajoute l'enfant à la racine
  }

};

export default app;
@@ -44,29 +44,8 @@
 ort,
- drawBall, drawArrow,
  dra
@@ -273,37 +273,8 @@
 s%22;%0A
-import Stage from %22./stage%22;%0A
 impo
@@ -525,37 +525,8 @@
 r();
-%0A  //let stage = new Stage();
 %0A%0A  
@@ -1108,1322 +1108,8 @@
 );%0A%0A
-    client.onDragStart(function (evt) %7B%0A      if (state) %7B%0A        var distanceX = evt.position%5B0%5D.x - state.cluster.data.ball.x;%0A        var distanceY = evt.position%5B0%5D.y - state.cluster.data.ball.y;%0A        var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));%0A%0A        if (distance %3C (2 * state.cluster.data.ball.radius)) %7B%0A          dragging = true;%0A          dragPosition = evt.position%5B0%5D;%0A        %7D%0A      %7D%0A    %7D);%0A%0A    client.onDragMove(function (evt) %7B%0A      var distanceX = evt.position%5B0%5D.x - state.cluster.data.ball.x;%0A      var distanceY = evt.position%5B0%5D.y - state.cluster.data.ball.y;%0A      var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));%0A%0A      if (dragging) %7B%0A        if (distance %3E 150) %7B%0A          dragPosition = %7B%0A            x: state.cluster.data.ball.x + (distanceX / distance) * 150,%0A            y: state.cluster.data.ball.y + (distanceY / distance) * 150%0A          %7D%0A        %7D else %7B%0A          dragPosition = evt.position%5B0%5D;%0A        %7D%0A      %7D%0A    %7D);%0A%0A    client.onDragEnd(function (evt) %7B%0A      if (dragging) %7B%0A        dragging = false;%0A        client.emit('hitBall', %7B%0A          speedX: (evt.position%5B0%5D.x - state.cluster.data.ball.x) / 2,%0A          speedY: (evt.position%5B0%5D.y - state.cluster.data.ball.y) / 2%0A        %7D);%0A      %7D%0A    %7D);%0A%0A
     
@@ -1663,34 +1663,36 @@
 draw
-Hole
+Walls
 (ctx, 
-hole
+client
 );%0A
-%0A
       if
  (dr
@@ -1691,18 +1691,13 @@
   if
- (dragging
+(test
 ) %7B%0A
@@ -1708,126 +1708,80 @@
     
-drawArrow(ctx, ball, dragPosition);%0A      %7D%0A%0A      drawBall(ctx, ball);%0A      drawWalls(ctx, client);%0A      if(test) %7B
+test.x = hole.x - test.width/2;%0A        test.y = hole.y - test.height/2;
 %0A   
@@ -3046,17 +3046,17 @@
 h = 256/
-4
+2
 ; // on 
@@ -3095,17 +3095,17 @@
 t = 156/
-4
+2
 ;//... p

remove some graphics