Added ability to import aidg.club scenarios

Changed menu bar to bootstrap navbar to allow for dropdown menus
This commit is contained in:
KoboldAI Dev
2021-05-16 05:29:39 -04:00
parent 2cef3bceaf
commit b05a73a04f
4 changed files with 240 additions and 17 deletions

View File

@ -408,6 +408,8 @@ def get_message(msg):
deletewi(msg['data']) deletewi(msg['data'])
elif(msg['cmd'] == 'sendwilist'): elif(msg['cmd'] == 'sendwilist'):
commitwi(msg['data']) commitwi(msg['data'])
elif(msg['cmd'] == 'aidgimport'):
importAidgRequest(msg['data'])
#==================================================================# #==================================================================#
# #
@ -1280,6 +1282,48 @@ def importgame():
refresh_story() refresh_story()
emit('from_server', {'cmd': 'setgamestate', 'data': 'ready'}) emit('from_server', {'cmd': 'setgamestate', 'data': 'ready'})
#==================================================================#
# Import an aidg.club prompt and start a new game with it.
#==================================================================#
def importAidgRequest(id):
import html
import re
exitModes()
urlformat = "https://prompts.aidg.club/"
req = requests.get(urlformat+id)
if(req.status_code == 200):
contents = html.unescape(req.text)
title = re.search("<h3>(.*?)</h3>", contents, re.IGNORECASE | re.MULTILINE | re.DOTALL).group(1).strip()
keys = re.findall("<h5>(.*?)</h5>", contents, re.IGNORECASE | re.MULTILINE | re.DOTALL)
contents = re.findall("<code class=\"card-text pre-line\">(.*?)</code>", contents, re.IGNORECASE | re.MULTILINE | re.DOTALL)
# Initialize game state
vars.gamestarted = True
vars.prompt = ""
vars.memory = ""
vars.authornote = ""
vars.actions = []
vars.worldinfo = []
for i in range(len(keys)):
if(keys[i] == "Description"):
pass
elif(keys[i] == "Prompt"):
vars.prompt = contents[i]
elif(keys[i] == "Memory"):
vars.memory = contents[i]
elif(keys[i] == "Author's Note"):
vars.authornote = contents[i]
# Refresh game screen
sendwi()
refresh_story()
emit('from_server', {'cmd': 'setgamestate', 'data': 'ready'})
#==================================================================# #==================================================================#
# Starts a new story # Starts a new story
#==================================================================# #==================================================================#

View File

