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 {
background-image: url(/debug.png);
}
@font-face {
font-family: "joystix";
src:
url("/joystix-monospace.ttf") format("truetype")
;
}
</style>
</head>
<body>

8
client/ui/damage.js
View File

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

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

@ -14,11 +14,9 @@ const decorate = compose(
border: 1px solid white;
color: white;
position: absolute;
top: 0.5em;
right: 0.5em;
line-height: 1em;
padding: 0.125em;
font-family: monospace;
top: 4px;
right: 4px;
padding: 1px;
font-size: 6px;
}
.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);
color: white;
line-height: 1em;
width: 9em;
width: 60px;
padding: 0.125em;
font-family: monospace;
}
.throughput .kbps:before {
color: rgb(0, 255, 0);
@ -31,8 +30,8 @@ const decorate = compose(
content: 'out: ';
}
.throughput p {
font-size: 0.8em;
margin: 0.25em;
font-size: 4px;
margin: 0 1px;
}
`),
);

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

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

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

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

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

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

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

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

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

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

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

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