Added Tools tutorial tab

Client/SpawnMenu.lua

@@ -7,6 +7,9 @@ SpawnsHistory = SpawnsHistory or setmetatable({}, { __mode = 'k' })
 -- List of all Assets
 SpawnMenuItems = SpawnMenuItems or {}
 
+-- List of all Tool Guns Data
+ToolGunsTutorials = ToolGunsTutorials or {}
+
 -- WORKAROUND used for weapons Patterns
 SelectedOption = SelectedOption or ""
 
@@ -173,6 +176,21 @@ Events.Subscribe("SpawnedItem", function(item, weld)
 	table.insert(SpawnsHistory, { ["item"] = item, ["weld"] = weld })
 end)
 
+Events.Subscribe("PickUpToolGun", function(asset, weapon, char)
+	Events.Call("PickUpToolGun_" .. asset, weapon, char)
+
+	local tool_gun_data = ToolGunsTutorials[asset]
+	if (tool_gun_data) then
+		MainHUD:CallEvent("ToggleTutorial", true, tool_gun_data.name, tool_gun_data.tutorials)
+	end
+end)
+
+Events.Subscribe("DropToolGun", function(asset, weapon, char)
+	Events.Call("DropToolGun_" .. asset, weapon, char)
+
+	MainHUD:CallEvent("ToggleTutorial", false)
+end)
+
 function ToggleToolGunAiming(weapon, tool, enable)
 	if (enable) then
 		if (
@@ -247,7 +265,7 @@ function TraceFor(trace_max_distance, collision_channel)
 end
 
 -- Function for Adding new Spawn Menu items
-function AddSpawnMenuItem(asset_pack, tab, id, name, image, category)
+function AddSpawnMenuItem(asset_pack, tab, id, name, image, category, tutorials)
 	if (not SpawnMenuItems[asset_pack]) then SpawnMenuItems[asset_pack] = {} end
 	if (not SpawnMenuItems[asset_pack][tab]) then SpawnMenuItems[asset_pack][tab] = {} end
 
@@ -257,6 +275,24 @@ function AddSpawnMenuItem(asset_pack, tab, id, name, image, category)
 		image = image,
 		sub_category = category
 	})
+
+	if (tutorials) then
+		local tutorials_parsed = {}
+
+		for _, tutorial_data in pairs(tutorials) do
+			local mapped_key = Input.GetMappedKey(tutorial_data.key)
+
+			-- If didn't find mapped key, then use it as Raw
+			if (mapped_key == "") then mapped_key = tutorial_data.key end
+
+			-- Gets the image path
+			local key_icon = Input.GetKeyIcon(mapped_key)
+
+			table.insert(tutorials_parsed, { image = key_icon, text = tutorial_data.text })
+		end
+
+		ToolGunsTutorials[id] = { tutorials = JSON.stringify(tutorials_parsed), name = name }
+	end
 end
 
 -- Exposes this to other packages

Client/Tools/Balloon.lua

@@ -41,4 +41,7 @@ Events.Subscribe("DropToolGun_BalloonTool", function(tool)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "BalloonTool", "Balloons", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "BalloonTool", "Balloons", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "spawn balloon" },
+	{ key = "Undo", text = "undo spawn" },
+})

Client/Tools/Color.lua

@@ -25,4 +25,6 @@ Events.Subscribe("DropToolGun_ColorTool", function(tool)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "ColorTool", "Colors", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "ColorTool", "Colors", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "paint object" },
+})

Client/Tools/Lamp.lua

@@ -24,4 +24,7 @@ Events.Subscribe("DropToolGun_LampTool", function(tool)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "LampTool", "Lamps", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "LampTool", "Lamps", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "spawn lamp" },
+	{ key = "Undo", text = "undo spawn" },
+})

Client/Tools/Light.lua

@@ -33,4 +33,7 @@ Events.Subscribe("DropToolGun_LightTool", function(tool)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "LightTool", "Lights", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "LightTool", "Lights", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "spawn light" },
+	{ key = "Undo", text = "undo spawn" },
+})

Client/Tools/PhysicsGun.lua

@@ -321,4 +321,10 @@ Events.Subscribe("DropToolGun_PhysicsGun", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "PhysicsGun", "Physics Gun", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "PhysicsGun", "Physics Gun", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "grab object" },
+	{ key = "RightMouseButton", text = "freeze object" },
+	{ key = "MouseScrollUp", text = "increase/decrease beam size" },
+	{ key = "LeftAlt", text = "rotate object" },
+	{ key = "E", text = "rotate object" },
+})

Client/Tools/Remover.lua

@@ -23,4 +23,6 @@ Events.Subscribe("DropToolGun_RemoverTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "RemoverTool", "Remover", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "RemoverTool", "Remover", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "remove object" },
+})

Client/Tools/Resizer.lua

@@ -108,4 +108,8 @@ Events.Subscribe("DropToolGun_ResizerTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "ResizerTool", "Resizer", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "ResizerTool", "Resizer", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "select object" },
+	{ key = "R", text = "reset scale" },
+	{ key = "MouseScrollUp", text = "scale" },
+})

Client/Tools/Rope.lua

@@ -63,4 +63,7 @@ Events.Subscribe("DropToolGun_RopeTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "RopeTool", "Rope", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "RopeTool", "Rope", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "attach rope" },
+	{ key = "Undo", text = "undo rope" },
+})

Client/Tools/Thruster.lua

@@ -24,4 +24,7 @@ Events.Subscribe("DropToolGun_ThrusterTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "ThrusterTool", "Thruster", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "ThrusterTool", "Thruster", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "spawn thruster" },
+	{ key = "Undo", text = "undo spawn" },
+})

