From b7d337f19b0ac11d8215dea5b71c75b8d1b63c81 Mon Sep 17 00:00:00 2001
From: ducdat0507 <62660527+ducdat0507@users.noreply.github.com>
Date: Wed, 21 Dec 2022 13:40:54 +0700
Subject: [PATCH] Some factory redesigning

---
 src/data/layers/factory.tsx        | 133 ++++++++++++++++++-----------
 src/data/layers/styles/factory.css |  76 ++++++++++++-----
 2 files changed, 136 insertions(+), 73 deletions(-)

diff --git a/src/data/layers/factory.tsx b/src/data/layers/factory.tsx
index ff66c46..0f0a3d2 100644
--- a/src/data/layers/factory.tsx
+++ b/src/data/layers/factory.tsx
@@ -200,7 +200,10 @@ const factory = createLayer(id, () => {
         y: 0
     });
     const isMouseHoverShown = ref(false);
+
+    const isComponentHover = ref(false);
     const whatIsHovered = ref<FactoryCompNames | "">("");
+
     const compSelected = ref<FactoryCompNames>("cursor");
     const components: Persistent<{ [key: string]: FactoryComponent }> = persistent({});
     const compInternalData: Record<string, FactoryInternal> = {};
@@ -610,15 +613,20 @@ const factory = createLayer(id, () => {
         isMouseHoverShown.value = false;
     }
 
-    function goBack() {
-        player.tabs.splice(0, Infinity, "main");
-    }
-    function onComponentHover(name: FactoryCompNames | "") {
+    function onComponentMouseEnter(name: FactoryCompNames | "") {
         whatIsHovered.value = name;
+        isComponentHover.value = true;
+    }
+    function onComponentMouseLeave() {
+        isComponentHover.value = false;
     }
     function onCompClick(name: FactoryCompNames) {
         compSelected.value = name;
     }
+
+    function goBack() {
+        player.tabs.splice(0, Infinity, "main");
+    }
     return {
         name,
         day,
@@ -640,54 +648,77 @@ const factory = createLayer(id, () => {
                     onPointerleave={onFactoryMouseLeave}
                     onContextmenu={(e: MouseEvent) => e.preventDefault()}
                 />
-                <div class="info-container">
-                    {compHovered.value !== undefined ? (
-                        <>
-                            <b>{FACTORY_COMPONENTS[compHovered.value.type].name}</b>
-                            <br />
-                            {FACTORY_COMPONENTS[compHovered.value.type].description}
-                            <br />
-                            {compHovered.value.type !== "conveyor" ? (
-                                <>
-                                    Stock:{" "}
-                                    {Object.entries({
-                                        ...compHovered.value.productionStock,
-                                        ...compHovered.value.consumptionStock
-                                    }).map(i => {
-                                        return `${i[0]}: ${i[1]}/${
-                                            FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
-                                                .consumptionStock[i[0]] ??
-                                            FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
-                                                .productionStock[i[0]]
-                                        }`;
-                                    })}
-                                </>
-                            ) : undefined}
-                        </>
-                    ) : undefined}
-                </div>
-                <div class="factory-container">
-                    <div style="line-height: 2.5em; min-height: 2.5em">
-                        {whatIsHovered.value === ""
-                            ? undefined
-                            : FACTORY_COMPONENTS[whatIsHovered.value].description}
+
+                {compHovered.value !== undefined ? (
+                    <div
+                        class="info-container"
+                        style={{
+                            left: mouseCoords.x + "px",
+                            top: mouseCoords.y + "px"
+                        }}
+                    >
+                        <h3>{FACTORY_COMPONENTS[compHovered.value.type].name}</h3>
+                        <br />
+                        {FACTORY_COMPONENTS[compHovered.value.type].description}
+                        <br />
+                        {compHovered.value.type !== "conveyor" ? (
+                            <>
+                                Stock:{" "}
+                                {Object.entries({
+                                    ...compHovered.value.productionStock,
+                                    ...compHovered.value.consumptionStock
+                                }).map(i => {
+                                    return `${i[0]}: ${i[1]}/${
+                                        FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
+                                            .consumptionStock[i[0]] ??
+                                        FACTORY_COMPONENTS[compHovered.value?.type ?? "cursor"]
+                                            .productionStock[i[0]]
+                                    }`;
+                                })}
+                            </>
+                        ) : undefined}
                     </div>
-                    <div class="comps">
-                        <div>
-                            {Object.entries(FACTORY_COMPONENTS).map(value => {
-                                const key = value[0] as FactoryCompNames;
-                                const item = value[1];
-                                return (
-                                    <img
-                                        src={item.imageSrc}
-                                        class={{ selected: compSelected.value === key }}
-                                        onMouseenter={() => onComponentHover(key)}
-                                        onMouseleave={() => onComponentHover("")}
-                                        onClick={() => onCompClick(key)}
-                                    ></img>
-                                );
-                            })}
-                        </div>
+                ) : undefined}
+
+                <div class="factory-container">
+                    <div
+                        class={{
+                            "comp-info": true,
+                            active: isComponentHover.value
+                        }}
+                        style={{
+                            top:
+                                Math.max(
+                                    Object.keys(FACTORY_COMPONENTS).indexOf(whatIsHovered.value),
+                                    0
+                                ) *
+                                    50 +
+                                10 +
+                                "px"
+                        }}
+                    >
+                        {whatIsHovered.value === "" ? undefined : (
+                            <>
+                                <h3>{FACTORY_COMPONENTS[whatIsHovered.value].name}</h3>
+                                <br />
+                                {FACTORY_COMPONENTS[whatIsHovered.value].description}
+                            </>
+                        )}
+                    </div>
+                    <div class="comp-list">
+                        {Object.entries(FACTORY_COMPONENTS).map(value => {
+                            const key = value[0] as FactoryCompNames;
+                            const item = value[1];
+                            return (
+                                <img
+                                    src={item.imageSrc}
+                                    class={{ selected: compSelected.value === key }}
+                                    onMouseenter={() => onComponentMouseEnter(key)}
+                                    onMouseleave={() => onComponentMouseLeave()}
+                                    onClick={() => onCompClick(key)}
+                                ></img>
+                            );
+                        })}
                     </div>
                 </div>
             </div>
diff --git a/src/data/layers/styles/factory.css b/src/data/layers/styles/factory.css
index 0e6471a..b06534a 100644
--- a/src/data/layers/styles/factory.css
+++ b/src/data/layers/styles/factory.css
@@ -17,38 +17,70 @@
 
 .info-container {
     position: absolute;
-    height: 100px;
-    top: 0;
-    left: 10%;
-    right: 10%;
-    transition: height ease 1s;
-    background: var(--raised-background);
-    border-radius: 0 0 var(--border-radius) var(--border-radius);
-    box-shadow: 0 2px 10px black;
-    margin: 0;
-    padding: 0;
+    max-width: 300px;
+
+    margin: 20px 0 0 10px;
+    padding: 5px 10px;
+
+    background: var(--background);
+    border-radius: var(--border-radius);
+    box-shadow: 0 1px 5px black;
+
+    text-align: left;
+    font-size: smaller;
+
+    pointer-events: none;
+    transition: height .3s;
 }
 .factory-container {
     position: absolute;
 
-    bottom: -5px;
-    height: 100px;
-    left: 10%;
-    right: 10%;
-
-    background: var(--raised-background);
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
-    box-shadow: 0 2px 10px black;
+    top: calc(5% + 30px);
+    bottom: 5%;
+    left: 0%;
+    width: 70px;
 
     margin: 0;
     padding: 0;
 }
 
-.comps > div > img {
+.comp-info {
+    position: absolute;
+    right: 10px;
+    padding: 5px 10px;
+
+    width: max-content;
+    max-width: 300px;
+
+    background: var(--background);
+    border-radius: var(--border-radius);
+    box-shadow: 0 1px 5px #0007;
+
+    text-align: left;
+    font-size: smaller;
+
+    pointer-events: none;
+    transition: transform 0.3s;
+}
+.comp-info.active {
+    transform: translateX(calc(20px + 100%));
+}
+
+.comp-list {
+    position: relative;
+    height: 100%;
+    padding: 10px;
+
+    background: var(--raised-background);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    box-shadow: 0 2px 10px black;
+}
+.comp-list > img {
+    display: block;
     width: 50px;
     height: 50px;
 }
-.comps > div > img.selected {
-    transform: translateY(-5px);
-    filter: drop-shadow(0 5px 5px #0007);
+.comp-list > img.selected {
+    transform: translate(-5px, -5px);
+    filter: drop-shadow(2px 2px 0 var(--foreground)) drop-shadow(5px 5px 5px #0007);
 }
\ No newline at end of file