New REM client: REM-Client 9e43d1a, 64-bit (chat window: each player's system under the name; HUD: the cruise charge as an arc of segments around the ship status ring)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -21,6 +21,9 @@
|
||||
.tg:hover { background-color: #122033; }
|
||||
.tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.tg.ch { font-family: "Saira SemiCondensed"; font-weight: 600; letter-spacing: 0.6dp; }
|
||||
.tg .tn, .tg .loc { pointer-events: none; overflow: hidden; } /* the row takes the click, not its lines */
|
||||
/* a player's system under the name */
|
||||
.tg .loc { margin-top: 1dp; font-size: 12dp; color: #8197ad; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="chathistory">
|
||||
@@ -47,7 +50,10 @@
|
||||
<div class="targets">
|
||||
<h3>Write to</h3>
|
||||
<div class="tl">
|
||||
<div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key" data-rml="t.name"></div>
|
||||
<div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key">
|
||||
<div class="tn" data-rml="t.name"></div>
|
||||
<div class="loc" data-if="t.location != ''">{{ t.location }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -125,6 +125,36 @@
|
||||
.w.cloak { margin-top: 4dp; color: #8fb8d8; }
|
||||
.w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
|
||||
.special { color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; margin-top: 8dp; }
|
||||
/* --- the cruise engine's countdown / charge (HUD_CruiseProgress). With the ring: an arc of 16 segments (-55 to +55 degrees) around
|
||||
the top of the ring that fills from left to right, a glow riding its tip, caption and number above it;
|
||||
the countdown shows the arc empty and the seconds pulsing; a full charge flashes the arc. With the bars:
|
||||
a band of chevrons with a light running along it. It moves and sizes with the ship status but shows when
|
||||
that is hidden (its own layer, the ship status' transform) */
|
||||
.fp.cruisearc { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
|
||||
.grp .fp.cruisearc, .grp .fp.cruiseband { pointer-events: none; }
|
||||
.cruisearc segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
|
||||
.cruisearc .glow { position: absolute; width: 44dp; height: 44dp; decorator: radial-gradient(circle, #ffe2a0e6 0%, #f2b13c80 30%, #f2b13c00 70%); animation: 0.9s sine-in-out infinite cr-glow; }
|
||||
@keyframes cr-glow { 0% { opacity: 0.65; } 50% { opacity: 1; } 100% { opacity: 0.65; } }
|
||||
.cruisearc .head { position: absolute; left: 160dp; width: 300dp; top: -58dp; text-align: center; }
|
||||
.cruisearc .cv { display: block; font-family: "IBM Plex Mono"; font-size: 26dp; line-height: 30dp; color: #e8f4ff; }
|
||||
.cruisearc .cc { display: block; margin-top: 2dp; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
|
||||
.cruisearc.count .cv { color: #f2b13c; font-size: 32dp; animation: 1s sine-in-out infinite cr-beat; }
|
||||
@keyframes cr-beat { 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; } }
|
||||
.cruisearc.count .glow { display: none; }
|
||||
.cruisearc.done { animation: 0.35s sine-in-out 2 cr-flash; }
|
||||
.cruisearc.done .cv, .cruisearc.done .cc { color: #5cc8f0; }
|
||||
@keyframes cr-flash { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
|
||||
.fp.cruiseband { left: 50%; margin-left: -200dp; bottom: 86dp; width: 400dp; height: 62dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
|
||||
.cruiseband .cc { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
|
||||
.cruiseband .row { position: absolute; left: 20dp; right: 90dp; top: 22dp; height: 18dp; display: flex; flex-direction: row; overflow: hidden; }
|
||||
.cruiseband .ch { flex: 1; height: 18dp; margin-right: 5dp; transform: skewX(-30deg); background-color: #f2b13c2a; }
|
||||
.cruiseband .ch.lit { background-color: #f2b13c; }
|
||||
.cruiseband .run { position: absolute; top: 0; width: 22%; height: 18dp; left: -22%; decorator: horizontal-gradient(#dcf6ff00 #dcf6ffcc); animation: 1.1s linear infinite cr-run; }
|
||||
@keyframes cr-run { 0% { left: -22%; } 100% { left: 100%; } }
|
||||
.cruiseband .cv { position: absolute; right: 0; top: 14dp; width: 80dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 24dp; color: #e8f4ff; }
|
||||
.cruiseband.count .cv { color: #f2b13c; animation: 1s sine-in-out infinite cr-beat; }
|
||||
.cruiseband.count .run { display: none; }
|
||||
.cruiseband.done { animation: 0.35s sine-in-out 2 cr-flash; }
|
||||
/* the HUD editor: four layers over the whole screen, each moved / sized as one */
|
||||
.grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.grp .fp, .grp .tag { pointer-events: auto; }
|
||||
@@ -198,6 +228,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- the cruise engine's countdown / charge (HUD_CruiseProgress): around the ship status' ring (or above its bars),
|
||||
with the ship status' move and size, also while that is hidden -->
|
||||
<div class="grp g1" data-style-transform="grp[1].tf">
|
||||
<div class="fp cruisearc" data-if="cruise_bar && core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
|
||||
<segarc cx="310" cy="92" r="84" w="9" h="7" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#f2b13c" off="#f2b13c30"/>
|
||||
<segarc cx="310" cy="92" r="94" w="9" h="2" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#ffd27a99" off="#5cc8f026"/>
|
||||
<segarc cx="310" cy="92" r="84" w="10" h="9" n="1" data-attr-a0="cruise_tip_a" da="0" data-attr-lit="cruise_n > 0 ? 1 : 0" on="#fff1c8" off="#00000000"/>
|
||||
<div class="glow" data-if="cruise_n > 0" data-style-left="cruise_tip_l" data-style-top="cruise_tip_t"></div>
|
||||
<div class="head"><span class="cv">{{ cruise_val }}</span><span class="cc">{{ cruise_cap }}</span></div>
|
||||
</div>
|
||||
<div class="fp cruiseband" data-if="cruise_bar && !core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
|
||||
<span class="cc">» {{ cruise_cap }} «</span>
|
||||
<div class="row"><div class="ch" data-class-lit="cruise_n > 0"></div><div class="ch" data-class-lit="cruise_n > 1"></div><div class="ch" data-class-lit="cruise_n > 2"></div><div class="ch" data-class-lit="cruise_n > 3"></div><div class="ch" data-class-lit="cruise_n > 4"></div><div class="ch" data-class-lit="cruise_n > 5"></div><div class="ch" data-class-lit="cruise_n > 6"></div><div class="ch" data-class-lit="cruise_n > 7"></div><div class="ch" data-class-lit="cruise_n > 8"></div><div class="ch" data-class-lit="cruise_n > 9"></div><div class="ch" data-class-lit="cruise_n > 10"></div><div class="ch" data-class-lit="cruise_n > 11"></div><div class="ch" data-class-lit="cruise_n > 12"></div><div class="ch" data-class-lit="cruise_n > 13"></div><div class="ch" data-class-lit="cruise_n > 14"></div><div class="ch" data-class-lit="cruise_n > 15"></div><div class="run"></div></div>
|
||||
<span class="cv">{{ cruise_val }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- bottom left: contacts / target -->
|
||||
<div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
|
||||
<div class="tag" data-if="editing" style="left: 8dp; bottom: 390dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts & target</div>
|
||||
|
||||
Reference in New Issue
Block a user