Merge 5d6de09e2f into e8fb5a0869

Fix persistence of new collections, either from theme or custom name

es-app/src/CollectionSystemManager.cpp

@@ -15,6 +15,7 @@
 #include "ThemeData.h"
 #include <pugixml.hpp>
 #include <fstream>
+#include <cstring>
 
 /* Handling the getting, initialization, deinitialization, saving and deletion of
  * a CollectionSystemManager Instance */
@@ -97,29 +98,37 @@ void CollectionSystemManager::deinit()
 	}
 }
 
-void CollectionSystemManager::saveCustomCollection(SystemData* sys)
+bool CollectionSystemManager::saveCustomCollection(SystemData* sys)
 {
 	std::string name = sys->getName();
 	std::unordered_map<std::string, FileData*> games = sys->getRootFolder()->getChildrenByFilename();
 	bool found = mCustomCollectionSystemsData.find(name) != mCustomCollectionSystemsData.cend();
-	if (found) {
-		CollectionSystemData sysData = mCustomCollectionSystemsData.at(name);
-		if (sysData.needsSave)
-		{
-			std::ofstream configFile;
-			configFile.open(getCustomCollectionConfigPath(name));
-			for(std::unordered_map<std::string, FileData*>::const_iterator iter = games.cbegin(); iter != games.cend(); ++iter)
-			{
-				std::string path =  iter->first;
-				configFile << path << std::endl;
-			}
-			configFile.close();
-		}
-	}
-	else
+	if (!found)
 	{
 		LOG(LogError) << "Couldn't find collection to save! " << name;
+		return false;
 	}
+
+	CollectionSystemData sysData = mCustomCollectionSystemsData.at(name);
+	if (sysData.needsSave)
+	{
+		std::string absCollectionFn = getCustomCollectionConfigPath(name);
+		std::ofstream configFile;
+		configFile.open(absCollectionFn);
+		if (!configFile.good())
+		{
+			auto const errNo = errno;
+			LOG(LogError) << "Failed to create file, collection not created: " << absCollectionFn << ": " <<  std::strerror(errNo) << " (" << errNo <<  ")";
+			return false;
+		}
+		for(std::unordered_map<std::string, FileData*>::const_iterator iter = games.cbegin(); iter != games.cend(); ++iter)
+		{
+			std::string path =  iter->first;
+			configFile << path << std::endl;
+		}
+		configFile.close();
+	}
+	return true;
 }
 
 /* Methods to load all Collections into memory, and handle enabling the active ones */
