就算 liveview 可以達到大部分想做的互動
但是還是有一些邊邊角角是滿困難的

像是複製到剪貼簿

這邊來帶大家做一遍 如果要在專案裡面使用 npm 安裝套件要怎麼做

安裝 clipboard.js

雖然說自己寫也可以滿簡短的，
但是這個裝好就可以用了好爽喔。

phoenix 把 javascript 跟 css 這些東西都放在 assets 資料夾內
所以要 npm install 的話要 cs 進去 assets 資料夾

cd assets
npm install clipboard --save

就裝好了，
再來是要 import 他

打開 assets/js/app.js
這邊會看到其實 phoenix 這裡就有寫一些說明了

// Alternatively, you can `npm install some-package` and import
// them using a path starting with the package name:
//
//     import "some-package"
//

我們就把 import 放在下面吧

import ClipboardJS from "clipboard"

然後依照 clipboard.js 的使用說明 也在這邊起一個他的物件
依照使用情況，如果很多的話可以放在別的檔案，
在這邊一行就丟這裡吧

new ClipboardJS('.btn');

就這樣就好了

使用

我們來把他加在邀請頁面上

打開 lib/card_web/live/game_live/invite.ex
幫 invite component 加上複製按鈕
這邊就照抄 clipboardjs的官網範例

  def invite(assigns) do
    ~H"""
    <div class="flex flex-col p-4 bg-gray-50 shadow-lg text-center mt-12">
      <div class="bg-blue-300 w-40 h-8 rounded-xl transform skew-x-12 rotate-6 translate-y-6 translate-x-40"></div>
      <div class="transform">
        <label for="invite_url" class="text-2xl font-serif">Guest Link</label><br>
        <input id="invite_url" class="w-96 text-center text-gray-500 bg-gray-50 mt-4" type="text" value={@path} readonly>
      </div>
      <div class="bg-blue-300 w-24 h-2 rounded-xl transform -skew-x-12 rotate-2 translate-y-6 translate-x-36"></div>
      <button class="btn mb-2 transform font-serif text-lg" data-clipboard-target="#invite_url">
        Copy to Clipboard
      </button>
      <p class="text-lg text-gray-600">To begin the game, send this link to your component.</p>
    </div>
    """
  end

完成！