alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-22 19:06:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:openfrontio/OpenFrontIO

Browse Source
This commit is contained in:
Evan
2025-04-12 10:14:58 -07:00
parent 3caecc1978 4c777412b6
commit e793179fbf
6 changed files with 453 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/HelpModal.ts
+51 -10
View File
@@ -35,43 +35,84 @@ export class HelpModal extends LitElement {
</thead>
<tbody class="text-left">
<tr>
<td>Space</td>
<td><span class="key">Space</span></td>
<td>${translateText("help_modal.action_alt_view")}</td>
</tr>
<tr>
<td>Shift + left click</td>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Shift</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
<div class="mouse-wheel"></div>
</div>
</div>
</td>
<td>${translateText("help_modal.action_attack_altclick")}</td>
</tr>
<tr>
<td>Ctrl + left click</td>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Ctrl</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
<div class="mouse-wheel"></div>
</div>
</div>
</td>
<td>${translateText("help_modal.action_build")}</td>
</tr>
<tr>
<td>Alt + left click</td>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Alt</span>
<span class="plus">+</span>
<div class="mouse-shell alt-left-click">
<div class="mouse-left-corner"></div>
<div class="mouse-wheel"></div>
</div>
</div>
</td>
<td>${translateText("help_modal.action_emote")}</td>
</tr>
<tr>
<td>C</td>
<td><span class="key">C</span></td>
<td>${translateText("help_modal.action_center")}</td>
</tr>
<tr>
<td>Q / E</td>
<td><span class="key">Q</span> / <span class="key">E</span></td>
<td>${translateText("help_modal.action_zoom")}</td>
</tr>
<tr>
<td>W / A / S / D</td>
<td><span class="key">W</span> <span class="key">A</span> <span class="key">S</span> <span class="key">D</span></td>
<td>${translateText("help_modal.action_move_camera")}</td>
</tr>
<tr>
<td>1 / 2</td>
<td><span class="key">1</span> / <span class="key">2</span></td>
<td>${translateText("help_modal.action_ratio_change")}</td>
</tr>
<tr>
<td>Shift + scroll down / scroll up</td>
<td>
<div class="scroll-combo-horizontal">
<span class="key">Shift</span>
<span class="plus">+</span>
<div class="mouse-with-arrows">
<div class="mouse-shell">
<div class="mouse-wheel" id="highlighted-wheel"></div>
</div>
<div class="mouse-arrows-side">
<div class="arrow">↑</div>
<div class="arrow">↓</div>
</div>
</div>
</div>
</td>
<td>${translateText("help_modal.action_ratio_change")}</td>
</tr>
<tr>
<td>ALT + R</td>
<td><span class="key">ALT</span> + <span class="key">R</span></td>
<td>${translateText("help_modal.action_reset_gfx")}</td>
</tr>
</tbody>
src/client/LangSelector.ts
+1 -1
View File
@@ -246,7 +246,7 @@ export class LangSelector extends LitElement {
: {
native: "English",
en: "English",
svg: "xx",
svg: "uk_us_flag",
});
return html`
src/client/styles.css
+3
View File
@@ -8,6 +8,7 @@
@import url("./styles/layout/container.css");
@import url("./styles/components/button.css");
@import url("./styles/components/modal.css");
@import url("./styles/components/controls.css");
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@@ -214,6 +215,8 @@ label.option-card:hover {
font-size: 14px;
color: #fff;
text-align: center;
font-family: monospace;
font-weight: 600;
}
.players-list {
src/client/styles/components/controls.css
+80
View File
@@ -0,0 +1,80 @@
.scroll-combo-horizontal {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: sans-serif;
color: white;
}
.key {
display: inline-block;
padding: 4px 14px;
border-radius: 6px;
background-color: #000;
color: #fff;
font-weight: bold;
box-shadow: 0 2px 0 #444;
}
.plus {
font-size: 16px;
color: #ccc;
}
.mouse-shell {
width: 28px;
height: 45px;
border: 2px solid #ccc;
border-radius: 50px;
position: relative;
background: transparent;
}
.mouse-left-corner {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
background-color: #ff4d4d;
border-top-left-radius: 50px;
}
.mouse-right-corner {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 50%;
background-color: #ff4d4d;
border-top-right-radius: 50px;
}
.mouse-wheel {
width: 4px;
height: 8px;
background-color: #ccc;
border-radius: 2px;
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
}
#highlighted-wheel {
background-color: #ff4d4d;
}
.mouse-with-arrows {
display: flex;
align-items: center;
gap: 6px;
}
.mouse-arrows-side {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
color: #ccc;
}