docs: update readme

imtaotao · Jul 11, 2024 · 6dc3e97 · 6dc3e97
1 parent aee5f2d
commit 6dc3e97
Show file tree

Hide file tree

Showing 7 changed files with 96 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 
 </div>
 
-Flexible, cross-platform, powerful danmu library.
+A highly extensible, pluggable danmu library with occlusion prevention and collision detection, implemented based on `CSS`, `DOM`, and [`hooks-plugin`](https://github.com/imtaotao/hooks-plugin).
 
 > Demo preview: https://imtaotao.github.io/danmu/
 

diff --git a/demo/README.md b/demo/README.md
@@ -1 +1,3 @@
-# Danmu demo
+# Demo
+
+This is a demo, deployed on gh-pages.
diff --git a/demo/src/components/danmu/transmitter.tsx b/demo/src/components/danmu/transmitter.tsx
@@ -1,13 +1,19 @@
 import { useState } from 'react';
 import { random, uuid } from 'aidly';
-import { Send, Pickaxe } from 'lucide-react';
+import { Send, Pickaxe, CircleAlert } from 'lucide-react';
 import type { Manager, Direction } from 'danmu';
 import type { BarrageValue } from '@/types';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { Textarea } from '@/components/ui/textarea';
 import { useToast } from '@/components/ui/use-toast';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import {
   Select,
   SelectContent,
@@ -84,14 +90,25 @@ export const Transmitter = ({
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent>
           <SheetHeader>
-            <SheetTitle>设置高级弹幕的位置信息</SheetTitle>
-            <SheetDescription>
-              这里 demo 单位默认为 "%"，通过计算会转换为 px。
-            </SheetDescription>
+            <SheetTitle className="flex items-center">
+              <span className="mr-2">设置高级弹幕的位置信息</span>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <CircleAlert size={18} className="cursor-pointer" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    由于弹幕库默认只支持 position 的单位为 px, 虽然这里是 %
+                    的含义，是因为在组件内部通过计算会转换成了 px。
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </SheetTitle>
+
             <div className="grid gap-4 py-4">
               <div className="grid grid-cols-4 items-center gap-4">
                 <Label htmlFor="postion-x" className="text-right font-bold">
-                  位置 (X)
+                  位置 (x%)
                 </Label>
                 <Input
                   id="postion-x"
@@ -105,7 +122,7 @@ export const Transmitter = ({
               </div>
               <div className="grid grid-cols-4 items-center gap-4">
                 <Label htmlFor="postion-y" className="text-right font-bold">
-                  位置 (Y)
+                  位置 (y%)
                 </Label>
                 <Input
                   id="postion-y"

diff --git a/demo/src/components/sidebar/sidebarFrequency.tsx b/demo/src/components/sidebar/sidebarFrequency.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { throttle } from 'aidly';
-import { Fish } from 'lucide-react';
+import { Fish, CircleAlert } from 'lucide-react';
 import type { Manager } from 'danmu';
 import type { BarrageValue } from '@/types';
 import { Label } from '@/components/ui/label';
@@ -17,19 +17,20 @@ export const SidebarFrequency = memo(
     return (
       <div className="flex h-8 mb-4 items-center justify-between">
         <Label className="shrink-0 mr-3 h-full text-base font-bold leading-8">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center cursor-pointer">
-                  <Fish />
-                  <span className="ml-3">渲染频率 (ms)</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                manager 会有一个定时器来轮询 push 普通弹幕，请设置合适的值
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <div className="flex items-center">
+            <Fish />
+            <span className="ml-3 mr-1  ">渲染频率 (ms)</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <CircleAlert size={16} className="cursor-pointer" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  manager 会有一个定时器来轮询 push 普通弹幕，请设置合适的值
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </Label>
         <Input
           className="h-4/5"

diff --git a/demo/src/components/sidebar/sidebarGap.tsx b/demo/src/components/sidebar/sidebarGap.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { throttle } from 'aidly';
-import { Squirrel } from 'lucide-react';
+import { Squirrel, CircleAlert } from 'lucide-react';
 import type { Manager } from 'danmu';
 import type { BarrageValue } from '@/types';
 import { Label } from '@/components/ui/label';
@@ -17,19 +17,20 @@ export const SidebarGap = memo(
     return (
       <div className="flex h-8 mb-4 items-center justify-between">
         <Label className="shrink-0 mr-3 h-full text-base font-bold leading-8">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center cursor-pointer">
-                  <Squirrel />
-                  <span className="ml-3">弹幕之间的间距</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                同一条轨道在碰撞检测的啥情况下，后一条弹幕与前一条弹幕最小相隔的距离
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <div className="flex items-center">
+            <Squirrel />
+            <span className="ml-3 mr-1">弹幕之间的间距</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <CircleAlert size={16} className="cursor-pointer" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  同一条轨道在碰撞检测的啥情况下，后一条弹幕与前一条弹幕最小相隔的距离
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </Label>
         <Input
           className="h-4/5"

diff --git a/demo/src/components/sidebar/sidebarModeSelect.tsx b/demo/src/components/sidebar/sidebarModeSelect.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Snail } from 'lucide-react';
+import { Snail, CircleAlert } from 'lucide-react';
 import type { Mode, Manager } from 'danmu';
 import type { BarrageValue } from '@/types';
 import { Label } from '@/components/ui/label';
@@ -16,27 +16,28 @@ export const SidebarModeSelect = memo(
     return (
       <div className="flex h-8 mb-4 items-center justify-between">
         <Label className="shrink-0 mr-3 h-full text-base font-bold leading-8">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center cursor-pointer">
-                  <Snail />
-                  <span className="ml-3">渲染模式</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                渲染模式决定着碰撞检测的规则和弹幕渲染的时机
-                <br />
-                1. 当设置为 none 模式时，不会有任何碰撞检测，弹幕会立即渲染
-                <br />
-                2. 当设置为 strict
-                模式时，会进行严格的碰撞检测，如果不满足条件则会推迟渲染
-                <br />
-                3. 当设置为 adaptive
-                模式时，在满足立即渲染的前提下，会尽力进行碰撞检测（推荐）
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <div className="flex items-center">
+            <Snail />
+            <span className="ml-3 mr-1">渲染模式</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <CircleAlert size={16} className="cursor-pointer" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  渲染模式决定着碰撞检测的规则和弹幕渲染的时机
+                  <br />
+                  1. 当设置为 none 模式时，不会有任何碰撞检测，弹幕会立即渲染
+                  <br />
+                  2. 当设置为 strict
+                  模式时，会进行严格的碰撞检测，如果不满足条件则会推迟渲染
+                  <br />
+                  3. 当设置为 adaptive
+                  模式时，在满足立即渲染的前提下，会尽力进行碰撞检测（推荐）
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </Label>
         <Tabs
           defaultValue="strict"

diff --git a/demo/src/components/sidebar/sidebarMoveTimes.tsx b/demo/src/components/sidebar/sidebarMoveTimes.tsx
@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { throttle } from 'aidly';
-import { Rabbit } from 'lucide-react';
+import { Rabbit, CircleAlert } from 'lucide-react';
 import type { Manager } from 'danmu';
 import type { BarrageValue } from '@/types';
 import { Label } from '@/components/ui/label';
@@ -17,19 +17,20 @@ export const SidebarMoveTimes = memo(
     return (
       <div className="flex h-8 mb-4 items-center justify-between">
         <Label className="shrink-0 mr-3 h-full text-base font-bold leading-8">
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <div className="flex items-center cursor-pointer">
-                  <Rabbit />
-                  <span className="ml-3">运动时长 (ms)</span>
-                </div>
-              </TooltipTrigger>
-              <TooltipContent>
-                普通弹幕会从这两个值之间随机取一个值作为弹幕运动的时间
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
+          <div className="flex items-center">
+            <Rabbit />
+            <span className="ml-3 mr-1">运动时长 (ms)</span>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <CircleAlert size={16} className="cursor-pointer" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  普通弹幕会从这两个值之间随机取一个值作为弹幕运动的时间
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
         </Label>
         <Input
           className="h-4/5 mr-2"
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,7 +5,7 @@ @@
     </div>
-    Flexible, cross-platform, powerful danmu library.
+    A highly extensible, pluggable danmu library with occlusion prevention and collision detection, implemented based on `CSS`, `DOM`, and [`hooks-plugin`](https://github.com/imtaotao/hooks-plugin).
     > Demo preview: https://imtaotao.github.io/danmu/
@@ Expand Down @@