Merge pull request 'CHUNI: Add more chunithm frontend features' (#133) from MEANINGLINK/artemis:develop into develop

Reviewed-on: Hay1tsme/artemis#133

core/frontend.py

@@ -44,11 +44,12 @@ class ShopOwner():
         self.permissions = perms
 
 class UserSession():
-    def __init__(self, usr_id: int = 0, ip: str = "", perms: int = 0, ongeki_ver: int = 7):
+    def __init__(self, usr_id: int = 0, ip: str = "", perms: int = 0, ongeki_ver: int = 7, chunithm_ver: int = -1):
         self.user_id = usr_id
         self.current_ip = ip
         self.permissions = perms
         self.ongeki_version = ongeki_ver
+        self.chunithm_version = chunithm_ver
 
 class FrontendServlet():
     def __init__(self, cfg: CoreConfig, config_dir: str) -> None:
@@ -213,7 +214,8 @@ class FE_Base():
             sesh.user_id = tk['user_id']
             sesh.current_ip = tk['current_ip']
             sesh.permissions = tk['permissions']
-            
+            sesh.chunithm_version = tk['chunithm_version']
+
             if sesh.user_id <= 0:
                 self.logger.error("User session failed to validate due to an invalid ID!")
                 return UserSession()
@@ -252,12 +254,12 @@ class FE_Base():
         if usr_sesh.permissions <= 0 or usr_sesh.permissions > 255:
             self.logger.error(f"User session failed to validate due to an invalid permission value! {usr_sesh.permissions}")
             return None
-        
+
         return usr_sesh
     
     def encode_session(self, sesh: UserSession, exp_seconds: int = 86400) -> str:
         try:
-            return jwt.encode({ "user_id": sesh.user_id, "current_ip": sesh.current_ip, "permissions": sesh.permissions, "ongeki_version": sesh.ongeki_version, "exp": int(datetime.now(tz=timezone.utc).timestamp()) + exp_seconds }, b64decode(self.core_config.frontend.secret), algorithm="HS256")
+            return jwt.encode({ "user_id": sesh.user_id, "current_ip": sesh.current_ip, "permissions": sesh.permissions, "ongeki_version": sesh.ongeki_version, "chunithm_version": sesh.chunithm_version, "exp": int(datetime.now(tz=timezone.utc).timestamp()) + exp_seconds }, b64decode(self.core_config.frontend.secret), algorithm="HS256")
         except jwt.InvalidKeyError:
             self.logger.error("Failed to encode User session because the secret is invalid!")
             return ""

titles/chuni/frontend.py

@@ -1,5 +1,5 @@
 from typing import List
-from starlette.routing import Route
+from starlette.routing import Route, Mount
 from starlette.requests import Request
 from starlette.responses import Response, RedirectResponse
 from os import path
@@ -29,7 +29,13 @@ class ChuniFrontend(FE_Base):
     def get_routes(self) -> List[Route]:
         return [
             Route("/", self.render_GET, methods=['GET']),
+            Route("/rating", self.render_GET_rating, methods=['GET']),
+            Mount("/playlog", routes=[
+                Route("/", self.render_GET_playlog, methods=['GET']),
+                Route("/{index}", self.render_GET_playlog, methods=['GET']),
+            ]),
             Route("/update.name", self.update_name, methods=['POST']),
+            Route("/version.change", self.version_change, methods=['POST']),
         ]
 
     async def render_GET(self, request: Request) -> bytes:
@@ -39,27 +45,165 @@ class ChuniFrontend(FE_Base):
         usr_sesh = self.validate_session(request)
         if not usr_sesh:
             usr_sesh = UserSession()
-        
-        return Response(template.render(
-            title=f"{self.core_config.server.name} | {self.nav_name}",
-            game_list=self.environment.globals["game_list"],
-            sesh=vars(usr_sesh)
-        ), media_type="text/html; charset=utf-8")
+
+        if usr_sesh.user_id > 0:
+            versions = await self.data.profile.get_all_profile_versions(usr_sesh.user_id)
+            profile = []
+            if versions:
+                # chunithm_version is -1 means it is not initialized yet, select a default version from existing.
+                if usr_sesh.chunithm_version < 0:
+                    usr_sesh.chunithm_version = versions[0]
+                profile = await self.data.profile.get_profile_data(usr_sesh.user_id, usr_sesh.chunithm_version)
+
+            resp = Response(template.render(
+                title=f"{self.core_config.server.name} | {self.nav_name}",
+                game_list=self.environment.globals["game_list"],
+                sesh=vars(usr_sesh),
+                user_id=usr_sesh.user_id,
+                profile=profile,
+                version_list=ChuniConstants.VERSION_NAMES,
+                versions=versions,
+                cur_version=usr_sesh.chunithm_version
+            ), media_type="text/html; charset=utf-8")
+
+            if usr_sesh.chunithm_version >= 0:
+                encoded_sesh = self.encode_session(usr_sesh)
+                resp.set_cookie("DIANA_SESH", encoded_sesh)
+            return resp
+
+        else:
+            return RedirectResponse("/gate/", 303)
+
+    async def render_GET_rating(self, request: Request) -> bytes:
+        template = self.environment.get_template(
+            "titles/chuni/templates/chuni_rating.jinja"
+        )
+        usr_sesh = self.validate_session(request)
+        if not usr_sesh:
+            usr_sesh = UserSession()
+
+        if usr_sesh.user_id > 0:
+            if usr_sesh.chunithm_version < 0:
+                return RedirectResponse("/game/chuni/", 303)
+            profile = await self.data.profile.get_profile_data(usr_sesh.user_id, usr_sesh.chunithm_version)
+            rating = await self.data.profile.get_profile_rating(usr_sesh.user_id, usr_sesh.chunithm_version)
+            hot_list=[]
+            base_list=[]
+            if profile and rating:
+                song_records = []
+                for song in rating:
+                    music_chart = await self.data.static.get_music_chart(usr_sesh.chunithm_version, song.musicId, song.difficultId)
+                    if music_chart:
+                        if (song.score < 800000):
+                            song_rating = 0
+                        elif (song.score >= 800000 and song.score < 900000):
+                            song_rating = music_chart.level / 2 - 5
+                        elif (song.score >= 900000 and song.score < 925000):
+                            song_rating = music_chart.level - 5
+                        elif (song.score >= 925000 and song.score < 975000):
+                            song_rating = music_chart.level - 3
+                        elif (song.score >= 975000 and song.score < 1000000):
+                            song_rating = (song.score - 975000) / 2500 * 0.1 + music_chart.level
+                        elif (song.score >= 1000000 and song.score < 1005000):
+                            song_rating = (song.score - 1000000) / 1000 * 0.1 + 1 + music_chart.level
+                        elif (song.score >= 1005000 and song.score < 1007500):
+                            song_rating = (song.score - 1005000) / 500 * 0.1 + 1.5 + music_chart.level
+                        elif (song.score >= 1007500 and song.score < 1009000):
+                            song_rating = (song.score - 1007500) / 100 * 0.01 + 2 + music_chart.level
+                        elif (song.score >= 1009000):
+                            song_rating = 2.15 + music_chart.level
+                        song_rating = int(song_rating * 10 ** 2) / 10 ** 2
+                        song_records.append({
+                            "difficultId": song.difficultId,
+                            "musicId": song.musicId,
+                            "title": music_chart.title,
+                            "level": music_chart.level,
+                            "score": song.score,
+                            "type": song.type,
+                            "song_rating": song_rating,
+                        })
+                hot_list = [obj for obj in song_records if obj["type"] == "userRatingBaseHotList"]
+                base_list = [obj for obj in song_records if obj["type"] == "userRatingBaseList"]
+            return Response(template.render(
+                title=f"{self.core_config.server.name} | {self.nav_name}",
+                game_list=self.environment.globals["game_list"],
+                sesh=vars(usr_sesh),
+                profile=profile,
+                hot_list=hot_list,
+                base_list=base_list,
+            ), media_type="text/html; charset=utf-8")
+        else:
+            return RedirectResponse("/gate/", 303)
+
+    async def render_GET_playlog(self, request: Request) -> bytes:
+        template = self.environment.get_template(
+            "titles/chuni/templates/chuni_playlog.jinja"
+        )
+        usr_sesh = self.validate_session(request)
+        if not usr_sesh:
+            usr_sesh = UserSession()
+
+        if usr_sesh.user_id > 0:
+            if usr_sesh.chunithm_version < 0:
+                return RedirectResponse("/game/chuni/", 303)
+            path_index = request.path_params.get('index')
+            if not path_index or int(path_index) < 1:
+                index = 0
+            else:
+                index = int(path_index) - 1 # 0 and 1 are 1st page
+            user_id = usr_sesh.user_id
+            playlog_count = await self.data.score.get_user_playlogs_count(user_id)
+            if playlog_count < index * 20 :
+                return Response(template.render(
+                    title=f"{self.core_config.server.name} | {self.nav_name}",
+                    game_list=self.environment.globals["game_list"],
+                    sesh=vars(usr_sesh),
+                    playlog_count=0
+                ), media_type="text/html; charset=utf-8")
+            playlog = await self.data.score.get_playlogs_limited(user_id, index, 20)
+            playlog_with_title = []
+            for record in playlog:
+                music_chart = await self.data.static.get_music_chart(usr_sesh.chunithm_version, record.musicId, record.level)
+                if music_chart:
+                    difficultyNum=music_chart.level
+                    artist=music_chart.artist
+                    title=music_chart.title
+                else:
+                    difficultyNum=0
+                    artist="unknown"
+                    title="musicid: " + str(record.musicId)
+                playlog_with_title.append({
+                    "raw": record,
+                    "title": title,
+                    "difficultyNum": difficultyNum,
+                    "artist": artist,
+                })
+            return Response(template.render(
+                title=f"{self.core_config.server.name} | {self.nav_name}",
+                game_list=self.environment.globals["game_list"],
+                sesh=vars(usr_sesh),
+                user_id=usr_sesh.user_id,
+                playlog=playlog_with_title,
+                playlog_count=playlog_count
+            ), media_type="text/html; charset=utf-8")
+        else:
+            return RedirectResponse("/gate/", 303)
 
     async def update_name(self, request: Request) -> bytes:
         usr_sesh = self.validate_session(request)
         if not usr_sesh:
             return RedirectResponse("/gate/", 303)
-        
-        new_name: str = request.query_params.get('new_name', '')
+
+        form_data = await request.form()
+        new_name: str  = form_data.get("new_name")
         new_name_full = ""
-        
+
         if not new_name:
             return RedirectResponse("/gate/?e=4", 303)
-        
+
         if len(new_name) > 8:
             return RedirectResponse("/gate/?e=8", 303)
-        
+
         for x in new_name: # FIXME: This will let some invalid characters through atm
             o = ord(x)
             try:
@@ -72,12 +216,31 @@ class ChuniFrontend(FE_Base):
                     return RedirectResponse("/gate/?e=4", 303)
                 else:
                     new_name_full += x
-            
+
             except Exception as e:
                 self.logger.error(f"Something went wrong parsing character {o:04X} - {e}")
                 return RedirectResponse("/gate/?e=4", 303)
-        
-        if not await self.data.profile.update_name(usr_sesh, new_name_full):
+
+        if not await self.data.profile.update_name(usr_sesh.user_id, new_name_full):
             return RedirectResponse("/gate/?e=999", 303)
 
-        return RedirectResponse("/gate/?s=1", 303)
+        return RedirectResponse("/game/chuni/?s=1", 303)
+
+    async def version_change(self, request: Request):
+        usr_sesh = self.validate_session(request)
+        if not usr_sesh:
+            usr_sesh = UserSession()
+
+        if usr_sesh.user_id > 0:
+            form_data = await request.form()
+            chunithm_version = form_data.get("version")
+            self.logger.info(f"version change to: {chunithm_version}")
+            if(chunithm_version.isdigit()):
+                usr_sesh.chunithm_version=int(chunithm_version)
+                encoded_sesh = self.encode_session(usr_sesh)
+                self.logger.info(f"Created session with JWT {encoded_sesh}")
+                resp = RedirectResponse("/game/chuni/", 303)
+                resp.set_cookie("DIANA_SESH", encoded_sesh)
+            return resp
+        else:
+            return RedirectResponse("/gate/", 303)

titles/chuni/schema/profile.py

@@ -757,3 +757,26 @@ class ChuniProfileData(BaseData):
             return
         
         return result.lastrowid
+
+    async def get_profile_rating(self, aime_id: int, version: int) -> Optional[List[Row]]:
+        sql = select(rating).where(and_(
+                rating.c.user == aime_id,
+                rating.c.version <= version,
+            ))
+
+        result = await self.execute(sql)
+        if result is None:
+            self.logger.warning(f"Rating of user {aime_id}, version {version} was None")
+            return None
+        return result.fetchall()
+
+    async def get_all_profile_versions(self, aime_id: int) -> Optional[List[Row]]:
+        sql = select([profile.c.version]).where(profile.c.user == aime_id)
+        result = await self.execute(sql)
+        if result is None:
+            self.logger.warning(f"user {aime_id}, has no profile")
+            return None
+        else:
+            versions_raw = result.fetchall()
+            versions = [row[0] for row in versions_raw]
+        return sorted(versions, reverse=True)

titles/chuni/schema/score.py

@@ -190,6 +190,23 @@ class ChuniScoreData(BaseData):
             return None
         return result.fetchall()
 
+    async def get_playlogs_limited(self, aime_id: int, index: int, count: int) -> Optional[Row]:
+        sql = select(playlog).where(playlog.c.user == aime_id).order_by(playlog.c.id.desc()).limit(count).offset(index * count)
+
+        result = await self.execute(sql)
+        if result is None:
+            self.logger.warning(f" aime_id {aime_id} has no playlog ")
+            return None
+        return result.fetchall()
+
+    async def get_user_playlogs_count(self, aime_id: int) -> Optional[Row]:
+        sql = select(func.count()).where(playlog.c.user == aime_id)
+        result = await self.execute(sql)
+        if result is None:
+            self.logger.warning(f" aime_id {aime_id} has no playlog ")
+            return None
+        return result.scalar()
+
     async def put_playlog(self, aime_id: int, playlog_data: Dict, version: int) -> Optional[int]:
         # Calculate the ROM version that should be inserted into the DB, based on the version of the ggame being inserted
         # We only need from Version 10 (Plost) and back, as newer versions include romVersion in their upsert

titles/chuni/templates/chuni_header.jinja

@@ -0,0 +1,24 @@
+<div class="chuni-header">
+  <h1>Chunithm</h1>
+  <ul class="chuni-navi">
+    <li><a class="nav-link" href="/game/chuni">PROFILE</a></li>
+    <li><a class="nav-link" href="/game/chuni/rating">RATING</a></li>
+    <li><a class="nav-link" href="/game/chuni/playlog">RECORD</a></li>
+    <li><a class="nav-link" href="/game/chuni/musics">MUSICS</a></li>
+    <li><a class="nav-link" href="/game/chuni/userbox">USER BOX</a></li>
+  </ul>
+</div>
+<script>
+  $(document).ready(function () {
+    var currentPath = window.location.pathname;
+    if (currentPath === '/game/chuni/') {
+      $('.nav-link[href="/game/chuni"]').addClass('active');
+    } else if (currentPath.startsWith('/game/chuni/playlog')) {
+      $('.nav-link[href="/game/chuni/playlog"]').addClass('active');
+    } else if (currentPath.startsWith('/game/chuni/rating')) {
+      $('.nav-link[href="/game/chuni/rating"]').addClass('active');
+    } else if (currentPath.startsWith('/game/chuni/musics')) {
+      $('.nav-link[href="/game/chuni/musics"]').addClass('active');
+    }
+  });
+</script>

titles/chuni/templates/chuni_index.jinja

@@ -1,43 +1,150 @@
 {% extends "core/templates/index.jinja" %}
 {% block content %}
-<h1>Chunithm</h1>
-{% if profile is defined and profile is not none and profile.id > 0 %}
-<script type="text/javascript">
-function toggle_new_name_form() {
-  let frm = document.getElementById("new_name_form");
-  let btn = document.getElementById("btn_toggle_form");
-
-  if (frm.style['display'] != "") {
-    frm.style['display'] = "";
-    frm.style['max-height'] = "";
-    btn.innerText = "Cancel";
-  } else {
-    frm.style['display'] = "none";
-    frm.style['max-height'] = "0px";
-    btn.innerText = "Edit";
-  }
-}
-</script>
-<h3>Profile for {{ profile.userName }}&nbsp;<button onclick="toggle_new_name_form()" class="btn btn-secondary" id="btn_toggle_form">Edit</button></h3>
-{% if error is defined %}
-{% include "core/templates/widgets/err_banner.jinja" %}
-{% endif %}
-{% if success is defined and success == 1 %}
-<div style="background-color: #00AA00; padding: 20px; margin-bottom: 10px; width: 15%;">
-Update successful
-</div>
-{% endif %}
-<form style="max-width: 33%; display: none; max-height: 0px;" action="/game/chuni/update.name" method="post" id="new_name_form">
-  <div class="mb-3">
-    <label for="new_name" class="form-label">New Trainer Name</label>
-    <input type="text" class="form-control" id="new_name" name="new_name" aria-describedby="new_name_help" maxlength="14">
-    <div id="new_name_help" class="form-text">Must be 14 characters or less</div>
+<style>
+  {% include 'titles/chuni/templates/css/chuni_style.css' %}
+</style>
+<div class="container">
+  {% include 'titles/chuni/templates/chuni_header.jinja' %}
+  {% if profile is defined and profile is not none and profile.id > 0 %}
+  <div class="row">
+    <div class="col-lg-8 m-auto mt-3">
+      <div class="card bg-card rounded">
+        <table class="table-large table-rowdistinct">
+          <caption align="top">OVERVIEW</caption>
+          <tr>
+            <th>{{ profile.userName }}</th>
+            <th>
+              <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#name_change">Edit</button>
+            </th>
+          </tr>
+          <tr>
+            <td>version:</td>
+            <td>
+              <select name="version" id="version" onChange="changeVersion(this)">
+                {% for ver in versions %}
+                {% if ver == cur_version %}
+                <option value="{{ ver }}" selected>{{ version_list[ver] }}</option>
+                {% else %}
+                <option value="{{ ver }}">{{ version_list[ver] }}</option>
+                {% endif %}
+                {% endfor %}
+              </select>
+              {% if versions | length > 1 %}
+              <p style="margin-block-end: 0;">You have {{ versions | length }} versions.</p>
+              {% endif %}
+            </td>
+          </tr>
+          <tr>
+            <td>Level:</td>
+            <td>{{ profile.level }}</td>
+          </tr>
+          <tr>
+            <td>Rating:</td>
+            <td>
+              <span class="{% if profile.playerRating >= 1600 %}rainbow{% elif profile.playerRating < 1600 and profile.playerRating >= 1525 %}platinum{% elif profile.playerRating < 1525 and profile.playerRating >=1500 %}platinum{% endif %}">
+                {{ profile.playerRating|float/100 }}
+              </span>
+              <span>
+                (highest: {{ profile.highestRating|float/100 }})
+              </span>
+            </td>
+          </tr>
+          <tr>
+            <td>Over Power:</td>
+            <td>{{ profile.overPowerPoint|float/100 }}({{ profile.overPowerRate|float/100 }})</td>
+          </tr>
+          <tr>
+            <td>Current Point:</td>
+            <td>{{ profile.point }}</td>
+          </tr>
+          <tr>
+            <td>Total Point:</td>
+            <td>{{ profile.totalPoint }}</td>
+          </tr>
+          <tr>
+            <td>Play Counts:</td>
+            <td>{{ profile.playCount }}</td>
+          </tr>
+          <tr>
+            <td>Last Play Date:</td>
+            <td>{{ profile.lastPlayDate }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+    <div class="col-lg-8 m-auto mt-3"> 
+      <div class="card bg-card rounded">
+          <table class="table-large table-rowdistinct">
+            <caption align="top">SCORE</caption>
+            <tr>
+              <td>Total High Score:</td>
+              <td>{{ profile.totalHiScore }}</td>
+            </tr>
+            <tr>
+              <td>Total Basic High Score:</td>
+              <td>{{ profile.totalBasicHighScore }}</td>
+            </tr>
+            <tr>
+              <td>Total Advanced High Score:</td>
+              <td>{{ profile.totalAdvancedHighScore }}</td>
+            </tr>
+            <tr>
+              <td>Total Expert High Score:</td>
+              <td>{{ profile.totalExpertHighScore }}</td>
+            </tr>
+            <tr>
+              <td>Total Master High Score:</td>
+              <td>{{ profile.totalMasterHighScore }}</td>
+            </tr>
+            <tr>
+              <td>Total Ultima High Score :</td>
+              <td>{{ profile.totalUltimaHighScore }}</td>
+            </tr>
+          </table>
+      </div>
+    </div>
   </div>
-  <button type="submit" class="btn btn-primary">Submit</button>
-</form>
-{% elif sesh is defined and sesh is not none and sesh.user_id > 0 %}
-No profile information found for this account.
-{% else %}
-Login to view profile information.
-{% endif %}
+  {% if error is defined %}
+  {% include "core/templates/widgets/err_banner.jinja" %}
+  {% endif %}
+  {% elif sesh is defined and sesh is not none and sesh.user_id > 0 %}
+  No profile information found for this account.
+  {% else %}
+  Login to view profile information.
+  {% endif %}
+</div>
+<div class="modal fade" id="name_change" tabindex="-1" aria-labelledby="name_change_label" data-bs-theme="dark"
+  aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">Name change</h5>
+      </div>
+      <div class="modal-body">
+        <form id="new_name_form" action="/game/chuni/update.name" method="post" style="outline: 0;">
+          <label class="form-label" for="new_name">new name:</label>
+          <input class="form-control" aria-describedby="newNameHelp" form="new_name_form" id="new_name"
+            name="new_name" maxlength="14" type="text" required>
+          <div id="newNameHelp" class="form-text">name must be full-width character string.
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <input type=submit class="btn btn-primary" type="button" form="new_name_form">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  function changeVersion(sel) {
+    $.post("/game/chuni/version.change", { version: sel.value })
+      .done(function (data) {
+        location.reload();
+      })
+      .fail(function () {
+        alert("Failed to update version.");
+      });
+  }
+</script>
 {% endblock content %}

titles/chuni/templates/chuni_playlog.jinja

@@ -0,0 +1,184 @@
+{% extends "core/templates/index.jinja" %}
+{% block content %}
+<style>
+  {% include 'titles/chuni/templates/css/chuni_style.css' %}
+</style>
+<div class="container">
+  {% include 'titles/chuni/templates/chuni_header.jinja' %}
+  {% if playlog is defined and playlog is not none %}
+  <div class="row">
+    <h4 style="text-align: center;">Playlog counts: {{ playlog_count }}</h4>
+    {% set rankName = ['D', 'C', 'B', 'BB', 'BBB', 'A', 'AA', 'AAA', 'S', 'S+', 'SS', 'SS+', 'SSS', 'SSS+'] %}
+    {% set difficultyName = ['normal', 'hard', 'expert', 'master', 'ultimate'] %}
+    {% for record in playlog %}
+    <div class="col-lg-6 mt-3">
+      <div class="card bg-card rounded card-hover">
+        <div class="card-header row">
+          <div class="col-8 scrolling-text">
+            <h5 class="card-text"> {{ record.title }} </h5>
+            <br>
+            <h6 class="card-text"> {{ record.artist }} </h6>
+          </div>
+          <div class="col-4">
+            <h6 class="card-text">{{ record.raw.userPlayDate }}</h6>
+            <h6 class="card-text">TRACK {{ record.raw.track }}</h6>
+          </div>
+        </div>
+        <div class="card-body row">
+          <div class="col-3" style="text-align: center;">
+            <h4 class="card-text">{{ record.raw.score }}</h4>
+            <h2>{{ rankName[record.raw.rank] }}</h2>
+            <h6
+              class="{% if record.raw.level == 0 %}normal{% elif record.raw.level == 1 %}advanced{% elif record.raw.level == 2 %}expert{% elif record.raw.level == 3 %}master{% elif record.raw.level == 4 %}ultima{% endif %}">
+              {{ difficultyName[record.raw.level] }}&nbsp&nbsp{{ record.difficultyNum }}
+            </h6>
+          </div>
+          <div class="col-6" style="text-align: center;">
+            <table class="table-small table-rowdistinc">
+              <tr>
+                <td>JUSTICE CRITIAL</td>
+                <td>
+                  {{ record.raw.judgeCritical + record.raw.judgeHeaven }}
+                </td>
+              </tr>
+              <tr>
+                <td>JUSTICE</td>
+                <td>
+                  {{ record.raw.judgeJustice }}
+                </td>
+              </tr>
+              <tr>
+                <td>ATTACK</td>
+                <td>
+                  {{ record.raw.judgeAttack }}
+                </td>
+              </tr>
+              <tr>
+                <td>MISS</td>
+                <td>
+                  {{ record.raw.judgeGuilty }}
+                </td>
+              </tr>
+            </table>
+          </div>
+          <div class="col-3" style="text-align: center;">
+            {%if record.raw.isFullCombo == 1 %}
+            <h6>FULL COMBO</h6>
+            {% endif %}
+            {%if record.raw.isAllJustice == 1 %}
+            <h6>ALL JUSTICE</h6>
+            {% endif %}
+            {%if record.raw.isNewRecord == 1 %}
+            <h6>NEW RECORD</h6>
+            {% endif %}
+            {%if record.raw.fullChainKind > 0 %}
+            <h6>FULL CHAIN</h6>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+  {% set playlog_pages = playlog_count // 20 + 1 %}
+  {% elif sesh is defined and sesh is not none and sesh.user_id > 0 %}
+  No Playlog information found for this account.
+  {% else %}
+  Login to view profile information.
+  {% endif %}
+</div>
+<footer class="navbar-fixed-bottom">
+  <nav aria-label="Playlog page navigation">
+    <ul class="pagination justify-content-center mt-3">
+      <li class="page-item"><a id="prev_page" class="page-link" href="#">Previous</a></li>
+      <li class="page-item"><a id="first_page" class="page-link" href="/game/chuni/playlog/">1</a></li>
+      <li class="page-item"><a id="prev_3_page" class="page-link" href="">...</a></li>
+      <li class="page-item"><a id="front_page" class="page-link" href="">2</a></li>
+      <li class="page-item"><a id="cur_page" class="page-link active" href="">3</a></li>
+      <li class="page-item"><a id="back_page" class="page-link" href="">4</a></li>
+      <li class="page-item"><a id="next_3_page" class="page-link" href="">...</a></li>
+      <li class="page-item"><a id="last_page" class="page-link" href="/game/chuni/playlog/{{ playlog_pages }}">{{
+          playlog_pages }}</a></li>
+      <li class="page-item"><a id="next_page" class="page-link" href="#">Next</a></li>
+      &nbsp
+    </ul>
+  </nav>
+  <div class="row">
+    <div class="col-5"></div>
+    <div class="col-2">
+      <div class="input-group rounded">
+        <input id="page_input" type="text" class="form-control" placeholder="go to page">
+        <span class="input-group-btn">
+          <button id="go_button" class="btn btn-light" type="button">
+            Go!
+          </button>
+        </span>
+      </div>
+    </div>
+    <div class="col-5"></div>
+  </div>
+</footer>
+
+<script>
+  $(document).ready(function () {
+    $('.scrolling-text p, .scrolling-text h1, .scrolling-text h2, .scrolling-text h3, .scrolling-text h4, .scrolling-text h5, .scrolling-text h6').each(function () {
+      var parentWidth = $(this).parent().width();
+      var elementWidth = $(this).outerWidth();
+      var elementWidthWithPadding = $(this).outerWidth(true);
+
+      if (elementWidthWithPadding > parentWidth) {
+        $(this).addClass('scrolling');
+      }
+    });
+
+    var currentUrl = window.location.pathname;
+    var currentPage = parseInt(currentUrl.split('/').pop());
+    var rootUrl = '/game/chuni/playlog/';
+    var playlogPages = {{ playlog_pages }};
+  if (Number.isNaN(currentPage)) {
+    currentPage = 1;
+  }
+  $('#cur_page').text(currentPage);
+  $('#prev_page').attr('href', rootUrl + (currentPage - 1))
+  $('#next_page').attr('href', rootUrl + (currentPage + 1))
+  $('#front_page').attr('href', rootUrl + (currentPage - 1))
+  $('#front_page').text(currentPage - 1);
+  $('#back_page').attr('href', rootUrl + (currentPage + 1))
+  $('#back_page').text(currentPage + 1);
+  $('#prev_3_page').attr('href', rootUrl + (currentPage - 3))
+  $('#next_3_page').attr('href', rootUrl + (currentPage + 3))
+  if ((currentPage - 1) < 3) {
+    $('#prev_3_page').hide();
+    if ((currentPage - 1) < 2) {
+      $('#front_page').hide();
+      if (currentPage === 1) {
+        $('#first_page').hide();
+        $('#prev_page').addClass('disabled');
+      }
+    }
+  }
+  if ((playlogPages - currentPage) < 3) {
+    $('#next_3_page').hide();
+    if ((playlogPages - currentPage) < 2) {
+      $('#back_page').hide();
+      if (currentPage === playlogPages) {
+        $('#last_page').hide();
+        $('#next_page').addClass('disabled');
+      }
+    }
+  }
+
+  $('#go_button').click(function () {
+    var pageNumber = parseInt($('#page_input').val());
+
+    if (!Number.isNaN(pageNumber) && pageNumber <= playlogPages && pageNumber >= 0) {
+      var url = '/game/chuni/playlog/' + pageNumber;
+      window.location.href = url;
+    } else {
+      $('#page_input').val('');
+      $('#page_input').attr('placeholder', 'invalid input!');
+    }
+  });
+  });
+</script>
+{% endblock content %}

titles/chuni/templates/chuni_rating.jinja

@@ -0,0 +1,79 @@
+{% extends "core/templates/index.jinja" %}
+{% block content %}
+<style>
+  {% include 'titles/chuni/templates/css/chuni_style.css' %}
+</style>
+<div class="container">
+  {% include 'titles/chuni/templates/chuni_header.jinja' %}
+  {% if profile is defined and profile is not none and profile.id > 0 %}
+  <h4 style="text-align: center;">Rating: {{ profile.playerRating|float/100 }}&nbsp&nbsp&nbsp&nbspPlayer Counts: {{
+    profile.playCount }}</h4>
+  <div class="row">
+    {% if hot_list %}
+    <div class="col-lg-6 mt-3">
+      <div class="card  bg-card rounded">
+        <table class="table-large table-rowdistinct">
+          <caption align="top">Recent 10</caption>
+          <tr>
+            <th>Music</th>
+            <th>Difficulty</th>
+            <th>Score</th>
+            <th>Rating</th>
+          </tr>
+          {% for row in hot_list %}
+          <tr>
+            <td>{{ row.title }}</td>
+            <td
+              class="{% if row.difficultId == 0 %}basic{% elif row.difficultId == 1 %}{% elif row.difficultId == 2 %}expert{% elif row.difficultId == 3 %}master{% else %}{% endif %}">
+              {{ row.level }}
+            </td>
+            <td>{{ row.score }}</td>
+            <td class="{% if row.song_rating >= 16 %}rainbow{% endif %}">
+              {{ row.song_rating }}
+            </td>
+          </tr>
+          {% endfor %}
+        </table>
+      </div>
+    </div>
+    {% else %}
+    <p>No r10 found</p>
+    {% endif %}
+    {% if base_list %}
+    <div class="col-lg-6 mt-3">
+      <div class="card bg-card rounded">
+        <table class="table-large table-rowdistinct">
+          <caption align="top">Best 30</caption>
+          <tr>
+            <th>Music</th>
+            <th>Difficulty</th>
+            <th>Score</th>
+            <th>Rating</th>
+          </tr>
+          {% for row in base_list %}
+          <tr>
+            <td>{{ row.title }}</td>
+            <td
+              class="{% if row.difficultId == 0 %}normal{% elif row.difficultId == 1 %}hard{% elif row.difficultId == 2 %}expert{% elif row.difficultId == 3 %}master{% else %}{% endif %}">
+              {{ row.level }}
+            </td>
+            <td>{{ row.score }}</td>
+            <td class="{% if row.song_rating >= 16 %}rainbow{% endif %}">
+              {{ row.song_rating }}
+            </td>
+          </tr>
+          {% endfor %}
+        </table>
+      </div>
+    </div>
+    {% else %}
+    <p>No b30 found</p>
+    {% endif %}
+  </div>
+  {% elif sesh is defined and sesh is not none and sesh.user_id > 0 %}
+  No profile information found for this account.
+  {% else %}
+  Login to view profile information.
+  {% endif %}
+</div>
+{% endblock content %}

titles/chuni/templates/css/chuni_style.css

@@ -0,0 +1,195 @@
+.chuni-header {
+    text-align: center;
+}
+
+ul.chuni-navi {
+    list-style-type: none;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+    text-align: center;
+    display: inline-block;
+}
+
+ul.chuni-navi li {
+    display: inline-block;
+}
+
+ul.chuni-navi li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+ul.chuni-navi li a:hover:not(.active) {
+    background-color: #111;
+}
+
+ul.chuni-navi li a.active {
+    background-color: #4CAF50;
+}
+
+ul.chuni-navi li.right {
+    float: right;
+}
+
+@media screen and (max-width: 600px) {
+
+    ul.chuni-navi li.right,
+    ul.chuni-navi li {
+        float: none;
+        display: block;
+        text-align: center;
+    }
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border-collapse: separate;
+    overflow: hidden;
+    background-color: #555555;
+
+}
+
+th, td {
+    text-align: left;
+    border: none;
+
+}
+
+th {
+    color: white;
+}
+
+.table-rowdistinct tr:nth-child(even) {
+    background-color: #303030;
+}
+
+.table-rowdistinct tr:nth-child(odd) {
+    background-color: #555555;
+}
+
+caption {
+    text-align: center;
+    color: white;
+    font-size: 18px;
+    font-weight: bold;
+}
+
+.table-large {
+    margin: 16px;
+}
+
+.table-large th,
+.table-large td {
+    padding: 8px;
+}
+
+.table-small {
+    width: 100%;
+    margin: 4px;
+}
+
+.table-small th,
+.table-small td {
+    padding: 2px;
+}
+
+.bg-card {
+    background-color: #555555;
+}
+
+.card-hover {
+    transition: all 0.2s ease-in-out;
+}
+
+.card-hover:hover {
+    transform: scale(1.02);
+}
+
+.normal {
+    color: #28a745;
+    font-weight: bold;
+}
+
+.hard {
+    color: #ffc107;
+
+    font-weight: bold;
+}
+
+.expert {
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.master {
+    color: #dd09e8;
+    font-weight: bold;
+}
+
+.ultimate {
+    color: #000000;
+    font-weight: bold;
+}
+
+.score {
+    color: #ffffff;
+    font-weight: bold;
+}
+
+.rainbow {
+    background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia) 0 / 5em;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: bold;
+}
+
+.platinum {
+    color: #FFFF00;
+    font-weight: bold;
+}
+
+.gold {
+    color: #FFFF00;
+    font-weight: bold;
+}
+
+.scrolling-text {
+    overflow: hidden;
+}
+
+.scrolling-text p {
+    white-space: nowrap;
+    display: inline-block;
+
+}
+
+.scrolling-text h6 {
+    white-space: nowrap;
+    display: inline-block;
+
+}
+
+.scrolling-text h5 {
+    white-space: nowrap;
+    display: inline-block;
+
+}
+
+.scrolling {
+    animation: scroll 10s linear infinite;
+}
+
+@keyframes scroll {
+    0% {
+        transform: translateX(100%);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}