# **卡牌之神網站企劃書**
https://2f019e90a7d0ed1c79869fe04388e5a60.ordinarymushroo.repl.co
## 一、網頁各部分編寫部分
**1.網頁架構設計**:
現時的架構: 主頁, 新聞, 抽卡, 卡牌庫, 圖鑒, 社群, 支援, 戰鬥(計劃中)
計劃與及未來架: 主頁, 新聞, 抽卡, 商店, 卡牌庫, 圖鑒, 社群, 支援, 戰鬥, 卡牌製作員專區, 管理員專區

### 1.1 **主頁**
(用家一開始登入的地方, 把網站的重要資訊放在這裏)
* **最新消息**
(可以在這個區域得知整個遊戲的最新消息(維護, 節日活動, 普通更新等消息)都可以在這裏得知)

內容 : 顯示最近的消息, 訊息上面需要包括分類 ( 維護公告 / 節日活動 / 網站更新 / 機械人更新 / 雀可美特討論區特別公告 / 其他 ), 訊息標題, 發出人, 日期

效果 : 把滑鼠放在放在訊息的上面, 訊息會稍為向下展開一點, 顯示多一點詳情. 如果直接按下去將會跳到詳細版面 (新聞的版面)

* **最新卡牌**
(可以在這個區域得知遊戲的最新卡牌, 可以透過管理員專區選擇顯示的卡牌)

內容 : 透過管理員專區所選擇的卡牌, 顯示在這區域上面

