New REM client: REM-Client 771c9ce7, 64-bit (pilots window: Freelancer IDs, pilots and the picked pilot in one screen, changing the ID asks in a box; server list: Connect, Refresh and Star in one row on top)
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+77
-23
@@ -3,13 +3,24 @@
|
||||
<title>Characters</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the pilots window: the Freelancer IDs | the pilots of the picked ID | the picked pilot and its buttons */
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 32%; margin-left: 18dp; }
|
||||
.colm.fig { flex: 0 0 22%; margin-left: 18dp; }
|
||||
#figure { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
||||
.fig .hint { text-align: center; margin-top: 6dp; }
|
||||
.colm.ids { flex: 0 0 22%; }
|
||||
.colm.list { flex: 1; margin-left: 18dp; }
|
||||
.colm.side { flex: 0 0 34%; margin-left: 18dp; }
|
||||
.idlist { flex: 1; overflow-y: auto; }
|
||||
.id { padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
||||
.id:hover { border-left-color: #5cc8f0; }
|
||||
.id.selected { background-color: #f2b13c1a; border-left-color: #f2b13c; }
|
||||
.id .top { display: flex; flex-direction: row; align-items: center; }
|
||||
.id .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
.id.selected .n { color: #f2b13c; }
|
||||
.id .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5fd08a; margin-left: 8dp; }
|
||||
.id .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 4dp; }
|
||||
.newid { padding: 12dp; margin-top: 8dp; background-color: #5cc8f008; }
|
||||
.newid input.text { display: block; width: 100%; margin: 8dp 0dp 10dp 0dp; }
|
||||
.idmsg { margin-bottom: 8dp; }
|
||||
.roster { flex: 1; overflow-y: auto; }
|
||||
.pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border-left: 3dp #3d6d96; background-color: #5cc8f010; }
|
||||
.pilot:hover { border-left-color: #5cc8f0; }
|
||||
@@ -21,55 +32,99 @@
|
||||
.pilot .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
.pilot .r { text-align: right; }
|
||||
.pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
|
||||
.pilot.add { border-left-color: #5fd08a; background-color: #5fd08a10; }
|
||||
.pilot.add .n { color: #5fd08a; }
|
||||
.pilot.add.disabled { opacity: 0.5; }
|
||||
.pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
|
||||
.detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
|
||||
/* Launch: big, above the figure */
|
||||
.btn.launch { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 64dp; margin-bottom: 10dp;
|
||||
font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 24dp; letter-spacing: 3dp; }
|
||||
.btn.launch img { width: 44dp; height: 44dp; margin-right: 12dp; }
|
||||
#figure { flex: 1; min-height: 160dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
||||
.side .hint.turn { text-align: center; margin: 4dp 0dp 8dp 0dp; }
|
||||
.detail { padding: 12dp; margin-bottom: 10dp; background-color: #5cc8f008; }
|
||||
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
|
||||
.detail .k { font-size: 14dp; color: #8197ad; }
|
||||
.detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
|
||||
.motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
|
||||
.empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.motd { flex: 0 0 22%; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; background-color: #5cc8f008; }
|
||||
.changeid { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24dp 12dp; margin-bottom: 12dp; background-color: #f2b13c10; }
|
||||
.changeid .hint { margin-bottom: 12dp; }
|
||||
.changeid .btn { font-size: 18dp; padding: 10dp 24dp; }
|
||||
.empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="charselect">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ server }}</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip" data-if="who != ''">Discord <span class="v">{{ who }}</span></span>
|
||||
<span class="chip">Characters <span class="v">{{ chars.size }}</span><span data-if="limit > 0"> / <span class="v">{{ limit }}</span></span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<!-- the Freelancer IDs of the Discord account -->
|
||||
<div class="colm ids">
|
||||
<h3 style="margin-bottom: 8dp;">Freelancer IDs</h3>
|
||||
<div class="hint idmsg" data-if="id_message != ''">{{ id_message }}</div>
|
||||
<div class="hint" data-if="id_state == 'loading'">Asking the REM website...</div>
|
||||
<div class="btn" data-if="id_state == 'error'" data-action="retry">Try again</div>
|
||||
<div class="idlist" data-if="id_state == 'ready'">
|
||||
<div class="id" data-for="r : ids" data-class-selected="r.selected" data-action="pickid" data-attr-data-arg="r.key">
|
||||
<div class="top"><span class="n">{{ r.name }}</span><span class="tag" data-if="r.current">IN USE</span></div>
|
||||
<div class="c">{{ r.pilots }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="newid" data-if="id_state == 'ready'">
|
||||
<h3>New ID</h3>
|
||||
<input class="text" type="text" data-value="new_name" placeholder="Name of the ID (only for you)" maxlength="40"/>
|
||||
<div class="btn" data-class-disabled="busy || new_name == ''" data-action="create">Make the ID<div class="tip">A fresh Freelancer ID on your Discord account - for more pilots on the server. Pick it and switch to it to create its pilots.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- the pilots of the picked ID -->
|
||||
<div class="colm list">
|
||||
<h3 style="margin-bottom: 8dp;">Your pilots</h3>
|
||||
<div class="empty-roster" data-if="chars.size == 0">
|
||||
<h3 style="margin-bottom: 8dp;">Pilots</h3>
|
||||
<div class="pilot add" data-if="!other_id" data-class-disabled="!can_new || !ready" data-action="new">
|
||||
<div class="txt"><div class="n">+ New pilot</div></div>
|
||||
<div class="tip">Creates a new pilot (as many per ID as the server allows).</div>
|
||||
</div>
|
||||
<div class="empty-roster" data-if="!other_id && chars.size == 0">
|
||||
<div class="hint">No pilot on this server yet. Create one to begin.</div>
|
||||
</div>
|
||||
<div class="roster" data-if="chars.size > 0">
|
||||
<div class="roster" data-if="!other_id && chars.size > 0">
|
||||
<div class="pilot" data-for="c : chars" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.key">
|
||||
<img data-if="c.icon != ''" data-attr-src="c.icon"/>
|
||||
<div class="txt"><div class="n">{{ c.name }}</div><div class="k">{{ c.ship }} - {{ c.place }}</div></div>
|
||||
<div class="r"><div class="m">{{ c.money }}</div><div class="lv">{{ c.level }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 10dp;">
|
||||
<div class="btn primary" data-class-disabled="!has_pick || !ready" data-action="load">Launch<div class="tip">Plays the picked pilot. A double click on a pilot does the same.</div></div>
|
||||
<div class="btn" data-class-disabled="!can_new || !ready" data-action="new">New pilot<div class="tip">Creates a new pilot (as many per ID as the server allows).</div></div>
|
||||
<div class="btn" data-class-disabled="!has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
|
||||
<div class="changeid" data-if="other_id">
|
||||
<div class="hint">The pilots of this ID show once you play with it.</div>
|
||||
<div class="btn primary" data-class-disabled="busy || !ready" data-action="switchid">Click here to change ID<div class="tip">Leaves the server and joins it again with this ID; you pick the pilot there.</div></div>
|
||||
</div>
|
||||
<div class="roster" data-if="other_id && other_chars.size > 0">
|
||||
<div class="hint" style="margin-bottom: 8dp;">Known pilots of this ID (pick one to launch it right after the change):</div>
|
||||
<div class="pilot" data-for="c : other_chars" data-class-selected="c.selected" data-action="pickother" data-attr-data-arg="c.key">
|
||||
<div class="txt"><div class="n">{{ c.name }}</div></div>
|
||||
<div class="r"><div class="m">{{ c.money }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm fig">
|
||||
<h3 style="margin-bottom: 8dp;">Pilot</h3>
|
||||
<div id="figure"></div>
|
||||
<div class="hint">drag to turn</div>
|
||||
</div>
|
||||
<!-- the picked pilot and what can be done with it -->
|
||||
<div class="colm side">
|
||||
<div class="detail" data-if="has_pick">
|
||||
<div class="btn primary launch" data-class-disabled="!can_launch" data-action="load"><img src="3db:interface/baseside/take_off.3db"/>{{ launch_label }}<div class="tip">Plays the picked pilot (a double click on it does the same). On another ID: switches to it, joins the server again and plays the picked pilot.</div></div>
|
||||
<div id="figure" data-if="!other_id"></div>
|
||||
<div class="hint turn" data-if="!other_id">drag to turn</div>
|
||||
<div class="detail" data-if="!other_id && has_pick">
|
||||
<div class="n">{{ pick.name }}</div>
|
||||
<div class="k">{{ pick.level }} - {{ pick.money }}</div>
|
||||
<div class="k">{{ pick.ship }}, {{ pick.place }}</div>
|
||||
<div class="s">{{ pick_stats }}</div>
|
||||
</div>
|
||||
<div class="detail" data-if="!has_pick"><div class="k">Pick a pilot.</div></div>
|
||||
<div class="detail" data-if="!other_id && !has_pick"><div class="k">Pick a pilot.</div></div>
|
||||
<div class="actions" style="margin-bottom: 10dp;">
|
||||
<div class="btn danger" data-class-disabled="other_id || !has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 8dp;">Message of the day</h3>
|
||||
<div class="motd">{{ motd }}</div>
|
||||
</div>
|
||||
@@ -78,7 +133,6 @@
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back to servers</div>
|
||||
<div class="btn" data-action="accounts">Change account<div class="tip">Another Freelancer ID of your Discord account (its own pilots), or a new one.</div></div>
|
||||
<div class="btn" data-action="menu">Main menu</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -27,6 +27,10 @@
|
||||
.table .c0 img.on { opacity: 1; }
|
||||
.facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
|
||||
.desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
|
||||
/* the buttons on top in one row: Connect twice as wide as Refresh and Star */
|
||||
.actions.top { flex-wrap: nowrap; margin-bottom: 10dp; }
|
||||
.actions.top .btn { flex: 1 1 0; text-align: center; margin: 0 0 0 8dp; }
|
||||
.actions.top .btn.connect { flex: 2 1 0; margin-left: 0; font-size: 16dp; letter-spacing: 3dp; }
|
||||
.pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
@@ -68,17 +72,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div class="actions top">
|
||||
<div class="btn primary connect" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
|
||||
<div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
|
||||
<div class="btn" data-if="has_pick" data-action="fav">{{ pick_fav ? 'Unstar' : 'Star' }}<div class="tip">Favourite servers are listed under FAV SERVERS (and in the launcher).</div></div>
|
||||
</div>
|
||||
<div data-if="has_pick">
|
||||
<div class="pick-name">{{ pick_name }}</div>
|
||||
<div class="facts">{{ pick_facts }}</div>
|
||||
</div>
|
||||
<div class="desc" data-if="has_pick">{{ pick_text }}</div>
|
||||
<div class="hint" data-if="!has_pick">Pick a server. A double click joins it.</div>
|
||||
<div class="actions" style="margin-top: 12dp;">
|
||||
<div class="btn primary" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
|
||||
<div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
|
||||
<div class="btn" data-if="has_pick" data-action="fav">{{ pick_fav ? 'Unstar' : 'Star' }}<div class="tip">Favourite servers are listed under FAV SERVERS (and in the launcher).</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Binary file not shown.
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user