85 lines
5.3 KiB
Plaintext
85 lines
5.3 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Characters</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.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; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
|
.fig .hint { text-align: center; margin-top: 6dp; }
|
|
.roster { flex: 1; overflow-y: auto; }
|
|
.pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
|
.pilot:hover { border-color: #5cc8f0; }
|
|
.pilot.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
|
|
.pilot .txt { flex: 1; min-width: 0; }
|
|
.pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
|
.pilot.selected .n { color: #f2b13c; }
|
|
.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 .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
|
|
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; }
|
|
.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; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="charselect">
|
|
<div class="win-head">
|
|
<span class="title">{{ server }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="colm list">
|
|
<h3 style="margin-bottom: 8dp;">Your pilots</h3>
|
|
<div class="empty-roster" data-if="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="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 (at most five per account).</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>
|
|
<div class="colm fig">
|
|
<h3 style="margin-bottom: 8dp;">Pilot</h3>
|
|
<div id="figure"></div>
|
|
<div class="hint">drag to turn</div>
|
|
</div>
|
|
<div class="colm side">
|
|
<div class="detail" data-if="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>
|
|
<h3 style="margin-bottom: 8dp;">Message of the day</h3>
|
|
<div class="motd">{{ motd }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<div class="btn" data-action="back">Back to servers</div>
|
|
<div class="btn" data-action="menu">Main menu</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|