fixed size

live2d/dist/waifu-tips.js

@@ -44752,6 +44752,33 @@
         transparent: true,
   	  resizeTo: window
       });
+
+  	// function to read json file
+  	function readJSON(path) {
+  		return new Promise((resolve, reject) => {
+  			fetch(path)
+  				.then(response => response.json())
+  				.then(data => resolve(data))
+  				.catch(error => reject(error));
+  		});
+  	}
+
+  	function draggable(model) {
+  		model.buttonMode = true;
+  		model.on("pointerdown", (e) => {
+  		  model.dragging = true;
+  		  model._pointerX = e.data.global.x - model.x;
+  		  model._pointerY = e.data.global.y - model.y;
+  		});
+  		model.on("pointermove", (e) => {
+  		  if (model.dragging) {
+  			model.position.x = e.data.global.x - model._pointerX;
+  			model.position.y = e.data.global.y - model._pointerY;
+  		  }
+  		});
+  		model.on("pointerupoutside", () => (model.dragging = false));
+  		model.on("pointerup", () => (model.dragging = false));
+  	  }
   	  const model = await Live2DModel.from(jsonpath);
   	  app.stage.addChild(model);
   	  
@@ -44766,7 +44793,7 @@
   	  // Align bottom and center horizontally
   	  model.x = (parentWidth - model.width) / 2;
   	  model.y =  parentHeight - model.height;
-
+  	  draggable(model);
   	  // read json file to find motion groups
   	  let modelJson = await readJSON(`${jsonpath}`);
     
@@ -44779,15 +44806,6 @@
   		  }
   	  });
     
-  	// function to read json file
-  	function readJSON(path) {
-  		return new Promise((resolve, reject) => {
-  			fetch(path)
-  				.then(response => response.json())
-  				.then(data => resolve(data))
-  				.catch(error => reject(error));
-  		});
-  	}
   }
   }
 

live2d/waifu-tips.js

@@ -232,6 +232,33 @@ function loadWidget() {
       transparent: true,
 	  resizeTo: window
     });
+
+	// function to read json file
+	function readJSON(path) {
+		return new Promise((resolve, reject) => {
+			fetch(path)
+				.then(response => response.json())
+				.then(data => resolve(data))
+				.catch(error => reject(error));
+		});
+	}
+
+	function draggable(model) {
+		model.buttonMode = true;
+		model.on("pointerdown", (e) => {
+		  model.dragging = true;
+		  model._pointerX = e.data.global.x - model.x;
+		  model._pointerY = e.data.global.y - model.y;
+		});
+		model.on("pointermove", (e) => {
+		  if (model.dragging) {
+			model.position.x = e.data.global.x - model._pointerX;
+			model.position.y = e.data.global.y - model._pointerY;
+		  }
+		});
+		model.on("pointerupoutside", () => (model.dragging = false));
+		model.on("pointerup", () => (model.dragging = false));
+	  }
 	  const model = await Live2DModel.from(jsonpath);
 	  app.stage.addChild(model);
 	  
@@ -246,7 +273,7 @@ function loadWidget() {
 	  // Align bottom and center horizontally
 	  model.x = (parentWidth - model.width) / 2;
 	  model.y =  parentHeight - model.height;
-
+	  draggable(model);
 	  // read json file to find motion groups
 	  let modelJson = await readJSON(`${jsonpath}`);
   
@@ -259,15 +286,6 @@ function loadWidget() {
 		  }
 	  });
   
-	// function to read json file
-	function readJSON(path) {
-		return new Promise((resolve, reject) => {
-			fetch(path)
-				.then(response => response.json())
-				.then(data => resolve(data))
-				.catch(error => reject(error));
-		});
-	}
 }
 }
 

live2d/waifu.css

@@ -42,7 +42,8 @@
 	position: fixed;
 	transform: translateY(3px);
 	transition: transform .3s ease-in-out, bottom 3s ease-in-out;
-	z-index: 1;
+	width: 25%;
+	height: 25%;
 }
 
 #waifu:hover {
@@ -98,10 +99,9 @@
 
 #waifu #live2d {
 	cursor: grab;
-	height: 280px;
+	height: 100%;
 	position: relative;
-	width: 330px;
-	/* z-index: -1; */
+	width: 100%;
 }
 
 #waifu #live2d:active {