# Webページ作成
概要
結局TRPGページが色々できそうなんだよなぁ
概念としてディスコード内で完結させたい
GMはdiscordを開かずに進行したい（画像送信とか、手紙送信とか）

## 言語選定
### フロントエンド
Javascript(TypeScript)
・NextJS
<!-- ・Redux-toolkit(設計概念学習) -->
・(lodash)
・(Socket.io)

#### テストツール
・reactTestinglib(モジュールテスト)
・jest(単体テスト)

CSS
<!-- ・TailwindCSS -->
<!-- ・materialUI -->
良さそうなライブラリあったら追加していく形で
<!-- ・（FLOCSS） -->
・Mantine

### サーバーサイド
#### discordAPI
Nest.js
<!-- Typescript -->
<!-- その他　保留！！ -->

### インフラ
AWS

## 懸念事項
・キャラクターシートの権利関係は怪しい
→excelみたいなシートを用意して、こちらで権利に踏み入らない。ユーザーに委ねる
→電子書籍の該当ページにリンクで飛ばす

## 必要なページ
ログイン(google認証)
メインページ
キャラシ作成
自分のキャラ一覧
全体のシナリオ一覧
シナリオ作成
シナリオ閲覧
ユーザー
退会
ディスコード認証ページ？
チュートリアル/ヘルプ
問い合わせ
TRPGのGMページ

etc...

## 必要な機能

features
-Auth(認証)
-TRPGキャラクター関連(汎用)
-User
-シナリオ関連

-Discord api関連

機能
・テキストベースのシナリオ作成ではなく、画像ベースのシナリオ作成できたら面白そう
・discordのEmbedを利用して作成したキャラデータを送信したい
・キャラ作成とかはWebで行うけどダイス振るのはDiscordで良くね？
・ディスコードでダイスロール送信
・PC毎にテキストチャンネルを作成する。
・ダイスロールのテンプレートは用意しないけどdiscordのチャット欄で振れるようにする
ーー
ページ全てで表示して、必要な機能(header footer)
メニュー
ログイン/ログアウト

メインページに必要な機能
各ページへのリンク

・ページからDiscordへの画像/テキストのリアルタイム更新
・UIDとキャラのテキストチャンネルの紐づけ
・ダイス/GMのみシークレットダイス
・Discird上：コマンドテンプレを登録・呼び出し
・Web上：キャラ(参加者)一覧の閲覧（+編集？）(GMのみ)
・Web上：キャラ(参加者)一覧の閲覧（PL）
・Web上：自分が作成したキャラ一覧の閲覧・編集
・シナリオ画像の操作（GM）閲覧（PL）

例：ユーザー入力の文脈理解機能
機能の概要
この機能は、ユーザーからの入力を受け取り、その文脈や意図を理解するためのものです。
入力データ
ユーザーからのテキスト入力（質問、命令、コメントなど）。
処理の流れ
テキスト入力を受け取る。
入力されたテキストを解析し、キーワードやフレーズを特定する。
文脈や意図を推測するためのロジックを適用する。
必要に応じて追加のクラリフィケーションを求める。
出力データ
解析された文脈や意図に基づく適切な応答テキスト。
エラー処理
不明確または不完全な入力に対するクラリフィケーションのリクエスト。
システムが理解できない入力に対する標準的なエラーメッセージ。
セキュリティ対策
ユーザーのプライバシーを保護するためのデータ処理のガイドライン遵守。
不適切な内容のフィルタリング。
インターフェース
ユーザーインターフェースとのシームレスな統合。
応答テキストを表示するためのUI要素との連携。
テスト条件
様々な種類のユーザー入力（質問、命令、不明確な要求など）に対する反応テスト。

DiscordBOT
ダイスロール機能
・一般的な/r 1d6等の計算ダイス機能
・discordの特定のカテゴリー名の中のテキストチャンネルに送られたテキストをランダムで表示する

・コマンドからキャラのステータス変更
・ステータスやマップ画像などの動的な更新(Embed)
・スレッド
管理(作成/削除など)(公開/プライベート)
コマンドテンプレ登録
キャラクターのステータスを参照した成功判定
キャラクターを登録したときにステータスからダイスを作成

・/sort　〇〇でキャラを該当ステータスの昇順降順でソートした一覧を表示

discord-bot/
├── src/ # ソースコード
│ ├── commands/ # コマンドファイル
│ ├── events/ # イベントハンドラ
│ └── utils/ # ユーティリティ関数
│
│
│
├── test/ # テストコード
├── docs/ # ドキュメント
├── config # 設定ファイル
└── scripts/ # 実行スクリプト

/?? ndn + 1　 変更したい値

/newDice 変更したい値　「-1」「+1」

STR(筋力):13
CON(体力):8
POW(精神力):16
DEX(敏捷性):8
APP(外見):11
SIZ(体格):18
INT(知性):10
EDU(教育):11
年収:450万
財産:2250万

SAN（正気度）:80
幸運:80
アイデア:50
知識:55
耐久力:13

