Fri Dec 1 00:21:00 CST 2023 inscode

main.py

@@ -32,6 +32,16 @@ html = """
 st.markdown(html, unsafe_allow_html=True)
 
 css = """
+#pet {
+    width: 200px;
+    height: 200px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin-left: -100px;
+    margin-top: -95px;
+}
+
 #pet:hover #eye-left {
     transform: scale(1.5);
 }
@@ -83,16 +93,30 @@ js = """
 const pet = document.getElementById("pet");
 const eyeLeft = document.getElementById("eye-left");
 const eyeRight = document.getElementById("eye-right");
-
-pet.addEventListener("mousemove", function(e) {
-    const x = e.offsetX;
-    const y = e.offsetY;
-    const eyeLeftX = x >= 100 ? 45 : 30;
-    const eyeRightX = x >= 100 ? 115 : 100;
-    const pupilLeftX = x >= 100 ? 47 : 32;
-    const pupilRightX = x >= 100 ? 117 : 102;
-    const eyeY = y >= 100 ? 45 : 32;
-    const pupilY = y >= 100 ? 47 : 34;
+const handLeft = document.getElementById("hand-left");
+const handRight = document.getElementById("hand-right");
+
+function moveEyesAndArms(e) {
+    const rect = pet.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const x = e.pageX - centerX;
+    const y = e.pageY - centerY;
+    const angle = Math.atan2(y, x);
+    const eyeDistance = Math.min(Math.sqrt(x * x + y * y) / 50, 1.5);
+    const pupilDistance = Math.min(Math.sqrt(x * x + y * y) / 15, 0.5);
+    const armDistance = Math.min(Math.sqrt(x * x + y * y) / 30, 1);
+    const armRotation = Math.atan2(y, x);
+    const eyeLeftX = 50 + Math.cos(angle) * 45 * eyeDistance;
+    const eyeRightX = 115 + Math.cos(angle) * 45 * eyeDistance;
+    const pupilLeftX = 50 + Math.cos(angle) * 17 * pupilDistance;
+    const pupilRightX = 116 + Math.cos(angle) * 17 * pupilDistance;
+    const eyeY = 50 + Math.sin(angle) * 45 * eyeDistance;
+    const pupilY = 50 + Math.sin(angle) * 17 * pupilDistance;
+    const handLeftY = 50 + Math.sin(armRotation) * 30 * armDistance;
+    const handRightY = 50 + Math.sin(armRotation) * 30 * armDistance;
+    const handLeftX = -20 + Math.cos(armRotation) * 30 * armDistance;
+    const handRightX = 100 + Math.cos(armRotation) * 30 * armDistance;
     eyeLeft.style.left = eyeLeftX + "px";
     eyeRight.style.left = eyeRightX + "px";
     eyeLeft.style.top = eyeY + "px";
@@ -101,7 +125,11 @@ pet.addEventListener("mousemove", function(e) {
     eyeRight.querySelector("#pupil-right").style.left = pupilRightX + "px";
     eyeLeft.querySelector("#pupil-left").style.top = pupilY + "px";
     eyeRight.querySelector("#pupil-right").style.top = pupilY + "px";
-});
+    handLeft.style.transform = "translateY(-50%) rotate(" + armRotation + "rad) translateY(" + handLeftY + "px) translateX(" + handLeftX + "px)";
+    handRight.style.transform = "translateY(-50%) rotate(" + armRotation + "rad) translateY(" + handRightY + "px) translateX(" + handRightX + "px)";
+}
+
+pet.addEventListener("mousemove", moveEyesAndArms);
 </script>
 """