alterwain/Nosedive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design update, firefox tweak, online friends gui.

Browse Source
This commit is contained in:
Michael Wain 2024-02-23 02:50:33 +03:00
parent 162d287e78
commit 0ece55e87f
7 changed files with 92 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/resources/static/css/games.css
View File

@ -16,7 +16,7 @@
.block {
display: block;
border-bottom: 2px solid rgba(0,0,0,.1);
border-bottom: 2px solid var(--dive-shadow-second);
border-radius: 5px;
padding-top: .1px;
padding-bottom: .1px;
@ -55,7 +55,7 @@
}
.text-glowing {
color: rgba(55, 188, 157, 1) !important;
color: var(--dive-primary-color) !important;
}
.mission-one {
@ -78,7 +78,7 @@
}
.progress-bar {
background-color: rgba(55, 188, 157, 1) !important;
background-color: var(--dive-primary-color) !important;
}
.mission-block, .mission-target {
@ -284,6 +284,8 @@
#waiting_list > .title > a {
position: absolute;
right: 0;
background-color: var(--dive-grass-green);
border-color: var(--dive-grass-green) !important;
}
body.modal-open > :not(.modal) {
@ -314,13 +316,13 @@ body.modal-open > :not(.modal) {
padding: 20px 0;
width: 375px;
background-color: var(--dive-white);
box-shadow: 0 0 25px rgba(0,0,0,.1);
box-shadow: 0 0 25px var(--dive-shadow-second);
}
.game-creation-modal-body {
display: flex;
position: relative;
box-shadow: 0 0 100px rgba(0,0,0,.333);
box-shadow: 0 0 100px var(--dive-shadow-color);
border-radius: 5px;
width: 620px;
text-align: left;

14
src/main/resources/static/css/index.css
View File

@ -16,9 +16,9 @@
}
.btn-primary {
background-color: rgba(255,255,255,.85);
background-color: var(--dive-white-trans);
color: var(--dive-primary-color);
border-color: rgba(255,255,255,.85);
border-color: var(--dive-white-trans);
}
.btn-primary:hover {
@ -28,8 +28,8 @@
}
.btn-outline-primary:hover {
background-color: rgba(255, 255, 255,0.25);
border-color: rgba(255, 255, 255,0.25);
background-color: var(--dive-white-trans-second);
border-color: var(--dive-white-trans-second);
}
.page-title {
@ -63,8 +63,8 @@
.main-button:hover {
color: var(--dive-dark-grey-second);
background-color: rgba(255, 255, 255, 0.85);
border-color: rgba(255, 255, 255, 0.85);
background-color: var(--dive-white-trans);
border-color: var(--dive-white-trans);
font: 600 1.5rem Montserrat;
padding: 0 0.9em;
height: 2.1em;
@ -87,7 +87,7 @@
}
.billboard-img {
box-shadow: 0 0 100px rgba(0,0,0,.33);
box-shadow: 0 0 100px var(--dive-shadow-color);
width: 900px;
overflow: hidden;
pointer-events: none;

55
src/main/resources/static/css/style.css
View File

@ -11,8 +11,31 @@
--dive-weird-blue-grey: #656d78;
--dive-light-grey-second: #e9eaec;
--dive-light-grey-third: #f7f7f7;
--dive-grass-green: #8cc152;
--dive-primary-color: #37bc9d;
--dive-grass-green: #FE7F2D;
--dive-primary-color: #55D6BE;
--dive-primary-color-dark: #194039;
--dive-primary-color-trans: #55D6BEEE;
--dive-shadow-color: rgba(0,0,0,.33);
--dive-shadow-second: rgba(0,0,0,.1);
--dive-white-trans: rgba(255, 255, 255, 0.85);
--dive-white-trans-second: rgba(255, 255, 255,0.25);
}
.navbar-brand-custom-gradient {
font-weight: 600;
background: linear-gradient(90deg, var(--dive-primary-color-dark) 0%, var(--dive-primary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gradient-span {
background: linear-gradient(90deg, var(--dive-primary-color-dark) 0%, var(--dive-primary-color) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container-secondary {
background-color: var(--dive-grey);
}
.navbar {
@ -25,6 +48,10 @@ html, body {
font-size: 0.875rem;
}
.firefox {
font-size: 1.0rem;
}
footer {
bottom: 0;
width: 100%;
@ -48,7 +75,7 @@ footer {
.btn-primary {
background-color: var(--dive-primary-color);
color: var(--dive-white);
border-color: var(--dive-primary-color);
border-color: var(--dive-primary-color) !important;
--bs-btn-active-bg: var(--dive-primary-color);
}
@ -62,18 +89,30 @@ footer {
.btn-outline-primary:active {
background-color: var(--dive-primary-color);
color: var(--dive-white);
border-color: var(--dive-primary-color);
border-color: var(--dive-primary-color) !important;
--bs-btn-active-bg: var(--dive-primary-color);
}
.btn-primary:hover {
background-color: rgba(55,188,157,0.85);
border-color: rgba(55,188,157,0.85);
background-color: var(--dive-primary-color-trans);
border-color: var(--dive-primary-color-trans);
}
.dropdown-toggle::after {
border-top: 0px solid;
}
.dropdown-item:active {
background-color: var(--dive-primary-color) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
background-color: var(--dive-light-grey);
}
.btn-outline-primary:hover {
background-color: rgba(55,188,157,0.85);
border-color: rgba(55,188,157,0.85);
background-color: var(--dive-primary-color-trans);
border-color: var(--dive-primary-color-trans);
}
.navbar-btn {

25
src/main/resources/static/javascript/games.js
View File

@ -15,6 +15,10 @@ function createRoom() {
});
}
function sendInviteMessage(uid) {
alert(uid);
}
function successPolling(data) {
console.log(data);
let onlineCount = data.onlineCount;
@ -68,7 +72,7 @@ function successPolling(data) {
for( let i = 0; i < friends.length; i++ ) {
let friend = friends[i];
if( friend.action == 'ADD' ) {
let fr_html = '<div class="friend-one" data-friend-id="'+friend.id+'"><a href="/profile/'+friend.id+'" class="navbar-btn"><img class="navbar-profile-img" src="https://avatars.githubusercontent.com/u/102559365?v=4"></a><span>'+friend.username+'</span><ion-icon name="person-add-outline" role="img" class="md hydrated"></ion-icon></div>';
let fr_html = '<div class="friend-one" data-friend-id="'+friend.id+'"><a href="/profile/'+friend.id+'" class="navbar-btn"><img class="navbar-profile-img" src="https://avatars.githubusercontent.com/u/102559365?v=4"></a><span>'+friend.username+'</span><ion-icon onClick="sendInviteMessage('+friend.id+')" name="person-add-outline" role="img" class="md hydrated"></ion-icon></div>';
$(".friends-online-list").append(fr_html);
} else if( friend.action == 'REMOVE' ) {
$(".friend-one").each(function() {
@ -78,9 +82,18 @@ function successPolling(data) {
});
}
}
var clh = $('#chat_list').find(".chat-history");
clh.scrollTop(clh.prop("scrollHeight"));
$("#chat_list").find(".chat-history").css("display", "");
if( friends.length > 0 ) {
$(".friends-online-list").css("display", "");
$("#friends_list").find(".block-content").css("display", "none");
}
if( messages.length > 0 ) {
var clh = $('#chat_list').find(".chat-history");
clh.scrollTop(clh.prop("scrollHeight"));
$("#chat_list").find(".chat-history").css("display", "");
}
$("#chat_list").find(".message-input").css("display", "");
$("#chat_list").find(".block-content").css("display", "none");
}
@ -213,4 +226,8 @@ $(document).ready(function() {
$(".rooms-list").css("display", "");
$("#waiting_list").find(".block-content").css("display", "none");
var clh = $('#chat_list').find(".chat-history");
clh.scrollTop(clh.prop("scrollHeight"));
$("#chat_list").find(".chat-history").css("display", "");
});

7
src/main/resources/templates/fragments/essentials.html
View File

@ -5,5 +5,12 @@
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
$(document).ready(function() {
if (navigator.userAgent.search("Firefox") > -1) {
$('html').addClass('firefox');
$('body').addClass('firefox');
}
});
</script>
</th:block>

2
src/main/resources/templates/fragments/navbar.html
View File

@ -3,7 +3,7 @@
<div class="container-fluid">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<a class="navbar-brand navbar-brand-custom navbar-brand-custom-plain" style="display: none" href="/">Nosedive</a>
<a class="navbar-brand navbar-brand-custom navbar-brand-custom-gradient" href="/" style="font-weight: 600; background: linear-gradient(90deg, hsl(166, 55%, 30%) 0%, rgba(55,188,157,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Nosedive</a>
<a class="navbar-brand navbar-brand-custom navbar-brand-custom-gradient" href="/">Nosedive</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

4
src/main/resources/templates/index.html
View File

@ -11,7 +11,7 @@
<div class="page-title-small">Reinvented legendary game online.</div>
<div class="page-main-button"><a class="btn btn-primary main-button" href="/games">Start game</a></div>
<div class="billboard-container"><img src="//m1.dogecdn.wtf/website/index/screenshot.png" class="rounded billboard-img"></div> <!-- 900 -->
<div class="page-title-second">Why will you like <span style="background: linear-gradient(90deg, hsl(166, 55%, 30%) 0%, rgba(55,188,157,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Nosedive</span>?</div>
<div class="page-title-second">Why will you like <span class="gradient-span">Nosedive</span>?</div>
<div class="container text-center">
<div class="row">
<div class="col">
@ -43,7 +43,7 @@
</div>
</div>
</div>
<div class="container-fluid" style="min-height: 750px; background-color: #f4f4f5">
<div class="container-fluid container-secondary" style="min-height: 750px;">
</div>
<th:block th:insert="~{fragments/footer}"></th:block>