cha0s/humus-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: tweaks

Browse Source
This commit is contained in:
cha0s 2019-04-29 17:18:10 -05:00
parent f99d94ba83
commit 49080972b4
12 changed files with 49 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/index.html
View File

@ -53,6 +53,12 @@
.debug .ui { .debug .ui {
background-image: url(/debug.png); background-image: url(/debug.png);
} }
@font-face {
font-family: "joystix";
src:
url("/joystix-monospace.ttf") format("truetype")
;
}
</style> </style>
</head> </head>
<body> <body>

8
client/ui/damage.js
View File

@ -19,14 +19,14 @@ const decorate = compose(
} }
.particle .text { .particle .text {
display: inline-block; display: inline-block;
font-family: monospace; font-family: joystix;
font-weight: bold; font-weight: bold;
text-shadow: 0.5px 0.5px 0px black; text-shadow: 1px 1px 0px black;
} }
.particle .text.affinity-${AFFINITY_FIRE}.is-damage { .particle .text.affinity-${AFFINITY_FIRE}.is-damage {
color: #FFA500; color: #FFA500;
text-shadow: text-shadow:
0.5px 0.5px black, 0.75px 0.75px black,
-0.125px -0.125px black, -0.125px -0.125px black,
-0px -0px 3px #FFDD00, -0px -0px 3px #FFDD00,
-0px -0px 10px #FFFF00 -0px -0px 10px #FFFF00
@ -36,7 +36,7 @@ const decorate = compose(
color: #00FF77; color: #00FF77;
text-shadow: -0.25px -0.25px 0px #0077FF, 0.5px 0.5px black; text-shadow: -0.25px -0.25px 0px #0077FF, 0.5px 0.5px black;
text-shadow: text-shadow:
0.5px 0.5px black, 0.75px 0.75px black,
-0.125px -0.125px black, -0.125px -0.125px black,
-0px -0px 3px #00DDFF, -0px -0px 3px #00DDFF,
-0px -0px 10px #0000FF -0px -0px 10px #0000FF

8
client/ui/debug/connection/index.js
View File

@ -14,11 +14,9 @@ const decorate = compose(
border: 1px solid white; border: 1px solid white;
color: white; color: white;
position: absolute; position: absolute;
top: 0.5em; top: 4px;
right: 0.5em; right: 4px;
line-height: 1em; padding: 1px;
padding: 0.125em;
font-family: monospace;
font-size: 6px; font-size: 6px;
} }
.connection > p { .connection > p {

7
client/ui/debug/connection/throughput.js
View File

@ -12,9 +12,8 @@ const decorate = compose(
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
color: white; color: white;
line-height: 1em; line-height: 1em;
width: 9em; width: 60px;
padding: 0.125em; padding: 0.125em;
font-family: monospace;
} }
.throughput .kbps:before { .throughput .kbps:before {
color: rgb(0, 255, 0); color: rgb(0, 255, 0);
@ -31,8 +30,8 @@ const decorate = compose(
content: 'out: '; content: 'out: ';
} }
.throughput p { .throughput p {
font-size: 0.8em; font-size: 4px;
margin: 0.25em; margin: 0 1px;
} }
`), `),
); );

6
client/ui/debug/index.js
View File

@ -12,7 +12,11 @@ import SelfEntity from './self-entity';
import Timers from './timers'; import Timers from './timers';
const decorate = compose( const decorate = compose(
contempo(``), contempo(`
.debug .ui {
font-family: joystix;
}
`),
hot, hot,
); );

17
client/ui/debug/self-entity.js
View File

@ -13,24 +13,23 @@ const decorate = compose(
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
border: 1px solid white; border: 1px solid white;
color: white; color: white;
font-size: 0.8em; font-size: 5px;
position: absolute; position: absolute;
bottom: 0.5em; bottom: 4px;
left: 0.5em; left: 4px;
line-height: 1em; line-height: 5px;
width: 10em; width: 84px;
padding: 0.125em; padding: 1px;
font-family: monospace;
} }
.location { .location {
} }
.x { .x {
display: inline-block; display: inline-block;
width: 5em; width: 40px;
} }
.y { .y {
display: inline-block; display: inline-block;
width: 4.125em; width: 40px;
} }
.x:before { .x:before {
content: 'x: '; content: 'x: ';

3
client/ui/debug/timers.js
View File

@ -13,7 +13,6 @@ const decorate = compose(
position: absolute; position: absolute;
color: white; color: white;
font-size: 4px; font-size: 4px;
font-family: monospace;
top: 4px; top: 4px;
border: 1px solid white; border: 1px solid white;
padding: 2px; padding: 2px;
@ -32,7 +31,7 @@ const decorate = compose(
} }
.down, .up { .down, .up {
display: inline-block; display: inline-block;
width: 12px; width: 16px;
} }
.down { .down {
margin-right: 2px; margin-right: 2px;

4
client/ui/menu/hotbar.js
View File

@ -23,14 +23,14 @@ const decorate = compose(
.hotbar-key { .hotbar-key {
color: white; color: white;
text-shadow: 0.25px 0.25px 0 black; text-shadow: 0.25px 0.25px 0 black;
font-family: monospace; font-family: joystix;
position: absolute; position: absolute;
top: -1.5px; top: -1.5px;
left: -1px; left: -1px;
font-size: 4px; font-size: 4px;
line-height: 4px; line-height: 4px;
} }
.hotbar .item-slot.active .item-slot-inner { .hotbar .item-slot.active {
border: 1px solid rgba(255, 255, 0, 1); border: 1px solid rgba(255, 255, 0, 1);
} }
.hotbar .item-slot.active:hover { .hotbar .item-slot.active:hover {

2
client/ui/menu/item-slot.js
View File

@ -9,8 +9,6 @@ const decorate = compose(
contempo(` contempo(`
.item-slot { .item-slot {
position: relative; position: relative;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(0, 0, 0, 1); border: 1px solid rgba(0, 0, 0, 1);
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;

14
client/ui/menu/quick-status.js
View File

@ -12,13 +12,12 @@ const decorate = compose(
.status { .status {
color: white; color: white;
display: inline-block; display: inline-block;
font-family: monospace; font-family: joystix;
font-size: 6px; font-size: 5px;
line-height: normal;
text-shadow: 0.5px 0.5px 0px black; text-shadow: 0.5px 0.5px 0px black;
position: absolute; position: absolute;
top: 5px; top: 4px;
right: 262px; right: 261px;
} }
.status .health { .status .health {
} }
@ -31,7 +30,6 @@ const decorate = compose(
.status .currency { .status .currency {
} }
.status .health:before { .status .health:before {
content: '♥️ ';
opacity: 0.75; opacity: 0.75;
color: red; color: red;
} }
@ -52,14 +50,14 @@ const QuickStatusComponent = ({app}) => {
if (yellowStart <= 1) { if (yellowStart <= 1) {
gradient.push(...[ gradient.push(...[
`${yellowStart * 100}%`, `${yellowStart * 100}%`,
'rgba(255, 255, 0, 0.75)', 'rgba(255, 0, 0, 0.75)',
]) ])
} }
const greenStart = multiplier * 0.75; const greenStart = multiplier * 0.75;
if (greenStart <= 1) { if (greenStart <= 1) {
gradient.push(...[ gradient.push(...[
`${greenStart * 100}%`, `${greenStart * 100}%`,
'rgba(0, 255, 0, 0.75)', 'rgba(255, 0, 0, 0.75)',
]) ])
} }
if (2 === gradient.length) { if (2 === gradient.length) {

20
client/ui/menu/world-time.js
View File

@ -9,18 +9,20 @@ import {WorldTime} from '../../../common/world-time';
const decorate = compose( const decorate = compose(
contempo(` contempo(`
.time { .time {
background-color: rgba(0, 0, 0, .3); background-color: rgba(255, 255, 255, .2);
border: 0.5px solid gray; box-sizing: border-box;
border-radius: 50px; border: 1px solid rgba(0, 0, 0, 1);
color: white; color: white;
position: absolute; position: absolute;
top: 5px; top: 4px;
right: 5px; right: 4px;
line-height: 1em; padding: 5px;
padding: 0.5em; font-family: joystix;
font-family: monospace; font-size: 6px;
font-size: 0.5em;
text-shadow: 0.5px 0.5px 0px black; text-shadow: 0.5px 0.5px 0px black;
line-height: 4px;
width: 52px;
text-align: right;
} }
`), `),
); );

BIN
resource/joystix-monospace.ttf Normal file
View File

Binary file not shown.