hart-estate-widget 0.0.6 → 0.0.10

package/build/index.css

@@ -0,0 +1 @@
+*,*:before,*:after{box-sizing:border-box;-webkit-box-sizing:border-box;margin:0;padding:0}html,body{font-size:20px}.widget-application{--vh: 100vh;width:100%;height:calc(100*var(--vh));overflow:hidden;position:relative;z-index:1}.widget-application *,.widget-application *:before,.widget-application *:after{font-family:"Lato",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;outline:none;font-weight:400;text-decoration:none}.widget-application .widget-close{position:absolute;display:flex;align-items:center;justify-content:center;z-index:3;right:15px;top:15px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer}.widget-application .widget-close:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 30px 125px 30px}@media(max-width: 630px){.widget-application .widget-tab{padding:60px 15px 90px 15px}}.widget-application .widget-tab--panes-hidden{padding:60px 30px}.widget-application .widget-tab__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.widget-application .widget-tab__threesixty{width:100%;height:100%;touch-action:none;-webkit-touch-action:none}.widget-application .widget-tab__threesixty-container{width:100% !important;height:100% !important;position:relative;cursor:move;background-image:none !important}.widget-application .widget-tab__threesixty-container img{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);max-width:100%;max-height:100%;object-fit:contain;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab--panorama .widget-tab__image,.widget-application .widget-tab--model .widget-tab__image{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;object-fit:cover}.widget-application .widget-tab-panes{position:absolute;z-index:3;left:50%;bottom:5px;max-width:100%;padding:0 30px 15px 30px;transform:translateX(-50%);display:flex;align-items:center;justify-content:flex-start;overflow-x:auto}@media(max-width: 630px){.widget-application .widget-tab-panes{padding:0 15px 15px 15px}}.widget-application .widget-tab-panes .widget-tab-pane{width:85px;height:85px;border-radius:5px;margin:0 10px;background-color:#f4f7f7;cursor:pointer;border-width:3px;border-style:solid;border-color:#f4f7f7;overflow:hidden;display:flex;align-items:center;justify-content:center;flex:none;transition:border .3s ease;position:relative;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane{width:50px;height:50px;margin:0 5px}}.widget-application .widget-tab-panes .widget-tab-pane::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;box-shadow:inset 1px 1px 10px rgba(0,0,0,.3)}.widget-application .widget-tab-panes .widget-tab-pane--active,.widget-application .widget-tab-panes .widget-tab-pane:hover{border-color:#fad436}.widget-application .widget-tab-panes .widget-tab-pane__image{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.widget-application .widget-tab-panes .widget-tab-pane__icon{width:16px;height:16px;object-fit:contain;object-position:center;display:block;position:absolute;left:10px;bottom:8px}@media(max-width: 630px){.widget-application .widget-tab-panes .widget-tab-pane__icon{width:12px;height:12px;left:5px;bottom:3px}}.widget-application .widget-instructions{position:absolute;z-index:2;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.3)}.widget-application .widget-instructions__content{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;background-color:#fff;box-shadow:1px 1px 10px rgba(0,0,0,.5);border-radius:5px;overflow:hidden;width:350px}.widget-application .widget-instructions__head{width:100%;padding:10px;border-bottom:1px solid #d1d1d1;color:rgba(74,74,74,.7);text-align:center;font-size:.8rem}.widget-application .widget-instructions__body{width:100%;padding:10px;text-align:center;font-size:.7rem}.widget-application .widget-instructions__body p{margin:10px 0}.widget-application .widget-instructions__footer{width:100%}.widget-application .widget-instructions__footer button{width:100%;background-color:#fad436;font-size:.8rem;font-weight:500;text-align:center;color:#000;cursor:pointer;border:none;padding:10px 5px}.widget-application .widget-tab__panorama{width:100%;height:100%;position:absolute;left:0;top:0}.widget-application .widget-tab__panorama-overlay{width:100%;height:100%;overflow:hidden}.widget-application .widget-tab__panorama-mode,.widget-application .widget-tab__panorama-standart{position:absolute;right:15px;bottom:20px;color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:1rem;font-weight:bold;border:none;cursor:pointer;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__panorama-mode:hover,.widget-application .widget-tab__panorama-standart:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-standart{right:100px}.widget-application .widget-tab__panorama-map{position:absolute;right:15px;bottom:70px;z-index:10000}.widget-application .widget-tab__panorama-map img{width:100px;border-radius:10px}.widget-application .widget-tab__panorama-map img.active{width:240px}.widget-application .widget-tab__panorama-map img:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-map__dot{position:absolute;left:0;top:0;transform:translate(-50%, -50%);width:5px;height:5px;background-color:#fad436;border-radius:50%;cursor:pointer;z-index:10}.widget-application .widget-tab__panorama-map__dot--big{border:2px solid #fad436;box-shadow:inset 0 0 0 2px #fff;width:15px;height:15px}.widget-application .widget-tab__panorama-map__dot--active{background-color:red;border:2px solid red}.widget-application .widget-tab__panorama-menu{position:absolute;z-index:3;left:15px;top:15px;max-height:100%;overflow-y:auto;padding-bottom:30px}.widget-application .widget-tab__panorama-menu ul{list-style-type:none}.widget-application .widget-tab__panorama-menu ul li{color:#000;background-color:#fad436;padding:5px 15px;border-radius:10px;font-size:.8rem;border:none;cursor:pointer;margin-bottom:15px;width:150px;user-select:none;-webkit-user-select:none;user-drag:none;-webkit-user-drag:none}.widget-application .widget-tab__panorama-menu ul li:hover{box-shadow:1px 1px 10px rgba(0,0,0,.15)}.widget-application .widget-tab__panorama-menu ul li:nth-child(1){position:relative}.widget-application .widget-tab__panorama-menu ul li:nth-child(1)::after{content:"|||";transform:translateY(-50%) rotate(90deg);font-size:20px;line-height:20px;margin-left:10px;display:block;position:absolute;right:10px;top:50%}.widget-loader{display:block;position:relative;width:80px;height:80px}.widget-loader--absolute{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.widget-loader div{position:absolute;top:33px;width:13px;height:13px;border-radius:50%;background:#fad436;animation-timing-function:cubic-bezier(0, 1, 1, 0)}.widget-loader div:nth-child(1){left:8px;animation:widget-loader-1 .6s infinite}.widget-loader div:nth-child(2){left:8px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(3){left:32px;animation:widget-loader-2 .6s infinite}.widget-loader div:nth-child(4){left:56px;animation:widget-loader-3 .6s infinite}@keyframes widget-loader-1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes widget-loader-3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes widget-loader-2{0%{transform:translate(0, 0)}100%{transform:translate(24px, 0)}}.widget-application .widget-tab__model{width:100%;height:100%;position:absolute;left:0;top:0}.widget-application .widget-tab__model-scene{width:100%;height:100%;display:block}/*# sourceMappingURL=index.css.map */

package/build/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../src/assets/sass/index.sass","../src/assets/sass/vars.sass","../src/assets/sass/components/tabs.sass","../src/assets/sass/components/instructions.sass","../src/assets/sass/components/panorama.sass","../src/assets/sass/components/loader.sass","../src/assets/sass/components/model.sass"],"names":[],"mappings":"AAEA,mBACE,sBACA,8BACA,SACA,UAEF,UACE,eAEF,oBACE,YAEA,WACA,2BACA,gBACA,kBACA,UAEA,+EACE,8BACA,mCACA,kCACA,aACA,gBACA,qBAEF,kCACE,kBACA,aACA,mBACA,uBACA,UACA,WACA,SACA,MC9BI,KD+BJ,iBC7BQ,QD8BR,iBACA,mBACA,gBACA,YACA,eACA,wCACE,wCEzCJ,gCACE,WACA,YACA,aACA,mBACA,uBACA,6BACA,yBAPF,gCAQI,6BACF,8CACE,kBACF,uCACE,eACA,gBACA,mBACA,cACF,4CACE,WACA,YACA,kBACA,0BACA,sDACE,sBACA,uBACA,kBACA,YACA,iCACA,0DACE,kBACA,SACA,QACA,gCACA,eACA,gBACA,mBD1BR,iBACA,yBACA,eACA,uBC2BI,uHACE,kBACA,UACA,OACA,MACA,WACA,YACA,iBAEN,sCACE,kBACA,UACA,SACA,WACA,eACA,yBACA,2BACA,aACA,mBACA,2BACA,gBACA,yBAZF,sCAaI,0BACF,uDACE,WACA,YACA,kBACA,cACA,iBD9DM,QC+DN,eACA,iBACA,mBACA,aDlEM,QCmEN,gBACA,aACA,mBACA,uBACA,UACA,2BACA,kBDrEJ,iBACA,yBACA,eACA,uBCoEI,yBAlBF,uDAmBI,WACA,YACA,cACF,+DACE,WACA,kBACA,OACA,MACA,WACA,YACA,6CACF,4HAEE,aDxFI,QCyFN,8DACE,WACA,YACA,iBACA,uBACA,cACF,6DACE,WACA,YACA,mBACA,uBACA,cACA,kBACA,UACA,WACA,yBATF,6DAUI,WACA,YACA,SACA,YCjHR,yCACE,kBACA,UACA,OACA,MACA,WACA,YACA,aACA,mBACA,uBACA,gCACA,kDACE,aACA,sBACA,uBACA,2BACA,iBFdE,KEeF,uCACA,kBACA,gBACA,YACF,+CACE,WACA,aACA,gCACA,wBACA,kBACA,gBACF,+CACE,WACA,aACA,kBACA,gBACA,iDACE,cACJ,iDACE,WACA,wDACE,WACA,iBFlCI,QEmCJ,gBACA,gBACA,kBACA,WACA,eACA,YACA,iBC7CJ,0CACE,WACA,YACA,kBACA,OACA,MACA,kDACE,WACA,YACA,gBACF,kGAEE,kBACA,WACA,YACA,MHbA,KGcA,iBHZI,QGaJ,iBACA,mBACA,eACA,iBACA,YACA,eHfN,iBACA,yBACA,eACA,uBGcM,8GACE,wCACJ,mDACE,YACF,8CACE,kBACA,WACA,YACA,cACA,kDACE,YACA,mBACA,yDACE,YACF,wDACE,wCACJ,mDACE,kBACA,OACA,MACA,gCACA,UACA,WACA,iBH3CE,QG4CF,kBACA,eACA,WACA,wDACE,yBACA,gCACA,WACA,YACF,2DACE,qBACA,qBACN,+CACE,kBACA,UACA,UACA,SACA,gBACA,gBACA,oBACA,kDACE,qBACA,qDACE,MHpEJ,KGqEI,iBHnEA,QGoEA,iBACA,mBACA,gBACA,YACA,eACA,mBACA,YHvEV,iBACA,yBACA,eACA,uBGsEU,2DACE,wCACF,kEACE,kBACA,yEACE,cACA,yCACA,eACA,iBACA,iBACA,cACA,kBACA,WACA,QC/FhB,eACE,cACA,kBACA,WACA,YACA,yBACE,kBACA,SACA,QACA,gCACF,mBACE,kBACA,SACA,WACA,YACA,kBACA,WJVQ,QIWR,mDACA,gCACE,SACA,uCACF,gCACE,SACA,uCACF,gCACE,UACA,uCACF,gCACE,UACA,uCAEN,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,mBACF,KACE,oBAEJ,2BACE,GACE,0BAEF,KACE,8BC9CA,uCACE,WACA,YACA,kBACA,OACA,MACA,6CACE,WACA,YACA","file":"index.css"}

package/build/index.js

@@ -3,13 +3,71 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+Object.defineProperty(exports, "ImageTab", {
+  enumerable: true,
+  get: function get() {
+    return _ImageTab.default;
+  }
+});
+Object.defineProperty(exports, "Instructions", {
+  enumerable: true,
+  get: function get() {
+    return _Instructions.default;
+  }
+});
+Object.defineProperty(exports, "Loader", {
+  enumerable: true,
+  get: function get() {
+    return _Loader.default;
+  }
+});
+Object.defineProperty(exports, "ModelTab", {
+  enumerable: true,
+  get: function get() {
+    return _ModelTab.default;
+  }
+});
+Object.defineProperty(exports, "PanoramaTab", {
+  enumerable: true,
+  get: function get() {
+    return _PanoramaTab.default;
+  }
+});
+Object.defineProperty(exports, "RotationTab", {
+  enumerable: true,
+  get: function get() {
+    return _RotationTab.default;
+  }
+});
+Object.defineProperty(exports, "TabWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _TabWrapper.default;
+  }
+});
+Object.defineProperty(exports, "Widget", {
+  enumerable: true,
+  get: function get() {
+    return _Widget.default;
+  }
+});
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Widget = _interopRequireDefault(require("./Widget"));
+var _Widget = _interopRequireDefault(require("./components/Widget"));
+
+var _ImageTab = _interopRequireDefault(require("./components/ImageTab"));
+
+var _Instructions = _interopRequireDefault(require("./components/Instructions"));
+
+var _RotationTab = _interopRequireDefault(require("./components/RotationTab"));
+
+var _PanoramaTab = _interopRequireDefault(require("./components/PanoramaTab"));
+
+var _TabWrapper = _interopRequireDefault(require("./components/TabWrapper"));
+
+var _ModelTab = _interopRequireDefault(require("./components/ModelTab"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _Loader = _interopRequireDefault(require("./components/Loader"));
 
-var _default = _Widget.default;
-exports.default = _default;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/build/utils/modelHelpers.js

@@ -0,0 +1,81 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setDefaultControls = exports.addKeyboardControls = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var holdEvent = _interopRequireWildcard(require("hold-event"));
+
+var _cameraControls = _interopRequireDefault(require("camera-controls"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const setDefaultControls = (controls, angle) => {
+  controls.dollyTo(20, true);
+  controls.moveTo(0, 0, 0, true);
+  controls.mouseButtons.wheel = _cameraControls.default.ACTION.DOLLY;
+  controls.touches.two = _cameraControls.default.ACTION.NONE;
+  controls.rotateTo(0, angle, true); // this.destroyNipple();
+};
+
+exports.setDefaultControls = setDefaultControls;
+
+const addKeyboardControls = controls => {
+  const KEYCODE = {
+    W: 87,
+    A: 65,
+    S: 83,
+    D: 68,
+    ARROW_LEFT: 37,
+    ARROW_UP: 38,
+    ARROW_RIGHT: 39,
+    ARROW_DOWN: 40
+  };
+  const wKey = new holdEvent.KeyboardKeyHold(KEYCODE.W, 100);
+  const upKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_UP, 100);
+  const upArr = [wKey, upKey];
+  const aKey = new holdEvent.KeyboardKeyHold(KEYCODE.A, 100);
+  const leftKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_LEFT, 100);
+  const leftArr = [aKey, leftKey];
+  const sKey = new holdEvent.KeyboardKeyHold(KEYCODE.S, 100);
+  const downKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_DOWN, 100);
+  const downArr = [sKey, downKey];
+  const dKey = new holdEvent.KeyboardKeyHold(KEYCODE.D, 100);
+  const rightKey = new holdEvent.KeyboardKeyHold(KEYCODE.ARROW_RIGHT, 100);
+  const rightArr = [dKey, rightKey];
+  upArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.forward(1, true);
+    });
+  });
+  leftArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.truck(-1, 0, true);
+    });
+  });
+  downArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.forward(-1, true);
+    });
+  });
+  rightArr.forEach(key => {
+    key.addEventListener('holding', () => {
+      if ((void 0).currentCONTROL !== 'wasd') return;
+      controls.truck(1, 0, true);
+    });
+  });
+};
+
+exports.addKeyboardControls = addKeyboardControls;

