mirror of
https://github.com/evennia/evennia.git
synced 2026-03-18 05:46:31 +01:00
389 lines
No EOL
32 KiB
HTML
389 lines
No EOL
32 KiB
HTML
|
||
<!DOCTYPE html>
|
||
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta name="generator" content="Docutils 0.17.1: http://docutils.sourceforge.net/" />
|
||
|
||
<title>Webclient — Evennia 0.9.5 documentation</title>
|
||
<link rel="stylesheet" href="_static/nature.css" type="text/css" />
|
||
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
|
||
<script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
|
||
<script src="_static/jquery.js"></script>
|
||
<script src="_static/underscore.js"></script>
|
||
<script src="_static/doctools.js"></script>
|
||
<script src="_static/language_data.js"></script>
|
||
<script async="async" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
|
||
<script type="text/x-mathjax-config">MathJax.Hub.Config({"tex2jax": {"processClass": "tex2jax_process|mathjax_process|math|output_area"}})</script>
|
||
<link rel="shortcut icon" href="_static/favicon.ico"/>
|
||
<link rel="index" title="Index" href="genindex.html" />
|
||
<link rel="search" title="Search" href="search.html" />
|
||
</head><body>
|
||
<div class="related" role="navigation" aria-label="related navigation">
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li class="right" style="margin-right: 10px">
|
||
<a href="genindex.html" title="General Index"
|
||
accesskey="I">index</a></li>
|
||
<li class="right" >
|
||
<a href="py-modindex.html" title="Python Module Index"
|
||
>modules</a> |</li>
|
||
<li class="nav-item nav-item-0"><a href="index.html">Evennia 0.9.5</a> »</li>
|
||
<li class="nav-item nav-item-this"><a href="">Webclient</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="document">
|
||
<div class="documentwrapper">
|
||
<div class="bodywrapper">
|
||
<div class="body" role="main">
|
||
|
||
<section class="tex2jax_ignore mathjax_ignore" id="webclient">
|
||
<h1>Webclient<a class="headerlink" href="#webclient" title="Permalink to this headline">¶</a></h1>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="web-client">
|
||
<h1><strong>Web client</strong><a class="headerlink" href="#web-client" title="Permalink to this headline">¶</a></h1>
|
||
<p>Evennia comes with a MUD client accessible from a normal web browser. During development you can try
|
||
it at <code class="docutils literal notranslate"><span class="pre">http://localhost:4001/webclient</span></code>. The client consists of several parts, all under
|
||
<code class="docutils literal notranslate"><span class="pre">evennia/web/webclient/</span></code>:</p>
|
||
<p><code class="docutils literal notranslate"><span class="pre">templates/webclient/webclient.html</span></code> and <code class="docutils literal notranslate"><span class="pre">templates/webclient/base.html</span></code> are the very simplistic
|
||
django html templates describing the webclient layout.</p>
|
||
<p><code class="docutils literal notranslate"><span class="pre">static/webclient/js/evennia.js</span></code> is the main evennia javascript library. This handles all
|
||
communication between Evennia and the client over websockets and via AJAX/COMET if the browser can’t
|
||
handle websockets. It will make the Evennia object available to the javascript namespace, which
|
||
offers methods for sending and receiving data to/from the server transparently. This is intended to
|
||
be used also if swapping out the gui front end.</p>
|
||
<p><code class="docutils literal notranslate"><span class="pre">static/webclient/js/webclient_gui.js</span></code> is the default plugin manager. It adds the <code class="docutils literal notranslate"><span class="pre">plugins</span></code> and
|
||
<code class="docutils literal notranslate"><span class="pre">plugin_manager</span></code> objects to the javascript namespace, coordinates the GUI operations between the
|
||
various plugins, and uses the Evennia object library for all in/out.</p>
|
||
<p><code class="docutils literal notranslate"><span class="pre">static/webclient/js/plugins</span></code> provides a default set of plugins that implement a “telnet-like”
|
||
interface.</p>
|
||
<p><code class="docutils literal notranslate"><span class="pre">static/webclient/css/webclient.css</span></code> is the CSS file for the client; it also defines things like how
|
||
to display ANSI/Xterm256 colors etc.</p>
|
||
<p>The server-side webclient protocols are found in <code class="docutils literal notranslate"><span class="pre">evennia/server/portal/webclient.py</span></code> and
|
||
<code class="docutils literal notranslate"><span class="pre">webclient_ajax.py</span></code> for the two types of connections. You can’t (and should not need to) modify
|
||
these.</p>
|
||
<section id="customizing-the-web-client">
|
||
<h2>Customizing the web client<a class="headerlink" href="#customizing-the-web-client" title="Permalink to this headline">¶</a></h2>
|
||
<p>Like was the case for the website, you override the webclient from your game directory. You need to
|
||
add/modify a file in the matching directory location within one of the _overrides directories.
|
||
These _override directories are NOT directly used by the web server when the game is running, the
|
||
server copies everything web related in the Evennia folder over to <code class="docutils literal notranslate"><span class="pre">mygame/web/static/</span></code> and then
|
||
copies in all of your _overrides. This can cause some cases were you edit a file, but it doesn’t
|
||
seem to make any difference in the servers behavior. <strong>Before doing anything else, try shutting
|
||
down the game and running <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">collectstatic</span></code> from the command line then start it back up, clear
|
||
your browser cache, and see if your edit shows up.</strong></p>
|
||
<p>Example: To change the utilized plugin list, you need to override base.html by copying
|
||
<code class="docutils literal notranslate"><span class="pre">evennia/web/webclient/templates/webclient/base.html</span></code> to
|
||
<code class="docutils literal notranslate"><span class="pre">mygame/web/template_overrides/webclient/base.html</span></code> and editing it to add your new plugin.</p>
|
||
</section>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="evennia-web-client-api-from-evennia-js">
|
||
<h1>Evennia Web Client API (from evennia.js)<a class="headerlink" href="#evennia-web-client-api-from-evennia-js" title="Permalink to this headline">¶</a></h1>
|
||
<ul class="simple">
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">Evennia.init(</span> <span class="pre">opts</span> <span class="pre">)</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">Evennia.connect()</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">Evennia.isConnected()</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">Evennia.msg(</span> <span class="pre">cmdname,</span> <span class="pre">args,</span> <span class="pre">kwargs,</span> <span class="pre">callback</span> <span class="pre">)</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">Evennia.emit(</span> <span class="pre">cmdname,</span> <span class="pre">args,</span> <span class="pre">kwargs</span> <span class="pre">)</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">log()</span></code></p></li>
|
||
</ul>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="plugin-manager-api-from-webclient-gui-js">
|
||
<h1>Plugin Manager API (from webclient_gui.js)<a class="headerlink" href="#plugin-manager-api-from-webclient-gui-js" title="Permalink to this headline">¶</a></h1>
|
||
<ul class="simple">
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">options</span></code> Object, Stores key/value ‘state’ that can be used by plugins to coordinate behavior.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">plugins</span></code> Object, key/value list of the all the loaded plugins.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">plugin_handler</span></code> Object</p>
|
||
<ul>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">plugin_handler.add("name",</span> <span class="pre">plugin)</span></code></p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">plugin_handler.onSend(string)</span></code></p></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="plugin-callbacks-api">
|
||
<h1>Plugin callbacks API<a class="headerlink" href="#plugin-callbacks-api" title="Permalink to this headline">¶</a></h1>
|
||
<ul class="simple">
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">init()</span></code> – The only required callback</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">boolean</span> <span class="pre">onKeydown(event)</span></code> This plugin listens for Keydown events</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">onBeforeUnload()</span></code> This plugin does something special just before the webclient page/tab is
|
||
closed.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">onLoggedIn(args,</span> <span class="pre">kwargs)</span></code> This plugin does something when the webclient first logs in.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">onGotOptions(args,</span> <span class="pre">kwargs)</span></code> This plugin does something with options sent from the server.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">boolean</span> <span class="pre">onText(args,</span> <span class="pre">kwargs)</span></code> This plugin does something with messages sent from the server.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">boolean</span> <span class="pre">onPrompt(args,</span> <span class="pre">kwargs)</span></code> This plugin does something when the server sends a prompt.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">boolean</span> <span class="pre">onUnknownCmd(cmdname,</span> <span class="pre">args,</span> <span class="pre">kwargs)</span></code> This plugin does something with “unknown commands”.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">onConnectionClose(args,</span> <span class="pre">kwargs)</span></code> This plugin does something when the webclient disconnects from
|
||
the server.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">newstring</span> <span class="pre">onSend(string)</span></code> This plugin examines/alters text that other plugins generate. <strong>Use
|
||
with caution</strong></p></li>
|
||
</ul>
|
||
<p>The order of the plugins defined in <code class="docutils literal notranslate"><span class="pre">base.html</span></code> is important. All the callbacks for each plugin
|
||
will be executed in that order. Functions marked “boolean” above must return true/false. Returning
|
||
true will short-circuit the execution, so no other plugins lower in the base.html list will have
|
||
their callback for this event called. This enables things like the up/down arrow keys for the
|
||
history.js plugin to always occur before the default_in.js plugin adds that key to the current input
|
||
buffer.</p>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="example-default-plugins-plugins-js">
|
||
<h1>Example/Default Plugins (plugins/*.js)<a class="headerlink" href="#example-default-plugins-plugins-js" title="Permalink to this headline">¶</a></h1>
|
||
<ul class="simple">
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">clienthelp.js</span></code> Defines onOptionsUI from the options2 plugin. This is a mostly empty plugin to
|
||
add some “How To” information for your game.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">default_in.js</span></code> Defines onKeydown. <enter> key or mouse clicking the arrow will send the currently
|
||
typed text.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">default_out.js</span></code> Defines onText, onPrompt, and onUnknownCmd. Generates HTML output for the user.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">default_unload.js</span></code> Defines onBeforeUnload. Prompts the user to confirm that they meant to
|
||
leave/close the game.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">font.js</span></code> Defines onOptionsUI. The plugin adds the ability to select your font and font size.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">goldenlayout_default_config.js</span></code> Not actually a plugin, defines a global variable that
|
||
goldenlayout uses to determine its window layout, known tag routing, etc.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">goldenlayout.js</span></code> Defines onKeydown, onText and custom functions. A very powerful “tabbed” window
|
||
manager for drag-n-drop windows, text routing and more.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">history.js</span></code> Defines onKeydown and onSend. Creates a history of past sent commands, and uses arrow
|
||
keys to peruse.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">hotbuttons.js</span></code> Defines onGotOptions. A Disabled-by-default plugin that defines a button bar with
|
||
user-assignable commands.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">iframe.js</span></code> Defines onOptionsUI. A goldenlayout-only plugin to create a restricted browsing sub-
|
||
window for a side-by-side web/text interface, mostly an example of how to build new HTML
|
||
“components” for goldenlayout.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">message_routing.js</span></code> Defines onOptionsUI, onText, onKeydown. This goldenlayout-only plugin
|
||
implements regex matching to allow users to “tag” arbitrary text that matches, so that it gets
|
||
routed to proper windows. Similar to “Spawn” functions for other clients.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">multimedia.js</span></code> An basic plugin to allow the client to handle “image” “audio” and “video” messages
|
||
from the server and display them as inline HTML.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">notifications.js</span></code> Defines onText. Generates browser notification events for each new message
|
||
while the tab is hidden.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">oob.js</span></code> Defines onSend. Allows the user to test/send Out Of Band json messages to the server.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">options.js</span></code> Defines most callbacks. Provides a popup-based UI to coordinate options settings with
|
||
the server.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">options2.js</span></code> Defines most callbacks. Provides a goldenlayout-based version of the
|
||
options/settings tab. Integrates with other plugins via the custom onOptionsUI callback.</p></li>
|
||
<li><p><code class="docutils literal notranslate"><span class="pre">popups.js</span></code> Provides default popups/Dialog UI for other plugins to use.</p></li>
|
||
</ul>
|
||
</section>
|
||
<section class="tex2jax_ignore mathjax_ignore" id="writing-your-own-plugins">
|
||
<h1>Writing your own Plugins<a class="headerlink" href="#writing-your-own-plugins" title="Permalink to this headline">¶</a></h1>
|
||
<p>So, you love the functionality of the webclient, but your game has specific types of text that need
|
||
to be separated out into their own space, visually. The Goldenlayout plugin framework can help with
|
||
this.</p>
|
||
<section id="goldenlayout">
|
||
<h2>GoldenLayout<a class="headerlink" href="#goldenlayout" title="Permalink to this headline">¶</a></h2>
|
||
<p>GoldenLayout is a web framework that allows web developers and their users to create their own
|
||
tabbed/windowed layouts. Windows/tabs can be click-and-dragged from location to location by
|
||
clicking on their titlebar and dragging until the “frame lines” appear. Dragging a window onto
|
||
another window’s titlebar will create a tabbed “Stack”. The Evennia goldenlayout plugin defines 3
|
||
basic types of window: The Main window, input windows and non-main text output windows. The Main
|
||
window and the first input window are unique in that they can’t be “closed”.</p>
|
||
<p>The most basic customization is to provide your users with a default layout other than just one Main
|
||
output and the one starting input window. This is done by modifying your server’s
|
||
goldenlayout_default_config.js.</p>
|
||
<p>Start by creating a new
|
||
<code class="docutils literal notranslate"><span class="pre">mygame/web/static_overrides/webclient/js/plugins/goldenlayout_default_config.js</span></code> file, and adding
|
||
the following JSON variable:</p>
|
||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="n">var</span> <span class="n">goldenlayout_config</span> <span class="o">=</span> <span class="p">{</span>
|
||
<span class="n">content</span><span class="p">:</span> <span class="p">[{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'column'</span><span class="p">,</span>
|
||
<span class="n">content</span><span class="p">:</span> <span class="p">[{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'row'</span><span class="p">,</span>
|
||
<span class="n">content</span><span class="p">:</span> <span class="p">[{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'column'</span><span class="p">,</span>
|
||
<span class="n">content</span><span class="p">:</span> <span class="p">[{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'component'</span><span class="p">,</span>
|
||
<span class="n">componentName</span><span class="p">:</span> <span class="s1">'Main'</span><span class="p">,</span>
|
||
<span class="n">isClosable</span><span class="p">:</span> <span class="n">false</span><span class="p">,</span>
|
||
<span class="n">tooltip</span><span class="p">:</span> <span class="s1">'Main - drag to desired position.'</span><span class="p">,</span>
|
||
<span class="n">componentState</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="n">cssClass</span><span class="p">:</span> <span class="s1">'content'</span><span class="p">,</span>
|
||
<span class="n">types</span><span class="p">:</span> <span class="s1">'untagged'</span><span class="p">,</span>
|
||
<span class="n">updateMethod</span><span class="p">:</span> <span class="s1">'newlines'</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="p">},</span> <span class="p">{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'component'</span><span class="p">,</span>
|
||
<span class="n">componentName</span><span class="p">:</span> <span class="s1">'input'</span><span class="p">,</span>
|
||
<span class="nb">id</span><span class="p">:</span> <span class="s1">'inputComponent'</span><span class="p">,</span>
|
||
<span class="n">height</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span>
|
||
<span class="n">tooltip</span><span class="p">:</span> <span class="s1">'Input - The last input in the layout is always the default.'</span><span class="p">,</span>
|
||
<span class="p">},</span> <span class="p">{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'component'</span><span class="p">,</span>
|
||
<span class="n">componentName</span><span class="p">:</span> <span class="s1">'input'</span><span class="p">,</span>
|
||
<span class="nb">id</span><span class="p">:</span> <span class="s1">'inputComponent'</span><span class="p">,</span>
|
||
<span class="n">height</span><span class="p">:</span> <span class="mi">10</span><span class="p">,</span>
|
||
<span class="n">isClosable</span><span class="p">:</span> <span class="n">false</span><span class="p">,</span>
|
||
<span class="n">tooltip</span><span class="p">:</span> <span class="s1">'Input - The last input in the layout is always the default.'</span><span class="p">,</span>
|
||
<span class="p">}]</span>
|
||
<span class="p">},{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'column'</span><span class="p">,</span>
|
||
<span class="n">content</span><span class="p">:</span> <span class="p">[{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'component'</span><span class="p">,</span>
|
||
<span class="n">componentName</span><span class="p">:</span> <span class="s1">'evennia'</span><span class="p">,</span>
|
||
<span class="n">componentId</span><span class="p">:</span> <span class="s1">'evennia'</span><span class="p">,</span>
|
||
<span class="n">title</span><span class="p">:</span> <span class="s1">'example'</span><span class="p">,</span>
|
||
<span class="n">height</span><span class="p">:</span> <span class="mi">60</span><span class="p">,</span>
|
||
<span class="n">isClosable</span><span class="p">:</span> <span class="n">false</span><span class="p">,</span>
|
||
<span class="n">componentState</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="n">types</span><span class="p">:</span> <span class="s1">'some-tag-here another-tag-here'</span><span class="p">,</span>
|
||
<span class="n">updateMethod</span><span class="p">:</span> <span class="s1">'newlines'</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="p">},</span> <span class="p">{</span>
|
||
<span class="nb">type</span><span class="p">:</span> <span class="s1">'component'</span><span class="p">,</span>
|
||
<span class="n">componentName</span><span class="p">:</span> <span class="s1">'evennia'</span><span class="p">,</span>
|
||
<span class="n">componentId</span><span class="p">:</span> <span class="s1">'evennia'</span><span class="p">,</span>
|
||
<span class="n">title</span><span class="p">:</span> <span class="s1">'sheet'</span><span class="p">,</span>
|
||
<span class="n">isClosable</span><span class="p">:</span> <span class="n">false</span><span class="p">,</span>
|
||
<span class="n">componentState</span><span class="p">:</span> <span class="p">{</span>
|
||
<span class="n">types</span><span class="p">:</span> <span class="s1">'sheet'</span><span class="p">,</span>
|
||
<span class="n">updateMethod</span><span class="p">:</span> <span class="s1">'replace'</span><span class="p">,</span>
|
||
<span class="p">},</span>
|
||
<span class="p">}],</span>
|
||
<span class="p">}],</span>
|
||
<span class="p">}]</span>
|
||
<span class="p">}]</span>
|
||
<span class="p">};</span>
|
||
</pre></div>
|
||
</div>
|
||
<p>This is a bit ugly, but hopefully, from the indentation, you can see that it creates a side-by-side
|
||
(2-column) interface with 3 windows down the left side (The Main and 2 inputs) and a pair of windows
|
||
on the right side for extra outputs. Any text tagged with “some-tag-here” will flow to the bottom
|
||
of the “example” window, and any text tagged “sheet” will replace the text already in the “sheet”
|
||
window.</p>
|
||
<p>Note: GoldenLayout gets VERY confused and will break if you create two windows with the “Main”
|
||
componentName.</p>
|
||
<p>Now, let’s say you want to display text on each window using different CSS. This is where new
|
||
goldenlayout “components” come in. Each component is like a blueprint that gets stamped out when
|
||
you create a new instance of that component, once it is defined, it won’t be easily altered. You
|
||
will need to define a new component, preferably in a new plugin file, and then add that into your
|
||
page (either dynamically to the DOM via javascript, or by including the new plugin file into the
|
||
base.html).</p>
|
||
<p>First up, follow the directions in Customizing the Web Client section above to override the
|
||
base.html.</p>
|
||
<p>Next, add the new plugin to your copy of base.html:</p>
|
||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span><span class="o"><</span><span class="n">script</span> <span class="n">src</span><span class="o">=</span><span class="p">{</span><span class="o">%</span> <span class="n">static</span> <span class="s2">"webclient/js/plugins/myplugin.js"</span> <span class="o">%</span><span class="p">}</span> <span class="n">language</span><span class="o">=</span><span class="s2">"javascript"</span>
|
||
<span class="nb">type</span><span class="o">=</span><span class="s2">"text/javascript"</span><span class="o">></</span><span class="n">script</span><span class="o">></span>
|
||
</pre></div>
|
||
</div>
|
||
<p>Remember, plugins are load-order dependent, so make sure the new <code class="docutils literal notranslate"><span class="pre"><script></span></code> tag comes before the
|
||
goldenlayout.js</p>
|
||
<p>Next, create a new plugin file <code class="docutils literal notranslate"><span class="pre">mygame/web/static_overrides/webclient/js/plugins/myplugin.js</span></code> and
|
||
edit it.</p>
|
||
<div class="highlight-default notranslate"><div class="highlight"><pre><span></span>let myplugin = (function () {
|
||
//
|
||
//
|
||
var postInit = function() {
|
||
var myLayout = window.plugins['goldenlayout'].getGL();
|
||
|
||
// register our component and replace the default messagewindow
|
||
myLayout.registerComponent( 'mycomponent', function (container, componentState) {
|
||
let mycssdiv = $('<div>').addClass('content myCSS');
|
||
mycssdiv.attr('types', 'mytag1 mytag2');
|
||
mycssdiv.attr('updateMethod', 'newlines');
|
||
mycssdiv.appendTo( container.getElement() );
|
||
container.on("tab", plugins['goldenlayout'].onTabCreate);
|
||
});
|
||
|
||
console.log("MyPlugin Initialized.");
|
||
}
|
||
|
||
return {
|
||
init: function () {},
|
||
postInit: postInit,
|
||
}
|
||
})();
|
||
window.plugin_handler.add("myplugin", myplugin);
|
||
</pre></div>
|
||
</div>
|
||
<p>You can then switch <code class="docutils literal notranslate"><span class="pre">componentName:</span> <span class="pre">'evennia'</span></code> with <code class="docutils literal notranslate"><span class="pre">componentName:</span> <span class="pre">'mycomponent'</span></code> in your
|
||
goldenlayout_default_config.js (and update the <code class="docutils literal notranslate"><span class="pre">tags:</span></code> to match).</p>
|
||
<p>When you tag text with <code class="docutils literal notranslate"><span class="pre">mytag1</span></code>, it will then be sent to the mycomponent pane. Example:
|
||
<code class="docutils literal notranslate"><span class="pre">caller.msg(("Text</span> <span class="pre">with</span> <span class="pre">a</span> <span class="pre">type.",</span> <span class="pre">{"type":</span> <span class="pre">"mytag1"}))</span></code></p>
|
||
<p>Make sure to run <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">stop</span></code>, <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">collectstatic</span></code>, and <code class="docutils literal notranslate"><span class="pre">evennia</span> <span class="pre">start</span></code>. Then make sure to
|
||
clear your browser cache before loading the webclient page.</p>
|
||
</section>
|
||
</section>
|
||
|
||
|
||
<div class="clearer"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
|
||
<div class="sphinxsidebarwrapper">
|
||
<p class="logo"><a href="index.html">
|
||
<img class="logo" src="_static/evennia_logo.png" alt="Logo"/>
|
||
</a></p>
|
||
<div id="searchbox" style="display: none" role="search">
|
||
<h3 id="searchlabel">Quick search</h3>
|
||
<div class="searchformwrapper">
|
||
<form class="search" action="search.html" method="get">
|
||
<input type="text" name="q" aria-labelledby="searchlabel" />
|
||
<input type="submit" value="Go" />
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<script>$('#searchbox').show(0);</script>
|
||
<p><h3><a href="index.html">Table of Contents</a></h3>
|
||
<ul>
|
||
<li><a class="reference internal" href="#">Webclient</a></li>
|
||
<li><a class="reference internal" href="#web-client"><strong>Web client</strong></a><ul>
|
||
<li><a class="reference internal" href="#customizing-the-web-client">Customizing the web client</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a class="reference internal" href="#evennia-web-client-api-from-evennia-js">Evennia Web Client API (from evennia.js)</a></li>
|
||
<li><a class="reference internal" href="#plugin-manager-api-from-webclient-gui-js">Plugin Manager API (from webclient_gui.js)</a></li>
|
||
<li><a class="reference internal" href="#plugin-callbacks-api">Plugin callbacks API</a></li>
|
||
<li><a class="reference internal" href="#example-default-plugins-plugins-js">Example/Default Plugins (plugins/*.js)</a></li>
|
||
<li><a class="reference internal" href="#writing-your-own-plugins">Writing your own Plugins</a><ul>
|
||
<li><a class="reference internal" href="#goldenlayout">GoldenLayout</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
<div role="note" aria-label="source link">
|
||
<!--h3>This Page</h3-->
|
||
<ul class="this-page-menu">
|
||
<li><a href="_sources/Webclient.md.txt"
|
||
rel="nofollow">Show Page Source</a></li>
|
||
</ul>
|
||
</div><h3>Links</h3>
|
||
<ul>
|
||
<li><a href="https://www.evennia.com">Home page</a> </li>
|
||
<li><a href="https://github.com/evennia/evennia">Evennia Github</a> </li>
|
||
<li><a href="http://games.evennia.com">Game Index</a> </li>
|
||
<li><a href="http://webchat.freenode.net/?channels=evennia&uio=MT1mYWxzZSY5PXRydWUmMTE9MTk1JjEyPXRydWUbb">IRC</a> -
|
||
<a href="https://discord.gg/NecFePw">Discord</a> -
|
||
<a href="https://groups.google.com/forum/#%21forum/evennia">Forums</a>
|
||
</li>
|
||
<li><a href="http://evennia.blogspot.com/">Evennia Dev blog</a> </li>
|
||
</ul>
|
||
<h3>Versions</h3>
|
||
<ul>
|
||
<li><a href="../1.0-dev/index.html">1.0-dev (develop branch)</a></li>
|
||
<li><a href="Webclient.html">0.9.5 (v0.9.5 branch)</a></li>
|
||
</ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="clearer"></div>
|
||
</div>
|
||
<div class="related" role="navigation" aria-label="related navigation">
|
||
<h3>Navigation</h3>
|
||
<ul>
|
||
<li class="right" style="margin-right: 10px">
|
||
<a href="genindex.html" title="General Index"
|
||
>index</a></li>
|
||
<li class="right" >
|
||
<a href="py-modindex.html" title="Python Module Index"
|
||
>modules</a> |</li>
|
||
<li class="nav-item nav-item-0"><a href="index.html">Evennia 0.9.5</a> »</li>
|
||
<li class="nav-item nav-item-this"><a href="">Webclient</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer" role="contentinfo">
|
||
© Copyright 2020, The Evennia developer community.
|
||
Created using <a href="https://www.sphinx-doc.org/">Sphinx</a> 3.2.1.
|
||
</div>
|
||
</body>
|
||
</html> |