REM-Client 6e6d42cd: decal shop in the equipment dealer (decals, masks, clan decals, decal bombs), wheel zoom in the ship views
This commit is contained in:
+65
-3
@@ -76,6 +76,15 @@
|
||||
.dot { width: 18dp; height: 18dp; margin: 0 16dp 0 6dp; border-radius: 9dp; border: 1dp #ffffff40; }
|
||||
.dot.off { background-color: #1a2533; border-color: #3d5266; }
|
||||
.good.now { border-left-color: #5cc8f066; }
|
||||
/* REM: the decal shop (category 5) -- the picture on a checkered ground (its transparent parts) */
|
||||
.stk { width: 40dp; height: 40dp; margin: 0 10dp 0 0; background-color: #1a2533; border: 1dp #3d5266; }
|
||||
.stk.empty { background-color: #0f1720; }
|
||||
.decal-colors { margin-top: 8dp; }
|
||||
.decal-colors .crow { display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp; }
|
||||
.decal-colors .cl { width: 70dp; font-size: 12dp; color: #8197ad; }
|
||||
.decal-colors .sw { width: 16dp; height: 16dp; margin-right: 3dp; border: 1dp #ffffff30; }
|
||||
.decal-colors .sw.selected { border: 2dp #f2b13c; }
|
||||
.decal-colors .sw:hover { border-color: #5cc8f0; }
|
||||
.good .now-tag { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; color: #5cc8f0; margin-right: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -96,6 +105,7 @@
|
||||
<div class="tab" data-class-active="category == 2" data-action="category" data-arg="2">Equipment</div>
|
||||
<div class="tab" data-class-active="category == 3" data-action="category" data-arg="3">Cargo bay</div>
|
||||
<div class="tab" data-if="lamps_on" data-class-active="category == 4" data-action="category" data-arg="4">Lamp Shop<div class="tip">The lamps of your ship: headlight, running lights and docking lights, one by one or as a set.</div></div>
|
||||
<div class="tab" data-if="decals_on" data-class-active="category == 5" data-action="category" data-arg="5">Decal Shop<div class="tip">Decals on your ship's hull, anywhere you like. Everyone sees them in space.</div></div>
|
||||
<div class="dstat" style="margin-left: auto;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct >= 75" data-class-bad="hold_pct >= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
|
||||
<div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
|
||||
</div>
|
||||
@@ -119,7 +129,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="category != 4">
|
||||
<div class="colm" data-if="category == 5">
|
||||
<div class="col-h"><h3>Decal Shop</h3><span class="hint" style="margin-left: 10dp;">{{ decal_items.size }} decals</span>
|
||||
<span class="tools"><div class="btn" data-action="decal-bomb">Decal bomb<div class="tip">Up to 12 decals at random places of your hull, overlapping - the decal you carry, else any of the shop. Apply buys them; Undo all takes them back.</div></div></span>
|
||||
</div>
|
||||
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
||||
<div class="list">
|
||||
<div class="hint" style="padding: 10dp;" data-if="decal_wait != ''">{{ decal_wait }}</div>
|
||||
<div class="good" data-for="r : decal_items" data-class-selected="r.selected" data-action="decal-pick" data-attr-data-arg="r.key">
|
||||
<img class="stk" data-if="r.img != ''" data-attr-src="r.img"/>
|
||||
<div class="stk empty" data-if="r.img == ''"></div>
|
||||
<div class="txt"><div class="n">{{ r.name }}</div><div class="note">{{ r.note }}</div></div>
|
||||
<span class="p">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="category != 4 && category != 5">
|
||||
<div class="col-h"><h3>For sale here</h3><span class="hint" style="margin-left: 10dp;">{{ market.size }}</span>
|
||||
<span class="tools"><div class="btn" data-class-active="panel == 1" data-action="autobuy-panel"><span class="gear">⚙</span> Autobuy<div class="tip">What the server buys by itself when you dock: ammunition for your launchers, nanobots and shield batteries.</div></div></span>
|
||||
</div>
|
||||
@@ -152,7 +177,35 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="category != 4">
|
||||
<div class="colm" data-if="category == 5">
|
||||
<div class="col-h"><h3>Your decals</h3><span class="hint" style="margin-left: 10dp;">{{ decal_count }}</span>
|
||||
<span class="tools"><div class="btn" data-action="decal-reset">Undo all<div class="tip">Back to the decals your ship has now.</div></div></span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="hint" style="padding: 10dp;">{{ decal_hint }}</div>
|
||||
<div class="good" data-for="r : decal_mine" data-class-selected="r.selected" data-action="decal-sel" data-attr-data-arg="r.key">
|
||||
<img class="stk" data-if="r.img != ''" data-attr-src="r.img"/>
|
||||
<div class="stk empty" data-if="r.img == ''"></div>
|
||||
<div class="txt"><div class="n">{{ r.name }}</div><div class="slot">{{ r.note }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pfoot" data-if="decal_sel >= 0" style="flex-wrap: wrap;">
|
||||
<div class="btn" data-action="decal-size" data-arg="-">Smaller</div>
|
||||
<div class="btn" data-action="decal-size" data-arg="+">Larger</div>
|
||||
<span class="hint" style="margin: 0 8dp;">{{ decal_size }}</span>
|
||||
<div class="btn" data-action="decal-turn" data-arg="-">Turn left</div>
|
||||
<div class="btn" data-action="decal-turn" data-arg="+">Turn right</div>
|
||||
<div class="btn" data-if="decal_can_mirror" data-class-active="decal_mirror" data-action="decal-mirror">Mirror<div class="tip">A second copy on the other side of the ship (counts as two decals).</div></div>
|
||||
<div class="btn" data-action="decal-remove">Remove</div>
|
||||
</div>
|
||||
<div class="decal-colors" data-if="decal_areas.size > 0">
|
||||
<div class="crow" data-for="a : decal_areas">
|
||||
<span class="cl">{{ a.name }}</span>
|
||||
<div class="sw" data-for="c : decal_palette" data-class-selected="c.hex == a.hex" data-style-background-color="'#' + c.hex" data-action="decal-color" data-attr-data-arg="a.key + '|' + c.hex"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="category != 4 && category != 5">
|
||||
<div class="col-h"><h3>Your equipment</h3>
|
||||
<span class="tools">
|
||||
<span class="flag"><div class="switch" data-class-on="hide_mounted" data-action="hide-mounted">{{ hide_mounted ? 'ON' : 'OFF' }}</div>loot only<div class="tip">Leaves out what is mounted and the ammunition, nanobots and shield batteries your ship uses: what is left is loot to sell.</div></span>
|
||||
@@ -211,7 +264,16 @@
|
||||
<span class="sum">{{ lamp_total }}</span>
|
||||
<div class="btn primary" data-class-disabled="lamp_reason != ''" data-action="lamp-buy">{{ lamp_button }}<div class="tip">Fits it now. The old lamp is replaced; lamps are not sold back.</div></div>
|
||||
</div>
|
||||
<div class="deal" data-if="category != 4">
|
||||
<div class="deal" data-if="category == 5">
|
||||
<div class="what" style="flex: 1; width: auto;">
|
||||
<div class="label">Decals on your ship</div>
|
||||
<div class="t">{{ decal_count }}</div>
|
||||
</div>
|
||||
<span class="why" data-if="decal_reason != ''">{{ decal_reason }}</span>
|
||||
<span class="sum">{{ decal_total }}</span>
|
||||
<div class="btn primary" data-class-disabled="decal_reason != ''" data-action="decal-apply">Apply<div class="tip">Buys the new decals and saves where they all sit. Moving, sizing and removing are free; decals are not sold back.</div></div>
|
||||
</div>
|
||||
<div class="deal" data-if="category != 4 && category != 5">
|
||||
<img data-if="has_pick && pick.icon != ''" data-attr-src="pick.icon"/>
|
||||
<div class="what">
|
||||
<div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
|
||||
|
||||
@@ -32,6 +32,19 @@
|
||||
.coin-log .row .c4 { flex: 1; color: #8197ad; }
|
||||
/* the page Clan */
|
||||
.clan-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
/* REM: the clan decal mixer */
|
||||
.mixrow { display: flex; flex-direction: row; }
|
||||
.mixprev { width: 160dp; height: 160dp; margin-right: 14dp; background-color: #0f1720; border: 1dp #3d5266; }
|
||||
.mixprev img { width: 160dp; height: 160dp; }
|
||||
.mixmasks { display: flex; flex-direction: row; flex-wrap: wrap; margin: 6dp 0; }
|
||||
.mixmasks .mm { width: 40dp; height: 40dp; margin: 0 4dp 4dp 0; border: 1dp #3d5266; background-color: #0f1720; text-align: center; font-size: 10dp; }
|
||||
.mixmasks .mm img { width: 38dp; height: 38dp; }
|
||||
.mixmasks .mm.selected { border: 2dp #f2b13c; }
|
||||
.mixer .crow { display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp; }
|
||||
.mixer .cl { width: 70dp; font-size: 12dp; color: #8197ad; }
|
||||
.mixer .sw { width: 16dp; height: 16dp; margin-right: 3dp; border: 1dp #ffffff30; }
|
||||
.mixer .sw.selected { border: 2dp #f2b13c; }
|
||||
.mixer .actions .btn { margin-right: 4dp; }
|
||||
.clan-head .tagname { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; letter-spacing: 0.8dp; }
|
||||
.clan-head .sw { width: 14dp; height: 14dp; margin-right: 10dp; border: 1dp #dbe6f0; }
|
||||
.clan-head .chip { margin-left: 10dp; }
|
||||
@@ -193,6 +206,7 @@
|
||||
<div class="tab" data-class-active="cl_sub == 5" data-action="cl-sub" data-arg="5">Diplomacy</div>
|
||||
<div class="tab" data-class-active="cl_sub == 6" data-action="cl-sub" data-arg="6">NPC profile</div>
|
||||
<div class="tab" data-class-active="cl_sub == 4" data-action="cl-sub" data-arg="4">Clan</div>
|
||||
<div class="tab" data-class-active="cl_sub == 7" data-action="cl-sub" data-arg="7">Decals<div class="tip">The clan's own decals: only its members may put them on their ships.</div></div>
|
||||
</div>
|
||||
|
||||
<!-- members -->
|
||||
@@ -308,6 +322,56 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- the clan's decals: uploaded here, used by the members in the Decal Shop (rem_decals.cpp) -->
|
||||
<div class="colm" data-if="cl_sub == 7">
|
||||
<div class="hint" style="margin-bottom: 8dp;">{{ cl_decal_info }}</div>
|
||||
<div class="list" style="flex: 1 1 0;">
|
||||
<div class="empty" data-if="cl_decals.size == 0">Your clan has no decals yet.</div>
|
||||
<div class="row" data-for="d : cl_decals" style="display: flex; flex-direction: row; align-items: center; padding: 4dp 0;">
|
||||
<img data-if="d.c != ''" data-attr-src="d.c" style="width: 48dp; height: 48dp; margin-right: 10dp;"/>
|
||||
<div data-if="d.c == ''" style="width: 48dp; height: 48dp; margin-right: 10dp; background-color: #0f1720; border: 1dp #3d5266;"></div>
|
||||
<div style="flex: 1;"><div>{{ d.a }}</div><div class="hint" data-class-warn="!d.on">{{ d.b }}</div></div>
|
||||
<div class="btn danger" data-if="cl_decal_may" data-action="cl-decal-del" data-attr-data-arg="d.key">Delete<div class="tip">Deletes the decal; it goes off every member's ship.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-if="cl_decal_may" style="margin-top: 12dp;">
|
||||
<div class="namefield"><span class="label">Name</span><input class="text" type="text" data-value="cl_decal_name" maxlength="40"/>
|
||||
<div class="btn primary" data-class-disabled="cl_decal_browsing" data-action="cl-decal-browse" style="margin-left: 8dp;">Browse ...<div class="tip">Picks a picture file (PNG, JPG or BMP). It is fitted into a square (transparent edges, transparency kept) and checked by the server like an admin's upload; a moderator may have to approve it first.</div></div></div>
|
||||
<div class="hint">Empty name: the file's name.</div>
|
||||
</div>
|
||||
<div class="hint" data-if="!cl_decal_may" style="margin-top: 12dp;">Only the leader (or a rank that may edit the clan) uploads clan decals.</div>
|
||||
<!-- the mixer: the clan's own decal from the shop's patterns and shapes -->
|
||||
<div data-if="cl_decal_may" class="mixer">
|
||||
<h3 style="margin: 14dp 0 6dp 0;">Design a clan decal</h3>
|
||||
<div class="mixrow">
|
||||
<div class="mixprev"><img data-if="cl_mix_src != ''" data-attr-src="cl_mix_src"/></div>
|
||||
<div style="flex: 1;">
|
||||
<div class="subtabs">
|
||||
<div class="tab" data-for="l : cl_mix_layers" data-class-active="l.selected" data-action="cl-mix-layer" data-attr-data-arg="l.key">{{ l.a }}{{ l.on ? ' *' : '' }}</div>
|
||||
</div>
|
||||
<div class="mixmasks">
|
||||
<div class="mm" data-for="m : cl_mix_masks" data-class-selected="m.selected" data-action="cl-mix-mask" data-attr-data-arg="m.key">
|
||||
<img data-if="m.c != ''" data-attr-src="m.c"/><span data-if="m.c == ''">{{ m.a }}</span><div class="tip">{{ m.a }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crow" data-for="a : cl_mix_areas">
|
||||
<span class="cl">{{ a.a }}</span>
|
||||
<div class="sw" data-for="c : cl_mix_palette" data-class-selected="c.color == a.color" data-style-background-color="'#' + c.color" data-action="cl-mix-color" data-attr-data-arg="a.key + '|' + c.color"></div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="btn" data-action="cl-mix-scale" data-arg="-">Smaller</div><div class="btn" data-action="cl-mix-scale" data-arg="+">Larger</div>
|
||||
<div class="btn" data-action="cl-mix-turn" data-arg="-">Turn left</div><div class="btn" data-action="cl-mix-turn" data-arg="+">Turn right</div>
|
||||
<div class="btn" data-action="cl-mix-move" data-arg="l">←</div><div class="btn" data-action="cl-mix-move" data-arg="u">↑</div>
|
||||
<div class="btn" data-action="cl-mix-move" data-arg="d">↓</div><div class="btn" data-action="cl-mix-move" data-arg="r">→</div>
|
||||
<div class="btn" data-action="cl-mix-reset">Clear layer</div>
|
||||
</div>
|
||||
<div class="hint">{{ cl_mix_info }}</div>
|
||||
<div class="actions"><div class="btn primary" data-action="cl-mix-upload">Upload design<div class="tip">Draws the three layers into one decal and uploads it under the name above, like a picture from a file.</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- diplomacy: the other clans, the picked one's stance -->
|
||||
<div class="colm" data-if="cl_sub == 5">
|
||||
<div class="table cl-table" style="flex: 1;">
|
||||
|
||||
Reference in New Issue
Block a user