Start to add the input configure screen
This commit is contained in:
parent
9a6b89f00c
commit
4cd1c40f37
|
|
@ -1 +1 @@
|
|||
Subproject commit a6b88385f3e903011502d8257ffb08035b6c49cb
|
||||
Subproject commit ac1a1ad11b8d2af176b5d625706a8b3357688a5e
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
html
|
||||
{
|
||||
border: none;
|
||||
background-color: #232629;
|
||||
background-color: #30373b;
|
||||
}
|
||||
|
||||
html[window-state="maximized"]
|
||||
|
|
|
|||
|
|
@ -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> </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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
};
|
||||
Loading…
Reference in New Issue