LoLfindYourTeammates

LOLFindYourTeammates is a social platform for gamers to find suitable teammates for League of Legends. The platform offers registration and login services where users can create an account and fill in their personal information including their in-game name, preferred roles and champions, rank, and Facebook profile link. The main function of the platform is the search and filter feature where users can search for players by name or filter by certain criteria such as preferred roles or rank. Each player also has their own page where users can view their profile and send invitation messages including the proposed game time and message. Players can accept or decline the invitation accordingly.

安裝測試步驟

• WINDOWS:

  • frontend(在localhost:3000)

    cd frontend
    npm install
    npm start

  • backend 在LoLfindYourTeammates/backend新增.env內含MONGO_URL= //your database url

    cd backend
    npm install
    npm run server

• IOS:

  • frontend(在localhost:3000)

  cd frontend
  yarn install
  yarn start

  • backend
  • 在LoLfindYourTeammates/backend新增.env內含MONGO_URL= //your database url

  cd backend
  yarn install
  yarn server

分工

• 鄭炘棠
  • 使用者資料庫
  • 搜尋頁面前端+後端
• 吳芳齡
  • 使用者帳密前端+後端
  • 個人資料前端+後端
• 陳翰雯
  • 玩家頁面前端
  • 所有頁面的css

功能說明

1. 帳號註冊/登入：

   我們有提供註冊以及登入的服務，註冊時需填寫帳號以及密碼。 可記住密碼(但只能記一次)。

2. 個人資料

   個人資料的內容包含：遊戲名稱、擅長路線、擅長英雄、排位以及fb網址。個人資料填寫的用途是讓別的使用者可以看到或搜尋到你的資料。

3. 搜尋及篩選

   使用者成功登入之後的畫面就是搜尋頁面。在此頁面，使用者可以搜尋玩家名字或是用條件(如擅長路線或排位)篩選玩家。

   條件篩選玩家功能在左邊custom conditions，文字搜尋在上方輸入框，需點選搜尋鍵才能跑出新的結果。

4. 玩家頁面

   每個玩家都有屬於自己的精美玩家頁面，使用者可以在搜尋頁面點選玩家名字來查看他們的玩家頁面。 從搜尋頁面的table點選玩家名字即可連結到對應的玩家頁面，另外，如果通知欄(喇叭圖示)中有邀請函，點選裡頭的玩家名字也可連結至玩家頁面。

5. 邀請函

   使用者可以對玩家送出邀請函。邀請函的內容包括：遊玩的時間以及想說的話。收到邀請函的玩家可以同意或拒絕。 使用者點選table的invite somebody會跳出創建邀請函的視窗。可以輸入想要一起玩的時間和想說的話，按下invite就代表送出了。這時候另一個人的通知欄會收到邀請函，可以按勾勾或叉叉。這時候，原來送出邀請函的人的通知欄會收到回覆。

6. 注意事項

   • 一次只能登入一個人
   • 如果沒登入的話，不能透過url access搜尋頁面和個人資料頁面
   • 重啟後端會重設資料庫，起始資料有玩家五個人
   • 不同人不能取一樣的名字

---

GraphQL Playground

Queries

query players {
  players(filter: { name: "", lanes: [], rank: [] }) {
    id
    name
    lanes
    heros
    rank
  }
}

Mutations

mutation createPlayer {
  createPlayer(
    input: {
      id: "6"
      name: "Drx Deft"
      lanes: ["Button"]
      heros: ["凱特琳"]
      rank: "宗師"
    }
  ) {
    id
    name
    lanes
    heros
    rank
  }
}

mutation createPlayer {
  createPlayer(
    input: {
      id: "7"
      name: "FW NL"
      lanes: ["Button"]
      heros: ["凱特琳"]
      rank: "宗師"
    }
  ) {
    id
    name
    lanes
    heros
    rank
  }
}

Subscriptions

subscription playerUpdated {
  playerUpdated {
    id
    name
    lanes
    heros
    rank
  }
}

subscription PlayerCreated {
  playerCreated {
    id
    name
    lanes
    heros
    rank
  }
}

Route

• /login

• /register

• /search

• /profile

Mark

• dataInit() : 測試用的起始資料，可註解掉或修改，在 backend/src/index