adding npcs

public/checks.html

@@ -17,6 +17,7 @@
         <label><input type="checkbox" id="hannah" class="check"> Hannah  </label>
         <label><input type="checkbox" id="medcalf" class="check"> Medcalf  </label>
         <label><input type="checkbox" id="fairy" class="check"> Fairy  </label>
+        <label><input type="checkbox" id="fiona" class="check"> Fiona  </label>
     </form>
     <script src="/socket.io/socket.io.js"></script>
     <script src="checks.js"></script>

public/checks.js

@@ -41,5 +41,9 @@ fairy.addEventListener('change', (e) => {
     socket.emit('visibility', {name: 'fairy', status: e.target.checked})
 })
 
+fiona.addEventListener('change', (e) => {
+    socket.emit('visibility', {name: 'fiona', status: e.target.checked})
+})
+
 
 

public/familiars/medcalf.js

@@ -0,0 +1,70 @@
+
+const elemMedcalf = 'medcalf'
+const objMedcalf = document.getElementById(elemMedcalf);
+
+objMedcalf.onmousedown = function(event) {
+
+    console.log("an attempt to move")
+
+    if (window.location.pathname !== '/dm') {
+      return;
+    }
+
+    let shiftX = event.clientX - objMedcalf.getBoundingClientRect().left;
+    let shiftY = event.clientY - objMedcalf.getBoundingClientRect().top;
+
+    objMedcalf.style.position = 'absolute';
+    objMedcalf.style.zIndex = 1000;
+    document.body.append(objMedcalf);
+
+    moveAt(event.pageX, event.pageY);
+
+    function moveAt(pageX, pageY) {
+      objMedcalf.style.left = pageX - shiftX + 'px';
+      objMedcalf.style.top = pageY - shiftY + 'px';
+    }
+
+    function onMouseMove(event) {
+      moveAt(event.pageX, event.pageY);
+    }
+
+    function getLocation() {
+      const X = window.scrollX + objMedcalf.getBoundingClientRect().left;
+      const Y = window.scrollY + objMedcalf.getBoundingClientRect().top;
+      return {X, Y};
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+
+    objMedcalf.onmouseup = function() {
+      document.removeEventListener('mousemove', onMouseMove);
+      //trigger a web socket event
+      socket.emit('change', {location: getLocation(), element: elemMedcalf})
+      objMedcalf.onmouseup = null;
+    };
+
+  };
+
+  objMedcalf.ondragstart = function() {
+    return false;
+  };
+
+  socket.on('change', function(input){
+    console.log("Change has been detected")
+    console.log(input.location.X, input.location.Y)
+    console.log(input.element)
+
+    if (input.element === elemMedcalf) {
+      objMedcalf.style.position = 'absolute';
+      objMedcalf.style.zIndex = 1000;
+      document.body.append(objMedcalf);
+
+      moveAt(input.location.X, input.location.Y);
+
+      function moveAt(shiftX, shiftY) {
+        objMedcalf.style.left = shiftX + 'px';
+        objMedcalf.style.top = shiftY + 'px';
+      }
+    }
+
+});

public/index.css

@@ -26,6 +26,6 @@ html {
 
 /* Hiding by default */
 
-#diamond{
+#jack, #jessie, #corny, #tristan, #dox, #diamond, #hannah, #medcalf, #fiona, #fairy{
     display: none;
 }

public/index.html

@@ -16,6 +16,10 @@
 
   <img src="images/tristan.png" id="tristan" class='icon npc'>
   <img src="images/dox.png" id="dox" class='icon npc'>
+  <img src="images/hannah.png" id="hannah" class='icon npc'>
+  <img src="images/fiona.png" id="fiona" class='icon npc'>
+
+  <img src="images/medcalf.png" id="medcalf" class='icon npc'>
 
   <img src="images/diamond.png" id="diamond" class='icon object'>
 
@@ -32,6 +36,10 @@
 
   <script src="npcs/tristan.js"></script>
   <script src="npcs/dox.js"></script>
+  <script src="npcs/hannah.js"></script>
+  <script src="npcs/fiona.js"></script>
+
+  <script src="familiars/medcalf.js"></script>
 
   <script src="objects/diamond.js"></script>
 

public/index.js

@@ -1,8 +1,18 @@
 var socket = io();
 
 // DM overrides for display
-if (window.location.pathname !== '/dm') {
+if (window.location.pathname === '/dm') {
+    jack.style.display = 'block';
+    jessie.style.display = 'block';
+    corny.style.display = 'block';
+    fairy.style.display = 'block';
+    tristan.style.display = 'block';
+    dox.style.display = 'block';
     diamond.style.display = 'block';
+    hannah.style.display = 'block';
+    medcalf.style.display = 'block';
+    fiona.style.display = 'block';
+    fairy.style.display = 'block';
 }
 
 

public/npcs/fiona.js

@@ -0,0 +1,70 @@
+
+const elemFiona = 'fiona'
+const objFiona = document.getElementById(elemFiona);
+
+objFiona.onmousedown = function(event) {
+
+    console.log("an attempt to move")
+
+    if (window.location.pathname !== '/dm') {
+      return;
+    }
+
+    let shiftX = event.clientX - objFiona.getBoundingClientRect().left;
+    let shiftY = event.clientY - objFiona.getBoundingClientRect().top;
+
+    objFiona.style.position = 'absolute';
+    objFiona.style.zIndex = 1000;
+    document.body.append(objFiona);
+
+    moveAt(event.pageX, event.pageY);
+
+    function moveAt(pageX, pageY) {
+      objFiona.style.left = pageX - shiftX + 'px';
+      objFiona.style.top = pageY - shiftY + 'px';
+    }
+
+    function onMouseMove(event) {
+      moveAt(event.pageX, event.pageY);
+    }
+
+    function getLocation() {
+      const X = window.scrollX + objFiona.getBoundingClientRect().left;
+      const Y = window.scrollY + objFiona.getBoundingClientRect().top;
+      return {X, Y};
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+
+    objFiona.onmouseup = function() {
+      document.removeEventListener('mousemove', onMouseMove);
+      //trigger a web socket event
+      socket.emit('change', {location: getLocation(), element: elemFiona})
+      objFiona.onmouseup = null;
+    };
+
+  };
+
+  objFiona.ondragstart = function() {
+    return false;
+  };
+
+  socket.on('change', function(input){
+    console.log("Change has been detected")
+    console.log(input.location.X, input.location.Y)
+    console.log(input.element)
+
+    if (input.element === elemFiona) {
+      objFiona.style.position = 'absolute';
+      objFiona.style.zIndex = 1000;
+      document.body.append(objFiona);
+
+      moveAt(input.location.X, input.location.Y);
+
+      function moveAt(shiftX, shiftY) {
+        objFiona.style.left = shiftX + 'px';
+        objFiona.style.top = shiftY + 'px';
+      }
+    }
+
+});

public/npcs/hannah.js

@@ -0,0 +1,70 @@
+
+const elemHannah = 'hannah'
+const objHannah = document.getElementById(elemHannah);
+
+objHannah.onmousedown = function(event) {
+
+    console.log("an attempt to move")
+
+    if (window.location.pathname !== '/dm') {
+      return;
+    }
+
+    let shiftX = event.clientX - objHannah.getBoundingClientRect().left;
+    let shiftY = event.clientY - objHannah.getBoundingClientRect().top;
+
+    objHannah.style.position = 'absolute';
+    objHannah.style.zIndex = 1000;
+    document.body.append(objHannah);
+
+    moveAt(event.pageX, event.pageY);
+
+    function moveAt(pageX, pageY) {
+      objHannah.style.left = pageX - shiftX + 'px';
+      objHannah.style.top = pageY - shiftY + 'px';
+    }
+
+    function onMouseMove(event) {
+      moveAt(event.pageX, event.pageY);
+    }
+
+    function getLocation() {
+      const X = window.scrollX + objHannah.getBoundingClientRect().left;
+      const Y = window.scrollY + objHannah.getBoundingClientRect().top;
+      return {X, Y};
+    }
+
+    document.addEventListener('mousemove', onMouseMove);
+
+    objHannah.onmouseup = function() {
+      document.removeEventListener('mousemove', onMouseMove);
+      //trigger a web socket event
+      socket.emit('change', {location: getLocation(), element: elemHannah})
+      objHannah.onmouseup = null;
+    };
+
+  };
+
+  objHannah.ondragstart = function() {
+    return false;
+  };
+
+  socket.on('change', function(input){
+    console.log("Change has been detected")
+    console.log(input.location.X, input.location.Y)
+    console.log(input.element)
+
+    if (input.element === elemHannah) {
+      objHannah.style.position = 'absolute';
+      objHannah.style.zIndex = 1000;
+      document.body.append(objHannah);
+
+      moveAt(input.location.X, input.location.Y);
+
+      function moveAt(shiftX, shiftY) {
+        objHannah.style.left = shiftX + 'px';
+        objHannah.style.top = shiftY + 'px';
+      }
+    }
+
+});