Elantris 前言 接到一個活動頁面的製作需求，主體是一個幸運輪盤，有不少定位、動畫的目標要達成。 輪盤外框上有 16 個燈，奇數偶數要間隔 0.3 秒交替閃爍 正中央按鈕上的標題要來回放大縮小 按下按鈕後輪盤要轉動，最後要停在指定的位置上 定位方面大致上都用百分比當單位就能處理，每個元件的相對大小、相對位置，動畫的部分不外乎 animation 以及 transition，互動的部分就交給 js setTimeout 改變 class 即可。

Elantris 實作 外框 .loading { position: relative; width: 16rem; height: 3rem;

Elantris 前言 紀錄一下自己在這個時間點 (2025) 開一個新專案時選用的工具技術與步驟，目前主要都是在寫網頁前端，目標放在能夠產出靜態網頁的開發環境。 專案環境 Node.js LTS (v22.14.0) NPM (v11.3.0) Build Tool: Vite (v6)template: react-ts

專案開發：Elantris 近期更新：2025-02-24 客服群組：https://discord.gg/Ctwz4BB 說明文件：https://hackmd.io/@eelayntris/eedice 捐款贊助：歐付寶贊助連結、歐付寶贊助留言 邀請連結：eeDice#8838 幸運女神賜我神力！ [name=eeDice][color=#5c7cfa] eeDice profile

專案開發：Elantris 近期更新：2025-02-01 客服群組：https://discord.gg/Ctwz4BB 說明文件：https://hackmd.io/@eelayntris/commander 捐款贊助：歐付寶贊助連結、歐付寶贊助留言 邀請連結： 管理員權限：如果你不知道該怎麼設定權限又很信任開發者的話請點這個連結 基本權限：使用這隻機器人指令所需要的基本權限 空白權限：這個連結不會建立預設身份組，需自行設定機器人權限檢視頻道

Elantris 前言 公司有一個 React 專案環境是： Vite Husky Prettierprettier-plugin-tailwindcss Tailwind CSS

Elantris 需求 合作的設計師在某個專案的產品設計圖中大量地使用漸層邊框，無論在 Button、Panel、Card、甚至一個倒數計時器上都可以看到邊框是由青藍、深藍、粉紅如此鮮豔又強烈的顏色變化，正當我開始實作的時候才發現事情沒有我想得如此簡單，以下紀錄我這幾天以來研究的過程。 實作 方案一：邊框圖片 最直覺的想法就是用 border-image 搭配 linear-gradient 事情應該就會如我想像般順利，對吧？

專案開發：Elantris 近期更新：2024-02-15 客服群組：https://discord.gg/Ctwz4BB 說明文件：https://hackmd.io/@eelayntris/attention-please 捐款贊助：歐付寶贊助連結、歐付寶贊助留言 邀請連結： 管理員權限：如果你不知道該怎麼設定權限又很信任開發者的話請點這個連結 基本權限：使用這隻機器人指令所需要的基本權限 空白權限：這個連結不會建立預設身份組，需自行設定機器人權限檢視頻道

專案開發：Elantris 近期更新：2023-10-18 客服群組：https://discord.gg/Ctwz4BB 說明文件：https://hackmd.io/@eelayntris/what2eat 捐款贊助：歐付寶贊助連結、歐付寶贊助留言 邀請連結：What2Eat#1360 這隻機器人的服務理念不是為了解決問題，而是幫你製造更多困擾 OvO [name=What2Eat][color=#51cf66] what2eat avatar

Elantris 前言 開發時使用程式碼排版工具的好處除了自己看得舒服以外更重要的是整個團隊在編寫時有一個統一標準，避免因手動排版造成的人力浪費、生出一堆只是為了排版沒有實際產值的 commit，在初期就應取得團隊共識訂定一個大家都看得順眼的排版規則。 現行大多數編輯器都有支援 EditorConfig、Eslint Formatter、Prettier 等排版工具，可以透過鍵盤快速鍵隨時排版，另外再搭配 Husky 等 CI 工具更能確保每一個 commit 當下所有程式碼樣貌的一致性。 設定檔 Prettier 的設定檔案可以放在非常多的地方，都能讓編輯器自動去找尋：

Elantris 前言 用 Docker 整合 Ory Kratos + Hydra 服務，並應用在 Gitea OAuth2 登入流程。 Docker: https://docs.docker.com/get-docker/ Docker File: https://github.com/shodgson/ory-kratos-hydra-integration-demo Gitea: https://docs.gitea.com/category/installation (Optional) Ory Hydra CLI: https://www.ory.sh/docs/hydra/self-hosted/install

Elantris 需求 有一天設計師希望前端做一個預約時段的功能，頁面上會有一排按鈕讓使用者選擇想要的時段，而按鈕會有三種狀態： 可預約的時段：一般狀態 已過期的時段：灰色背景、使用者不能點按 被預約的時段：斜線背景、使用者不能點按 實作

Elantris 前言 版本控制除了方便回顧每個檔案的歷史紀錄以外最適合用在多人協作時追蹤彼此的進度，於是「如何管理 Git 專案」便是一大課題。最廣為知名的一個模型 Git Flow 規範了每個 branch 代表的含義以及彼此的交互關係，同時兼顧多人非同步開發與正式部署上線的版本。 Git Flow 簡介一下 git flow 模型定義的 branch： main (master)：正式部署上線用的最穩定版本 develop：開發中的版本

Elantris 前言 遊玩桌遊時很常使用骰子公式（Dice Expression）的形式表達需要丟擲的骰子種類數量以及對應的運算，2021 年我有幸玩到一場經典角色扮演桌遊龍與地下城（Dungeon and Dragon），當時的 DM（Dungeon Master）使用線上軟體 MapTool 當作載體，讓玩家可以操作自己的角色、DM 即時處理場景互動。 電子化的好處是丟擲骰子能夠透過簡單的語法直接在聊天室裡輸入並即時得到計算結果，大幅降低人工丟骰子、處理四則運算的時間成本，讓參與的玩家和主持人更能沉浸在劇情故事中。 MapTool 的聊天室支援基本的 HTML 語法以及特殊指令，例如輸入的文字中包含 [r: 1d6] 則會在發送之後被替換成丟擲一顆六面骰的結果。另外還可以寫成 macro 以按鈕的形式包裝這些指令，即使角色施放的技能是一串複雜的計算過程玩家也只需要按下按鈕即可快速得到結果，讓遊戲主持人可以快速判斷角色與世界的互動。 我的目標是寫一隻 Discord 聊天室機器人，讓跑團的使用者可以直接在文字頻道裡擲骰運算。

Elantris 前言 使用現代前端框架撰寫資訊系統時注重模組化開發，可以方便拆解細分每個流程步驟與各自功能，其中最小的組成單位被稱為元件。原則上一個元件要能表現單一功能且能重複利用，後續實作只要根據商業需求將這些元件組合起來就能實現完整操作流程。以下介紹我在設計 React 元件時從結構上會注意的一些重點。 組成結構 元件可以根據功能與形式粗略地區分為三種層級： 元件（Component） 具有簡單功能的最小基本單位

Elantris 前言 專案架構指的是一個專案內各個檔案放置的位置與命名規範，原則上相同性質的檔案會放在同一個資料夾。 Root 根目錄 一個專案的根目錄第一層通常會放說明文件以及各種工具的設定檔： README.md：說明文件，包含專案內容、安裝步驟、如何參與貢獻等簡要說明 package.json：NPM 設定檔，定義指令與相依套件，有些工具的設定檔也支援放在這個檔案裡