refactor: remove image to simplify demo

Author: gera2ld

src/assets/gaara.jpg

@@ -1,12 +1,3 @@
 .wrap {
   height: 100vh;
-  background: linear-gradient(to right,#ccf 0%,#bbf 100%);
-}
-
-.panel {
-  padding-top: 2rem;
-  padding-left: 6rem;
-  label {
-    display: block;
-  }
 }

src/pages/index/components/app/style.module.css

@@ -1,50 +1,57 @@
 import React, { useState, useRef, useEffect } from 'react';
-import imageUrl from '#/assets/gaara.jpg';
-import MaskedImage from '../masked-image';
 import Result from '../result';
 import styles from './style.module.css';
 
+const messages = [
+  'hello, world',
+  'Every day is Friday',
+  'Today, I don\'t feel like doing anything',
+  'I just wanna lay in my bed',
+  'Don\'t feel like picking up my phone',
+  'So leave a message at the tone',
+  '\'Cause today, I swear, I\'m not doing anything',
+];
+const getMessage = () => messages[Math.floor(Math.random() * messages.length)];
+
 const data = [
   {
-    text: '这是一只眼睛',
-    bbox: [450, 350, 600, 450],
+    text: getMessage(),
+    bbox: [0.3, 0.3, 0.4, 0.4],
   },
   {
-    text: '这是另一只眼睛',
-    bbox: [680, 400, 830, 500],
+    text: getMessage(),
+    bbox: [0.4, 0.4, 0.6, 0.6],
   },
   {
-    text: '爱',
-    bbox: [720, 300, 810, 400],
+    text: getMessage(),
+    bbox: [0.3, 0.5, 0.4, 0.6],
   },
   {
-    text: '这是一只大手',
-    bbox: [280, 1170, 820, 1570],
+    text: getMessage(),
+    bbox: [0.2, 0.6, 0.8, 0.8],
   },
 ];
 
 export default function Playground() {
   const [wrapProps, setWrapProps] = useState(null);
-  const [imageProps, setImageProps] = useState(null);
   const ref = useRef();
 
   useEffect(() => {
     const rect = ref.current.getBoundingClientRect();
-    setWrapProps(rect);
+    setWrapProps({
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      scale: rect.width / 750,
+    });
   }, []);
 
   return (
     <div className={styles.wrap} ref={ref}>
-      <MaskedImage
-        url={imageUrl}
-        wrapProps={wrapProps}
-        imageProps={imageProps}
-        onLoad={setImageProps}
-      />
-      {imageProps && (
+      {wrapProps && (
         <Result
           wrapProps={wrapProps}
-          imageProps={imageProps}
           data={data}
         />
       )}

src/pages/index/components/masked-image/index.js

@@ -5,6 +5,7 @@
   top: 0;
   left: 0;
   overflow: auto;
+  background: #ccf;
 }
 
 @media (min-width: 450px) {

src/pages/index/components/masked-image/style.module.css

@@ -8,7 +8,7 @@ export default React.forwardRef((props, ref) => {
   const [showText, setShowText] = useState(false);
   const {
     data: {
-      text, style, align, animated,
+      text, style, animated,
     },
   } = props;
 
@@ -35,12 +35,8 @@ export default React.forwardRef((props, ref) => {
   }, [animated]);
 
   if (!text) return null;
-  const className = [
-    styles.wrap,
-    styles[`align-${align || 'left'}`],
-  ].join(' ');
   return (
-    <div className={className} style={style} ref={ref}>
+    <div className={styles.wrap} style={style} ref={ref}>
       <div className={styles.bar} style={{ transform: `scaleX(${scale})` }} />
       <div className={`${styles.text} ${showText ? '' : styles.hidden}`}>{text}</div>
     </div>

src/pages/index/components/playground/index.js

@@ -8,20 +8,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-}
-
-.align-left {
-  .bar {
-    transform-origin: left center;
-    background: linear-gradient(to right, rgba(0,94,240,.6) 0%, rgba(107,196,255,.6) 100%);
-  }
-}
-
-.align-right {
-  .bar {
-    transform-origin: right center;
-    background: linear-gradient(to left, rgba(0,94,240,.6) 0%, rgba(107,196,255,.6) 100%);
-  }
+  transform-origin: left center;
+  background: linear-gradient(to right, rgba(0,94,240,.6) 0%, rgba(107,196,255,.6) 100%);
 }
 
 .text {