{
name:'',
description:'',
primaryStatus:[
{name:'', value:0, max:0} // HP, MPの最大値があってよく変動する値
],
secondryStatus:[
{name:'', value:0} // STR, SANなどのあまり変動しない値
],
skills:[
{name:'', value:0}
],
items:[
{name:'', value:0}
],
attributes:[
{name:'', value:''} // e.g. {name: '職業', value: '医者'}
]
}　サイトで作ってdiscordで反映する方法
直接discordで作成する方法

名前: ほげ

モーダルのparagrafで変更
↓一括でdescriptionとして扱う
--属性？--
職業: 医者
年齢: 18
--所持品--
たまご: 1
--メモ--
ほげほげ
ふがふが

--ステータス--
STR: 16
CON: 8
--パラメータ--
HP: 10/12
MP: 8/10
SAN: 1/50
(キャラクターチャンネルには最大値のみ、スレッドには現在値/最大値)
--スキル--
目星: 25
乗馬: 99

変更方法
ステータス
{
STR: 16
CON: 8
}

skill:{
category: "battle"
}

filter(skill => skill.category === "battle")

select Menuの選択肢
追加
selectmenu:(ダイス数値、それ以外)<HP>:
変更・削除
selectmenu:(ステータス, パラメータ, スキル)

{
STR:12 //ステータス
CON:15
}
<
HP:10 //パラメータ
MP:8
>
[
跳躍:70
目星:35 //スキル
]

ダイス関係なし：名前(変更のみ/スレッドで変更), 属性, 所持品, メモ(変更のみ)
ダイス関係あり：ステータス, パラメータ, スキル

・ボタン
要素を追加
要素を変更・削除

セレクトメニューで追加/変更/削除する項目を選ぶ
↓
ボタンを押す
↓
モーダルが出てきて値を入力して送信
↓
disocrdjsでvalidateしてDBに反映
↓
discordのテキストチャンネル/スレッドに反映

RemixアプリでOAuth2を使ってDiscord認証を行うには、以下の手順を踏む必要があります。大まかな流れは以下の通りです：

Discordアプリの設定:

Discord Developer Portalにアクセスし、新しいアプリケーションを作成します。
OAuth2タブでリダイレクトURIを設定し、必要なスコープを選択します。
Remixアプリで必要なパッケージをインストール:

必要なライブラリ（例：axiosやexpress-sessionなど）をインストールします。
環境変数の設定:

.envファイルを作成し、DiscordのクライアントID、クライアントシークレット、リダイレクトURIなどを設定します。
Remixアプリの設定:

RemixのルートまたはAPIルートに認証用のエンドポイントを作成します。
Discordの認証URLにリダイレクトし、認証後にDiscordからのコールバックを処理します。
具体的な実装例を以下に示します。

1. Discordアプリの設定
Discord Developer Portalで新しいアプリケーションを作成。
OAuth2タブで以下を設定：
リダイレクトURI: http://localhost:3000/auth/discord/callback
スコープ: identify（必要に応じて他のスコープも追加）
2. 必要なパッケージをインストール
bash
コードをコピーする
npm install axios express-session
3. 環境変数の設定
.envファイルを作成し、以下を追加:

makefile
コードをコピーする
DISCORD_CLIENT_ID=your_discord_client_id
DISCORD_CLIENT_SECRET=your_discord_client_secret
DISCORD_REDIRECT_URI=http://localhost:3000/auth/discord/callback
4. Remixアプリの設定
auth.js ファイルの作成
javascript
コードをコピーする
import axios from 'axios';
import { redirect } from '@remix-run/node';

export let loader = async ({ request }) => {
  let url = new URL(request.url);
  let code = url.searchParams.get("code");

  if (!code) {
    // Redirect to Discord for authentication
    let discordAuthUrl = `https://discord.com/api/oauth2/authorize?client_id=${process.env.DISCORD_CLIENT_ID}&redirect_uri=${process.env.DISCORD_REDIRECT_URI}&response_type=code&scope=identify`;
    return redirect(discordAuthUrl);
  } else {
    // Handle the callback from Discord
    let data = new URLSearchParams({
      client_id: process.env.DISCORD_CLIENT_ID,
      client_secret: process.env.DISCORD_CLIENT_SECRET,
      grant_type: 'authorization_code',
      code: code,
      redirect_uri: process.env.DISCORD_REDIRECT_URI,
    });

    try {
      let response = await axios.post('https://discord.com/api/oauth2/token', data);
      let userData = await axios.get('https://discord.com/api/users/@me', {
        headers: {
          Authorization: `Bearer ${response.data.access_token}`
        }
      });

      // Here you would handle storing the user session or any other post-authentication steps
      return json({ user: userData.data });
    } catch (error) {
      console.error(error);
      return json({ error: 'Authentication failed' }, { status: 401 });
    }
  }
};
routes/auth/discord.jsx ファイルの作成
javascript
コードをコピーする
import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

export let loader = async ({ request }) => {
  return await require('./auth').loader({ request });
};

export default function DiscordAuth() {
  let data = useLoaderData();

  if (data.user) {
    return <div>Logged in as {data.user.username}</div>;
  }

  if (data.error) {
    return <div>Error: {data.error}</div>;
  }

  return <div>Redirecting to Discord for authentication...</div>;
}
これでRemixアプリにDiscord認証を実装できます。認証フローが正常に動作することを確認するために、アプリを実行し、http://localhost:3000/auth/discordにアクセスしてみてください。