New REM client: REM-Client d89ae954, 64-bit (cube map skyboxes from MATERIALS\Skybox in place of the star sphere; account window, favourite servers, character limit)

2026-11-09 11:04:04 +01:00
parent 6862dac700
commit 4cc7c61f4c
32 changed files with 107 additions and 13 deletions
@@ -0,0 +1,91 @@
+<rml>
+<head>
+    <title>Accounts</title>
+    <link type="text/rcss" href="rem.rcss"/>
+    <style>
+        .split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
+        .colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+        .colm.side { flex: 0 0 36%; margin-left: 18dp; }
+        .ids { 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: 19dp; }
+        .id.selected .n { color: #f2b13c; }
+        .id .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5fd08a; margin-left: 8dp; }
+        .id .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
+        .id .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 4dp; }
+        .detail { padding: 12dp; margin-bottom: 12dp; background-color: #5cc8f008; }
+        .detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
+        .detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
+        .newid { padding: 12dp; background-color: #5cc8f008; }
+        .newid input.text { display: block; width: 100%; margin: 8dp 0dp 10dp 0dp; }
+        .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
+        .center .hint { max-width: 520dp; margin-bottom: 12dp; }
+        .msg { margin-bottom: 10dp; }
+        .msg.bad { color: #ef6a5b; }
+    </style>
+</head>
+<body class="window medium" data-model="accounts">
+    <div class="win-head">
+        <span class="title">Accounts</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" data-if="state == 'ready'">IDs <span class="v">{{ ids.size }}</span></span>
+    </div>
+    <div class="win-main">
+        <div class="content">
+            <div class="center" data-if="state == 'loading'">
+                <div class="hint">Asking the REM website for your IDs...</div>
+            </div>
+            <div class="center" data-if="state == 'nologin'">
+                <div class="hint">{{ message }}</div>
+                <div class="hint">Start the REM launcher, log in with Discord and open this window again. Without the login the game plays with the ID it has.</div>
+                <div class="btn" data-action="retry">Try again</div>
+            </div>
+            <div class="center" data-if="state == 'error'">
+                <div class="hint" style="color: #ef6a5b;">{{ message }}</div>
+                <div class="btn" data-action="retry">Try again</div>
+            </div>
+            <div class="split" data-if="state == 'ready'">
+                <div class="colm">
+                    <h3 style="margin-bottom: 8dp;">Your Freelancer IDs</h3>
+                    <div class="msg" data-if="message != ''" data-class-bad="message_bad">{{ message }}</div>
+                    <div class="ids">
+                        <div class="hint" data-if="ids.size == 0">No ID yet - make one on the right.</div>
+                        <div class="id" data-for="r : ids" data-class-selected="r.selected" data-action="pick" 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="d" data-if="r.desc != ''">{{ r.desc }}</div>
+                            <div class="c">{{ r.chars }}</div>
+                        </div>
+                    </div>
+                </div>
+                <div class="colm side">
+                    <div class="detail" data-if="has_pick">
+                        <div class="n">{{ pick_name }}</div>
+                        <div class="s">{{ pick_text }}</div>
+                        <div class="actions" style="margin-top: 10dp;">
+                            <div class="btn primary" data-class-disabled="!can_switch" data-action="switch">{{ switch_label }}<div class="tip">{{ switch_tip }}</div></div>
+                        </div>
+                    </div>
+                    <div class="detail" data-if="!has_pick"><div class="hint">Pick an ID to play with it.</div></div>
+                    <div class="newid">
+                        <h3>New ID</h3>
+                        <div class="hint">A fresh Freelancer ID on your Discord account - for more pilots on the server.</div>
+                        <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">Makes the ID and picks it; switch to it to create its pilots.</div></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="win-foot">
+        <div class="btn" data-action="close">Close</div>
+        <span class="status">{{ status }}</span>
+    </div>
+</body>
+</rml>
@@ -34,7 +34,7 @@
    <div class="win-head">
        <span class="title">{{ server }}</span><span class="sl">\\\</span>
        <span class="spacer"></span>
-        <span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
+        <span class="chip">Characters <span class="v">{{ chars.size }}</span><span data-if="limit &gt; 0"> / <span class="v">{{ limit }}</span></span></span>
    </div>
    <div class="win-main">
        <div class="content">
@@ -53,7 +53,7 @@
                    </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 (at most five per account).</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>
                </div>
@@ -78,6 +78,7 @@
    </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>
@@ -21,6 +21,10 @@
        .table .row.old { color: #5d6e80; }
        .table .row.full .c3 { color: #e05a4f; }
        .table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
+        .table .c0 { width: 26dp; }
+        .table .c0 img { width: 16dp; height: 16dp; margin-top: 1dp; opacity: 0.55; }
+        .table .c0 img:hover { opacity: 1; }
+        .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; }
        .pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
@@ -44,14 +48,17 @@
                <div class="colm">
                    <div class="table" style="flex: 1;">
                        <div class="head">
+                            <span class="c0"></span>
                            <span class="c1" data-class-sorted="sort == 1 || sort == -1" data-action="sort" data-arg="1">Server</span>
                            <span class="c2">Address</span>
                            <span class="c3" data-class-sorted="sort == 2 || sort == -2" data-action="sort" data-arg="2">Players</span>
                            <span class="c4" data-class-sorted="sort == 3 || sort == -3" data-action="sort" data-arg="3">Ping</span>
                        </div>
                        <div class="body">
-                            <div class="empty" data-if="rows.size == 0">No servers yet. {{ status }}</div>
+                            <div class="empty" data-if="rows.size == 0 &amp;&amp; !fav_list">No servers yet. {{ status }}</div>
+                            <div class="empty" data-if="rows.size == 0 &amp;&amp; fav_list">No favourite server yet and none on your LAN. Star servers in the internet list (or add them in the launcher, Favourite Servers) - they show up here.</div>
                            <div class="row" data-for="r : rows" data-class-selected="r.selected" data-class-old="r.old" data-class-full="r.full" data-action="pick" data-attr-data-arg="r.key">
+                                <span class="c0"><img src="img/star_on.png" class="on" data-if="r.fav" data-action="fav" data-attr-data-arg="r.key"/><img src="img/star_off.png" data-if="!r.fav" data-action="fav" data-attr-data-arg="r.key"/></span>
                                <span class="c1">{{ r.name }}<span class="tag" data-if="r.locked">LOCK</span><span class="tag" data-if="r.known">CHAR</span><span class="tag" data-if="r.datadiff" style="color: #ff6a4d;">MOD OUTDATED</span></span>
                                <span class="c2">{{ r.address }}</span>
                                <span class="c3">{{ r.players }}</span>
@@ -70,6 +77,7 @@
                    <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>