1

miyuesc · Dec 10, 2024 · c6b0e2b · c6b0e2b
1 parent 61f3cc6
commit c6b0e2b
Show file tree

Hide file tree

Showing 16 changed files with 390 additions and 0 deletions.
diff --git a/applications/app-led-simulator/README.md b/applications/app-led-simulator/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/applications/app-led-simulator/index.html b/applications/app-led-simulator/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/applications/app-led-simulator/package.json b/applications/app-led-simulator/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "app-led-simulator",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@miyue-mma/shared": "workspace:^"
+  },
+  "devDependencies": {
+    "vue-tsc": "^2.0.29"
+  }
+}
diff --git a/applications/app-led-simulator/public/vite.svg b/applications/app-led-simulator/public/vite.svg
diff --git a/applications/app-led-simulator/src/App.vue b/applications/app-led-simulator/src/App.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import LedSimulator from './components/LedSimulator.vue'
+import TextComp from './components/TextComp.vue'
+</script>
+
+<template>
+  <LedSimulator />
+
+  <TextComp style="margin-top: 100px">
+    <template #name>
+      <span>name111111</span>
+    </template>
+    <template #sex>
+      <span>sex2222</span>
+    </template>
+  </TextComp>
+</template>
diff --git a/applications/app-led-simulator/src/assets/vue.svg b/applications/app-led-simulator/src/assets/vue.svg
diff --git a/applications/app-led-simulator/src/components/LedSimulator.vue b/applications/app-led-simulator/src/components/LedSimulator.vue
@@ -0,0 +1,229 @@
+<!-- <script setup lang="ts"> -->
+<!-- /** -->
+<!-- * @desc StarAround -->
+<!-- * @author MiyueFE <https://github.com/miyuesc> -->
+<!-- * @since 2024/9/4 14:52 -->
+<!-- */ -->
+
+<!-- defineOptions({ name: 'LedSimulator' }) -->
+
+<!-- const SCROLLER_LENGTH = 60 -->
+<!-- const HEIGHT = 7 -->
+<!-- const theInput = $('#theInput') -->
+<!-- const fps = 30 -->
+
+<!-- let myMessage = textToLED('Hello everyone ') -->
+<!-- let leftPointer = SCROLLER_LENGTH + 1 -->
+<!-- const rightPointer = 0 -->
+<!-- let furthestLeftPoint = 0 - myMessage.length -->
+
+<!-- theInput.change(function () { -->
+<!--  clearLights() -->
+<!--  myMessage = textToLED(this.value) -->
+<!--  furthestLeftPoint = 0 - myMessage.length -->
+<!--  leftPointer = SCROLLER_LENGTH + 1 -->
+<!-- }) -->
+
+<!-- function clearLights() { -->
+<!--  const lightsOn = $('.on') -->
+<!--  lightsOn.removeClass('on') -->
+<!--  lightsOn.addClass('off') -->
+<!-- } -->
+<!-- function setLight(row, col, state) { -->
+<!--  const theLight = $(`.${row}_${col}`) -->
+
+<!--  if (theLight.hasClass('on') && !state) { -->
+<!--    theLight.removeClass('on') -->
+<!--    theLight.addClass('off') -->
+<!--  } -->
+<!--  else if (theLight.hasClass('off') && state) { -->
+<!--    theLight.removeClass('off') -->
+<!--    theLight.addClass('on') -->
+<!--  } -->
+<!-- } -->
+
+<!-- function drawMessage(messageArray: string[], leftPointer: number) { -->
+<!--  const messageLength = messageArray.length -->
+
+<!--  if (messageLength > 0) { -->
+<!--    for (let col = 0; col < messageLength; col++) { -->
+<!--      for (let row = 0; row < HEIGHT; row++) { -->
+<!--        const offsetCol = leftPointer + col -->
+
+<!--        if (offsetCol < SCROLLER_LENGTH || offsetCol >= 0) { -->
+<!--          setLight(row, offsetCol, messageArray[col][row]) -->
+<!--        } -->
+<!--      } -->
+<!--    } -->
+<!--  } -->
+<!-- } -->
+
+<!-- function textToLED(theWord: string) { -->
+<!--  const theMessage: Array<boolean[]>[] = [] -->
+<!--  theWord = theWord.toUpperCase() -->
+<!--  for (let i = 0; i < theWord.length; i++) { -->
+<!--    theMessage.push(charToLED(theWord.charAt(i))) -->
+<!--    theMessage.push(charToLED()) -->
+<!--  } -->
+
+<!--  let flatten: Array<boolean[]>[] = [] -->
+<!--  // eslint-disable-next-line prefer-spread -->
+<!--  flatten = flatten.concat.apply(flatten, theMessage) -->
+
+<!--  return flatten -->
+<!-- } -->
+
+<!-- function charToLED(theChar?: string): Array<boolean[]> { -->
+<!--  let theLed = [] -->
+<!--  switch (theChar) { -->
+<!--    case 'A' : -->
+<!--      theLed = [[false, false, true, true, true, true, true], [false, true, false, false, true, false, false], [true, false, false, false, true, false, false], [false, true, false, false, true, false, false], [false, false, true, true, true, true, true]] -->
+<!--      break -->
+<!--    case 'B' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [false, true, true, false, true, true, false]] -->
+<!--      break -->
+<!--    case 'C' : -->
+<!--      theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, false, false, false, true, false]] -->
+<!--      break -->
+<!--    case 'D' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, true, true, true, true, false]] -->
+<!--      break -->
+<!--    case 'E' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, false, false, false, true]] -->
+<!--      break -->
+<!--    case 'F' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'G' : -->
+<!--      theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, true, false, true], [true, true, false, false, true, true, true]] -->
+<!--      break -->
+<!--    case 'H' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [false, false, false, true, false, false, false], [false, false, false, true, false, false, false], [false, false, false, true, false, false, false], [true, true, true, true, true, true, true]] -->
+<!--      break -->
+<!--    case 'I' : -->
+<!--      theLed = [[false, false, false, false, false, false, false], [true, false, false, false, false, false, true], [true, true, true, true, true, true, true], [true, false, false, false, false, false, true], [false, false, false, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'J' : -->
+<!--      theLed = [[false, false, false, false, false, true, false], [false, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, true, true, true, true, true, false], [true, false, false, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'K' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [false, false, false, true, false, false, false], [false, false, true, false, true, false, false], [false, true, false, false, false, true, false], [true, false, false, false, false, false, true]] -->
+<!--      break -->
+<!--    case 'L' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true]] -->
+<!--      break -->
+<!--    case 'M' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [false, true, false, false, false, false, false], [false, false, true, false, false, false, false], [false, true, false, false, false, false, false], [true, true, true, true, true, true, true]] -->
+<!--      break -->
+<!--    case 'N' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [false, false, true, false, false, false, false], [false, false, false, true, false, false, false], [false, false, false, false, true, false, false], [true, true, true, true, true, true, true]] -->
+<!--      break -->
+<!--    case 'O' : -->
+<!--      theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [true, false, false, false, false, false, true], [false, true, true, true, true, true, false]] -->
+<!--      break -->
+<!--    case 'P' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [false, true, true, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'Q' : -->
+<!--      theLed = [[false, true, true, true, true, true, false], [true, false, false, false, false, false, true], [true, false, false, false, true, false, true], [true, false, false, false, false, true, false], [false, true, true, true, true, false, true]] -->
+<!--      break -->
+<!--    case 'R' : -->
+<!--      theLed = [[true, true, true, true, true, true, true], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [true, false, false, true, false, false, false], [false, true, true, false, true, true, true]] -->
+<!--      break -->
+<!--    case 'S' : -->
+<!--      theLed = [[false, true, true, false, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, true, false, false, true], [true, false, false, false, true, true, false]] -->
+<!--      break -->
+<!--    case 'T' : -->
+<!--      theLed = [[true, false, false, false, false, false, false], [true, false, false, false, false, false, false], [true, true, true, true, true, true, true], [true, false, false, false, false, false, false], [true, false, false, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'U' : -->
+<!--      theLed = [[true, true, true, true, true, true, false], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [false, false, false, false, false, false, true], [true, true, true, true, true, true, false]] -->
+<!--      break -->
+<!--    case 'V' : -->
+<!--      theLed = [[true, true, true, true, true, false, false], [false, false, false, false, false, true, false], [false, false, false, false, false, false, true], [false, false, false, false, false, true, false], [true, true, true, true, true, false, false]] -->
+<!--      break -->
+<!--    case 'W' : -->
+<!--      theLed = [[true, true, true, true, true, true, false], [false, false, false, false, false, false, true], [false, false, false, false, true, true, false], [false, false, false, false, false, false, true], [true, true, true, true, true, true, false]] -->
+<!--      break -->
+<!--    case 'X' : -->
+<!--      theLed = [[true, false, false, false, false, false, true], [false, true, true, false, true, true, false], [false, false, false, true, false, false, false], [false, true, true, false, true, true, false], [true, false, false, false, false, false, true]] -->
+<!--      break -->
+<!--    case 'Y' : -->
+<!--      theLed = [[true, false, false, false, false, false, false], [false, true, false, false, false, false, false], [false, false, true, true, true, true, true], [false, true, false, false, false, false, false], [true, false, false, false, false, false, false]] -->
+<!--      break -->
+<!--    case 'Z' : -->
+<!--      theLed = [[true, false, false, false, false, true, true], [true, false, false, false, true, false, true], [true, false, false, true, false, false, true], [true, false, true, false, false, false, true], [true, true, false, false, false, false, true]] -->
+<!--      break -->
+<!--    default: -->
+<!--      theLed = [[false, false, false, false, false, false, false]] -->
+<!--  } -->
+<!--  return theLed -->
+<!-- } -->
+
+<!-- function draw() { -->
+<!--  setTimeout(() => { -->
+<!--    requestAnimationFrame(draw) -->
+
+<!--    if (leftPointer === furthestLeftPoint) { -->
+<!--      leftPointer = SCROLLER_LENGTH + 1 -->
+<!--    } -->
+
+<!--    drawMessage(myMessage, leftPointer) -->
+<!--    leftPointer&#45;&#45; -->
+<!--  }, 1000 / fps) -->
+<!-- } -->
+
+<!-- draw() -->
+<!-- </script> -->
+
+<template>
+  <div id="wrapper">
+    <div id="theMarquee">
+      <div v-for="(_, idx) in 60" :key="`0_${idx}`" :class="`0_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`1_${idx}`" :class="`1_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`2_${idx}`" :class="`2_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`3_${idx}`" :class="`3_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`4_${idx}`" :class="`4_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`5_${idx}`" :class="`5_${idx}`" class="light off" />
+      <div v-for="(_, idx) in 60" :key="`6_${idx}`" :class="`6_${idx}`" class="light off" />
+    </div>
+    <input id="theInput" name="input" type="text" value="Hello everyone">
+  </div>
+</template>
+
+<style scoped lang="scss">
+#wrapper{
+  width: 420px;
+  margin: 50px auto;
+}
+
+#theMarquee{
+  height: 55px;
+  border-radius: 5px;
+}
+
+#theInput{
+  clear: both;
+  margin: 25px 100px;
+  width: 200px;
+  text-align: center;
+}
+.light {
+  width: 5px;
+  height: 5px;
+  margin: 1px 1px;
+  text-align: center;
+  font-size: 15px;
+  float: left;
+  border-radius: 50%;
+}
+
+.off{
+  background-color: #121212;
+}
+
+.on{
+  background-color: #0ff;
+  box-shadow: 0px 0px 5px #0ff;
+}
+</style>
diff --git a/applications/app-led-simulator/src/components/TextComp.vue b/applications/app-led-simulator/src/components/TextComp.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/**
+ * @desc TextComp
+ * @author DragonTeam <https://www.bpmport.com>
+ * @since 2024/11/22 16:04
+ */
+
+import { ref } from 'vue'
+
+defineOptions({ name: 'TextComp' })
+
+const slotArray = ref(['name', 'sex'])
+</script>
+
+<template>
+  <div>
+    <p v-for="i in slotArray" :key="i">
+      <slot :name="i" />
+    </p>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/applications/app-led-simulator/src/main.ts b/applications/app-led-simulator/src/main.ts
@@ -0,0 +1,6 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import './styles/index.scss'
+
+createApp(App).mount('#app')
diff --git a/applications/app-led-simulator/src/styles/index.scss b/applications/app-led-simulator/src/styles/index.scss
@@ -0,0 +1,7 @@
+@import "normalize.css";
+
+body, #app {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/applications/app-led-simulator/src/vite-env.d.ts b/applications/app-led-simulator/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/applications/app-led-simulator/tsconfig.app.json b/applications/app-led-simulator/tsconfig.app.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
+}
diff --git a/applications/app-led-simulator/tsconfig.json b/applications/app-led-simulator/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/applications/app-led-simulator/tsconfig.node.json b/applications/app-led-simulator/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/applications/app-led-simulator/vite.config.ts b/applications/app-led-simulator/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})