package/build/utils/panoramaHelpers.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVerticesLocations = exports.getScale = exports.findWallVertices = exports.findRoomCenter = exports.findMinMaxCoordinates = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const findWallVertices = (walls, wall, vertices) => {
+  const currentWall = walls.find(el => el.ID === wall);
+  return currentWall.Vertices.map(vertex => vertices.find(el => el.ID === vertex));
+};
+
+exports.findWallVertices = findWallVertices;
+
+const getVerticesLocations = vertices => vertices.map(vertex => vertex.Location);
+
+exports.getVerticesLocations = getVerticesLocations;
+
+const findMinMaxCoordinates = (room, walls, vertices) => {
+  let maxX = 0;
+  let minX = Infinity;
+  let maxY = 0;
+  let minY = Infinity;
+  room.Walls.forEach(wall => {
+    const [coord1, coord2] = getVerticesLocations(findWallVertices(walls, wall, vertices)); // CALCULATE MAX COORDS
+
+    if (coord1.X > maxX) maxX = coord1.X;
+    if (coord1.X > maxX) maxX = coord1.X;
+    if (coord2.Y > maxY) maxY = coord2.Y;
+    if (coord2.Y > maxY) maxY = coord2.Y; // CALCULATE MIN COORDS
+
+    if (coord1.X < minX) minX = coord1.X;
+    if (coord1.X < minX) minX = coord1.X;
+    if (coord2.Y < minY) minY = coord2.Y;
+    if (coord2.Y < minY) minY = coord2.Y;
+  });
+  return {
+    maxX,
+    minX,
+    maxY,
+    minY
+  };
+};
+
+exports.findMinMaxCoordinates = findMinMaxCoordinates;
+
+const findRoomCenter = (room, walls, vertices) => {
+  const {
+    maxX,
+    minX,
+    maxY,
+    minY
+  } = findMinMaxCoordinates(room, walls, vertices);
+  const left = (maxX + minX) / 2;
+  const top = (maxY + minY) / 2;
+  return {
+    left,
+    top
+  };
+};
+
+exports.findRoomCenter = findRoomCenter;
+
+const getScale = (image, json) => {
+  const imageWidth = image.width;
+  const imageHeight = image.height;
+  const baseImageWidth = 1024;
+  const baseImageHeight = imageHeight * (baseImageWidth / imageWidth);
+  const deltaX = imageWidth / baseImageWidth / json.Scale.X;
+  const deltaY = imageHeight / baseImageHeight / json.Scale.X;
+  return {
+    X: deltaX,
+    Y: deltaY
+  };
+};
+
+exports.getScale = getScale;