@ -11,6 +11,7 @@ var button_newgame;
var button_save; var button_save;
var button_load; var button_load;
var button_import; var button_import;
var button_impaidg;
var button_settings; var button_settings;
var button_format; var button_format;
var button_send; var button_send;
@ -35,6 +36,10 @@ var popup_title;
var popup_content; var popup_content;
var popup_accept; var popup_accept;
var popup_close; var popup_close;
var aidgpopup;
var aidgpromptnum;
var aidg_accept;
var aidg_close;
// Key states // Key states
var shift_down = false; var shift_down = false;
@ -356,13 +361,30 @@ function newTextHighlight(ref) {
ref.addClass("color_green"); ref.addClass("color_green");
ref.addClass("colorfade"); ref.addClass("colorfade");
setTimeout(function () { setTimeout(function () {
ref.removeClass("color_green") ref.removeClass("color_green");
setTimeout(function () { setTimeout(function () {
ref.removeClass("colorfade") ref.removeClass("colorfade");
}, 1000); }, 1000);
}, 10); }, 10);
} }
function showAidgPopup() {
aidgpopup.removeClass("hidden");
aidgpopup.addClass("flex");
aidgpromptnum.focus();
}
function hideAidgPopup() {
aidgpopup.removeClass("flex");
aidgpopup.addClass("hidden");
}
function sendAidgImportRequest() {
socket.send({'cmd': 'aidgimport', 'data': aidgpromptnum.val()});
hideAidgPopup();
aidgpromptnum.val("");
}
//=================================================================// //=================================================================//
// READY/RUNTIME // READY/RUNTIME
//=================================================================// //=================================================================//
@ -375,6 +397,7 @@ $(document).ready(function(){
button_save = $('#btn_save'); button_save = $('#btn_save');
button_load = $('#btn_load'); button_load = $('#btn_load');
button_import = $("#btn_import"); button_import = $("#btn_import");
button_impaidg = $("#btn_impaidg");
button_settings = $('#btn_settings'); button_settings = $('#btn_settings');
button_format = $('#btn_format'); button_format = $('#btn_format');
button_send = $('#btnsend'); button_send = $('#btnsend');
@ -399,6 +422,10 @@ $(document).ready(function(){
popup_content = $("#popupcontent"); popup_content = $("#popupcontent");
popup_accept = $("#btn_popupaccept"); popup_accept = $("#btn_popupaccept");
popup_close = $("#btn_popupclose"); popup_close = $("#btn_popupclose");
aidgpopup = $("#aidgpopupcontainer");
aidgpromptnum = $("#aidgpromptnum");
aidg_accept = $("#btn_aidgpopupaccept");
aidg_close = $("#btn_aidgpopupclose");
// Connect to SocketIO server // Connect to SocketIO server
loc = window.document.location; loc = window.document.location;
@ -441,6 +468,7 @@ $(document).ready(function(){
button_actedit.html("Edit"); button_actedit.html("Edit");
button_actmem.html("Memory"); button_actmem.html("Memory");
button_actwi.html("W Info"); button_actwi.html("W Info");
hideAidgPopup();
} }
} else if(msg.cmd == "editmode") { } else if(msg.cmd == "editmode") {
// Enable or Disable edit mode // Enable or Disable edit mode
@ -640,10 +668,17 @@ $(document).ready(function(){
socket.send({'cmd': 'wi', 'data': ''}); socket.send({'cmd': 'wi', 'data': ''});
}); });
// I think this was removed? button_impaidg.on("click", function(ev) {
//$("#btn_savesettings").on("click", function(ev) { showAidgPopup();
// socket.send({'cmd': 'savesettings', 'data': ''}); });
//});
aidg_close.on("click", function(ev) {
hideAidgPopup();
});
aidg_accept.on("click", function(ev) {
sendAidgImportRequest();
});
// Bind Enter button to submit // Bind Enter button to submit
input_text.keydown(function (ev) { input_text.keydown(function (ev) {
@ -665,5 +700,10 @@ $(document).ready(function(){
} }
}); });
aidgpromptnum.keydown(function (ev) {
if (ev.which == 13) {
sendAidgImportRequest();
}
});
}); });

View File

