React學習筆記01 實作Responsive Menu Bar

React實作Responsive Menu Bar

工作上遇到的需求，要利用React實作Resposive Menu Bar。

Install react-icons

Import populat icons in popular React projects.
https://react-icons.github.io/react-icons/

npm install react-icons

範例程式 Header.jsx

import { React, useState } from 'react';
import Logo from './assets/logo.svg'
import { AiOutlineMenu, AiOutlineClose, } from 'react-icons/ai';
import styles from './Header.module.css'

const Header = () => {
  // Create a state variable 'nav' and a function 'setNav' to toggle the navigation menu
  const [nav, setNav] = useState(false);
  return (
    <>
      <header>
        <img src={Logo} alt='Logo' />
        <nav>
          <ul className={nav ? [styles.menu, styles.active].join(' ') : [styles.menu]} >
            <li>
              <a href='/#'>Home</a>
            </li>
            <li>
              <a href='/#'>About us</a>
            </li>
            <li>
              < a href='/#'>Contact us</a>
            </li>
          </ul>
        </nav>
        {/* Create a button to toggle the mobile menu */}
        <div onClick={() => setNav(!nav)} className={styles.mobile_btn}>
          {/* Display the close or menu icon based on the 'nav' state */}
          {nav ? <AiOutlineClose size={30} color='white' /> : <AiOutlineMenu size={30} color='white' />}
        </div>
      </header>
    </>
  );
}

export default Header;

2023/10/16 學習筆記 React React

C#學習筆記1 OpenCvSharp & Tesseract

C#學習筆記 OpenCvSharp & Tesseract

應徵某外商時出的C#考題，要利用OpenCvSharp和Tesseract去實作讀取MP4檔案，並把其中的資料輸出成CSV。

OpenCvSharp讀取影片

static void CaptureScreenshotsFromVideo(string videoFilePath, string outputFolder)
{
    using (var capture = new VideoCapture(videoFilePath))
    {
        if (!capture.IsOpened())
        {
            Console.WriteLine("Error: Could not open video file.");
            return;
        }

        Mat frame = new Mat();
        int frameNumber = 0;

        while (true)
        {
            capture.Read(frame);

            if (frame.Empty())
                break;

            // You can process the frame here or save it as an image.
            string outputPath = Path.Combine(outputFolder, $"frame_{frameNumber:D5}.png");
            Cv2.ImWrite(outputPath, frame);

            frameNumber++;
        }
    }
}

以上是最簡單利用OpenCvSharp去讀取影片，每個Frame都會擷取一張圖片儲存。

2023/10/03 學習筆記 C# C#

策略桌遊02 - 蓋亞計畫之大使星人征服宇宙

大使星人征服宇宙

上一次用蜂人玩的隔天馬上又開了一局蓋亞計畫。這次新加了一位很熟悉蓋亞的老手，為一場四人局。

前情提要

在遊戲設置的時候，就有聊到覺得亞特蘭提斯人是最弱的種族，遊戲體驗不好。結果開始種族隨機抽選時，新加那位就抽到了亞特蘭提斯且決定挑戰看看。最後各自選出的種族是大使星人(我)、聖禽族、亞特蘭提斯、晶礦星人，以上也為第一回合順序。簡單說明各種族能力。

• 大使星人(褐) : 起始航行科技1，收入多1礦，基地能力可以交換要塞跟礦產基地。
• 聖禽族(紅) : 起始收入科技１；收入多３錢，基地能力可以用信用點換資源
• 亞特蘭提斯(藍) : 起始少２錢，可蹭人在同一星球蓋礦產基地，基地能力是蹭人時獲得2知識
• 晶礦星人(橘) : 起始鏟星科技１，基地能力在新的顏色星球上建造礦產基地時，獲得３知識 以上種族純以顏色看，大使星人有優勢，其他3家比較容易互相爭搶星球。

最終目標如下

2023/09/02 桌遊 生活 蓋亞計畫 Boardgame

策略桌遊01 - 蓋亞計畫新手上路

蓋亞計畫新手上路

朋友一年前買了蓋亞計畫後，至今大約打了4、5場，每一場就是一群菜雞在外太空亂蓋基地亂玩。今天去了一個蓋亞桌遊團，最後毫無意外的看不到大家的車尾燈。

前情提要

這是我第一次參加這團，為一場三人蓋亞局，種族隨機抽選。最後各自選出的種族是利爪族(首家)、超星人、蜂人(我)。 最終目標如下，前三輪的沒有拍到，但印象中是「開墾綠星+3」、「升級貿易中心+4」、「蓋大棟+5」。

2023/09/01 桌遊 生活 蓋亞計畫 Boardgame

Unity心得04 - 動畫與Funtion呼叫(中) - 動作串聯

動畫與Funtion呼叫(中) - 動作串聯

多個動作的圖檔都切割成動畫後，接下來就是把他們串聯在1個Animator中。

動作串聯

1. 依照上一章節的作法，總共切割了Attack1、Idle、Jump、Run、Walk等5個動畫。這時的Wolf資料夾應該會如下圖所示

2023/08/30 Unity系列 Unity