package/package.json

@@ -2,39 +2,55 @@
   "name": "hart-estate-widget",
   "description": "HART Estate widget",
   "author": "HART",
-  "keywords": ["react", "hart", "widget", "estate"],
-  "version": "0.0.6",
+  "keywords": [],
+  "version": "0.0.10",
   "private": false,
   "main": "build/index.js",
   "module": "build/index.js",
-  "files": [ "build", "README.md" ],
+  "files": [
+    "build",
+    "README.md"
+  ],
   "repository": {
-      "type": "git",
-      "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
+    "type": "git",
+    "url": "https://gitlab.myhart.ru/hart_estate/hart-estate-widget"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files"
+    "start": "babel src --watch --out-dir build --copy-files",
+    "start-example": "cd ./example && npm run start",
+    "build": "rm -rf build && NODE_ENV=production babel src --out-dir build --copy-files && npm run build:sass",
+    "build:sass": "sass src/assets/sass/index.sass:build/index.css --style compressed"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
+    "camera-controls": "^1.34.1",
+    "core-js": "^3.21.0",
+    "hold-event": "^0.1.0",
     "mobx": "^6.3.13",
     "mobx-react-lite": "^3.2.3",
+    "panolens": "^0.12.1",
     "panzoom": "^9.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "^5.0.0"
+    "three": "^0.137.5",
+    "three-device-orientation": "^1.0.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
     "@babel/core": "^7.17.0",
     "@babel/eslint-parser": "^7.16.3",
     "@babel/preset-env": "^7.16.11",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.6.0",
     "eslint": "^8.0.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-react": "^7.28.0",
-    "rewire": "^6.0.0",
-    "sass": "^1.46.0"
+    "path": "^0.12.7",
+    "sass": "^1.46.0",
+    "sass-loader": "^12.4.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
   },
   "browserslist": {
     "production": [