Merge branch 'main' of https://github.com/orion3dgames/t5c

src/client/Controllers/AssetsController.ts

@@ -26,6 +26,7 @@ import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";
 import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
 import { RenderTargetTexture } from "@babylonjs/core/Materials/Textures/renderTargetTexture";
 import { PBRMaterial } from "@babylonjs/core/Materials/PBR/pbrMaterial";
+import { VatController } from "./VatController";
 
 type AssetEntry = {
     name: string;
@@ -89,7 +90,13 @@ export class AssetsController {
             for (let key in items) {
                 let el = items[key];
                 this.assetDatabase.push({ name: el.icon, filename: "icons/" + el.icon + ".png", extension: "png", type: "image" });
-                this.assetDatabase.push({ name: "ITEM_" + el.key, filename: "items/" + el.key + ".glb", extension: "glb", type: "mesh", instantiate: true });
+                this.assetDatabase.push({
+                    name: "ITEM_" + el.key,
+                    filename: "items/" + el.model + ".glb",
+                    extension: "glb",
+                    type: "mesh",
+                    instantiate: true,
+                });
             }
         }
 
@@ -394,12 +401,20 @@ export class AssetsController {
         let modelToLoadKey = "ROOT_ITEM_" + itemKey;
         if (!this._game._loadedAssets[modelToLoadKey]) {
             // get raw mesh
-            let rawMesh = this._game._loadedAssets["ITEM_" + itemKey].meshes[0];
+            let rawMesh = this._game._loadedAssets["ITEM_" + itemKey].meshes[0].clone("CLONE");
             // create a merged mesh
             let itemMesh = mergeMesh(rawMesh, "raw_" + itemKey);
             if (itemMesh) {
+                //
+                let item = this._game.getGameData("item", itemKey);
+
+                if (item.material) {
+                    VatController.loadItemMaterial(this._game.scene, itemMesh, item.material);
+                }
+
                 // hide it
-                itemMesh.setEnabled(false);
+                itemMesh.setEnabled(true);
+
                 // save it for future usage
                 this._game._loadedAssets[modelToLoadKey] = itemMesh;
             }

src/client/Controllers/PlayerInput.ts

@@ -176,6 +176,9 @@ export class PlayerInput {
                     if (kbInfo.event.code === "NumpadEnter") {
                         this._game.sendMessage(ServerMsg.DEBUG_BOTS);
                     }
+                    if (kbInfo.event.code === "Home") {
+                        this._ui._MainMenu.takeScreenshot();
+                    }
                     if (kbInfo.event.code === "KeyN") {
                         this._gameScene._navMeshDebug.isVisible = !this._gameScene._navMeshDebug.isVisible;
                     }

src/client/Controllers/UI/InventoryDropdown.ts

@@ -27,7 +27,6 @@ export class InventoryDropdown {
 
     public hideDropdown() {
         if (this.dropdown) {
-            this._selected.background = "rgba(255,255,255,.1)";
             this.dropdown.dispose();
         }
     }
@@ -38,7 +37,6 @@ export class InventoryDropdown {
         }
 
         this._selected = el;
-        this._selected.background = this._bgColor;
 
         const rect = new StackPanel("InventoryDropdown");
         rect.top = el._currentMeasure.top + el.heightInPixels;
@@ -121,6 +119,7 @@ export class InventoryDropdown {
             button.onPointerDownObservable.add(() => {
                 action.click();
                 this.hideDropdown();
+                this._UI.panelInventory.refresh();
             });
         });
     }

src/client/Controllers/UI/MainMenu.ts

@@ -48,6 +48,22 @@ export class MainMenu {
         this._createDropdownMenu();
     }
 
+    takeScreenshot() {
+        this._UI._Watermark._bloc.isVisible = true;
+        Tools.CreateScreenshot(
+            this._engine,
+            this._currentPlayer.cameraController.camera,
+            { width: 2560, height: 1440, precision: 0.9 },
+            () => {
+                this._UI._Watermark._bloc.isVisible = false;
+                console.log("Screnshot taken!");
+            },
+            "image/jpeg",
+            true,
+            0.9
+        );
+    }
+
     _createDropdownMenu() {
         let dropdownOptions = {
             menuTitle: "O",
@@ -61,19 +77,7 @@ export class MainMenu {
                 screenshot: {
                     menuTitle: "Take a picture",
                     click: () => {
-                        this._UI._Watermark._bloc.isVisible = true;
-                        Tools.CreateScreenshot(
-                            this._engine,
-                            this._currentPlayer.cameraController.camera,
-                            { width: 2560, height: 1440, precision: 0.9 },
-                            () => {
-                                this._UI._Watermark._bloc.isVisible = false;
-                                console.log("Screnshot taken!");
-                            },
-                            "image/jpeg",
-                            true,
-                            0.9
-                        );
+                        this.takeScreenshot();
                     },
                 },
                 quit: {

src/client/Controllers/UI/Panels/Panel_Character.ts

@@ -6,6 +6,7 @@ import { applyTheme, createButton } from "../Theme";
 import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
 import { Image } from "@babylonjs/gui/2D/controls/image";
 import { ServerMsg } from "../../../../shared/types";
+import { Rarity } from "../../../../shared/Class/Rarity";
 
 export class Panel_Character extends Panel {
     // inventory tab
@@ -43,6 +44,10 @@ export class Panel_Character extends Panel {
                 name: "Wisdom",
                 button: true,
             },
+            ac: {
+                name: "AC",
+                button: false,
+            },
             points: {
                 name: "Available Points",
             },
@@ -68,11 +73,11 @@ export class Panel_Character extends Panel {
             },
             health: {
                 label: "Health",
-                value: this._currentPlayer.health,
+                value: this._currentPlayer.health + "/" + this._currentPlayer.maxHealth,
             },
             mana: {
                 label: "Mana",
-                value: this._currentPlayer.mana,
+                value: this._currentPlayer.mana + "/" + this._currentPlayer.maxMana,
             },
         };
 
@@ -209,7 +214,7 @@ export class Panel_Character extends Panel {
             valueText.left = "-5px";
             valueText.fontSize = "14px;";
             valueText.resizeToFit = true;
-            valueText.text = this._currentPlayer[key] ?? "ERROR";
+            valueText.text = line.value;
             valueText.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
             valueText.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
             valueText.textVerticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
@@ -315,8 +320,8 @@ export class Panel_Character extends Panel {
             panelRectangle.left = leftMargin;
             panelRectangle.width = iconWidth + "px";
             panelRectangle.height = iconWidth + "px";
-            panelRectangle.thickness = 1;
-            panelRectangle.color = "gray";
+            panelRectangle.thickness = 2;
+            panelRectangle.color = "black";
             panel.addControl(panelRectangle);
 
             var panelText = new TextBlock("slot_text_" + i);
@@ -343,6 +348,8 @@ export class Panel_Character extends Panel {
         let slotImage = slotPanel.getChildByName("slot_image_" + slot_id) as Image;
         let item = this._game.getGameData("item", item_key);
 
+        console.log("slotPanelContentRefresh", type, slotPanel, data);
+
         // make sure to remove any exisiting events
         slotImage.source = "";
         slotPanel.onPointerClickObservable.clear();
@@ -351,6 +358,12 @@ export class Panel_Character extends Panel {
 
         // equip item
         if (type === "ADD") {
+            // color based on rarity
+            slotPanel.background = Rarity.getColor(item);
+            slotPanel.color = Rarity.getColor(item);
+            slotPanel.thickness = 2;
+
+            //
             var imageData = this._loadedAssets[item.icon];
             slotImage.source = imageData;
 
@@ -370,5 +383,10 @@ export class Panel_Character extends Panel {
                 this._UI._Tooltip.close();
             });
         }
+
+        if (type === "REMOVE") {
+            slotPanel.background = "transparent";
+            slotPanel.color = "#000000";
+        }
     }
 }

src/client/Controllers/UI/Panels/Panel_Inventory.ts

@@ -4,16 +4,15 @@ import { TextBlock } from "@babylonjs/gui/2D/controls/textBlock";
 import { Control } from "@babylonjs/gui/2D/controls/control";
 import { Grid } from "@babylonjs/gui/2D/controls/grid";
 import { Item, ServerMsg } from "../../../../shared/types";
+import { Rarity } from "../../../../shared/Class/Rarity";
 import { Panel } from "./Panel";
-import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
-import { createButton } from "../Theme";
-import { InventoryDropdown } from "../InventoryDropdown";
 
 export class Panel_Inventory extends Panel {
     // inventory tab
     private panel: Rectangle;
     private _inventoryGrid: Rectangle[] = [];
     private _goldUI: TextBlock;
+    private bgColor: string = "rgba(255,255,255,.1)";
 
     public sceneRendered = false;
 
@@ -135,16 +134,16 @@ export class Panel_Inventory extends Panel {
         for (let r = 0; r < inventorySpaceRows; r++) {
             for (let col = 0; col < inventorySpaceCols; col++) {
                 if (i < this._game.config.PLAYER_INVENTORY_SPACE) {
-                    let bgColor = "rgba(255,255,255,.1)";
                     const inventorySpace = new Rectangle("inventorySpace_" + i);
                     inventorySpace.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
                     inventorySpace.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
                     inventorySpace.top = 0.1;
                     inventorySpace.left = 0.1;
                     inventorySpace.width = 0.9;
                     inventorySpace.height = 0.9;
-                    inventorySpace.background = bgColor;
-                    inventorySpace.thickness = 0;
+                    inventorySpace.background = this.bgColor;
+                    inventorySpace.thickness = 2;
+                    inventorySpace.color = this.bgColor;
                     inventorySpace.cornerRadius = 0;
                     grid.addControl(inventorySpace, r, col);
 
@@ -169,26 +168,36 @@ export class Panel_Inventory extends Panel {
     ///////////////////////////////////////
     // INVENTORY PANEL
     public refresh() {
-        if (this._inventoryGrid.length < 1) {
-            return false;
-        }
-
         // if inventory is empty, make sure to clear all unessacary UI elements
         this._inventoryGrid.forEach((child) => {
             child.getDescendants().forEach((el) => {
                 el.dispose();
             });
             child.metadata = {};
+            child.background = this.bgColor;
+            child.color = this.bgColor;
             this._UI._Tooltip.close();
         });
 
-        ///////////////////////
-        // else show items
+        // if inventory is empty, do not do anything
+        if (this._inventoryGrid.length < 1) {
+            return false;
+        }
+
+        // show items
         this._currentPlayer.player_data.inventory.forEach((element) => {
             let index = element.i;
             let child = this._inventoryGrid[index];
             let item = this._game.getGameData("item", element.key) as Item;
 
+            //
+            let color = Rarity.getColor(item);
+            if (color) {
+                child.background = color;
+                child.thickness = 2;
+                child.color = color;
+            }
+
             // dispose
             child.getDescendants().forEach((el) => {
                 el.dispose();

src/client/Controllers/UI/Tooltip.ts

@@ -7,6 +7,8 @@ import { Scene } from "@babylonjs/core/scene";
 import { StackPanel } from "@babylonjs/gui/2D/controls/stackPanel";
 import { generatePanel } from "./Theme";
 import { GameController } from "../GameController";
+import { CalculationTypes } from "../../../shared/types";
+import { Rarity } from "../../../shared/Class/Rarity";
 
 export class Tooltip {
     private _playerUI;
@@ -151,14 +153,25 @@ export class Tooltip {
         this.tooltipValue.isVisible = true;
         this.tooltipValue.text = "Value: " + data.value;
 
+        //
         let stats = "";
-        for (let key in data.benefits) {
-            let benefit = data.benefits[key];
-            let title = benefit.key.charAt(0).toUpperCase() + benefit.key.slice(1);
-            stats += title + ": " + (benefit.type === 1 ? "+" : "-") + " " + benefit.amount + "\n";
+        for (let key in data.statModifiers) {
+            for (let line of data.statModifiers[key]) {
+                let title = key.toUpperCase() + ": ";
+                if (line.type === CalculationTypes.ADD) {
+                    stats += title + " + " + line.value + "\n";
+                } else if (line.type === CalculationTypes.MULTIPLY) {
+                    stats += title + " + " + line.value * 10 + "% \n";
+                }
+            }
         }
         stats = stats.slice(0, -1);
         this.tooltipStats.text = stats;
+        this.tooltipStats.isVisible = stats === "" ? false : true;
+
+        // color based on rarity
+        this.tooltipContainer.color = Rarity.getColor(data);
+        this.tooltipName.color = Rarity.getTooltipColor(data, 1);
     }
 
     private generateAbility(data) {

src/client/Controllers/UserInterface.ts

@@ -66,7 +66,7 @@ export class UserInterface {
     public _targetEntitySelectedBar: EntitySelectedBar;
     public _playerEntitySelectedBar: EntitySelectedBar;
     public _Tooltip: Tooltip;
-    private _MainMenu: MainMenu;
+    public _MainMenu: MainMenu;
     public _CastingBar: CastingBar;
     public _RessurectBox: RessurectBox;
     private _ExperienceBar: ExperienceBar;
@@ -234,7 +234,7 @@ export class UserInterface {
 
         // open inventory by default
         this.panelInventory.open();
-        this.panelHelp.open();
+        //this.panelHelp.open();
 
         // create tooltip
         this._Tooltip = new Tooltip(this, currentPlayer);