Start to add the input configure screen

This commit is contained in:
N3xoX1 2025-04-13 18:28:16 +09:30
parent 9a6b89f00c
commit 4cd1c40f37
11 changed files with 297 additions and 4 deletions

2
external/sciterui vendored

@ -1 +1 @@
Subproject commit a6b88385f3e903011502d8257ffb08035b6c49cb
Subproject commit ac1a1ad11b8d2af176b5d625706a8b3357688a5e

View File

@ -0,0 +1,143 @@
button
{
color: #eff0f1;
background: #232728;
border: 1px solid #55575a;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
padding: 0.2rem;
min-width: 5rem;
}
button:hover
{
border: 1px solid #3cafe9;
}
button:active
{
background: #3cafe9;
}
.tabs {
display: flex;
font-size: 0;
}
.tab-button {
background: #2b2f32;
border: 1px solid #55575a;
border-bottom: 1px solid #76787d;
border-radius: 2px 2px 0 0;
color: #eff0f1;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
padding: 0.2rem 1.3rem 0.2rem 1.3rem;
margin: 0;
position: relative;
z-index: 2;
margin-bottom: -1px;
min-width: 2rem;
}
.tab-button:hover {
border: 1px solid #55575a;
border-bottom: 1px solid #76787d;
}
.tab-button:active {
background: #2b2f32;
}
.tab-button.active {
background: #30373b;
border-color: #76787d;
border-bottom: 1px solid #30373b;
}
.controller-body
{
background: #30373b;
border: 1px solid #76787d;
width: 100%%;
height: 100%%;
flow: horizontal;
padding: 1em;
font-family: 'Segoe UI', Arial, sans-serif;
font-size: 0.8rem;
color: #eff0f1;
}
.config-left,
.config-right
{
width: 13rem;
}
.config-center
{
width: 100%%;
}
.input-group
{
position: relative;
background-color: #30373b;
border: 1px solid #55575a;
padding: 1.2rem 0.5rem 0.5rem 0.5rem;
margin: 0 0 20px 0;
}
.input-grid-directional {
text-align: center;
flow: grid( 1 1, 2 3, 4 4, 5 6, 7 7, 8 8);
padding: 0.5rem 0 0;
}
.group-title
{
position: absolute;
top: -0.5rem;
left: 0;
margin: 0 auto;
background-color: #30373b;
padding: 0 6px;
font-size: 0.8rem;
color: #f0f0f0;
}
.input-row
{
display: inline-block;
position: relative;
background-color: #30373b;
border: 1px solid #55575a;
padding: 0.4em 0.2rem 0.2rem 0.2rem;
border-radius: 2px;
margin: 0 50%% 0.9rem 50%%;
width: 50%%;
}
.input-row span
{
position: absolute;
top: -0.7rem;
left: 0;
margin: 0 auto;
background-color: #30373b;
padding: 0 6px;
font-size: 0.8rem;
color: #f0f0f0;
}
.input-row button
{
min-width: 3.8rem;
height: 1.4rem;
}
.footer
{
padding: 0.5rem 0 0;
text-align: right;
}

View File

@ -1,7 +1,7 @@
html
{
border: none;
background-color: #232629;
background-color: #30373b;
}
html[window-state="maximized"]

View File

