implement brush cost gauges
they're a little ugly at the moment, and can be a little useless for most simple brushes, but whatever we'll make them better later
This commit is contained in:
parent
43e6951f7d
commit
913d65b0a8
19 changed files with 378 additions and 65 deletions
166
static/index.css
166
static/index.css
|
|
@ -15,7 +15,7 @@ main {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
&>.fullscreen {
|
||||
& > .fullscreen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
|
|
@ -25,23 +25,26 @@ main {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
&>.panels {
|
||||
& > .panels {
|
||||
--right-width: 384px; /* Overridden by JavaScript */
|
||||
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: [left] 1fr [right-resize] auto [right] minmax(0, var(--right-width));
|
||||
grid-template-columns: [left] 1fr [right-resize] auto [right] minmax(
|
||||
0,
|
||||
var(--right-width)
|
||||
);
|
||||
|
||||
/* Pass all events through. Children may receive events as normal. */
|
||||
pointer-events: none;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
&>.right {
|
||||
& > .right {
|
||||
grid-column: right / right;
|
||||
min-height: 0;
|
||||
|
||||
|
|
@ -53,29 +56,41 @@ main {
|
|||
|
||||
pointer-events: none;
|
||||
|
||||
&>* {
|
||||
& > * {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
&>rkgk-resize-handle {
|
||||
& > rkgk-resize-handle {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&>.docked>rkgk-brush-editor {
|
||||
& > .docked > rkgk-brush-editor {
|
||||
max-height: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
&>.floating>rkgk-brush-preview {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
pointer-events: auto;
|
||||
& > .floating {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 12px;
|
||||
|
||||
& > rkgk-brush-preview {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
& > rkgk-brush-cost-gauges {
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>rkgk-canvas-renderer {
|
||||
& > rkgk-canvas-renderer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -83,7 +98,7 @@ main {
|
|||
top: 0;
|
||||
}
|
||||
|
||||
&>rkgk-reticle-renderer {
|
||||
& > rkgk-reticle-renderer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -92,7 +107,7 @@ main {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
&>#js-loading {
|
||||
& > #js-loading {
|
||||
background-color: var(--color-panel-background);
|
||||
|
||||
display: flex;
|
||||
|
|
@ -111,7 +126,7 @@ rkgk-resize-handle {
|
|||
|
||||
cursor: col-resize;
|
||||
|
||||
&>.visual {
|
||||
& > .visual {
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: var(--color-brand-blue);
|
||||
|
|
@ -119,7 +134,8 @@ rkgk-resize-handle {
|
|||
opacity: 0%;
|
||||
}
|
||||
|
||||
&:hover>.visual, &.dragging>.visual {
|
||||
&:hover > .visual,
|
||||
&.dragging > .visual {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -130,7 +146,7 @@ rkgk-resize-handle {
|
|||
rkgk-canvas-renderer {
|
||||
display: block;
|
||||
|
||||
&>canvas {
|
||||
& > canvas {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -142,7 +158,7 @@ rkgk-reticle-renderer {
|
|||
|
||||
pointer-events: none;
|
||||
|
||||
&>.reticles {
|
||||
& > .reticles {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
@ -153,15 +169,15 @@ rkgk-reticle-cursor {
|
|||
position: absolute;
|
||||
display: block;
|
||||
|
||||
&>.container {
|
||||
&>.arrow {
|
||||
& > .container {
|
||||
& > .arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: var(--color);
|
||||
clip-path: path("M 0,0 L 13,13 L 6,13 L 0,19 Z");
|
||||
}
|
||||
|
||||
&>.nickname {
|
||||
& > .nickname {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 8px;
|
||||
|
|
@ -188,7 +204,7 @@ rkgk-code-editor {
|
|||
|
||||
overflow: auto;
|
||||
|
||||
&>.layer {
|
||||
& > .layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -203,7 +219,7 @@ rkgk-code-editor {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&>.line {
|
||||
& > .line {
|
||||
flex-shrink: 0;
|
||||
white-space: pre-wrap;
|
||||
|
||||
|
|
@ -211,14 +227,14 @@ rkgk-code-editor {
|
|||
}
|
||||
}
|
||||
|
||||
&>.layer-gutter {
|
||||
& > .layer-gutter {
|
||||
user-select: none;
|
||||
|
||||
counter-reset: line;
|
||||
|
||||
color: transparent;
|
||||
|
||||
&>.line {
|
||||
& > .line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
|
|
@ -241,27 +257,27 @@ rkgk-code-editor {
|
|||
}
|
||||
}
|
||||
|
||||
&>.layer:not(.layer-gutter) {
|
||||
& > .layer:not(.layer-gutter) {
|
||||
margin-left: var(--gutter-width);
|
||||
width: calc(100% - var(--gutter-width));
|
||||
}
|
||||
|
||||
&>.layer-error-squiggles {
|
||||
& > .layer-error-squiggles {
|
||||
color: transparent;
|
||||
|
||||
&>.line {
|
||||
&>.squiggle {
|
||||
& > .line {
|
||||
& > .squiggle {
|
||||
text-decoration: underline wavy black;
|
||||
text-decoration-skip-ink: none;
|
||||
}
|
||||
|
||||
&>.squiggle-error {
|
||||
& > .squiggle-error {
|
||||
text-decoration-color: var(--color-error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>textarea {
|
||||
& > textarea {
|
||||
display: block;
|
||||
width: calc(100% - var(--gutter-width));
|
||||
margin: 0;
|
||||
|
|
@ -294,8 +310,8 @@ rkgk-brush-editor.rkgk-panel {
|
|||
gap: 4px;
|
||||
|
||||
position: relative;
|
||||
|
||||
&>.text-area {
|
||||
|
||||
& > .text-area {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -306,18 +322,19 @@ rkgk-brush-editor.rkgk-panel {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&>.errors:empty, &>.error-header:empty {
|
||||
& > .errors:empty,
|
||||
& > .error-header:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&>.error-header {
|
||||
& > .error-header {
|
||||
margin: 0;
|
||||
margin-top: 0.5em;
|
||||
font-size: 1rem;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
&>.errors {
|
||||
& > .errors {
|
||||
margin: 0;
|
||||
color: var(--color-error);
|
||||
white-space: pre-wrap;
|
||||
|
|
@ -334,13 +351,19 @@ rkgk-brush-preview {
|
|||
display: block;
|
||||
position: relative;
|
||||
|
||||
background:
|
||||
repeating-conic-gradient(var(--checkerboard-light) 0% 25%, var(--checkerboard-dark) 0% 50%)
|
||||
background: repeating-conic-gradient(
|
||||
var(--checkerboard-light) 0% 25%,
|
||||
var(--checkerboard-dark) 0% 50%
|
||||
)
|
||||
50% 50% / var(--checkerboard-size) var(--checkerboard-size);
|
||||
border-radius: 4px;
|
||||
|
||||
& > canvas {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&.error {
|
||||
&>canvas {
|
||||
& > canvas {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -354,10 +377,53 @@ rkgk-brush-preview {
|
|||
}
|
||||
}
|
||||
|
||||
/* Brush cost gauges */
|
||||
|
||||
rkgk-brush-cost-gauges,
|
||||
rkgk-brush-cost-gauges.rkgk-panel {
|
||||
--gauge-size: 20px;
|
||||
|
||||
height: var(--gauge-size);
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
overflow: clip; /* clip corners */
|
||||
|
||||
& > rkgk-brush-cost-gauge {
|
||||
display: block;
|
||||
height: var(--gauge-size);
|
||||
flex-grow: 1;
|
||||
|
||||
& > .full {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
clip-path: xywh(0 0 var(--progress) 100%);
|
||||
|
||||
background-color: var(--gauge-color);
|
||||
}
|
||||
|
||||
&.code-size {
|
||||
--gauge-color: var(--color-brand-blue);
|
||||
}
|
||||
&.fuel {
|
||||
--gauge-color: #f44096;
|
||||
}
|
||||
&.objects {
|
||||
--gauge-color: #fd9916;
|
||||
}
|
||||
&.memory {
|
||||
--gauge-color: #5aca40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Welcome screen */
|
||||
|
||||
rkgk-welcome {
|
||||
&>dialog {
|
||||
& > dialog {
|
||||
h3 {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 2rem;
|
||||
|
|
@ -369,7 +435,8 @@ rkgk-welcome {
|
|||
/* Connection status dialogs */
|
||||
|
||||
rkgk-connection-status {
|
||||
&>dialog[name='logging-in-dialog'][open], &>dialog[name='disconnected-dialog'][open] {
|
||||
& > dialog[name="logging-in-dialog"][open],
|
||||
& > dialog[name="disconnected-dialog"][open] {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
|
|
@ -379,8 +446,8 @@ rkgk-connection-status {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
&>dialog[name='error-dialog'][open] {
|
||||
& textarea[name='error-text'] {
|
||||
& > dialog[name="error-dialog"][open] {
|
||||
& textarea[name="error-text"] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
|
|
@ -394,7 +461,7 @@ rkgk-connection-status {
|
|||
|
||||
.menu-bar {
|
||||
--border-radius: 4px;
|
||||
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -403,9 +470,9 @@ rkgk-connection-status {
|
|||
height: 24px;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&>a {
|
||||
& > a {
|
||||
display: block;
|
||||
|
||||
|
||||
color: var(--color-text);
|
||||
padding: 4px 8px;
|
||||
text-decoration: none;
|
||||
|
|
@ -432,11 +499,10 @@ rkgk-connection-status {
|
|||
}
|
||||
}
|
||||
|
||||
&>hr {
|
||||
& > hr {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-right: 1px solid var(--color-panel-border);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue