Feature: Game Leaderboards (RiiConnect24#17)

* Feature: Moderation (RiiConnect24#9) (RiiConnect24#10) * feature: Added banning, and, forced hidden button * feature: Added hiding and shadow hiding users * feature: Added badges to user profile * feature: Added hiding from the front page when hidden * fix: Fixed code related to front page hiding * feature: Added game leaderboard - showing the #1 for all games * refactor: Rewrote most of the game leaderboard code * Rebase: Master -> Game Leaderboards (RiiConnect24#16) * Feature: Moderation (RiiConnect24#9) * feature: Added banning, and, forced hidden button * feature: Added hiding and shadow hiding users * feature: Added badges to user profile * feature: Added hiding from the front page when hidden * fix: Fixed code related to front page hiding * Feature: Full-Site Multilanguage support (RiiConnect24#13) * Feature: Moderation (RiiConnect24#9) (RiiConnect24#12) * feature: Added banning, and, forced hidden button * feature: Added hiding and shadow hiding users * feature: Added badges to user profile * feature: Added hiding from the front page when hidden * fix: Fixed code related to front page hiding * feature: Began adding the framework for multi-language support * feature: Full localization support and all pages and nav bars * Refactor: SQL optimization (RiiConnect24#15) * refactor: Began merging sql requests and grouping private keys * refactor: User page SQL code refactor and multi-game support * refactor: User edit page SQL optimized * refactor: Optimized SQL for edit page * feature: Added clicking to go to profile and localizations
matthe815 · Sep 13, 2023 · e6f283e · e6f283e
1 parent 9b44385
commit e6f283e
Show file tree

Hide file tree

Showing 10 changed files with 289 additions and 126 deletions.
diff --git a/locales/en.json b/locales/en.json
@@ -1,4 +1,6 @@
 {
+ "name": "English (Simplified)",
+
  "welcome": "Welcome to LinkTag!",
  "join_others": "Join {0} other gamers that have played games {1} times!",
  "credits": "Credits",
@@ -46,5 +48,14 @@
  "profile": "Profile",
  "account": "My Account",
  "edit_mii": "Edit Mii",
- "logout": "Logout"
+ "logout": "Logout",
+
+ "search": "Search",
+ "previous": "Previous",
+ "next": "Next",
+
+ "playtimes_since": "Played <strong>{0}</strong> times since {1}",
+ "total_playtime": "Played <strong>{0}</strong> total",
+
+ "date_format": "MM/DD/YYYY"
 }
diff --git a/locales/en_uk.json b/locales/en_uk.json
@@ -0,0 +1,61 @@
+{
+ "name": "English (Traditional)",
+
+ "welcome": "Welcome to LinkTag!",
+ "join_others": "Join {0} other gamers that have played games {1} times!",
+ "credits": "Credits",
+ "discord": "Login with Discord",
+ "carasol_linktag": "<a href='user/{0}'>{1}</a>'s LinkTag",
+ "supported_platforms": "Supported Platforms",
+ "banned_reason": "This account has been banned. Reason: {0}",
+ "game_id": "Game / ID",
+ "play_time": "Play Time",
+ "last_played": "Last Played",
+ "play_count": "Play Count",
+ "user_info": "User Information",
+ "banned": "Banned",
+ "hidden": "Hidden",
+ "administrator": "Administrator",
+ "moderator": "Moderator",
+ "play_log": "Play Log",
+
+ "registered_on": "<strong>Registered</strong>",
+ "overlay": "<strong>Overlay</strong>",
+ "background": "<strong>Background</strong>",
+ "coin": "<strong>Coin</strong>",
+ "font": "<strong>Font</strong>",
+ "flag": "<strong>Flag</strong>",
+ "cover_region": "<strong>Cover Region</strong>",
+ "cover_type": "<strong>Cover Type</strong>",
+
+ "edit_tag": "Edit Tag",
+
+ "general": "General",
+ "display_name": "<string>Display Name</strong>",
+ "friend_code": "<strong>Friend Code</strong>",
+
+ "cover_region_explanation": "Linktag will try the game&apos;s region and fallback to English\nif it can&apos;t find a cover.",
+ "show_avatar": "Show Avatar",
+
+ "select_overlay": "Select Overlay",
+ "select_background": "Select Background",
+ "select_coin": "Select Coin",
+ "select_font": "Select Font",
+
+ "images": "Images",
+
+ "home": "Home",
+ "profile": "Profile",
+ "account": "My Account",
+ "edit_mii": "Edit Mii",
+ "logout": "Logout",
+
+ "search": "Search",
+ "previous": "Previous",
+ "next": "Next",
+
+ "playtimes_since": "Played <strong>{0}</strong> times since {1}",
+ "total_playtime": "Played <strong>{0}</strong> total",
+
+ "date_format": "DD/MM/YYYY"
+}
diff --git a/locales/jp.json b/locales/jp.json
@@ -1,4 +1,6 @@
 {
+ "name": "日本語",
+
  "welcome": "LinkTagへようこそ！",
  "join_others": "ゲームを{0}回プレイしたことがある他の{1}人のゲーマーに参加しよう！",
  "discord": "Discordでログイン",
@@ -42,8 +44,20 @@
  "images": "画像",
 
  "home": "ホーム",
+ "leaderboard": "リーダーボード",
+
  "profile": "プロファイル",
  "account": "マイアカウント",
  "edit_mii": "Miiを編集",
- "logout": "ログアウト"
+ "logout": "ログアウト",
+
+ "search": "検索",
+ "previous": "前",
+ "next": "次",
+
+ "playtimes_since": "<strong>{1}</strong>から<strong>{0}</strong>回遊びました",
+ "total_playtime": "合計<strong>{0}</strong>",
+
+ "date_format": "YYYY年MM月DD日"
+
 }
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -137,3 +137,19 @@ model moderation_log {
  reason String @db.VarChar(255)
  action_time DateTime @default(now()) @db.DateTime(0)
 }
+
+model banned_user {
+ id Int @id @default(autoincrement())
+ user_id Int @unique
+ ip_address String @db.VarChar(64)
+ reason String @db.VarChar(255)
+ action_time DateTime @default(now()) @db.DateTime(0)
+}
+
+model moderation_log {
+ id Int @id @default(autoincrement())
+ user_id Int
+ reason String @db.VarChar(255)
+ action_time DateTime @default(now()) @db.DateTime(0)
+
+}
diff --git a/src/components/leaderboard/GameLeaderboardCard.jsx b/src/components/leaderboard/GameLeaderboardCard.jsx
@@ -1,31 +1,48 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import dayjs from '@/lib/dayjs'
-import { DATE_FORMAT } from '@/lib/constants/miscConstants'
 import { Card, Col } from 'react-bootstrap'
+import moment from 'moment'
+import LocalizedString from '../shared/LocalizedString'
+import LanguageContext from '../shared/LanguageContext'
+
+function GameLeaderboardCard ({ game }) {
+ function getTimeStamp (time) {
+ const duration = moment.duration(time, 'seconds')
+ return duration.humanize()
+ }
 
-function GameLeaderboardCard ({ game, position }) {
  return (
- <Col key={game.game_pk}>
- <Card className='h-100 contain-content' bg='secondary' text='white'>
- <Card.Header as='h5' className='h-100'>
- #{position} - {game.name === null ? 'Unknown Game' : game.name}
- </Card.Header>
- <Card.Body className='d-flex justify-content-center'>
- <img
- alt={game.name === null ? 'Unknown Game' : game.name}
- src={`/api/cover/${game.console}/${game.game_id}`}
- />
- </Card.Body>
- <Card.Footer>
- Played <strong>{game.playcount}</strong>{' '}
- {game.playcount === 1 ? 'time' : 'times'} since{' '}
- {dayjs(game.first_played).format(DATE_FORMAT)}
- <br />
- Last played on {dayjs(game.last_played).format(DATE_FORMAT)}
- </Card.Footer>
- </Card>
- </Col>
+ <LanguageContext.Helper.Consumer>
+ {(lang) => (
+ <Col key={game.game_pk}>
+ <Card className='h-100 contain-content' bg='secondary' text='white'>
+ <Card.Header as='h5' className='h-100'>
+ {game.game_pk === null ? 'Unknown Game' : game.game.name} - <a href={`/user/${game.user.username}`}>{game.user.display_name}</a>
+ </Card.Header>
+ <Card.Body className='d-flex justify-content-center'>
+ <img
+ alt={game.name === null ? 'Unknown Game' : game.game.name}
+ src={`/api/cover/${game.game.console}/${game.game.game_id}`}
+ />
+ <a href={`/user/${game.user.username}`}>
+ <img
+ style={{ borderRadius: '50%' }}
+ src={game.user.image}
+ width={96}
+ height={96}
+ />
+ </a>
+ </Card.Body>
+ <Card.Footer>
+ <LocalizedString string='playtimes_since' values={[game.play_count, dayjs(game.played_on).format(LanguageContext.languages[lang].date_format)]} />
+ <br />
+ <LocalizedString string='total_playtime' values={[getTimeStamp(game.play_time)]} />
+ </Card.Footer>
+ </Card>
+ </Col>
+ )}
+ </LanguageContext.Helper.Consumer>
  )
 }
 

diff --git a/src/components/shared/AppNavbar.jsx b/src/components/shared/AppNavbar.jsx
@@ -8,6 +8,7 @@ import LocalizedString from './LocalizedString'
 
 const flags = {
  en: '/img/flag/us.png',
+ en_uk: '/img/flag/eu.png',
  jp: '/img/flag/jp.png'
 }
 
@@ -45,22 +46,22 @@ function AppNavbar () {
  <Link href='/' passHref legacyBehavior>
  <Nav.Link active={router.pathname === '/'}><LocalizedString string='home' /></Nav.Link>
  </Link>
+ <Link href='/game-leaderboard' passHref legacyBehavior>
+ <Nav.Link active={router.pathname === '/game-leaderboard'}>Leaderboard</Nav.Link>
+ </Link>
  </Nav>
  <Nav className='ms-auto'>
  <Nav>
  <NavDropdown
  align='end'
  title={<img src={flags[lang]} width='24' />}>
- <Link href='#' onClick={() => updateLanguage('en')}>
- <NavDropdown.Item>
- <img src='/img/flag/us.png' width='24' /> English
- </NavDropdown.Item>
- </Link>
- <Link href='#' onClick={() => updateLanguage('jp')}>
- <NavDropdown.Item>
- <img src='/img/flag/jp.png' width='24' /> 日本語
- </NavDropdown.Item>
- </Link>
+ {Object.entries(flags).map((entry, index) => (
+ <Link href='#' onClick={() => updateLanguage(entry[0])} key={entry[0]}>
+ <NavDropdown.Item>
+ <img src={entry[1]} width='24' /> {LanguageContext.languages[entry[0]].name}
+ </NavDropdown.Item>
+ </Link>
+ ))}
  </NavDropdown>
  </Nav>
  <UserMenu />

diff --git a/src/components/shared/LanguageContext.jsx b/src/components/shared/LanguageContext.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 const languages = {
  en: require('../../../locales/en.json'),
+ en_uk: require('../../../locales/en_uk.json'),
  jp: require('../../../locales/jp.json')
 }
 

diff --git a/src/components/shared/Pagination.jsx b/src/components/shared/Pagination.jsx
@@ -1,30 +1,35 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import ReactPaginate from 'react-paginate'
+import LanguageContext from './LanguageContext'
 
 function Pagination ({ currentPage, totalPages, handlePageClick }) {
  return (
- <ReactPaginate
- containerClassName='pagination justify-content-center flex-wrap'
- breakClassName='page-item'
- breakLinkClassName='page-link'
- pageClassName='page-item'
- pageLinkClassName='page-link'
- activeClassName='active'
- disabledLinkClassName='disabled'
- previousClassName='page-item'
- previousLinkClassName='page-link'
- nextClassName='page-item'
- nextLinkClassName='page-link'
- breakLabel='...'
- nextLabel='Next >'
- forcePage={currentPage}
- onPageChange={handlePageClick}
- pageRangeDisplayed={5}
- pageCount={totalPages}
- previousLabel='< Previous'
- renderOnZeroPageCount={null}
- />
+ <LanguageContext.Helper.Consumer>
+ {(lang) => (
+ <ReactPaginate
+ containerClassName='pagination justify-content-center flex-wrap'
+ breakClassName='page-item'
+ breakLinkClassName='page-link'
+ pageClassName='page-item'
+ pageLinkClassName='page-link'
+ activeClassName='active'
+ disabledLinkClassName='disabled'
+ previousClassName='page-item'
+ previousLinkClassName='page-link'
+ nextClassName='page-item'
+ nextLinkClassName='page-link'
+ breakLabel='...'
+ nextLabel={LanguageContext.languages[lang].next}
+ forcePage={currentPage}
+ onPageChange={handlePageClick}
+ pageRangeDisplayed={5}
+ pageCount={totalPages}
+ previousLabel={LanguageContext.languages[lang].previous}
+ renderOnZeroPageCount={null}
+ />
+ )}
+ </LanguageContext.Helper.Consumer>
  )
 }