mirror of
https://gitea.tendokyu.moe/Hay1tsme/artemis.git
synced 2026-02-15 20:27:29 +08:00
mai2: add basic webui
This commit is contained in:
Kevin Trocolli
195
titles/mai2/templates/css/mai2_style.css
Normal file
195
titles/mai2/templates/css/mai2_style.css
Normal file
@@ -0,0 +1,195 @@
|
||||
.mai2-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul.mai2-navi {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #333;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.mai2-navi li {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
ul.mai2-navi li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul.mai2-navi li a:hover:not(.active) {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
ul.mai2-navi li a.active {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
ul.mai2-navi li.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
||||
ul.mai2-navi li.right,
|
||||
ul.mai2-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);
|
||||
}
|
||||
|
||||
.basic {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
17
titles/mai2/templates/mai2_header.jinja
Normal file
17
titles/mai2/templates/mai2_header.jinja
Normal file
@@ -0,0 +1,17 @@
|
||||
<div class="mai2-header">
|
||||
<h1>maimai</h1>
|
||||
<ul class="mai2-navi">
|
||||
<li><a class="nav-link" href="/game/mai2/">PROFILE</a></li>
|
||||
<li><a class="nav-link" href="/game/mai2/playlog/">RECORD</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var currentPath = window.location.pathname;
|
||||
if (currentPath === '/game/mai2/') {
|
||||
$('.nav-link[href="/game/mai2/"]').addClass('active');
|
||||
} else if (currentPath.startsWith('/game/mai2/playlog/')) {
|
||||
$('.nav-link[href="/game/mai2/playlog/"]').addClass('active');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
134
titles/mai2/templates/mai2_index.jinja
Normal file
134
titles/mai2/templates/mai2_index.jinja
Normal file
@@ -0,0 +1,134 @@
|
||||
{% extends "core/templates/index.jinja" %}
|
||||
{% block content %}
|
||||
<style>
|
||||
{% include 'titles/mai2/templates/css/mai2_style.css' %}
|
||||
</style>
|
||||
<div class="container">
|
||||
{% include 'titles/mai2/templates/mai2_header.jinja' %}
|
||||
{% if profile is defined and profile is not none and profile|length > 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>Rating:</td>
|
||||
<td>
|
||||
<span class="{% if profile.playerRating >= 15000 %}rainbow{% elif profile.playerRating < 15000 and profile.playerRating >= 14500 %}platinum{% elif profile.playerRating < 14500 and profile.playerRating >=14000 %}platinum{% endif %}">
|
||||
{{ profile.playerRating }}
|
||||
</span>
|
||||
<span>
|
||||
(highest: {{ profile.highestRating }})
|
||||
</span>
|
||||
</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 Delux Score:</td>
|
||||
<td>{{ profile.totalDeluxscore }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Basic Delux Score:</td>
|
||||
<td>{{ profile.totalBasicDeluxscore }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Advanced Delux Score:</td>
|
||||
<td>{{ profile.totalAdvancedDeluxscore }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Expert Delux Score:</td>
|
||||
<td>{{ profile.totalExpertDeluxscore }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total Master Delux Score:</td>
|
||||
<td>{{ profile.totalMasterDeluxscore }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Total ReMaster Delux Score:</td>
|
||||
<td>{{ profile.totalReMasterDeluxscore }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% 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/mai2/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/mai2/version.change", { version: sel.value })
|
||||
.done(function (data) {
|
||||
location.reload();
|
||||
})
|
||||
.fail(function () {
|
||||
alert("Failed to update version.");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock content %}
|
||||
225
titles/mai2/templates/mai2_playlog.jinja
Normal file
225
titles/mai2/templates/mai2_playlog.jinja
Normal file
@@ -0,0 +1,225 @@
|
||||
{% extends "core/templates/index.jinja" %}
|
||||
{% block content %}
|
||||
<style>
|
||||
{% include 'titles/mai2/templates/css/mai2_style.css' %}
|
||||
</style>
|
||||
<div class="container">
|
||||
{% include 'titles/mai2/templates/mai2_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 = ['basic', '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.trackNo }}</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body row">
|
||||
<div class="col-3" style="text-align: center;">
|
||||
<h4 class="card-text">{{ record.raw.deluxscore }}</h4>
|
||||
<h2>{{ rankName[record.raw.rank] }}</h2>
|
||||
<h6
|
||||
class="{% if record.raw.level == 0 %}basic{% elif record.raw.level == 1 %}advanced{% elif record.raw.level == 2 %}expert{% elif record.raw.level == 3 %}master{% elif record.raw.level == 4 %}remaster{% endif %}">
|
||||
{{ difficultyName[record.raw.level] }}  {{ record.difficulty }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="col-6" style="text-align: center;">
|
||||
<table class="table-small table-rowdistinc">
|
||||
<tr>
|
||||
<td>CRITICAL PERFECT</td>
|
||||
<td>
|
||||
Tap: {{ record.raw.tapCriticalPerfect }}<br>
|
||||
Hold: {{ record.raw.holdCriticalPerfect }}<br>
|
||||
Slide: {{ record.raw.slideCriticalPerfect }}<br>
|
||||
Touch: {{ record.raw.touchCriticalPerfect }}<br>
|
||||
Break: {{ record.raw.breakCriticalPerfect }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PERFECT</td>
|
||||
<td>
|
||||
Tap: {{ record.raw.tapPerfect }}<br>
|
||||
Hold: {{ record.raw.holdPerfect }}<br>
|
||||
Slide: {{ record.raw.slidePerfect }}<br>
|
||||
Touch: {{ record.raw.touchPerfect }}<br>
|
||||
Break: {{ record.raw.breakPerfect }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>GREAT</td>
|
||||
<td>
|
||||
Tap: {{ record.raw.tapGreat }}<br>
|
||||
Hold: {{ record.raw.holdGreat }}<br>
|
||||
Slide: {{ record.raw.slideGreat }}<br>
|
||||
Touch: {{ record.raw.touchGreat }}<br>
|
||||
Break: {{ record.raw.breakGreat }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>GOOD</td>
|
||||
<td>
|
||||
Tap: {{ record.raw.tapGood }}<br>
|
||||
Hold: {{ record.raw.holdGood }}<br>
|
||||
Slide: {{ record.raw.slideGood }}<br>
|
||||
Touch: {{ record.raw.touchGood }}<br>
|
||||
Break: {{ record.raw.breakGood }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MISS</td>
|
||||
<td>
|
||||
Tap: {{ record.raw.tapMiss }}<br>
|
||||
Hold: {{ record.raw.holdMiss }}<br>
|
||||
Slide: {{ record.raw.slideMiss }}<br>
|
||||
Touch: {{ record.raw.touchMiss }}<br>
|
||||
Break: {{ record.raw.breakMiss }}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-3" style="text-align: center;">
|
||||
{%if record.raw.comboStatus == 1 %}
|
||||
<h6>FULL COMBO</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.comboStatus == 2 %}
|
||||
<h6>FULL COMBO +</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.comboStatus == 3 %}
|
||||
<h6>ALL PERFECT</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.comboStatus == 4 %}
|
||||
<h6>ALL PERFECT +</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.syncStatus == 1 %}
|
||||
<h6>FULL SYNC</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.syncStatus == 2 %}
|
||||
<h6>FULL SYNC +</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.syncStatus == 3 %}
|
||||
<h6>FULL SYNC DX</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.syncStatus == 4 %}
|
||||
<h6>FULL SYNC DX +</h6>
|
||||
{% endif %}
|
||||
{%if record.raw.isAchieveNewRecord == 1 or record.raw.isDeluxscoreNewRecord == 1 %}
|
||||
<h6>NEW RECORD</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/mai2/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/mai2/playlog/{{ playlog_pages }}">{{
|
||||
playlog_pages }}</a></li>
|
||||
<li class="page-item"><a id="next_page" class="page-link" href="#">Next</a></li>
|
||||
 
|
||||
</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/mai2/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/mai2/playlog/' + pageNumber;
|
||||
window.location.href = url;
|
||||
} else {
|
||||
$('#page_input').val('');
|
||||
$('#page_input').attr('placeholder', 'invalid input!');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user