效果 : 盡量原用以及美化現在的設計, 就是有7張卡牌可以交替顯示 (https://shoob.gg/ 可以參考 latest card 的部份)

*現時的最新卡牌版面, 可作參考*

* **卡池**
(可以在這個區域得知遊戲的卡池, 不論是節日活動, 特別活動, 還是普通卡池, 都可以在這裏顯示)

內容 : 顯示所有卡池, 建議直接使用卡池的圖片

效果 : 盡量原用以及美化現在的設計, 就是卡池可以交替顯示(https://shoob.gg/ 可以參考 latest card 的部份, 不過換成垂直)

*現時的卡池版面, 可作參考*

* **機械人介紹**
(介紹機械人的特色以及創作理念)

內容 : 將會交由雀可打雜組的管理員編寫遊戲簡介, 並會加入圖片

效果 : 沒有特別要求

* **主伺服器介紹**
(介紹機械人的主伺服器)

內容 : 將會交由雀可打雜組的管理員編寫遊戲簡介, 並會加入圖片

效果 : 沒有特別要求

### 1.2 **新聞**
(這個版面收藏了所有有關卡牌之神的公告以及新聞, (包括維護公告 / 節日活動 / 網站更新 / 機械人更新 / 雀可美特討論區特別公告 / 其他 ), 主要會顯示每個新聞的標題以及一點資訊, 可以通過點擊新聞跳到詳細版面.)
* **新聞分類**
(每一篇新聞都有分類)
維護公告
最新卡牌消息
節日活動
網站更新
機械人更新
雀可美特討論區特別公告
其他

效果 : 希望每個分類可以有專屬的 icon ( https://fontawesome.com/ )

* **新聞搜尋**
(serach bar, 可以透過keyword, 新聞分類, 日期, 等方法搜尋以及分類新聞)

內容 : serach bar包括透過keyword進行搜尋。 亦可以透過調整分類或日期並進行篩選。

效果 : Serach Bar, 效果沒有特別要求 ( serach bar 雀可管理員技術組將由負責 )

* **新聞(簡短版本)**
(點擊新聞之前所顯示的簡短版本, 只會顯示標題，分類，日期，及少量資訊)

內容 : 標題, 分類，日期及少量資訊

效果 : 點擊後進入詳細版面, 效果沒有特別要求

現時的新聞版面, 可作參考

### 1.3 **抽卡**
(在這分頁上進行抽卡)

*現時的抽卡版面, 可作參考*

* **卡池**
(可以通過點擊不同圖片/banner切換卡池)

內容 : 每個卡池有對應的圖片/banner

效果 : 通過點擊對應的圖片/banner切換卡池, 希望當滑鼠放在圖片上的時候會稍為放大, 其餘效果沒有特別要求
( .content-container .events img:hover {transform: scale(1.1)})

* **卡池卡牌顯示**
(會在這裏顯示該卡池的特別卡牌)

內容 : 根據卡池的切換, 所顯示的卡牌也會改變, 會顯示該卡池的特別卡牌

效果 : 與主頁的最新卡牌類似, 分別在於這裏只會顯示該卡池的特別卡牌, 大約顯示數目為4張卡牌 (https://shoob.gg/ 可以參考 latest card 的部份)

* **卡池介紹**
(這裏包括卡池名稱, 活動時間, 簡介與及機率, 並有單抽及10抽兩個按鈕)

內容 : 由上而下先顯示卡池名稱, 簡介, 活動時間與及機率, 並有單抽及10抽兩個按鈕

效果 : 通過點擊單抽及10抽按鈕, 並播放抽卡片段 ( 素材已經放在 discord channel ), 之後會顯示所得到的卡牌. ( 建議抽卡過程盡量維持現有的狀況 )( 抽卡將由雀可管理員技術組將由負責 )


### 1.4 **卡牌庫**
(這裏存放玩家所抽取並擁有的卡牌)

* **serach bar**
(可以透過 search bar對所擁有的卡牌進行分類)

內容 : 可以透過名字, 所屬的動漫系列, 級數, 獲得日期進行篩選

效果 : search bar 實際功能將由雀可管理員技術組將由負責, 麻煩設計組預留位置

*現在search bar的設計*

* **卡牌**
(這裏存放玩家所抽取並擁有的卡牌)

內容 : 麻煩使用 Discord channel 的樣板卡牌進行排版

效果 : 實際功能將由雀可管理員技術組將由負責

*現在卡牌排版的設計*

### 1.5 **圖鑒**
-----同上------

### 1.6 **社群**
(這裏會顯示主要discord server以及早期支持者的簡介)
*現在社群的設計*

* **內容**
顯示的是server包括 : 雀可美特討論區 (主伺服器), 2D2C (早期支持者), 虛擬交流基地 (早期支持者), Meowクラウド蛋糕店 (早期支持者)
麻煩在伺服器名字下面預留一定位置填寫宣傳文

* **特效**
預留加入伺服器的按鈕, 其餘效果沒有特別要求

### 1.7 **支援**
(這裏會顯示整個網頁以及機械人的詳細資料, 亦會為玩家提供聯絡渠道)

* **提交問題**
(玩家可以在這裏提出問題與及聯絡管理員)

內容 : 玩家可以在這裏提出問題與及聯絡管理員，管理員亦可以通過管理員專區的位置進行回覆, 此位置需要包括填寫玩家名字, 來自的伺服器, 提出的問題.

效果 : 管理員可以通過管理員專區的位置進行回覆, 實際功能將由雀可管理員技術組將由負責, 麻煩設計組預留位置

* **聯絡資料**
( 有關於網頁的聯絡資料)

內容 : 內容包括主伺服器(雀可discord), 協助編寫伺服器 (2D2C), 開發人員, 版本, 更新日期, 使用的program language

效果 : 效果沒有特別要求

* **雀可相關資訊**
(有關雀可相關資料)

內容 : discord, youtube channel, facebook, instagram

效果 : 效果沒有特別要求

* **版權**
(包括版權&免責聲明)

內容 : 需要包括免責聲明與及版權聲明, 文字將會放在 discord channel

效果 : 效果沒有特別要求

*現在支援的設計*

### 1.8 **管理員專區**

----將由雀可管理員技術組將由負責----

### 1.9 **navigation bar**
(顯示1.1-1.8)

* **內容**
可以點擊按鈕到達以上所有的分頁, 請預留位置登入discord

* **效果**
效果沒有特別要求

*現在navigation bar的設計*

### 1.9 **footer**
(包含網站的一些基本資訊)

* **內容**
包括機械人文字, 機械人基本資料, 分頁的捷徑, copyright, 免責聲明

* **內容**
效果沒有特別要求, 但建議可以參照現在footer的顏色

*現在footer的設計*

---

## 二、進度規畫
**1.完成部分**: 大致上有關背後的code 已經完成, 重點需要完善管理員選區的程式與及系統
**2.目前進度**: 正在構思戰鬥系統以及管理員專區的程式
**3.未來進度**:網頁外觀設計, 網頁Code搭配上封面,戰鬥系統出產,動畫改善,

## 三、參與人員
---
### 行政組
**雀可管理員**:路哥(綾小路清隆#4651), EFun(EFunLee#7777)
**2D2C**:ChienHS
### 多媒體組
**雀可管理員**:雪音(mainkakao), 佐倉(tos.squid#4931), ,
**2D2C**:裕子,迷離夢,老巫,溺水,天音
### 技術組
**雀可管理員**:shr00m(shr00m#7911), EFun(EFunLee#7777), 有紀(からくりピエロ#0831)
**2D2C**:Magi,ChienHS,Jerry,Arce,小明
### 打雜組
**雀可管理員**:雪音(mainkakao), 啊方啦(AFangLAH#2947), 走路草 (打牌靠賽#3259)
**2D2C**:死神,YoYa