ペアプロ課題のび回答

src/js/script.js

@@ -1,10 +1,38 @@
-import { BASE_DIR } from '../constants.yml'
-import Sample from '@/lib/Sample';
+const SPEED = 0.1;
 
-const sample = new Sample({
-    name: 'world'
-});
+const el = document.querySelector('.sample-icon');
+
+let mousePos;
+let logoPos = [window.innerWidth / 2, window.innerHeight / 2];
+let logoRotate = 0;
+
+function update() {
+    if (mousePos) {
+        logoPos = [
+            logoPos[0] + (mousePos[0] - logoPos[0]) * SPEED,
+            logoPos[1] + (mousePos[1] - logoPos[1]) * SPEED,
+        ];
+        logoRotate = 360 * Math.atan2(
+            mousePos[1] - logoPos[1],
+            mousePos[0] - logoPos[0],
+        ) / (Math.PI * 2) + 90;
+    }
+}
+
+function render() {
+    el.style.transform = [
+        `translate(${logoPos[0]}px, ${logoPos[1]}px)`,
+        `rotate(${logoRotate}deg)`
+    ].join(' ');
+}
+
+function loop () {
+    update();
+    render();
+    requestAnimationFrame(loop);
+}
+requestAnimationFrame(loop);
 
-document.querySelector('.wrapper').addEventListener('click', () => {
-    console.log(`hello, ${sample.name}. Base directory is ${BASE_DIR}.`);
+window.addEventListener('mousemove', (e) => {
+    mousePos = [e.pageX, e.pageY];
 });

src/pug/page/index.pug

@@ -9,4 +9,3 @@ prepend config-block
 
 block content-block
   .sample-icon
-  | hello, world!

src/scss/module/_sample-icon.scss

@@ -1,8 +1,12 @@
 .sample-icon {
     $size: 128px;
-    margin: 10px 0px;
     width: $size;
     height: $size;
+    margin-top: (-$size / 2);
+    margin-left: (-$size / 2);
     background-image: image-url('html5.png');
     background-repeat: no-repeat;
+    position: absolute;
+    top: 0;
+    left: 0;
 }