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

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"
 }

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"
+}

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日"
+
 }

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)
+
+}

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>
   )
 }
 

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 />

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')
 }
 

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>
   )
 }