@ -0,0 +1,85 @@
<html window-frame="solid-with-shadow" window-icon="window-icon.png">
<head>
<link href="main_window.css" rel="stylesheet" type="text/css" />
<link href="input_config.css" rel="stylesheet" type="text/css" />
<title>Configure Input</title>
</head>
<header>
<window-caption role=window-caption><img src="window-icon-32.png" /><span>Configure input</span></window-caption>
<window-buttons>
<window-button role="window-minimize"></window-button>
<window-button role="window-close"></window-button>
</window-buttons>
</header>
<body>
<div class="tabs">
<button class="tab-button active" data-tab="player1">Player 1</button><button class="tab-button" data-tab="player2">Player 2</button><button class="tab-button" data-tab="player3">Player 3</button>
<button class="tab-button" data-tab="player4">Player 4</button>
<button class="tab-button" data-tab="player5">Player 5</button>
<button class="tab-button" data-tab="player6">Player 6</button>
<button class="tab-button" data-tab="player7">Player 7</button>
<button class="tab-button" data-tab="player8">Player 8</button>
</div>
<div class="controller-body">
<div class="config-left">
<div class="input-group">
<div class="group-title">Left Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>W</button></div>
<div class="input-row"><span>Left</span><button>A</button></div>
<div class="input-row"><span>Right</span><button>D</button></div>
<div class="input-row"><span>Down</span><button>S</button></div>
<div class="input-row"><span>Pressed</span><button>F</button></div>
<div class="input-row"><span>Modifier</span><button>Shift</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
<div class="input-group">
<div class="group-title">D-Pad</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>Up</button></div>
<div class="input-row"><span>Left</span><button>Left</button></div>
<div class="input-row"><span>Right</span><button>Right</button></div>
<div class="input-row"><span>Down</span><button>Down</button></div>
</div>
</div>
</div>
<div class="config-center">
<!-- Controller image goes here -->
</div>
<div class="config-right">
<div class="input-group">
<div class="group-title">Face Buttons</div>
<div class="input-grid-directional">
<div class="input-row"><span>X</span><button>V</button></div>
<div class="input-row"><span>Y</span><button>Z</button></div>
<div class="input-row"><span>A</span><button>C</button></div>
<div class="input-row"><span>B</span><button>X</button></div>
</div>
</div>
<div class="input-group">
<div class="group-title">Right Stick</div>
<div class="input-grid-directional">
<div class="input-row"><span>Up</span><button>I</button></div>
<div class="input-row"><span>Left</span><button>J</button></div>
<div class="input-row"><span>Right</span><button>L</button></div>
<div class="input-row"><span>Down</span><button>K</button></div>
<div class="input-row"><span>Pressed</span><button>G</button></div>
<div class="input-row"><span>Modifier</span><button>&nbsp;</button></div>
<label>Modifier Range: <span>51%</span></label>
<input type="range" min="0" max="100" value="51" />
</div>
</div>
</div>
</div>
<div class="footer">
<button>OK</button>
<button>Cancel</button>
</div>
</body>
</html>

View File

@ -4,7 +4,7 @@
<title>NxEmu</title>
</head>
<header>
<window-caption role=window-caption><img src="window-icon-32.png" /><span>NxEmu<span></window-caption>
<window-caption role=window-caption><img src="window-icon-32.png" /><span>NxEmu</span></window-caption>
<window-buttons>
<window-button role="window-minimize"></window-button>
<window-button role="window-close"></window-button>

View File

@ -43,6 +43,7 @@
<ClCompile Include="user_interface\notification.cpp" />
<ClCompile Include="user_interface\sciter_main_window.cpp" />
<ClCompile Include="user_interface\settings\config_setting_section.cpp" />
<ClCompile Include="user_interface\settings\input_config.cpp" />
<ClCompile Include="user_interface\settings\settings_config.cpp" />
<ClCompile Include="user_interface\settings\settings_page.cpp" />
<ClCompile Include="user_interface\settings\settings_page_modules.cpp" />
@ -57,6 +58,7 @@
<ClInclude Include="user_interface\resource.h" />
<ClInclude Include="user_interface\sciter_main_window.h" />
<ClInclude Include="user_interface\settings\config_setting_section.h" />
<ClInclude Include="user_interface\settings\input_config.h" />
<ClInclude Include="user_interface\settings\settings_config.h" />
<ClInclude Include="user_interface\settings\settings_page.h" />
<ClInclude Include="user_interface\settings\settings_page_modules.h" />

View File