@ -16,6 +16,21 @@ chunk {
grid-template-columns: 80% 20%; grid-template-columns: 80% 20%;
} }
#navbar {
margin: 0px;
}
#navbar li {
margin-right: 5px;
background-color: #4787be;
border-radius: 5px;
}
#navbar li > a {
color: #ffffff;
font-weight: bold;
}
#settingsmenu { #settingsmenu {
display:none; display:none;
background-color: #295071; background-color: #295071;
@ -195,17 +210,33 @@ chunk {
margin-right: 10px; margin-right: 10px;
} }
#popuptitleclose {
}
#wimenu { #wimenu {
max-height: 100%; max-height: 100%;
width: 100%; width: 100%;
} }
#aidgpopup {
width: 350px;
background-color: #262626;
margin-top: 100px;
}
#aidgpromptnum {
background-color: #404040;
color: #ffffff;
}
/*================= Classes =================*/ /*================= Classes =================*/
.aidgpopupcontent {
padding: 10px 40px 10px 40px;
}
.aidgpopuplistheader {
color: #737373;
text-align: center;
}
.anotelabel { .anotelabel {
font-size: 10pt; font-size: 10pt;
color: #ffffff; color: #ffffff;
@ -242,6 +273,27 @@ chunk {
color: #ff0000; color: #ff0000;
} }
.dropdown-menu {
background-color: #337ab7;
width: 200px;
}
.dropdown-item {
display: block;
padding: 10px;
color: #ffffff;
border-bottom: 1px solid #295071;
}
.dropdown-item:first-child {
border-top: 1px solid #295071;
}
.dropdown-item:hover {
background-color: #98bcdb;
text-decoration: none;
}
.flex { .flex {
display: flex; display: flex;
} }
@ -329,6 +381,28 @@ chunk {
text-align: right; text-align: right;
} }
.navbar .navbar-nav .nav-link:hover {
border-radius: 5px;
background-color: #98bcdb;
}
.navbar .navbar-nav .nav-link:focus {
border-radius: 5px;
background-color: #98bcdb;
}
.popupcontainer {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
flex-direction: column;
align-items: center;
}
.popuplistitem { .popuplistitem {
padding: 5px 10px 5px 10px; padding: 5px 10px 5px 10px;
display: grid; display: grid;
@ -349,6 +423,33 @@ chunk {
background-color: #688f1f; background-color: #688f1f;
} }
.popuptitlebar {
padding: 10px;
background-color: #337ab7;
}
.popuptitletext {
height: 100%;
display: flex;
align-items:center;
color: #ffffff;
font-size: 12pt;
}
.popupfooter {
width: 100%;
padding: 10px;
display: flex;
justify-content: center;
background-color: #295071;
}
.popupfooter button {
width: 100px;
margin-left: 10px;
margin-right: 10px;
}
.settingitem { .settingitem {
width: 18%; width: 18%;
padding-left: 10px; padding-left: 10px;

View File

@ -19,13 +19,34 @@
<div class="row" id="topmenu"> <div class="row" id="topmenu">
<div id="menuitems"> <div id="menuitems">
<div> <div>
<button type="button" class="btn btn-primary" id="btn_newgame">New Story</button> <nav class="navbar default" id="navbar">
<button type="button" class="btn btn-primary" id="btn_save">Save</button> <div class="collapse navbar-collapse" id="navbarNavDropdown">
<button type="button" class="btn btn-primary" id="btn_load">Load</button> <ul class="nav navbar-nav">
<button type="button" class="btn btn-primary" id="btn_import">Import</button> <li class="nav-item">
<div class="spacer"></div> <a class="nav-link" href="#" id="btn_newgame">New Story</a>
<button type="button" class="btn btn-primary" id="btn_settings">Settings</button> </li>
<button type="button" class="btn btn-primary" id="btn_format">Formatting</button> <li class="nav-item">
<a class="nav-link" href="#" id="btn_save">Save</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="btn_load">Load</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Import...</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" id="btn_import">AI Dungeon Adventure</a>
<a class="dropdown-item" href="#" id="btn_impaidg">aidg.club Prompt</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="btn_settings">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="btn_format">Formatting</a>
</li>
</ul>
</div>
</nav>
</div> </div>
<div id="connectstatusdiv"> <div id="connectstatusdiv">
<span id="connectstatus" class="color_orange">Waiting for connection...</span> <span id="connectstatus" class="color_orange">Waiting for connection...</span>
@ -116,5 +137,22 @@
</div> </div>
</div> </div>
</div> </div>
<div class="popupcontainer hidden" id="aidgpopupcontainer">
<div id="aidgpopup">
<div class="popuptitlebar">
<div class="popuptitletext">Enter the Prompt Number</div>
</div>
<div class="aidgpopuplistheader">
(4-digit number at the end of aidg.club URL)
</div>
<div class="aidgpopupcontent">
<input class="form-control" type="text" placeholder="Prompt Number" id="aidgpromptnum">
</div>
<div class="popupfooter">
<button type="button" class="btn btn-primary" id="btn_aidgpopupaccept">Accept</button>
<button type="button" class="btn btn-primary" id="btn_aidgpopupclose">Cancel</button>
</div>
</div>
</div>
</body> </body>
</html> </html>