alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-07-09 03:03:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Key Interaction Visibility (#428)

Browse Source 
## Description:
Enhanced the visual clarity of key inputs using custom CSS.
Keyboard keys now appear more distinct and intuitive, making the help
modal easier to understand at a glance.
Keys can be changed easily.

Fixes #477 

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

<DISCORD USERNAME>
aotumuri(.w. / (๑-̀ㅂ-́)و✧)
This commit is contained in:
Aotumuri
2025-04-13 01:34:15 +09:00
committed by GitHub
parent 608f57b2a9
commit 4c777412b6
3 changed files with 132 additions and 10 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>