glow

src/App.js

@@ -11,6 +11,9 @@ import touchIcon from "./touch.png";
 import model from "./model-stride16.json";
 import moment from "moment";
 import "moment/locale/zh-cn";
+import images from "./images/coupon/image-helper";
+import Product from "./components/product";
+import "./glow.scss";
 
 moment.locale("zh-cn");
 const videoWidth = 600;
@@ -33,8 +36,16 @@ const App = () => {
   const [minutes, setMinutes] = useState(0);
   const [seconds, setSeconds] = useState(0);
   const shop = shops[shopIndex];
+  const {
+    categories,
+    categoryIconMap,
+    categoryProductsMap,
+    categoryIcon1Map,
+  } = shop;
   const [itemData, setItem] = useState(null);
   const [resetTimer, setResetTimer] = useState(null);
+  const [showMenu, setShowMenu] = useState(false);
+  const [currentTab, setCurrentTab] = useState(null);
 
   useEffect(() => {
     if (!posenetModel) {
@@ -75,7 +86,7 @@ const App = () => {
     }
   }, [video]);
 
-  const initWall = () => {
+  const initWall = async () => {
     const { items, imgWidth, imgHeight } = shop;
     const wall = new Wall({
       items,
@@ -93,7 +104,7 @@ const App = () => {
 
   useEffect(() => {
     if (seconds) {
-      if (posenetModel && video && !item)
+      if (posenetModel && video && !item && !showMenu)
         posenetModel
           .estimatePoses(video, {
             flipHorizontal: true,
@@ -119,7 +130,7 @@ const App = () => {
     if (wall && sphere) {
       wall.attachSphere(sphere);
     }
-  }, [wall]);
+  }, [wall, sphere]);
 
   useEffect(() => {
     if (!sphere) {
@@ -131,7 +142,10 @@ const App = () => {
         width,
       });
       setSphere(sphere);
-      initWall();
+    } else {
+      initWall().then((wall) => {
+        wall.attachSphere(sphere);
+      });
     }
   }, [sphere]);
 
@@ -153,11 +167,13 @@ const App = () => {
     item = null;
     setItem(item);
     sphere.displacement = displacement;
+    if (showMenu) setShowMenu(false);
+    setCurrentTab(null);
   };
 
   const startTiming = () => {
     if (resetTimer) clearInterval(resetTimer);
-    setResetTimer(setInterval(unFocus, 60 * 10 * 1000));
+    setResetTimer(setInterval(unFocus, 60 * 1000));
   };
   // useEffect(() => {
   //   if (minutes > 0) {
@@ -196,12 +212,29 @@ const App = () => {
         </div>
       </div>
       <video id="video"></video>
-      {list.map(([key, el, i]) => (
+      {list.map(([key, el]) => (
         <div
           className="block-wrapper"
-          key={`${key}_${i}`}
+          key={key}
           style={{ ...el.style, backgroundImage: "none" }}
         >
+          <div
+            className={
+              "wrapper" +
+              (Number(key) % 60 === 0
+                ? " AchievementIconWrapper LegendaryAchievement"
+                : "")
+            }
+          >
+            {Number(key) % 60 === 0 && (
+              <div className="AchievementIconGlowContainerRoot">
+                <div className="AchievementIconGlowContainer">
+                  <div className="AchievementIconGlow"></div>
+                </div>
+              </div>
+            )}
+            {Number(key) % 60 === 0 && <div className="fakeIcon"></div>}
+          </div>
           <div
             className="block"
             style={{ backgroundImage: el.style.backgroundImage }}
@@ -230,9 +263,78 @@ const App = () => {
           className={"mist" + (itemData ? "" : " inactive")}
           style={sphere.style}
         >
-          <div className={"ball" + (!itemData ? " small" : "")}></div>
+          {!showMenu && (
+            <div className={"ball" + (!itemData ? " small" : "")}></div>
+          )}
           {itemData && <Shop data={itemData} unFocus={unFocus}></Shop>}
-          {!itemData && <img className="touch-icon" src={touchIcon}></img>}
+          {!itemData && !showMenu && (
+            <img className="touch-icon" src={touchIcon}></img>
+          )}
+        </div>
+      )}
+      {(itemData || showMenu) && (
+        <div className={"sideBar" + (itemData ? " open" : " close")}>
+          <div
+            className="click-area"
+            onClick={() => {
+              if (itemData) {
+                setShowMenu(true);
+                setItem(null);
+              } else {
+                unFocus();
+              }
+            }}
+          ></div>
+        </div>
+      )}
+      {showMenu && (
+        <div className="menu row">
+          <div className="side">
+            <div className="cats col">
+              {[
+                { icon: images["all"], title: "全部商品", name: null },
+                ...categories.map((cat) => ({
+                  icon: categoryIconMap[cat],
+                  title: cat + "品类",
+                  name: cat,
+                })),
+              ].map((tab) => (
+                <div
+                  key={tab.name}
+                  className={
+                    "cat row" + (currentTab === tab.name ? " active" : "")
+                  }
+                  onClick={() => setCurrentTab(tab.name)}
+                >
+                  <img src={tab.icon}></img>
+                  <div> {tab.title}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="main">
+            {categories
+              .filter((cat) =>
+                currentTab === null ? true : cat === currentTab
+              )
+              .map((name) => {
+                const products = categoryProductsMap[name];
+                const icon = categoryIcon1Map[name];
+                return (
+                  <div className="cat">
+                    <div className="cat-name">{name}</div>
+                    {products.map((name) => (
+                      <Product
+                        url={images[name]}
+                        icon={icon}
+                        name={name}
+                        meta={"abcd"}
+                      ></Product>
+                    ))}
+                  </div>
+                );
+              })}
+          </div>
         </div>
       )}
     </div>

src/App.scss

@@ -12,6 +12,124 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  .menu {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    .side {
+      flex: 0 0 290px;
+      padding: 450px 40px 0 35px;
+      .cats {
+        width: 216px;
+        background: rgba(0, 0, 0, 0.8);
+        border-radius: 10px;
+        padding: 12px;
+        .cat {
+          height: 70px;
+          line-height: 70px;
+          vertical-align: middle;
+          font-size: 18px;
+          font-family: SourceHanSansCN, SourceHanSansCN-Bold;
+          font-weight: 700;
+          color: #fff;
+          &.active {
+            background: #797ae0;
+            border-radius: 6px;
+          }
+          img {
+            width: 20px;
+            height: 20px;
+            margin: auto 37px auto 25px;
+          }
+        }
+      }
+    }
+    .main {
+      flex: 0 0 709px;
+      height: 100vh;
+      overflow-y: scroll;
+      padding-top: 400px;
+      text-align: left;
+      .cat {
+        .cat-name {
+          margin-bottom: 12px;
+          font-size: 36px;
+          font-family: FZLTCHK;
+          text-align: left;
+          color: #fff;
+          line-height: 41px;
+          text-shadow: #3e3a39 0 0 10px;
+        }
+        .prod {
+          margin-right: 16px;
+          margin-bottom: 24px;
+        }
+      }
+      .cat + .cat {
+        margin-top: 56px;
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    &::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 700px;
+      z-index: -1;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 700px;
+      z-index: -1;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
+    }
+  }
+  .sideBar {
+    @keyframes sideBarEnter {
+      from {
+        right: -60px;
+      }
+      to {
+        right: 0;
+      }
+    }
+    animation: 0.25s sideBarEnter ease-in;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 80px;
+    height: 100vh;
+    z-index: 100;
+    background-size: cover;
+    background-position: center;
+    &.open {
+      background-image: url(./open.png);
+    }
+    &.close {
+      background-image: url(./close.png);
+    }
+    .click-area {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      margin: auto;
+      width: 60px;
+      height: 60px;
+    }
+  }
   .header {
     position: absolute;
     top: 44px;
@@ -67,10 +185,8 @@
   }
   .block-wrapper {
     position: absolute;
-    // border: 1px solid rgb(224, 224, 224);
     opacity: 1;
-    &::before {
-      content: "";
+    .wrapper {
       position: absolute;
       top: -5px;
       left: -5px;

src/components/product.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import "./product.scss";
+const Product = ({ url, name, meta, icon }) => (
+  <div className="prod col">
+    <img src={url} className="avatar" />
+    <div className="row name">{name}</div>
+    <div className="row sub">
+      <div className="meta">{meta}</div>
+      <div className="fill"></div>
+      <img className="icon" src={icon}></img>
+    </div>
+  </div>
+);
+export default Product;

src/components/product.scss

@@ -0,0 +1,34 @@
+.prod {
+  display: inline-block;
+  width: 200px;
+  height: 259px;
+  background: #ffffff;
+  border-radius: 6px;
+  padding: 10px;
+  .avatar {
+    width: 180px;
+    height: 180px;
+  }
+  .name {
+    font-size: 18px;
+    font-family: FZLTHK;
+    text-align: left;
+    color: #3e3a39;
+    line-height: 21px;
+    margin-top: 19px;
+  }
+  .sub {
+    font-size: 24px;
+    font-family: ChaletComprime, ChaletComprime-CologneSixty;
+    font-weight: CologneSixty;
+    text-align: left;
+    color: #7f7673;
+    line-height: 24px;
+    vertical-align: middle;
+  }
+  .icon {
+    margin: auto;
+    width: 20px;
+    height: 20px;
+  }
+}

src/components/shop.scss

@@ -5,16 +5,6 @@
   box-sizing: border-box;
   padding: 50px;
   padding-top: 203px;
-  .row {
-    display: flex;
-  }
-  .col {
-    display: flex;
-    flex-direction: column;
-  }
-  .fill {
-    flex: 1;
-  }
   @keyframes fadeIn {
     from {
       opacity: 0;

src/data/Shops.js

@@ -12,6 +12,24 @@ const shops = [
       母婴: coupon["c3"],
       生鲜: coupon["c4"],
     },
+    categoryIconMap: {
+      零食: coupon["snack"],
+      饮料: coupon["drink"],
+      母婴: coupon["nurse"],
+      生鲜: coupon["fresh"],
+    },
+    categoryIcon1Map: {
+      零食: coupon["snack1"],
+      饮料: coupon["drink1"],
+      母婴: coupon["nurse1"],
+      生鲜: coupon["fresh1"],
+    },
+    categoryProductsMap: {
+      零食: ["零食1", "零食2", "零食3", "零食4", "零食5", "零食6"],
+      饮料: ["饮料1", "饮料2", "饮料3", "饮料4", "饮料5", "饮料6"],
+      母婴: ["母婴1", "母婴2", "母婴3", "母婴4", "母婴5", "母婴6"],
+      生鲜: ["生鲜1", "生鲜2", "生鲜3", "生鲜4", "生鲜5", "生鲜6"],
+    },
     items: [
       {
         id: 1,

src/index.css

@@ -15,3 +15,13 @@ code {
   font-family: "ChaletComprime";
   src: url("./Chalet\ Comprime\ Cologne\ Sixty.ttf") format("truetype");
 }
+.row {
+  display: flex;
+}
+.col {
+  display: flex;
+  flex-direction: column;
+}
+.fill {
+  flex: 1;
+}

src/models/Wall.js

@@ -4,7 +4,7 @@ import Stats from "stats.js";
 
 const stats = new Stats();
 stats.showPanel(0);
-document.body.appendChild(stats.dom);
+// document.body.appendChild(stats.dom);
 
 export const easeIn = BezierEasing(0.5, 0.16, 0.74, 0.38);
 export const easeOut = BezierEasing(0, 0, 0.58, 1);
@@ -50,7 +50,6 @@ class El {
   }
   update() {}
 }
-
 class Row {
   q = [];
   est;
@@ -183,7 +182,8 @@ export default class Wall {
   }
   getNext() {
     const { items } = this;
-    const next = items[this.index];
+    const index = Math.floor(Math.random() * items.length);
+    const next = items[index];
     this.index++;
     if (this.index === items.length) this.index = 0;
     return next;