Client/Tools/Trail.lua

@@ -24,4 +24,7 @@ Events.Subscribe("DropToolGun_TrailTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "TrailTool", "Trail", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "TrailTool", "Trail", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "spawn trail" },
+	{ key = "Undo", text = "undo spawn" },
+})

Client/Tools/Weld.lua

@@ -65,4 +65,7 @@ Events.Subscribe("DropToolGun_WeldTool", function(tool, character)
 end)
 
 -- Adds this tool to the Sandbox Spawn Menu
-AddSpawnMenuItem("nanos-world", "tools", "WeldTool", "Weld", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg")
+AddSpawnMenuItem("nanos-world", "tools", "WeldTool", "Weld", "assets///NanosWorld/Thumbnails/SK_Blaster.jpg", nil, {
+	{ key = "LeftClick", text = "weld object" },
+	{ key = "Undo", text = "undo weld" },
+})

Client/UI/index.html

@@ -18,6 +18,16 @@
 		<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
 	</head>
 	<body>
+		<div id="tutorials">
+			<div id="tutorial-title">
+				Tool
+			</div>
+			<div id="tutorial-body">
+				<!-- <span class="tutorial"><img src="..." class="tutorial-key"> Attach Something</span> -->
+				<!-- <span class="tutorial"><img src="..." class="tutorial-key"> Do Another Thing</span> -->
+			</div>
+		</div>
+
 		<div id="voice_chats">
 			<!-- <span class="voice_chat SyedMuhammad">Player</span> -->
 		</div>

Client/UI/index.js

@@ -286,6 +286,40 @@ function AddOption(name, texture, texture_thumbnail) {
 	document.querySelector(".spawn_option_checkbox").appendChild(option_checkbox_item);
 }
 
+function ToggleTutorial(is_visible, title, tutorial_list) {
+	const tutorials = document.querySelector("#tutorials");
+
+	if (is_visible) {
+		const tutorial_body = document.querySelector("#tutorial-body");
+		tutorial_body.innerHTML = "";
+
+		const tutorial_title = document.querySelector("#tutorial-title");
+		tutorial_title.innerHTML = title;
+
+		const tutorial_list_json = JSON.parse(tutorial_list);
+
+		for (let tutorial in tutorial_list_json) {
+			let image = tutorial_list_json[tutorial].image;
+			let text = tutorial_list_json[tutorial].text;
+
+			const tutorial_item_image = document.createElement("img");
+			tutorial_item_image.classList.add("tutorial-key");
+			tutorial_item_image.src = image;
+
+			const tutorial_item = document.createElement("span");
+			tutorial_item.classList.add("tutorial");
+			tutorial_item.appendChild(tutorial_item_image);
+			tutorial_item.innerHTML += text;
+
+			tutorial_body.appendChild(tutorial_item);
+		}
+
+		tutorials.style.display = "block";
+	} else {
+		tutorials.style.display = "none";
+	}
+}
+
 document.addEventListener("DOMContentLoaded", function(event) {
 	// Configure Tabs
 	AddTab("props", "props", "images/tabs/chair.png", "images/tabs/chair-disabled.png");
@@ -482,6 +516,7 @@ Events.Subscribe("UpdateWeaponAmmo", UpdateWeaponAmmo);
 Events.Subscribe("UpdateHealth", UpdateHealth);
 Events.Subscribe("ShowPopUpPrompt", ShowPopUpPrompt);
 Events.Subscribe("ClosePopUpPrompt", ClosePopUpPrompt);
+Events.Subscribe("ToggleTutorial", ToggleTutorial);
 
 
 var PatternList = [

Client/UI/style.css

@@ -392,4 +392,34 @@ body {
 	text-transform: uppercase;
 	margin: 5px;
 	text-align: center;
+}
+
+#tutorials {
+	background-color: #0000003d;
+	position: absolute;
+	top: 30px;
+	left: 30px;
+	padding: 10px 15px;
+	display: none;
+}
+
+#tutorial-title {
+	font-size: 70px;
+	font-family: 'Poiret One', cursive;
+	margin-bottom: 10px;
+}
+
+#tutorial-body {
+
+}
+
+.tutorial {
+	display: flex;
+	line-height: 30px;
+	margin: 5px 0;
+}
+
+.tutorial-key {
+	height: 30px;
+	margin-right: 5px;
 }

Package.toml

@@ -5,7 +5,7 @@
     # contributors
     author =               "nanos™"
     # version
-    version =              "2.8.1"
+    version =              "2.9.0"
     # image URL
     image =                "https://i.imgur.com/aoEa4N4.jpg"
     # package type: 'script' (normal package), 'game-mode' (unique package - can only load one at a time) or 'loading-screen' (special package loaded in loading screen)

Server/SpawnMenu.lua

@@ -70,11 +70,11 @@ Events.Subscribe("SpawnItem", function(player, asset_pack, category, asset, spaw
 			item:SetValue("ToolGun", asset, true)
 
 			item:Subscribe("PickUp", function(weapon, char)
-				Events.CallRemote("PickUpToolGun_" .. asset, char:GetPlayer(), weapon, char)
+				Events.CallRemote("PickUpToolGun", char:GetPlayer(), asset, weapon, char)
 			end)
 
 			item:Subscribe("Drop", function(weapon, char)
-				Events.CallRemote("DropToolGun_" .. asset, char:GetPlayer(), weapon, char)
+				Events.CallRemote("DropToolGun", char:GetPlayer(), asset, weapon, char)
 			end)
 		end