@@ -128,7 +137,7 @@ void CollectionSystemManager::loadCollectionSystems(bool async)
 {
 	initAutoCollectionSystems();
 	CollectionSystemDecl decl = mCollectionSystemDeclsIndex[CUSTOM_COLL_ID];
-	mCustomCollectionsBundle = createNewCollectionEntry(decl.name, decl, false);
+	mCustomCollectionsBundle = createNewCollectionEntry(decl.name, decl, CollectionFlags::NONE);
 	// we will also load custom systems here
 	initCustomCollectionSystems();
 	if(Settings::getInstance()->getString("CollectionSystemsAuto") != "" || Settings::getInstance()->getString("CollectionSystemsCustom") != "")
@@ -375,6 +384,7 @@ bool CollectionSystemManager::isThemeCustomCollectionCompatible(std::vector<std:
 std::string CollectionSystemManager::getValidNewCollectionName(std::string inName, int index)
 {
 	std::string name = inName;
+	const std::string infix = " (" + std::to_string(index) + ")";
 
 	if(index == 0)
 	{
@@ -388,7 +398,7 @@ std::string CollectionSystemManager::getValidNewCollectionName(std::string inNam
 	}
 	else
 	{
-		name += " (" + std::to_string(index) + ")";
+		name += infix;
 	}
 
 	if(name == "")
@@ -398,7 +408,7 @@ std::string CollectionSystemManager::getValidNewCollectionName(std::string inNam
 
 	if(name != inName)
 	{
-		LOG(LogInfo) << "Had to change name, from: " << inName << " to: " << name;
+		LOG(LogInfo) << "Name collision, had to change name from: " << inName << " to: " << name;
 	}
 
 	// get used systems in es_systems.cfg
@@ -418,7 +428,7 @@ std::string CollectionSystemManager::getValidNewCollectionName(std::string inNam
 		if (*sysIt == name)
 		{
 			if(index > 0) {
-				name = name.substr(0, name.size()-4);
+				name = name.substr(0, name.size() - infix.size());
 			}
 			return getValidNewCollectionName(name, index+1);
 		}
@@ -448,7 +458,7 @@ void CollectionSystemManager::setEditMode(std::string collectionName, bool quiet
 	mEditingCollectionSystemData = sysData;
 
 	if (!quiet) {
-		GuiInfoPopup* s = new GuiInfoPopup(mWindow, "Editing the '" + Utils::String::toUpper(collectionName) + "' Collection. Add/remove games with Y.", 10000);
+		GuiInfoPopup* s = new GuiInfoPopup(mWindow, "Editing the '" + Utils::String::toUpper(collectionName) + "' Collection. Add/remove games with Y.", 8000);
 		mWindow->setInfoPopup(s);
 	}
 }
@@ -456,14 +466,14 @@ void CollectionSystemManager::setEditMode(std::string collectionName, bool quiet
 void CollectionSystemManager::exitEditMode(bool quiet)
 {
 	if (!quiet) {
-		GuiInfoPopup* s = new GuiInfoPopup(mWindow, "Finished editing the '" + mEditingCollection + "' Collection.", 4000);
+		GuiInfoPopup* s = new GuiInfoPopup(mWindow, "Finished editing the '" +  Utils::String::toUpper(mEditingCollection) + "' Collection.", 4000);
 		mWindow->setInfoPopup(s);
 	}
 	if (mIsEditingCustom) {
 		mIsEditingCustom = false;
 		mEditingCollection = "Favorites";
-
 		mEditingCollectionSystemData->system->onMetaDataSavePoint();
+		saveCustomCollection(mEditingCollectionSystemData->system);
 	}
 }
 
@@ -656,7 +666,7 @@ void CollectionSystemManager::initAutoCollectionSystems()
 		CollectionSystemDecl sysDecl = it->second;
 		if (!sysDecl.isCustom)
 		{
-			SystemData* newCol = createNewCollectionEntry(sysDecl.name, sysDecl);
+			SystemData* newCol = createNewCollectionEntry(sysDecl.name, sysDecl, CollectionFlags::HOLD_IN_MAP);
 			if (sysDecl.type == AUTO_RANDOM)
 				mRandomCollection = newCol;
 		}
@@ -756,17 +766,20 @@ SystemData* CollectionSystemManager::getAllGamesCollection()
 	return allSysData->system;
 }
 
-SystemData* CollectionSystemManager::addNewCustomCollection(std::string name)
+SystemData* CollectionSystemManager::addNewCustomCollection(std::string name, bool needsSave)
 {
 	CollectionSystemDecl decl = mCollectionSystemDeclsIndex[CUSTOM_COLL_ID];
 	decl.themeFolder = name;
 	decl.name = name;
 	decl.longName = name;
-	return createNewCollectionEntry(name, decl);
+	CollectionFlags flags = CollectionFlags::HOLD_IN_MAP;
+	if (needsSave)
+		flags = flags | CollectionFlags::NEEDS_SAVE;
+	return createNewCollectionEntry(name, decl, flags);
 }
 
 // creates a new, empty Collection system, based on the name and declaration
-SystemData* CollectionSystemManager::createNewCollectionEntry(std::string name, CollectionSystemDecl sysDecl, bool index)
+SystemData* CollectionSystemManager::createNewCollectionEntry(std::string name, CollectionSystemDecl sysDecl, const CollectionFlags flags)
 {
 	SystemData* newSys = new SystemData(name, sysDecl.longName, mCollectionEnvData, sysDecl.themeFolder, true);
 
@@ -775,9 +788,9 @@ SystemData* CollectionSystemManager::createNewCollectionEntry(std::string name,
 	newCollectionData.decl = sysDecl;
 	newCollectionData.isEnabled = false;
 	newCollectionData.isPopulated = false;
-	newCollectionData.needsSave = false;
+	newCollectionData.needsSave = (flags & CollectionFlags::NEEDS_SAVE) == CollectionFlags::NEEDS_SAVE ? true : false;
 
-	if (index)
+	if ((flags & CollectionFlags::HOLD_IN_MAP) == CollectionFlags::HOLD_IN_MAP)
 	{
 		if (!sysDecl.isCustom)
 		{

es-app/src/CollectionSystemManager.h

@@ -30,6 +30,24 @@ enum CollectionSystemType
 	CUSTOM_COLLECTION
 };
 
+// Flags when loading or creating a collection
+enum class CollectionFlags : uint8_t
+{
+	NONE,        // create only
+	HOLD_IN_MAP, // create and keep in mAutoCollectionSystemsData or mCustomCollectionSystemsData
+	NEEDS_SAVE   // force save of newly added collection
+};
+
+constexpr CollectionFlags operator|(CollectionFlags a,CollectionFlags b)
+{
+    return static_cast<CollectionFlags>(static_cast<uint8_t>(a) | static_cast<uint8_t>(b));
+}
+
+constexpr CollectionFlags operator&(CollectionFlags a, CollectionFlags b)
+{
+    return static_cast<CollectionFlags>(static_cast<uint8_t>(a) & static_cast<uint8_t>(b));
+}
+
 struct CollectionSystemDecl
 {
 	CollectionSystemType type; // type of system
@@ -58,7 +76,7 @@ public:
 	static CollectionSystemManager* get();
 	static void init(Window* window);
 	static void deinit();
-	void saveCustomCollection(SystemData* sys);
+	bool saveCustomCollection(SystemData* sys);
 
 	void loadCollectionSystems(bool async=false);
 	void loadEnabledListFromSettings();
@@ -74,7 +92,7 @@ public:
 	inline SystemData* getCustomCollectionsBundle() { return mCustomCollectionsBundle; };
 	inline SystemData* getRandomCollection() { return mRandomCollection; };
 	std::vector<std::string> getUnusedSystemsFromTheme();
-	SystemData* addNewCustomCollection(std::string name);
+	SystemData* addNewCustomCollection(std::string name, bool needsSave = false);
 
 	bool isThemeGenericCollectionCompatible(bool genericCustomCollections);
 	bool isThemeCustomCollectionCompatible(std::vector<std::string> stringVector);
@@ -107,7 +125,7 @@ private:
 
 	void initAutoCollectionSystems();
 	void initCustomCollectionSystems();
-	SystemData* createNewCollectionEntry(std::string name, CollectionSystemDecl sysDecl, bool index = true);
+	SystemData* createNewCollectionEntry(std::string name, CollectionSystemDecl sysDecl, const CollectionFlags flags);
 	void populateAutoCollection(CollectionSystemData* sysData);
 	void populateCustomCollection(CollectionSystemData* sysData);
 	void addRandomGames(SystemData* newSys, SystemData* sourceSystem, FileData* rootFolder, FileFilterIndex* index,

es-app/src/guis/GuiCollectionSystemsOptions.cpp

@@ -1,7 +1,10 @@
+#include <fstream>
+
 #include "guis/GuiCollectionSystemsOptions.h"
 
 #include "components/OptionListComponent.h"
 #include "components/SwitchComponent.h"
+#include "guis/GuiInfoPopup.h"
 #include "guis/GuiRandomCollectionOptions.h"
 #include "guis/GuiSettings.h"
 #include "guis/GuiTextEditPopup.h"
@@ -25,49 +28,58 @@ void GuiCollectionSystemsOptions::initializeMenu()
 	// manage random collection
 	addEntry("RANDOM GAME COLLECTION SETTINGS", 0x777777FF, true, [this] { openRandomCollectionSettings(); });
 
-	// add "Create New Custom Collection from Theme"
-	std::vector<std::string> unusedFolders = CollectionSystemManager::get()->getUnusedSystemsFromTheme();
-	if (unusedFolders.size() > 0)
-	{
-		addEntry("CREATE NEW CUSTOM COLLECTION FROM THEME", 0x777777FF, true,
-		[this, unusedFolders] {
-			auto s = new GuiSettings(mWindow, "SELECT THEME FOLDER");
-			std::shared_ptr< OptionListComponent<std::string> > folderThemes = std::make_shared< OptionListComponent<std::string> >(mWindow, "SELECT THEME FOLDER", true);
-
-			// add Custom Systems
-			for(auto it = unusedFolders.cbegin() ; it != unusedFolders.cend() ; it++ )
-			{
-				ComponentListRow row;
-				std::string name = *it;
-
-				std::function<void()> createCollectionCall = [name, this, s] {
-					createCollection(name);
-				};
-				row.makeAcceptInputHandler(createCollectionCall);
-
-				auto themeFolder = std::make_shared<TextComponent>(mWindow, Utils::String::toUpper(name), Font::get(FONT_SIZE_SMALL), 0x777777FF);
-				row.addElement(themeFolder, true);
-				s->addRow(row);
-			}
-			mWindow->pushGui(s);
-		});
-	}
 
 	ComponentListRow row;
-	row.addElement(std::make_shared<TextComponent>(mWindow, "CREATE NEW CUSTOM COLLECTION", Font::get(FONT_SIZE_MEDIUM), 0x777777FF), true);
-	auto createCustomCollection = [this](const std::string& newVal) {
-		std::string name = newVal;
-		// we need to store the first Gui and remove it, as it'll be deleted by the actual Gui
-		Window* window = mWindow;
-		GuiComponent* topGui = window->peekGui();
-		window->removeGui(topGui);
-		createCollection(name);
-	};
-	row.makeAcceptInputHandler([this, createCustomCollection] {
-		mWindow->pushGui(new GuiTextEditPopup(mWindow, "New Collection Name", "", createCustomCollection, false));
-	});
+	if(CollectionSystemManager::get()->isEditing())
+	{
+		row.addElement(std::make_shared<TextComponent>(mWindow, "FINISH EDITING '" + Utils::String::toUpper(CollectionSystemManager::get()->getEditingCollection()) + "' COLLECTION", Font::get(FONT_SIZE_MEDIUM), 0x777777FF), true);
+		row.makeAcceptInputHandler(std::bind(&GuiCollectionSystemsOptions::exitEditMode, this));
+		mMenu.addRow(row);
+	}
+	else
+	{
+		// add "Create New Custom Collection from Theme"
+		std::vector<std::string> unusedFolders = CollectionSystemManager::get()->getUnusedSystemsFromTheme();
+		if (unusedFolders.size() > 0)
+		{
+			addEntry("CREATE NEW CUSTOM COLLECTION FROM THEME", 0x777777FF, true,
+			[this, unusedFolders] {
+				auto s = new GuiSettings(mWindow, "SELECT THEME FOLDER");
+				std::shared_ptr< OptionListComponent<std::string> > folderThemes = std::make_shared< OptionListComponent<std::string> >(mWindow, "SELECT THEME FOLDER", true);
 
-	mMenu.addRow(row);
+				// add Custom Systems
+				for(auto it = unusedFolders.cbegin() ; it != unusedFolders.cend() ; it++ )
+				{
+					ComponentListRow row;
+					std::string name = *it;
+
+					std::function<void()> createCollectionCall = [name, this, s] {
+						createCollection(name);
+					};
+					row.makeAcceptInputHandler(createCollectionCall);
+
+					auto themeFolder = std::make_shared<TextComponent>(mWindow, Utils::String::toUpper(name), Font::get(FONT_SIZE_SMALL), 0x777777FF);
+					row.addElement(themeFolder, true);
+					s->addRow(row);
+				}
+				mWindow->pushGui(s);
+			});
+		}
+
+		row.addElement(std::make_shared<TextComponent>(mWindow, "CREATE NEW CUSTOM COLLECTION", Font::get(FONT_SIZE_MEDIUM), 0x777777FF), true);
+		auto createCustomCollection = [this](const std::string& newVal) {
+			std::string name = newVal;
+			// we need to store the first Gui and remove it, as it'll be deleted by the actual Gui
+			Window* window = mWindow;
+			GuiComponent* topGui = window->peekGui();
+			window->removeGui(topGui);
+			createCollection(name);
+		};
+		row.makeAcceptInputHandler([this, createCustomCollection] {
+			mWindow->pushGui(new GuiTextEditPopup(mWindow, "New Collection Name", "", createCustomCollection, false));
+		});
+		mMenu.addRow(row);
+	}
 
 	bundleCustomCollections = std::make_shared<SwitchComponent>(mWindow);
 	bundleCustomCollections->setState(Settings::getInstance()->getBool("UseCustomCollectionsSystem"));
@@ -103,14 +115,6 @@ void GuiCollectionSystemsOptions::initializeMenu()
 
 	mMenu.addWithLabel("ADD/REMOVE GAMES WHILE SCREENSAVER TO", defaultScreenSaverCollection);
 
-	if(CollectionSystemManager::get()->isEditing())
-	{
-		row.elements.clear();
-		row.addElement(std::make_shared<TextComponent>(mWindow, "FINISH EDITING '" + Utils::String::toUpper(CollectionSystemManager::get()->getEditingCollection()) + "' COLLECTION", Font::get(FONT_SIZE_MEDIUM), 0x777777FF), true);
-		row.makeAcceptInputHandler(std::bind(&GuiCollectionSystemsOptions::exitEditMode, this));
-		mMenu.addRow(row);
-	}
-
 	mMenu.addButton("BACK", "back", std::bind(&GuiCollectionSystemsOptions::applySettings, this));
 
 	mMenu.setPosition((Renderer::getScreenWidth() - mMenu.getSize().x()) / 2, Renderer::getScreenHeight() * 0.15f);
@@ -137,8 +141,15 @@ void GuiCollectionSystemsOptions::addEntry(const char* name, unsigned int color,
 
 void GuiCollectionSystemsOptions::createCollection(std::string inName)
 {
-	std::string name = CollectionSystemManager::get()->getValidNewCollectionName(inName);
-	SystemData* newSys = CollectionSystemManager::get()->addNewCustomCollection(name);
+	CollectionSystemManager* collSysMgr = CollectionSystemManager::get();
+	std::string name = collSysMgr->getValidNewCollectionName(inName);
+
+	SystemData* newSys = collSysMgr->addNewCustomCollection(name, true);
+	if (!collSysMgr->saveCustomCollection(newSys)) {
+		GuiInfoPopup* s = new GuiInfoPopup(mWindow, "Failed creating '" + Utils::String::toUpper(name) + "' Collection. See log for details.", 8000);
+		mWindow->setInfoPopup(s);
+		return;
+	}
 	customOptionList->add(name, name, true);
 	std::string outAuto = Utils::String::vectorToDelimitedString(autoOptionList->getSelectedObjects(), ",");
 	std::string outCustom = Utils::String::vectorToDelimitedString(customOptionList->getSelectedObjects(), ",");
@@ -146,10 +157,9 @@ void GuiCollectionSystemsOptions::createCollection(std::string inName)
 	ViewController::get()->goToSystemView(newSys);
 
 	Window* window = mWindow;
-	CollectionSystemManager::get()->setEditMode(name);
+	collSysMgr->setEditMode(name);
 	while(window->peekGui() && window->peekGui() != ViewController::get())
 		delete window->peekGui();
-	return;
 }
 
 void GuiCollectionSystemsOptions::openRandomCollectionSettings()

es-app/src/views/gamelist/BasicGameListView.cpp

@@ -66,10 +66,14 @@ void BasicGameListView::setCursor(FileData* cursor, bool refreshListCursorPos)
 	if (refreshListCursorPos)
 		setViewportTop(mList.REFRESH_LIST_CURSOR_POS);
 
-	if(!mList.setCursor(cursor) && (!cursor->isPlaceHolder()))
+	bool notInList = !mList.setCursor(cursor);
+	if(!refreshListCursorPos && notInList && !cursor->isPlaceHolder())
 	{
 		populateList(cursor->getParent()->getChildrenListToDisplay());
-		mList.setCursor(cursor);
+		// this extra call is needed iff a system has games organized in folders
+		// and the cursor is focusing a game in a folder
+		if (cursor->getParent()->getType() == FOLDER)
+			mList.setCursor(cursor);
 
 		// update our cursor stack in case our cursor just got set to some folder we weren't in before
 		if(mCursorStack.empty() || mCursorStack.top() != cursor->getParent())

resources/help/analog_all.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 "/>
+<polygon id="analog_left" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 "/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+<polygon id="analog_down" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 "/>
+</svg>

resources/help/analog_leftright.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 
+	"/>
+<polygon id="analog_down" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 "/>
+<polygon id="analog_left" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 
+	"/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+</svg>

resources/help/analog_updown.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="circle" fill="none" stroke="#FFFFFF" stroke-width="3" cx="32" cy="32" r="30"/>
+<polygon id="analog_up" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,14 37,14 32,6.2 "/>
+<polygon id="analog_right" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="50,27 50,37 57.8,32 "/>
+<polygon id="analog_down" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="27,50 37,50 32,57.8 
+	"/>
+<polygon id="analog_left" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" points="14,27 14,37 6.2,32 "/>
+<circle id="analog_thumb" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" cx="32" cy="32" r="5"/>
+</svg>

resources/help/button_guide.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M14.9,17.4c0.7,0,1.4,0.2,2.2,0.7l0.2,0.1l1-2.6L18,15.5c-1.1-0.6-2.2-0.9-3.3-0.9c-1.9,0-3.4,0.7-4.5,2
+		s-1.6,3-1.6,5.3c0,2.4,0.5,4.1,1.4,5.3c1,1.3,2.3,1.9,4,1.9c1.4,0,2.8-0.3,4-0.8l0.2-0.1v-7.4h-4.9v2.8h1.8v2.7
+		c-0.4,0.1-0.7,0.1-1.1,0.1c-0.7,0-1.3-0.4-1.7-1.1c-0.4-0.8-0.6-2-0.6-3.4c0-1.5,0.3-2.6,0.9-3.3C13.2,17.8,13.9,17.4,14.9,17.4z"
+		/>
+	<path fill="#FFFFFF" d="M26.1,24.2c0,0.8-0.1,1.4-0.4,1.8s-0.6,0.6-1.1,0.6c-0.4,0-1.6,0-1.6-2.4V15h-3.1v9c0,1.7,0.4,3,1.2,3.9
+		c0.8,0.9,2,1.4,3.4,1.4c1.5,0,2.8-0.5,3.5-1.4c0.8-0.9,1.2-2.2,1.2-3.8V15h-3.1V24.2z"/>
+	<rect x="31.7" y="14.9" fill="#FFFFFF" width="3" height="14.2"/>
+	<path fill="#FFFFFF" d="M41.3,14.9h-4V29H41c1.9,0,3.3-0.6,4.3-1.9c1-1.2,1.5-3,1.5-5.3c0-2.2-0.5-3.8-1.5-5.1
+		C44.4,15.5,43,14.9,41.3,14.9z M42.9,25.3c-0.4,0.7-1.1,1.1-2,1.1h-0.6v-8.8h0.8c1.6,0,2.4,1.4,2.4,4.3
+		C43.6,23.4,43.4,24.5,42.9,25.3z"/>
+	<polygon fill="#FFFFFF" points="55.4,17.6 55.4,14.9 48.4,14.9 48.4,29 55.4,29 55.4,26.3 51.6,26.3 51.6,23 55.1,23 55.1,20.4 
+		51.6,20.4 51.6,17.6 	"/>
+</g>
+<g id="outline_south">
+	<path fill="#FFFFFF" d="M32,54c-6.1,0-11-4.9-11-11s4.9-11,11-11s11,4.9,11,11S38.1,54,32,54z"/>
+</g>
+</svg>

resources/help/button_home.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g id="outline_south">
+	<path fill="#FFFFFF" d="M32,54c-6.1,0-11-4.9-11-11s4.9-11,11-11s11,4.9,11,11S38.1,54,32,54z"/>
+</g>
+<g>
+	<path fill="#FFFFFF" d="M18.07,29.1h-2.84v-6.26h-3.75v6.26H8.65V14.82h2.84v5.67h3.75v-5.67h2.84V29.1H18.07z"/>
+	<path fill="#FFFFFF" d="M30.77,21.95c0,2.36-0.47,4.18-1.42,5.45s-2.3,1.9-4.06,1.9c-1.77,0-3.12-0.63-4.07-1.9
+		s-1.42-3.09-1.42-5.47c0-2.36,0.47-4.18,1.42-5.44s2.31-1.89,4.09-1.89c1.76,0,3.11,0.63,4.05,1.9
+		C30.3,17.77,30.77,19.58,30.77,21.95z M22.7,21.95c0,1.63,0.22,2.87,0.66,3.72s1.08,1.28,1.93,1.28c1.71,0,2.57-1.67,2.57-5
+		s-0.85-5-2.55-5c-0.86,0-1.51,0.42-1.95,1.27C22.92,19.07,22.7,20.31,22.7,21.95z"/>
+	<path fill="#FFFFFF" d="M37.95,29.1l-2.9-12.16h-0.11c0.13,0.94,0.2,1.8,0.2,2.58v9.58H32.5V14.82h4.36l2.61,11.22h0.08l2.59-11.22
+		h4.43V29.1h-2.69v-9.68c0-0.8,0.05-1.62,0.15-2.46h-0.08l-2.9,12.14H37.95z"/>
+	<path fill="#FFFFFF" d="M55.35,29.1h-6.88V14.82h6.88v2.3h-4.04v3.4h3.75v2.31h-3.75v3.96h4.04V29.1z"/>
+</g>
+</svg>

resources/help/button_l2.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline_1_" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2_1_" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path fill="#FFFFFF" d="M2.1,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2.1z M30.3,40.6h-8.4V23.4H26v13.9h4.3V40.6z
+	 M43.2,40.6h-9.8V38l3-4.3c0.4-0.6,0.7-1,0.9-1.4c0.2-0.3,0.5-0.8,0.7-1.3c0.5-1,0.8-1.9,0.8-2.9c0-0.5-0.1-0.9-0.3-1.2
+	c-0.2-0.3-0.4-0.4-0.8-0.4c-0.4,0-0.7,0.2-1.1,0.5c-0.3,0.3-0.6,0.6-0.9,0.8c-0.2,0.3-0.4,0.4-0.4,0.5l-2-2.3
+	c0.8-0.9,1.6-1.5,2.3-1.9c0.8-0.4,1.6-0.6,2.6-0.6c1.5,0,2.7,0.4,3.5,1.2s1.2,2,1.2,3.4c0,0.9-0.2,1.9-0.5,2.7
+	c-0.3,0.9-0.8,1.7-1.4,2.6c-0.6,0.8-1.6,2.2-3,4h5.2V40.6z"/>
+</svg>

resources/help/button_r2.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#FFFFFF" d="M25.2,26.6h-0.3v4.3h0.3c0.5,0,0.9-0.2,1.2-0.6c0.2-0.4,0.4-0.9,0.4-1.7c0-0.8-0.1-1.3-0.4-1.6
+		C26.1,26.8,25.7,26.6,25.2,26.6z"/>
+	<path fill="#FFFFFF" d="M2.1,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2.1z M27.8,40.6l-2.6-6.5H25v6.5h-4.1V23.4h4.5
+		c1.9,0,3.3,0.4,4.2,1.3s1.3,2.2,1.3,3.9c0,2-0.7,3.5-2.1,4.4l3.3,7.5h-4.3V40.6z M43.2,40.6h-9.8V38l3-4.3c0.4-0.6,0.7-1,0.9-1.4
+		c0.2-0.3,0.5-0.8,0.7-1.3c0.5-1,0.8-1.9,0.8-2.9c0-0.5-0.1-0.9-0.3-1.2c-0.2-0.3-0.4-0.4-0.8-0.4c-0.4,0-0.7,0.2-1.1,0.5
+		c-0.3,0.3-0.6,0.6-0.9,0.8c-0.2,0.3-0.4,0.4-0.4,0.5l-2-2.3c0.8-0.9,1.6-1.5,2.3-1.9c0.8-0.4,1.6-0.6,2.6-0.6
+		c1.5,0,2.7,0.4,3.5,1.2c0.8,0.8,1.2,2,1.2,3.4c0,0.9-0.2,1.9-0.5,2.7c-0.3,0.9-0.8,1.7-1.4,2.6c-0.6,0.8-1.6,2.2-3,4h5.2V40.6z"/>
+</g>
+</svg>

resources/help/button_zl.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="button_lt" fill="#FFFFFF" d="M2,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2z M31.7,40.6H21.1V38l6.2-11.3h-6.1
+	v-3.2h10.2v2.7l-6.2,11.3h6.4v3.1H31.7z M34.5,23.4h4.1v13.9h4.3v3.2h-8.4V23.4z"/>
+</svg>

resources/help/button_zr.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<path id="outline" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round" d="M62,19v13c0,7.2-5.8,13-13,13H15
+	C7.8,45,2,39.2,2,32V19"/>
+<line id="outline2" fill="none" stroke="#FFFFFF" stroke-width="2" x1="1" y1="19" x2="63" y2="19"/>
+<path id="button_rt" fill="#FFFFFF" d="M2,19v13c0,7.2,5.8,13,13,13h34c7.2,0,13-5.8,13-13V19H2z M30.4,40.6H19.9V38l6.2-11.3H20
+	v-3.2h10.2v2.7L24,37.4h6.4V40.6z M32.9,23.4h4.5c1.9,0,3.3,0.4,4.2,1.3s1.3,2.2,1.3,3.9c0,2-0.7,3.5-2.1,4.4l3.3,7.5h-4.3L37.2,34
+	H37v6.5h-4.1V23.4z M37,26.6v4.3h0.3c0.5,0,0.9-0.2,1.2-0.6c0.2-0.4,0.4-0.9,0.4-1.7c0-0.8-0.1-1.3-0.4-1.6
+	c-0.2-0.3-0.6-0.5-1.2-0.5H37V26.6z"/>
+</svg>

resources/help/buttons_east_blank.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_east" fill="#FFFFFF" d="M50,22c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S55.5,22,50,22z"/>
+</svg>

resources/help/buttons_east_psx.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:none;stroke:#FFFFFF;stroke-width:2;}
+</style>
+<path id="circle_1_" class="st0" d="M50,21c-6,0-11,5-11,11s5,11,11,11s11-5,11-11S56,21,50,21z M50,24.5c4.1,0,7.5,3.3,7.5,7.5
+	s-3.3,7.5-7.5,7.5s-7.5-3.3-7.5-7.5S45.9,24.5,50,24.5z M50,26.1c-3.3,0-5.9,2.6-5.9,5.9s2.6,5.9,5.9,5.9s5.9-2.6,5.9-5.9
+	S53.3,26.1,50,26.1z"/>
+<circle id="outline_north" class="st1" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st1" cx="14" cy="32" r="10"/>
+<circle id="outline_north_1_" class="st1" cx="32" cy="50" r="10"/>
+</svg>

resources/help/buttons_east_xbox.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_south" class="st1" d="M50,22c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S55.5,22,50,22z M46.5,26.3h3.2
+	c1.3,0,2.2,0.2,2.8,0.7s0.9,1.2,0.9,2.3c0,0.7-0.2,1.2-0.5,1.7c-0.2,0.3-0.5,0.6-0.9,0.7c0.6,0.2,1,0.5,1.2,1c0.3,0.4,0.4,1,0.4,1.7
+	c0,1.1-0.3,1.9-0.9,2.5c-0.6,0.6-1.4,0.9-2.4,0.9h-3.7V26.3z M49.1,28.4v2.3h0.6c0.3,0,0.5-0.1,0.7-0.3c0.1-0.2,0.2-0.5,0.2-0.9
+	c0-0.4-0.1-0.7-0.2-0.9c-0.1-0.2-0.4-0.3-0.7-0.3C49.6,28.4,49.1,28.4,49.1,28.4z M49.1,32.8v2.8h0.7c0.6,0,0.9-0.5,0.9-1.4
+	c0-0.9-0.3-1.3-1-1.3H49.1z"/>
+</svg>

resources/help/buttons_north_blank.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_north" fill="#FFFFFF" d="M32,4c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,4,32,4z"/>
+</svg>

resources/help/buttons_north_psx.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_triangle" class="st1" d="M32,3c-6,0-11,4.9-11,11s5,11,11,11s11-5,11-11S38,3,32,3z M32,5.8c0.3,0,0.5,0.1,0.7,0.4
+	l6.3,11.5c0.2,0.3,0.1,0.9-0.3,1.1C38.5,19,38.4,19,38.3,19H25.7c-0.4,0-0.8-0.3-0.8-0.8c0-0.1,0-0.2,0.1-0.3l6.3-11.6
+	C31.5,5.9,31.7,5.8,32,5.8L32,5.8z M32,8.2l-5,9.1H37L32,8.2L32,8.2z"/>
+</svg>

resources/help/buttons_north_xbox.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_west" class="st1" d="M32,4c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,4,32,4z M28,8.3h2.9l1.2,3.5
+	c0.4-1.1,0.8-2.3,1.2-3.5H36l-2.7,6.8v4.6h-2.7v-4.5L28,8.3z"/>
+</svg>

resources/help/buttons_south_blank.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_south" fill="#FFFFFF" d="M32,40c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,40,32,40z"/>
+</svg>

resources/help/buttons_south_psx.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_xing" class="st1" d="M32,39c-6,0-11,5-11,11s5,11,11,11s11-5,11-11S38,39,32,39z M26.5,43.7c0.2,0,0.4,0.1,0.5,0.2
+	l5,5l5-5c0.1-0.1,0.3-0.2,0.5-0.2c0.4,0,0.8,0.3,0.8,0.8c0,0.2-0.1,0.4-0.2,0.5l-5,5l5,5c0.3,0.3,0.3,0.8,0,1.1s-0.8,0.3-1.1,0l0,0
+	l-5-5l-5,5c-0.3,0.3-0.8,0.3-1.1,0c-0.3-0.3-0.3-0.8,0-1.1l0,0l4.9-5L26,45c-0.3-0.3-0.3-0.8,0-1.1C26.1,43.8,26.3,43.7,26.5,43.7z"
+	/>
+</svg>

resources/help/buttons_south_xbox.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_east" class="st1" d="M32,40c-5.5,0-10,4.5-10,10s4.5,10,10,10s10-4.5,10-10S37.5,40,32,40z M30.3,44.3h3.4
+	l2.8,11.5h-2.8l-0.6-2.8h-2.3l-0.6,2.8h-2.7L30.3,44.3z M32,47.8c-0.1,0.4-0.3,1.4-0.7,3h1.3L32,47.8z"/>
+</svg>

resources/help/buttons_west_blank.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<circle id="outline_east" fill="none" stroke="#FFFFFF" stroke-width="2" cx="50" cy="32" r="10"/>
+<circle id="outline_south" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="50" r="10"/>
+<circle id="outline_north" fill="none" stroke="#FFFFFF" stroke-width="2" cx="32" cy="14" r="10"/>
+<circle id="outline_west" fill="none" stroke="#FFFFFF" stroke-width="2" cx="14" cy="32" r="10"/>
+<path id="button_west" fill="#FFFFFF" d="M14,22C8.5,22,4,26.5,4,32s4.5,10,10,10s10-4.5,10-10S19.5,22,14,22z"/>
+</svg>

resources/help/buttons_west_psx.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_square" class="st1" d="M14,21C7.9,21,3,26,3,32s4.9,11,11,11s11-5,11-11S20,21,14,21z M8.5,25.7h11
+	c0.4,0,0.8,0.3,0.8,0.8v11c0,0.4-0.3,0.8-0.8,0.8h-11c-0.4,0-0.8-0.3-0.8-0.8v-11C7.7,26.1,8.1,25.7,8.5,25.7z M9.3,27.3v9.5h9.5
+	v-9.5C18.7,27.3,9.3,27.3,9.3,27.3z"/>
+</svg>

resources/help/buttons_west_xbox.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#FFFFFF;stroke-width:2;}
+	.st1{fill:#FFFFFF;}
+</style>
+<circle id="outline_east" class="st0" cx="50" cy="32" r="10"/>
+<circle id="outline_south" class="st0" cx="32" cy="50" r="10"/>
+<circle id="outline_north" class="st0" cx="32" cy="14" r="10"/>
+<circle id="outline_west" class="st0" cx="14" cy="32" r="10"/>
+<path id="button_north" class="st1" d="M14,22C8.5,22,4,26.5,4,32s4.5,10,10,10s10-4.5,10-10S19.5,22,14,22z M10.1,26.3h2.8l1.2,2.9
+	l1-2.9h2.8l-2.4,5.6l2.6,5.8h-2.8l-1.3-3.3l-1.2,3.3H9.9l2.6-5.9L10.1,26.3z"/>
+</svg>

resources/input_joypad_filled.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<g>
+		<path fill="#AAAAAA" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8
+			c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9H32.9c-7.1,0-13.2,3.2-17.2,8.4
+			c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9l1.7-5.4h49.5L90.6,82.4z"/>
+	</g>
+	<path fill="#AAAAAA" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+	<path fill="#AAAAAA" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+</g>
+<g>
+	<g>
+		<g>
+			<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9
+				c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9
+				H32.9c-7.1,0-13.2,3.2-17.2,8.4c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9"
+				/>
+			<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M56.4,77h15.2"/>
+		</g>
+		<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+		<path fill="none" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+	</g>
+	<g>
+		<polygon fill="#777777" points="38.3,56.9 31.6,56.9 31.6,63.8 26.4,63.8 26.4,56.9 19.3,56.9 19.3,51.7 26.2,51.7 26.2,44.8 
+			31.4,44.8 31.4,51.7 38.3,51.7 		"/>
+		<g>
+			<circle fill="#777777" cx="88.6" cy="54.3" r="4"/>
+			<path fill="#777777" d="M97.3,67.1c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C101.3,65.3,99.5,67.1,97.3,67.1z"/>
+			<path fill="#777777" d="M97.3,49.8c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S99.5,49.8,97.3,49.8z"/>
+			<path fill="#777777" d="M105.9,58.3c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C110.1,56.5,108.1,58.3,105.9,58.3z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#777777" d="M59.6,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,1,1.5,2.1
+					C61.1,63,60.6,63.7,59.6,63.7z"/>
+				<path fill="#777777" d="M74.5,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,0.7,1.5,2.1
+					C76,63.3,75.4,63.7,74.5,63.7z"/>
+			</g>
+			<circle fill="#777777" cx="64" cy="47.8" r="5"/>
+		</g>
+	</g>
+	<path fill="#777777" d="M46.6,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S49.3,74.9,46.6,74.9z"/>
+	<path fill="#777777" d="M81.4,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S84.1,74.9,81.4,74.9z"/>
+</g>
+</svg>

resources/input_joypad_unfilled.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M90.6,82.4c2.4,5.2,11.8,13.9,20.3,13.9
+				c6.1,0,9.2-4,9.2-8.4c0-19.6-1.7-31.1-3.6-37.8c-1.5-4.8-4.2-8.8-4.2-8.8c-4-5.2-10.1-8.4-17.2-8.4H84l-2.3,2.9H64H46.2L44,32.9
+				H32.9c-7.1,0-13.2,3.2-17.2,8.4c0,0-2.7,4-4.2,8.8c-1.9,6.7-3.6,18.1-3.6,37.8c0,4.4,3.1,8.4,9.2,8.4c8.5,0,17.9-8.7,20.3-13.9"
+				/>
+			<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M56.4,77h15.2"/>
+		</g>
+		<path fill="#AAAAAA" d="M46.6,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S49.3,74.9,46.6,74.9z"/>
+		<path fill="#AAAAAA" d="M81.4,74.9c-2.7,0-5,2.3-5,5s2.3,5,5,5s5-2.3,5-5S84.1,74.9,81.4,74.9z"/>
+		<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M46.6,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S51.8,70.4,46.6,70.4z"/>
+		<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M81.4,70.4c-5.2,0-9.5,4.3-9.5,9.5
+			s4.3,9.5,9.5,9.5s9.5-4.3,9.5-9.5S86.6,70.4,81.4,70.4z"/>
+	</g>
+	<g>
+		<polygon fill="#AAAAAA" points="38.3,56.9 31.6,56.9 31.6,63.8 26.4,63.8 26.4,56.9 19.3,56.9 19.3,51.7 26.2,51.7 26.2,44.8 
+			31.4,44.8 31.4,51.7 38.3,51.7 		"/>
+		<g>
+			<circle fill="#AAAAAA" cx="88.6" cy="54.3" r="4"/>
+			<path fill="#AAAAAA" d="M97.3,67.1c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C101.3,65.3,99.5,67.1,97.3,67.1z"/>
+			<path fill="#AAAAAA" d="M97.3,49.8c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4S99.5,49.8,97.3,49.8z"/>
+			<path fill="#AAAAAA" d="M105.9,58.3c-2.2,0-4-1.8-4-4s1.8-4,4-4s4,1.8,4,4C110.1,56.5,108.1,58.3,105.9,58.3z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#AAAAAA" d="M59.6,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,1,1.5,2.1
+					C61.1,63,60.6,63.7,59.6,63.7z"/>
+				<path fill="#AAAAAA" d="M74.5,63.7h-6.1c-0.7,0-1.5-0.7-1.5-1.9s0.7-2.1,1.5-2.1h6.1c0.7,0,1.5,0.7,1.5,2.1
+					C76,63.3,75.4,63.7,74.5,63.7z"/>
+			</g>
+			<circle fill="#AAAAAA" cx="64" cy="47.8" r="5"/>
+		</g>
+	</g>
+</g>
+</svg>

resources/input_keyboard_filled.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<path fill="#AAAAAA" stroke="#777777" stroke-width="3" stroke-linejoin="round" d="M111.8,36.5H16.1c-4.3,0-7.6,3.2-7.6,6.8v47.1
+		c0,3.9,3.5,6.8,7.6,6.8H112c4.3,0,7.6-3.2,7.6-6.8V43.3C119.4,39.6,116.1,36.5,111.8,36.5z"/>
+	<g>
+		<path fill="#777777" d="M85.1,89.8H42.9c-1,0-1.9-0.9-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h42.3c1,0,1.9,0.9,1.9,1.9v3.7
+			C86.9,88.9,86.1,89.8,85.1,89.8z"/>
+		<g>
+			<path fill="#777777" d="M20.6,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<path fill="#777777" d="M93.9,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#777777" d="M73.4,70.4c0-1.1,0.8-1.9,1.9-1.9H79c1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M60.2,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M47,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M33.8,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M99.9,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#777777" d="M86.6,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9C86.6,74.2,86.6,70.4,86.6,70.4z"/>
+				<path fill="#777777" d="M20.6,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+			</g>
+			<g>
+				<path fill="#777777" d="M80.1,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9H82
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M66.9,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M53.5,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M40.4,58.2c0-1.1,0.8-1.9,1.9-1.9H46c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9C40.4,61.9,40.4,58.2,40.4,58.2z"/>
+				<path fill="#777777" d="M93.2,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#777777" d="M27.2,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9H29
+					c-1.1,0-1.9-0.9-1.9-1.9C27.2,61.9,27.2,58.2,27.2,58.2z"/>
+			</g>
+			<g>
+				<path fill="#777777" d="M67.6,49.6c0,1.1-0.8,1.9-1.9,1.9H62c-1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M80.9,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9H79
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M94.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M107.4,49.6c0,1.1-0.8,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1.1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M41.2,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#777777" d="M54.5,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9C54.5,45.9,54.5,49.6,54.5,49.6z"/>
+				<path fill="#777777" d="M28.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

resources/input_keyboard_unfilled.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<g>
+	<path fill="none" stroke="#AAAAAA" stroke-width="3" stroke-linejoin="round" d="M111.8,36.5H16.1c-4.3,0-7.6,3.2-7.6,6.8v47.1
+		c0,3.9,3.5,6.8,7.6,6.8H112c4.3,0,7.6-3.2,7.6-6.8V43.3C119.4,39.6,116.1,36.5,111.8,36.5z"/>
+	<g>
+		<path fill="#AAAAAA" d="M85.1,89.8H42.9c-1,0-1.9-0.9-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h42.3c1,0,1.9,0.9,1.9,1.9v3.7
+			C86.9,88.9,86.1,89.8,85.1,89.8z"/>
+		<g>
+			<path fill="#AAAAAA" d="M20.6,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<path fill="#AAAAAA" d="M93.9,84.2c0-1,0.9-1.9,1.9-1.9h9.7c1,0,1.9,0.9,1.9,1.9V88c0,1-0.9,1.9-1.9,1.9h-9.7
+				c-1,0-1.9-0.9-1.9-1.9V84.2z"/>
+		</g>
+		<g>
+			<g>
+				<path fill="#AAAAAA" d="M73.4,70.4c0-1.1,0.8-1.9,1.9-1.9H79c1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M60.2,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M47,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M33.8,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M99.9,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V70.4z"/>
+				<path fill="#AAAAAA" d="M86.6,70.4c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9C86.6,74.2,86.6,70.4,86.6,70.4z"/>
+				<path fill="#AAAAAA" d="M20.6,70.4c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9V70.4z"/>
+			</g>
+			<g>
+				<path fill="#AAAAAA" d="M80.1,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9H82
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M66.9,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M53.5,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M40.4,58.2c0-1.1,0.8-1.9,1.9-1.9H46c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9h-3.7
+					c-1.1,0-1.9-0.9-1.9-1.9C40.4,61.9,40.4,58.2,40.4,58.2z"/>
+				<path fill="#AAAAAA" d="M93.2,58.2c0-1.1,0.9-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.8,1.9-1.9,1.9h-3.7
+					c-1,0-1.9-0.9-1.9-1.9V58.2z"/>
+				<path fill="#AAAAAA" d="M27.2,58.2c0-1.1,0.8-1.9,1.9-1.9h3.7c1.1,0,1.9,0.8,1.9,1.9v3.7c0,1.1-0.9,1.9-1.9,1.9H29
+					c-1.1,0-1.9-0.9-1.9-1.9C27.2,61.9,27.2,58.2,27.2,58.2z"/>
+			</g>
+			<g>
+				<path fill="#AAAAAA" d="M67.6,49.6c0,1.1-0.8,1.9-1.9,1.9H62c-1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M80.9,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9H79
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M94.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M107.4,49.6c0,1.1-0.8,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1.1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M41.2,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+				<path fill="#AAAAAA" d="M54.5,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.8-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9C54.5,45.9,54.5,49.6,54.5,49.6z"/>
+				<path fill="#AAAAAA" d="M28.1,49.6c0,1.1-0.9,1.9-1.9,1.9h-3.7c-1.1,0-1.9-0.8-1.9-1.9v-3.7c0-1,0.9-1.9,1.9-1.9h3.7
+					c1,0,1.9,0.9,1.9,1.9V49.6z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

resources/star_half_filled.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
+<path fill="#777777" d="M51.2,17.1c-5.3,0-12.4,25.5-16.7,28.7c-4.3,3.1-30.8,2-32.4,7c-1.6,5,20.5,19.7,22.1,24.7s-7.6,29.9-3.3,33
+	s25-13.4,30.4-13.4v-80H51.2z"/>
+<path fill="none" stroke="#777777" stroke-width="4" stroke-linejoin="round" d="M51.2,17.1c-5.3,0-12.4,25.5-16.7,28.7
+	c-4.3,3.1-30.8,2-32.4,7c-1.6,5,20.5,19.7,22.1,24.7s-7.6,29.9-3.3,33s25-13.4,30.4-13.4s26.1,16.5,30.4,13.4c4.3-3.1-5-28-3.3-33
+	s23.7-19.7,22.1-24.7s-28.1-3.9-32.4-7C63.6,42.6,56.5,17.1,51.2,17.1z"/>
+</svg>