Added option to keep generation options on the right

This commit is contained in:
ebolam
2022-08-10 13:09:55 -04:00
parent 3cc40b8526
commit 8ecd51486e
5 changed files with 69 additions and 4 deletions

View File

@@ -6495,6 +6495,13 @@ def UI_2_load_story(file):
print("loading {}".format(file))
loadRequest(file)
#==================================================================#
# Event triggered on load story
#==================================================================#
@socketio.on('new_story')
def UI_2_new_story(data):
koboldai_vars.create_story("")
#==================================================================#
# Event triggered when user moves world info

View File

@@ -316,7 +316,7 @@ class story_settings(settings):
def __init__(self, socketio, tokenizer=None):
self.socketio = socketio
self.tokenizer = tokenizer
self.story_name = "" # Title of the story
self.story_name = "New Game" # Title of the story
self.lastact = "" # The last action received from the user
self.submission = "" # Same as above, but after applying input formatting
self.lastctx = "" # The last context submitted to the generator

View File

@@ -43,6 +43,10 @@
--wi_card_bg_color: #262626;
--wi_card_tag_bg_color: #404040;
--wi_tag_color: #337ab7;
--story_pinned_areas: "menuicon options gamescreen lefticon"
"menuicon inputrow inputrow lefticon";
--story_pinned_area_widths: 30px 30% auto 30px;
}
/*----------------Folder Tabs--------------------*/
@@ -603,9 +607,8 @@ body {
.main-grid.story_pinned {
margin-left: var(--flyout_menu_closed_width);
margin-right: var(--flyout_menu_width);
grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon";
grid-template-columns: 30px auto 30% 30px;
grid-template-areas: var(--story_pinned_areas);
grid-template-columns: var(--story_pinned_area_widths);
}
.main-grid.settings_pinned.story_pinned {
margin-left: var(--flyout_menu_width);

View File

@@ -1255,6 +1255,18 @@ function show_error_message(data) {
error_message_box.querySelector("#popup_list_area").textContent = data;
}
//--------------------------------------------UI to Server Functions----------------------------------
function new_story() {
//check if the story is saved
if (document.getElementById('save_story').getAttribute('story_gamesaved') == "false") {
//ask the user if they want to continue
if (window.confirm("You asked for a new story but your current story has not been saved. If you continue you will loose your changes.")) {
socket.emit('new_story', '');
}
} else {
socket.emit('new_story', '');
}
}
function save_as_story(response) {
if (response == "overwrite?") {
document.getElementById('save-confirm').classList.remove('hidden')
@@ -1346,10 +1358,34 @@ function preserve_game_space(preserve) {
if (preserve) {
setCookie("preserve_game_space", "true");
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '0px');
if (!(document.getElementById('preserve_game_space_setting').checked)) {
//not sure why the bootstrap-toggle won't respect a standard item.checked = true/false, so....
document.getElementById('preserve_game_space_setting').parentNode.click();
}
document.getElementById('preserve_game_space_setting').checked = true;
} else {
setCookie("preserve_game_space", "false");
r.style.setProperty('--setting_menu_closed_width_no_pins_width', '450px');
if (document.getElementById('preserve_game_space_setting').checked) {
//not sure why the bootstrap-toggle won't respect a standard item.checked = true/false, so....
document.getElementById('preserve_game_space_setting').parentNode.click();
}
document.getElementById('preserve_game_space_setting').checked = false;
}
}
function options_on_right(data) {
var r = document.querySelector(':root');
console.log("Setting cookie to: "+data);
if (data) {
setCookie("options_on_right", "true");
r.style.setProperty('--story_pinned_areas', '"menuicon gamescreen options lefticon"\n"menuicon inputrow inputrow lefticon"');
r.style.setProperty('--story_pinned_area_widths', '30px auto 30% 30px');
document.getElementById('preserve_game_space_setting').checked = true;
} else {
setCookie("options_on_right", "false");
r.style.setProperty('--story_pinned_areas', '"menuicon options gamescreen lefticon"\n"menuicon inputrow inputrow lefticon"');
r.style.setProperty('--story_pinned_area_widths', '30px 30% auto 30px');
document.getElementById('preserve_game_space_setting').checked = false;
}
}
@@ -2071,4 +2107,5 @@ $(document).ready(function(){
}
console.log("cookie: "+getCookie("preserve_game_space"));
preserve_game_space((getCookie("preserve_game_space") == "true"));
options_on_right((getCookie("options_on_right") == "true"));
});

View File

@@ -53,6 +53,7 @@
<div id="Story_Info">
<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
<div>
<button id="new_story" class="btn action_button" onclick="new_story();">New Story</button>
<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
<!---<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>--->
@@ -106,6 +107,23 @@
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
</div>
<div class="setting_container">
<span class="setting_label">
Keep options on Right:
<span class="helpicon">
?
<span class="helptext">
When enabled and only the story menu is pinned, the generated story options will be shown on the right instead of the left of the game text.
</span>
</span>
</span>
<span class="setting_item">
<input type=checkbox id="options_on_right" data-size=mini data-onstyle=success data-toggle=toggle onchange="options_on_right(this.checked)"/>
</span>
<!---Slider Labels--->
<span class="setting_minlabel"><span style="top: -4px; position: relative;"></span></span>
<span class="setting_maxlabel"><span style="top: -4px; position: relative;"></span></span>
</div>
</div>
</div>
</div>