feat(story): add patterns

readme.md

@@ -3,7 +3,6 @@
 ColorFu is where people can use words, colors, patterns and images to make unique wallpapers to express their feelings or ideas.
 
 ![home](https://i.loli.net/2021/11/21/cbs5Xv7VqWFdy8l.png)
-![example](https://i.loli.net/2021/11/21/rThjJi82VIsWZMa.png)
 
 ## Why is it
 
@@ -15,6 +14,8 @@ This is a great example that people use words and colors to express their feelin
 
 What it if you can use more colors and more words to make wallpapers to express more feelings ? In that way, not only can you make your wallpapers beautiful, but also make them meaningful.
 
+![example](https://i.loli.net/2021/11/21/rThjJi82VIsWZMa.png)
+
 ![good mode](https://i.loli.net/2021/11/08/kdPIX5V2WxhoGeR.png)
 
 ![be your self](https://i.loli.net/2021/11/08/hOeS96JyQ72fZ4V.png)

src/components/PatternCard.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="pattern-card-container">
+    <canvas ref="canvas" class="pattern" />
+    <span>{{ name }}</span>
+  </div>
+</template>
+
+<script>
+import { createPattern } from "../utils/pattern";
+import { createContext } from "../utils/canvas";
+
+export default {
+  props: { options: Object, size: { type: Number, default: 300 }, name: String },
+  mounted() {
+    const canvas = this.$refs.canvas;
+    const context = createContext(canvas, this.size, this.size);
+    const { color } = this.options;
+    context.fillStyle = createPattern(context, { ...this.options, backgroundColor: color });
+    context.fillRect(0, 0, this.size, this.size);
+  },
+};
+</script>
+
+<style>
+.pattern-card-container {
+  cursor: pointer;
+}
+
+.pattern-card-container .pattern {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  transition: box-shadow 0.3s;
+}
+
+.pattern-card-container .pattern:hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>

src/data/pattern.js

@@ -0,0 +1,63 @@
+export const patterns = [
+  {
+    label: "Line",
+    textColor: "#FFDC34",
+    options: {
+      type: "line",
+      color: "#4DD599",
+      mode: "pattern",
+      foregroundColor: "#00918E",
+      lineWidth: 189,
+      width: 204,
+      rotation: -22,
+    },
+  },
+  {
+    label: "Wave",
+    textColor: "#372923",
+    options: {
+      type: "wave",
+      color: "#e97e18",
+      mode: "pattern",
+      foregroundColor: "#efd496",
+      lineWidth: 30,
+      width: 130,
+      height: 130,
+      arcRadius: 30,
+      rotation: -30,
+    },
+  },
+  {
+    label: "Dot",
+    textColor: "#583d33",
+    options: {
+      type: "dot",
+      color: "#9e3b37",
+      mode: "pattern",
+      fillColor: "#d87265",
+      size: 80,
+      strokeColor: "#d87265",
+      lineWidth: 1,
+      width: 150,
+      height: 150,
+      rotation: 45,
+    },
+  },
+  {
+    label: "Square",
+    textColor: "#FFD460",
+    options: {
+      type: "square",
+      color: "#2D4059",
+      mode: "pattern",
+      fillColor: "#ea5455",
+      size: 50,
+      strokeColor: "#ea5455",
+      lineWidth: 0,
+      width: 100,
+      height: 100,
+      rotation: 0,
+      staggered: true,
+    },
+  },
+];

src/pages/Story.vue

@@ -19,7 +19,7 @@
           them meaningful.
         </p>
         <p>
-          There are some colors and words provided by ColorFu, and you can even extract colors from
+          There are some colors, patterns and words provided by ColorFu, and you can even extract colors from
           an image. Find the stories behind them and use them to make your own stories.
         </p>
         <p>
@@ -118,16 +118,28 @@
           >Make Wallpaper</el-button
         >
       </div>
+      <div v-if="selectedValue === 'pattern'" class="story-pattern-container">
+        <div
+          v-for="item in patterns"
+          :key="item.label"
+          class="story-pattern-item"
+          @click="() => handleClickPattern(item.label, item.textColor, item.options)"
+        >
+          <pattern-card :options="item.options" :size="patternSize" :name="item.label" />
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import ImageColorPicker from "../components/ImageColorPicker.vue";
+import PatternCard from "../components/PatternCard.vue";
 import emojiByGroup from "../data/emoji-by-group.json";
 import faces from "../data/emoticons.json";
 import { colorStore } from "../data/color";
+import { patterns } from "../data/pattern";
 import { gotoEditor } from "../utils/gotoEditor";
-import ImageColorPicker from "../components/ImageColorPicker.vue";
 
 const emojis = Object.values(emojiByGroup).flat();
 
@@ -140,24 +152,31 @@ export default {
     return {
       types: [
         { value: "color", label: "Color 🌈" },
+        {
+          value: "pattern",
+          label: "Pattern 👨‍👩‍👧‍👧",
+        },
         { value: "emoji", label: "Emoji 😆" },
         { value: "emoticon", label: "w(ﾟДﾟ)w" },
       ],
       modes: [
         { value: "store", label: "From Color Store 🏳️‍🌈" },
         { value: "image", label: "From Image 🏞️" },
       ],
-      selectedValue: "color",
+      selectedValue: "pattern",
       selectedMode: "store",
       emojis,
       faces,
+      patterns,
       colorStore,
       cardSize: 200,
       selectedImageColors: [],
+      patternSize: screen.width / 2,
     };
   },
   components: {
     ImageColorPicker,
+    PatternCard,
   },
   methods: {
     handleClickEmoticon(emoticon) {
@@ -285,6 +304,23 @@ export default {
       }
       gotoEditor(this.$router, options);
     },
+    handleClickPattern(name, color, background) {
+      const options = {
+        text: {
+          content: name,
+          fontSize: 200,
+          fontFamily: "Luckiest Guy",
+          fontURL: "/fonts/luckiest_guy.ea045d18.woff2",
+          type: "none",
+          color,
+          mode: "autoFit",
+          padding: 0,
+          dy: offset(name),
+        },
+        background,
+      };
+      gotoEditor(this.$router, options);
+    },
   },
 };
 </script>
@@ -400,4 +436,13 @@ export default {
 .story-body {
   margin-bottom: 2.5em;
 }
+
+.story-pattern-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.story-pattern-item {
+  margin: 12px;
+}
 </style>