Add favorites (#242)

* Add favorites

* Bump version

* Fix scripts not showing star

* Favorite toggle styling

* Make favorite icon yellow on hover

---------

Co-authored-by: Jiří Pihrt <[email protected]>

Author: NicEastvillage

rlbot_gui/gui.py

@@ -34,7 +34,7 @@
 from rlbot_gui.match_runner.custom_maps import find_all_custom_maps
 from rlbot_gui.type_translation.packet_translation import convert_packet_to_dict
 from rlbot_gui.persistence.settings import load_settings, BOT_FOLDER_SETTINGS_KEY, MATCH_SETTINGS_KEY, \
-    LAUNCHER_SETTINGS_KEY, TEAM_SETTINGS_KEY, load_launcher_settings, launcher_preferences_from_map
+    LAUNCHER_SETTINGS_KEY, TEAM_SETTINGS_KEY, FAVORITES_KEY, load_launcher_settings, launcher_preferences_from_map
 from rlbot import gateway_util
 
 #### LOAD JUST TO EXPOSE STORY_MODE
@@ -230,6 +230,19 @@ def save_team_settings(blue_bots, orange_bots):
     settings.setValue(TEAM_SETTINGS_KEY, {"blue_team": blue_bots, "orange_team": orange_bots})
 
 
+@eel.expose
+def get_favorite_runnables():
+    settings = load_settings()
+    favorite_runnables = settings.value(FAVORITES_KEY, type=list)
+    return favorite_runnables if favorite_runnables else []
+
+
+@eel.expose
+def save_favorite_runnables(runnables):
+    settings = load_settings()
+    settings.setValue(FAVORITES_KEY, runnables)
+
+
 @eel.expose
 def pick_location(is_folder, filter="Config files (*.cfg)"):
     """

rlbot_gui/gui/js/bot-card-vue.js

@@ -8,14 +8,15 @@ export default {
 	props: {
 		bot: Object,
 		disabled: Boolean,
+		favorited: Boolean,
 		draggable: {
 			type: Boolean,
 			default: true,
 		},
 	},
 	template: /*html*/`
 		<draggable v-model="draggableModel" :options="draggableOptions" style="display: inline;">
-			<runnable-card :runnable="bot" v-bind="[$props,$attrs]" :class="{draggable: draggable}" @click="$emit('click')">
+			<runnable-card :runnable="bot" v-bind="[$props,$attrs]" :class="{draggable: draggable}" :favorited="favorited" @click="$emit('click')">
 		</draggable>
 	`,
 	computed: {

rlbot_gui/gui/js/bot-pool-vue.js

@@ -10,7 +10,7 @@ export default {
 		'script-card': ScriptCard,
 		'script-dependencies': ScriptDependencies,
 	},
-	props: ['bots', 'scripts', 'display-human'],
+	props: ['bots', 'scripts', 'display-human', 'favorites'],
 	template: /*html*/`
 		<div class="p-1">
 			<b-form inline class="mb-2">
@@ -33,15 +33,15 @@ export default {
 			</b-form>
 	
 			<div class="overflow-auto">
-				<bot-card v-for="bot in bots" :bot="bot" v-show="passesFilter(bot)" @click="$emit('bot-clicked', bot)"/>
+				<bot-card v-for="bot in bots" :bot="bot" v-show="passesFilter(bot)" @click="$emit('bot-clicked', bot)" :favorited="favorites.includes(bot.path)" />
 	
 				<span v-if="displayedBotsCount + displayedScriptsCount === 0">
 					No bots available for this category.
 				</span>
 	
 				<div v-if="displayedScriptsCount > 0" class="scripts-header">Scripts</div>
 	
-				<script-card v-for="script in scripts" :script="script" v-show="passesFilter(script)"/>
+				<script-card v-for="script in scripts" :script="script" v-show="passesFilter(script)" :favorited="favorites.includes(script.path)"/>
 				
 				<script-dependencies :bots="bots" :scripts="scripts"
 					v-if="secondaryCategorySelected.displayScriptDependencies"
@@ -84,6 +84,10 @@ export default {
 			if (runnable.type === 'script' && !category.displayScriptDependencies && runnable.enabled)
 				return true;
 
+			if (category && category.favorites) {
+				return this.favorites.includes(runnable.path)
+			}
+
 			let allowedTag = runnable.type === 'script' ? category.scripts : category.bots;
 			if (allowedTag) {
 				if (allowedTag === '*') {

rlbot_gui/gui/js/categories.js

@@ -70,4 +70,12 @@ export default {
             },
         ],
     },
+    favorites: {
+        name: "Favorites",
+        categories: [
+            {
+                favorites: true,
+            },
+        ],
+    },
 };

rlbot_gui/gui/js/main-vue.js

@@ -137,6 +137,7 @@ export default {
 				@bot-clicked="addToTeam($event, teamSelection)"
 				ref="botPool"
 				:display-human="displayHumanInBotPool"
+				:favorites="favoritesPool"
 				class="noscroll-flex"
 			/>
 
@@ -255,6 +256,17 @@ export default {
 		</b-toast>
 
 		<b-modal id="bot-info-modal" size="xl" :title="activeBot.name" v-if="activeBot && activeBot.info" hide-footer centered>
+			<template #modal-title="{ close }">
+				<div class="d-flex align-items-center">
+					{{activeBot.name}}
+					<b-button v-if="activeBot.path" variant="outline-primary" class="icon-button" @click="toggleFavoriteRunnable(activeBot)"
+						v-b-tooltip.hover title="Toggle bot as favorite"
+					>
+						<b-icon v-if="favoritesPool.includes(activeBot.path)" icon="star-fill" variant="warning" />
+						<b-icon v-else icon="star" />
+					</b-button>
+				</div>
+			</template>
 
 			<img v-if="activeBot.logo" class="bot-logo" v-bind:src="activeBot.logo">
 			<p><span class="bot-info-key">Developers:</span> {{activeBot.info.developer}}</p>
@@ -471,6 +483,7 @@ export default {
 			showBotpackUpdateSnackbar: false,
 			appearancePath: '',
 			recommendations: null,
+			favoritesPool: [],
 			downloadModalTitle: "Downloading Bot Pack",
 		}
 	},
@@ -743,6 +756,10 @@ export default {
 			eel.get_match_options()(this.matchOptionsReceived)
 		},
 
+		favoriteRunnablesReceived: function (runnables) {
+			this.favoritesPool = runnables;
+		},
+
 		botpackUpdateChecked: function (isBotpackUpToDate) {
 			this.showBotpackUpdateSnackbar = !isBotpackUpToDate;
 			this.isBotpackUpToDate = isBotpackUpToDate;
@@ -791,6 +808,16 @@ export default {
 			bots.forEach(this.handleBotAddedToTeam);
 			this.$bvModal.hide('recommendations-modal');
 		},
+		toggleFavoriteRunnable: async function(runnable) {
+			let i = this.favoritesPool.indexOf(runnable.path);
+			if (i >= 0) {
+				this.favoritesPool.splice(i, 1);
+			} else {
+				this.favoritesPool.push(runnable.path);
+			}
+			await eel.save_favorite_runnables(this.favoritesPool)();
+		},
+
 		startup: function() {
 			if (this.$route.path != "/") {
 				return
@@ -799,6 +826,7 @@ export default {
 			eel.get_match_options()(this.matchOptionsReceived);
 			eel.get_match_settings()(this.matchSettingsReceived);
 			eel.get_team_settings()(this.teamSettingsReceived);
+			eel.get_favorite_runnables()(this.favoriteRunnablesReceived);
 
 			eel.get_language_support()((support) => {
 				this.languageSupport = support;

rlbot_gui/gui/js/runnable-card-vue.js

@@ -5,6 +5,7 @@ export default {
 		disabled: Boolean,
 		removable: Boolean,
 		hidewarning: Boolean,
+		favorited: Boolean,
 	},
 	template: /*html*/`
 		<b-card class="bot-card" @click="disabled || $emit('click')" :class="{disabled: disabled}">
@@ -19,6 +20,8 @@ export default {
 					</span>
 				</span>
 			</slot>
+			
+			<b-icon v-if="favorited" icon="star-fill" variant="warning" style="margin-left: 0.33em"></b-icon>
 
 			<b-button size="sm" class="icon-button warning-icon" v-if="runnable.warn && !hidewarning" variant="outline-warning"
 						@click.stop="$store.commit('setActiveBot', runnable)" v-b-modal.language-warning-modal>

rlbot_gui/gui/js/script-card-vue.js

@@ -2,12 +2,16 @@ import RunnableCard from './runnable-card-vue.js'
 
 export default {
 	name: 'script-card',
-	props: ['script', 'disabled'],
+	props: {
+		script: Object,
+		disabled: Boolean,
+		favorited: Boolean,
+	},
 	components: {
 		'runnable-card': RunnableCard,
 	},
 	template: `
-		<runnable-card :runnable="script" class="script-card" :disabled="disabled">
+		<runnable-card :runnable="script" class="script-card" :disabled="disabled" :favorited="favorited">
 			<b-form inline>
 				<b-form-checkbox v-model="script.enabled" class="script-switch" switch :disabled="disabled">
 					<img :src="script.logo">

rlbot_gui/persistence/settings.py

@@ -5,6 +5,7 @@
 MATCH_SETTINGS_KEY = 'match_settings'
 LAUNCHER_SETTINGS_KEY = 'launcher_settings'
 TEAM_SETTINGS_KEY = 'team_settings'
+FAVORITES_KEY = 'favorite_runnables'
 
 
 def load_settings() -> QSettings:

setup.py

@@ -1,6 +1,6 @@
 import setuptools
 
-__version__ = '0.0.160'
+__version__ = '0.0.161'
 
 with open("README.md", "r") as readme_file:
     long_description = readme_file.read()