new color for vehicles, many visual enhancements, smart scrolling, ad…

…d and improve troubleshooting sections, fix mismatched IDs #23

README.md

@@ -1,17 +1,17 @@
-# ToyPad Emulator for Lego Dimensions
+# Toy Pad Emulator for Lego Dimensions
 
 <a href="https://www.buymeacoffee.com/Berny23" title="Donate to this project using Buy Me A Coffee"><img src="https://img.shields.io/badge/buy%20me%20a%20coffee-donate-yellow.svg" alt="Buy Me A Coffee donate button" /></a>
 </span>
 
-Allows you to connect an emulated ToyPad to your PC or video-game console.
+Allows you to connect an emulated Toy Pad to your PC or video-game console.
 
 ## Features
 
+- Confirmed working on **[Cemu](https://www.youtube.com/watch?v=7CBa9u2ip-Y)**, **real Wii U**, [**RPCS3**](#rpcs3-cannot-detect-the-toy-pad), [**real PS3**](https://github.com/Berny23/LD-ToyPad-Emulator/issues/10#issuecomment-933027554) and [**real PS4**](https://www.reddit.com/r/Legodimensions/comments/pb32zg/comment/hamfj29/?utm_source=share&utm_medium=web2x&context=3)
 - Supports **all available characters and vehicles**
 - Saves **vehicle upgrades**
-- Displays the toypad's **light effects**
-- Can be used from **mobile devices**
-- Confirmed working on **[Cemu](https://www.youtube.com/watch?v=7CBa9u2ip-Y)**, **real Wii U**, [**RPCS3**](#rpcs3-cannot-detect-the-toy-pad), [**real PS3**](https://github.com/Berny23/LD-ToyPad-Emulator/issues/10#issuecomment-933027554) and [**real PS4**](https://www.reddit.com/r/Legodimensions/comments/pb32zg/comment/hamfj29/?utm_source=share&utm_medium=web2x&context=3)
+- Displays the Toy Pad's **light effects**
+- Supports smart scrolling for **mobile devices**
 - Can be run in a **virtual machine** on Windows, macOS and Linux
 - Can be configured easily by following the instructions below
 
@@ -41,7 +41,7 @@ Allows you to connect an emulated ToyPad to your PC or video-game console.
 
 #### Guide
 
-1. Make a new virtual machine with Debian in your software of choice. You can leave the default values in VMware.
+1. Make a new virtual machine with Debian in your software of choice. Select your ISO file and choose the appropriate operating system (Linux -> Debian 11.x 64-bit) if you're asked. **To make sure your VM is accessible on the network, please follow the instructions in the troubleshooting section on this page (either for [VirtualBox](#webpage-not-reachable-oracle-virtualbox) or [VMware](#webpage-not-reachable-vmware)).**
 
 2. When first booting the Debian VM, select `Graphical install`. In the configuration, leave everything on default. Only change your language, set `debian` as hostname, don't set a root password, choose an account name and password, set partition to "yes" and `/dev/sda` for the GRUB bootloader.
 
@@ -198,6 +198,12 @@ Click on `Options` and tick `List All Devices`. Select `LEGO READER V2.10` in th
 
 After the installation has finished, exit Zadig and restart RPCS3. If you get stuck on the main menu, just close the game, right-click on it in the RPCS3 games list, select `Change Custom Configuration`, switch to the `Network` tab and choose `Disconnected` in both drop-down menus.
 
+### Webpage not reachable (Oracle VirtualBox)
+Shutdown your virtual machine (icon in the upper right corner). In VirtualBox's manager, click your image and open `Settings`. Under `Network` change `Attached to:` to `Bridged Adapter` and click `ok`. Start your virtual machine.
+
+### Webpage not reachable (VMware)
+Shutdown your virtual machine (icon in the upper right corner). Right-click on your virtual machine's name in VMware Workstation or VMware Player and click `Settings...`. Click on `Network Adapter` and select `Bridged`. Click `OK` and start your virtual machine.
+
 ### Error: listen EADDRINUSE: address already in use :::80
 Either close any other software that is using the port 80 or manually edit the last line of index.js (with `nano index.js`, edit the line, then press `Ctrl + O`, `Enter` and `Ctrl + X`).
 
@@ -206,16 +212,11 @@ If you did this, you may need to append your selected port to the address in the
 ### VirtualHere USB Client doesn't show LEGO READER V2.10
 When installing the virtual machine, you have to set the hostname to `debian`.
 
-Alternatively, copy the following command and replace `YOUR_IP_ADDRESS` with your virtual machine's IP address (it looks like `192.168.X.X`, run `hostname -i` to show it). After you've done this, run the modified command while you're inside the `LD-ToyPad-Emulator` folder.
+Alternatively, copy the following command and replace `YOUR_IP_ADDRESS` with your virtual machine's IP address (it looks like `192.168.X.X`, run `hostname -I` to show it). After you've done this, run the modified command while you're inside the `LD-ToyPad-Emulator` folder.
 ````bash
 git reset --hard ; printf '\necho "usbip-vudc.0" > UDC\nusbipd -D --device\nsleep 2;\nusbip attach -r YOUR_IP_ADDRESS -b usbip-vudc.0\nchmod a+rw /dev/hidg0' >> usb_setup_script.sh ; sudo cp usb_setup_script.sh /usr/local/bin/toypad_usb_setup.sh
 ````
 
-### I can't connect to the webpage from outside the VM (Oracle VirtualBox)
-Oracle VirtualBox's default network settings do not allow it to be detected by other devices on the network. A workaround at this time is to switch to `Bridged Adapter` mode.
-
-In VirtualBox's manager, click your image and open `Settings`. Under `Network` change `Attached to:` to `Bridged Adapter` and click `ok`.
-
 ## Acknowledgements
 * **ags131** for writing one of the main NodeJS libraries I'm using: [https://www.npmjs.com/package/node-ld](https://www.npmjs.com/package/node-ld). My project would've been impossible to create without this guy's research.
 

index.js

@@ -1,5 +1,5 @@
 /*
-	Copyright © 2021 Berny23 & Cort1237
+	Copyright © 2022 Berny23 & Cort1237
 	
 	This file is part of "ToyPad Emulator for Lego Dimensions" which is released under the "MIT" license.
 	See file "LICENSE" or go to "https://choosealicense.com/licenses/mit" for full license details.
@@ -201,7 +201,7 @@ tp.hook(tp.CMD_WRITE, (req, res) => {
 		writeJSONData(uid,"type","vehicle");
 		//writeVehicleData(uid, "uid", tp.randomUID())
 	}
-	//Whicle Uprades are stored in Pages 23 & 25
+	//Vehicle uprades are stored in Pages 23 & 25
 	else if(page == 23 || page == 35)
 		writeJSONData(uid, "vehicleUpgradesP23", data.readUInt32LE(0));
 	else if (page == 25 || page == 37){

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ld-toypad-emulator",
-  "version": "1.3.3",
-  "description": "ToyPad Emulator for Lego Dimensions",
+  "version": "1.3.4",
+  "description": "Toy Pad Emulator for Lego Dimensions",
   "repository": "https://github.com/Berny23/LD-ToyPad-Emulator",
   "main": "index.js",
   "scripts": {

server/index.html

@@ -1,16 +1,16 @@
 <!--
 
-	Copyright © 2021 Berny23 & Cort1237
+	Copyright © 2022 Berny23 & Cort1237
 	
-	This file is part of "ToyPad Emulator for Lego Dimensions" which is released under the "MIT" license.
+	This file is part of "Toy Pad Emulator for Lego Dimensions" which is released under the "MIT" license.
 	See file "LICENSE" or go to "https://choosealicense.com/licenses/mit" for full license details.
 
 -->
 
 <html>
 	<head>
 		<meta name="viewport" content="width=device-width"/>
-		<title>Lego Dimensions ToyPad Emulator | v1.3.3</title>
+		<title>Lego Dimensions Toy Pad Emulator | v1.3.4</title>
 		<style>
 			html {
 				display: table;
@@ -22,18 +22,35 @@
 				vertical-align: middle;
 				margin: auto;
 				text-align: center;
-				font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
+				font-family: sans-serif;
 			}
 
 			input {
 				margin-bottom: 1em;
 				font-size: 1.2em;
+				border-radius: 0.5rem;
+				border: 1px solid transparent;
+				cursor: default;
+				text-align: center;
+			}
+
+			input:focus-visible {
+				outline: none;
 			}
 
 			button {
-				margin-top: 1em;
 				padding: 1em;
 				font-weight: bold;
+				border-radius: 0.5rem;
+				border: 1px solid transparent;
+				cursor: pointer;
+				box-shadow: rgb(0 0 0 / 20%) 0 4px 12px;
+				background-color: #bdbdbd;
+				transition: background-color 250ms;
+			}
+
+			button:hover, button:active {
+				background-color: #8d8d8d;
 			}
 
 			.container {
@@ -52,12 +69,20 @@
 				margin: auto;
 				background-color: #efefef;
 				box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
-				padding: 2em;
+				padding: 1em;
 				margin-bottom: 1.5em;
-				display:inline-flex;
+				display: flex;
 				min-height: 100px;
 				border-radius: 0.50rem;
 			}
+
+			#tag-creation-container {
+				display: inline-flex;
+			}
+
+			#character-select {
+				margin-right: 2em;
+			}
 
 			.box {
 				border: solid 3px #bdbdbd;
@@ -100,13 +125,26 @@
 				box-sizing: border-box;
 				cursor: pointer;
 				box-shadow: rgb(0 0 0 / 20%) 0 4px 12px;
+				cursor: grab;
 			}
 
 			.item:hover, .item:focus, .item:active {
 				color: #fff;
 				background-color: #0077c1;
 				transition: background-color 250ms;
 			}
+
+			.item[data-type="vehicle"] {
+				background-color: #66bb6a;
+			}
+
+			.item[data-type="vehicle"]:hover, .item[data-type="vehicle"]:focus, .item[data-type="vehicle"]:active {
+				background-color: #338a3e;
+			}
+
+			.item.ui-sortable-helper {
+				cursor: grabbing;
+			}
 
 			#warnings {
 				color: ghostwhite;
@@ -122,6 +160,7 @@
 
 			#token-box {
 				box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0%), 0 6px 20px 0 rgb(0 0 0 / 0%);
+				flex-direction: row;
 			}
 
 			#remove-tokens{
@@ -131,12 +170,15 @@
 				align-items: center;
 				justify-content: center;
 				border-radius: 0.50rem;
+				cursor: default;
+				padding: 0;
 			}
 
 			#remove-tokens>.item{
 				background-color: #b61827;
 				box-shadow: none;
 				color: #fff;
+				cursor: default;
 			}
 
 			#remove-tokens>.placeholder{
@@ -149,8 +191,9 @@
 				margin: 0;
 				padding: 0;
 				width: 50em;
-				margin-right: 1em;
 				border-radius: 0.50rem;
+				min-height: 8em;
+				margin-right: 0.5em;
 			}
 
 			#toybox-tokens li {
@@ -166,15 +209,15 @@
 	<body>
 
 		<div>
-			<h1>Lego Dimensions ToyPad Emulator</h1>
+			<h1>Lego Dimensions Toy Pad Emulator</h1>
 			<p id="warnings" class="container">
-				→ If you encounter a token that is not responding, move to the toybox and then back to the toypad ←<br>
+				→ If you encounter a token that is not responding, move to the toy box and then back to the Toy Pad ←<br>
 				<br>
-				Create characters and vehicles with boxes at the top then drag them to the toy pad.<br>
+				Create characters and vehicles with boxes at the top then drag them to the Toy Pad.<br>
 			</p>
 
-			<div style="display: inline-flex;">
-				<form id="character-select" class="container" style="margin-right: 2em;">
+			<div id="tag-creation-container">
+				<form id="character-select" class="container">
 					<label>
 						<input list="character-list" id="character-name" onfocus="this.value=''" onchange="this.blur();" placeholder = "Select a character" />
 						<datalist id="character-list"></datalist>
@@ -193,7 +236,7 @@ <h1>Lego Dimensions ToyPad Emulator</h1>
 				</form>
 			</div>
 
-			<div class="flex-container" style = "display:flex; width: fit-content; height: fit-content;flex-direction:column">
+			<div class="flex-container">
 				<h2>Toy Box</h2>
 				<p>Drag an entry to move it to the pad</p>
 				<div id="token-box" class="flex-container">
@@ -212,8 +255,8 @@ <h3>Drag to<br>this side<br>to delete<br>→</h3>
 			   	This message will disappear when I can see the game.
 	   </p>
 
-			<div class="container">
-				<h1>The Toypad</h1>
+			<div id="toypad" class="container">
+				<h1>The Toy Pad</h1>
 				<div>
 					<div class="drop-targets">
 						<div id = "toypad1" class="box" padNum='2' padIndex = '1' color = "white"></div>
@@ -231,7 +274,7 @@ <h1>The Toypad</h1>
 					</div>
 				</div>
 			</div>
-			<button id = "sync" type = "button" style="background-color:#5c6bc0; color:white; border-radius: 0.50rem;">Things not working? Click here to sync..</button>
+			<button id = "sync" type = "button">Things not working? Click here to sync.</button>
 
 		</div>
 
@@ -257,7 +300,14 @@ <h1>The Toypad</h1>
 				$(".box").sortable({
 					connectWith: ".box",
 					scroll: true,
-					scrollSensitivity: 100,
+					scrollSensitivity: 40,
+					scrollSpeed: 10,
+					start: function(event) {
+						$('html, body').animate({ scrollTop: $(document).height() }, 500);
+					},
+					stop: function (event) {
+						//$('html, body').animate({ scrollTop: 0 }, 500);
+					},
 					receive: function(event, ui) {
 						var $this = $(this);
 						console.log()
@@ -268,7 +318,7 @@ <h1>The Toypad</h1>
 						}
 						else if ($this.attr('padNum') == undefined || ($this.children('li').length > 1 && $this.attr('id') != "toybox-tokens"))
 							$(ui.sender).sortable('cancel');
-						//If moving to the ToyPox, remove tag from the game.
+						//If moving to the Toy Pox, remove tag from the game.
 						else if ($this.attr('id') == "toybox-tokens"){
 							$.ajax({
 							method: 'DELETE',
@@ -277,7 +327,7 @@ <h1>The Toypad</h1>
 							data: JSON.stringify({ index: parseInt(ui.sender.attr('padIndex')), uid: ui.item.attr('data-uid') })
 							})
 						}
-						//If moving from the ToyBox, place tag in the game.
+						//If moving from the Toy Box, place tag in the game.
 						else if (ui.sender.attr('padNum') == -1){
 							var content = { uid: ui.item.attr('data-uid'), id:ui.item.attr('data-id'), position:$this.attr('padNum'), index:$this.attr('padIndex')}
 							console.log(content)
@@ -288,7 +338,7 @@ <h1>The Toypad</h1>
 									data: JSON.stringify(content)
 								});
 							}
-						//If moving between spaces on the ToyPad, remove from previous space and place in new one.
+						//If moving between spaces on the Toy Pad, remove from previous space and place in new one.
 						else{
 							var content = { uid: ui.item.attr('data-uid'), id:ui.item.attr('data-id'), position:$this.attr('padNum'), index:$this.attr('padIndex')}
 							console.log(ui.sender.attr('padIndex'))
@@ -396,7 +446,7 @@ <h1>The Toypad</h1>
 
 				socket.on('Connection True', function(e) {
 					console.log("Connection Success Recieved");
-					$('#status').css({visibility: "hidden"})
+					$('#status').css({display: "none"})
 				})
 
 				//**Script Functions**
@@ -423,9 +473,9 @@ <h1>The Toypad</h1>
 						$.each(tags, function (i, item) {
 							console.log("ID: " + item.id +" UID: " + item.uid)
 							if (item.name != 'test' && item.index == '-1') 
-								$('#toybox-tokens').append('<li class=item draggable=true data-id= ' + item.id + ' data-uid='+ item.uid +' pad=' + item.pad +'><h3>'+ item.name +'</h3></li>');
+								$('#toybox-tokens').append('<li class=item draggable=true data-type=' + item.type + ' data-id= ' + item.id + ' data-uid='+ item.uid +' pad=' + item.pad +'><h3>'+ item.name +'</h3></li>');
 							else if(item.index != '-1')
-								$('#toypad'+item.index).append('<li class=item draggable=true data-id= ' + item.id + ' data-uid='+ item.uid +' pad=' + item.pad +'><h3>'+ item.name +'</h3></li>');
+								$('#toypad'+item.index).append('<li class=item draggable=true data-type=' + item.type + ' data-id= ' + item.id + ' data-uid='+ item.uid +' pad=' + item.pad +'><h3>'+ item.name +'</h3></li>');
 						});
 					});
 				}
@@ -493,7 +543,7 @@ <h1>The Toypad</h1>
 			});
 		</script>
 		<p>
-			Copyright © 2021 Berny23 & Cort1237<br>
+			Copyright © 2022 Berny23 & Cort1237 | v1.3.4<br>
 			GitHub: <a href="https://github.com/Berny23/LD-ToyPad-Emulator">https://github.com/Berny23/LD-ToyPad-Emulator</a><br>
 			This software is licensed under the <a href="https://choosealicense.com/licenses/mit">MIT license</a>.
 		</p>

server/json/tokenmap.json

@@ -224,8 +224,8 @@
     {        "id": 1222,        "upgrademap": 0,        "rebuild": 1,        "name": "* Crabmeat"    },
     {        "id": 1223,        "upgrademap": 0,        "rebuild": 2,        "name": "* Eggcatcher"    },
     {        "id": 1224,        "upgrademap": 0,        "rebuild": 0,        "name": "K.I.T.T."  },
-    {        "id": 1226,        "upgrademap": 0,        "rebuild": 2,        "name": "* Goliath Armored Semi"     },
-    {        "id": 1225,        "upgrademap": 0,        "rebuild": 1,        "name": "* K.I.T.T. Jet"     },
+    {        "id": 1225,        "upgrademap": 0,        "rebuild": 2,        "name": "* Goliath Armored Semi"     },
+    {        "id": 1226,        "upgrademap": 0,        "rebuild": 1,        "name": "* K.I.T.T. Jet"     },
     {        "id": 1227,        "upgrademap": 0,        "rebuild": 0,        "name": "Police Helicopter"   },
     {        "id": 1228,        "upgrademap": 0,        "rebuild": 1,        "name": "* Police Hovercraft"     },
     {        "id": 1229,        "upgrademap": 0,        "rebuild": 2,        "name": "* Police Plane"   },