@ -75,6 +75,9 @@
<ClCompile Include="user_interface\sciter_main_window.cpp">
<Filter>Source Files\user_interface</Filter>
</ClCompile>
<ClCompile Include="user_interface\settings\input_config.cpp">
<Filter>Source Files\user_interface\settings</Filter>
</ClCompile>
</ItemGroup>
<ItemGroup>
<ClInclude Include="user_interface\main_window.h">
@ -113,6 +116,9 @@
<ClInclude Include="user_interface\sciter_main_window.h">
<Filter>Header Files\user_interface</Filter>
</ClInclude>
<ClInclude Include="user_interface\settings\input_config.h">
<Filter>Header Files\user_interface\settings</Filter>
</ClInclude>
</ItemGroup>
<ItemGroup>
<ResourceCompile Include="user_interface\nxemu.rc">

View File

@ -1,4 +1,5 @@
#include "sciter_main_window.h"
#include "settings/input_config.h"
#include "settings/settings_config.h"
#include "settings/ui_settings.h"
#include <Windows.h>
@ -49,6 +50,7 @@ void SciterMainWindow::ResetMenu()
fileMenu.push_back(MenuBarItem(ID_FILE_EXIT, "Exit"));
MenuBarItemList OptionsMenu;
OptionsMenu.push_back(MenuBarItem(ID_OPTIONS_INPUT, "Configure Input..."));
OptionsMenu.push_back(MenuBarItem(ID_OPTIONS_SETTINGS, "Settings..."));
MenuBarItemList mainTitleMenu;
@ -69,7 +71,7 @@ bool SciterMainWindow::Show(void)
WINDOW_WIDTH = 760,
};
if (!m_sciterUI.WindowCreate(nullptr, "main_window.html", 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, m_window))
if (!m_sciterUI.WindowCreate(nullptr, "main_window.html", 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, SUIW_MAIN, m_window))
{
return false;
}
@ -200,6 +202,11 @@ void SciterMainWindow::OnSettings(void)
SettingConfig().Display((HWND)m_window->GetHandle());
}
void SciterMainWindow::OnInputConfig(void)
{
InputConfig(m_sciterUI).Display((void *)m_window->GetHandle());
}
void SciterMainWindow::OnRecetGame(uint32_t fileIndex)
{
Stringlist & recentFiles = uiSettings.recentFiles;
@ -221,6 +228,7 @@ void SciterMainWindow::OnMenuItem(int32_t id, SCITER_ELEMENT /*item*/)
case ID_FILE_OPEN_GAME: OnOpenGame(); break;
case ID_FILE_EXIT: OnFileExit(); break;
case ID_OPTIONS_SETTINGS: OnSettings(); break;
case ID_OPTIONS_INPUT: OnInputConfig(); break;
default:
if (id >= ID_RECENT_FILE_START && id <= ID_RECENT_FILE_END)
{

View File

@ -16,6 +16,7 @@ class SciterMainWindow :
ID_FILE_EXIT,
// Options Menu
ID_OPTIONS_INPUT,
ID_OPTIONS_SETTINGS,
// Recent files
@ -44,6 +45,7 @@ private:
void OnOpenGame(void);
void OnFileExit(void);
void OnSettings(void);
void OnInputConfig(void);
void OnRecetGame(uint32_t fileIndex);
// IWindowDestroySink

View File

@ -0,0 +1,26 @@
#include "input_config.h"
#include <sciter_ui.h>
InputConfig::InputConfig(ISciterUI & SciterUI) :
m_sciterUI(SciterUI),
m_window(nullptr)
{
}
InputConfig::~InputConfig()
{
}
void InputConfig::Display(void * parentWindow)
{
enum
{
WINDOW_HEIGHT = 300,
WINDOW_WIDTH = 300,
};
if (!m_sciterUI.WindowCreate(parentWindow, "input_config.html", 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT, SUIW_CHILD, m_window))
{
return;
}
}

View File

@ -0,0 +1,21 @@
#pragma once
__interface ISciterUI;
__interface ISciterWindow;
class InputConfig
{
public:
InputConfig(ISciterUI& SciterUI);
~InputConfig();
void Display(void * parentWindow);
private:
InputConfig() = delete;
InputConfig(const InputConfig&) = delete;
InputConfig& operator=(const InputConfig&) = delete;
ISciterUI & m_sciterUI;
ISciterWindow * m_window;
};