Skip to content

Commit

Permalink
Create embeddable version of UI for docs site
Browse files Browse the repository at this point in the history
  • Loading branch information
@desplesda
desplesda committed Dec 7, 2024
1 parent 2d74786 commit 0bcbf62
Show file tree
Hide file tree
Showing 5 changed files with 353 additions and 100 deletions.
19 changes: 19 additions & 0 deletions scss/yarnspinner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,3 +231,22 @@ body {
.btn:hover {
color: white;
}

#mini-app-header {
background-color: $background-tint;

border-bottom-style: solid;
border-color: $darker-green;
border-width: 2px;
}

#mini-app-header #title-link {
font-family: "Space Mono";
font-weight: bold;
text-decoration: none;
color: var(--bs-heading-color);
}

#mini-app-header button {

}
205 changes: 205 additions & 0 deletions src/embed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link
rel="icon"
type="image/png"
href="<%= require('./img/favicon.png') %>"
/>
<title>Try Yarn Spinner - Browser Based Game Dialogue Editor</title>
<meta property="og:url" content="https://try.yarnspinner.dev" />
<meta property="og:title" content="Try Yarn Spinner" />
<meta
property="twitter:description"
content="Try Yarn Spinner, the friendly dialogue tool for games, in your browser."
/>
<meta
property="og:description"
content="Try Yarn Spinner, the friendly dialogue tool for games, in your browser."
/>
<meta
property="twitter:image"
content="<%= htmlWebpackPlugin.options.urlBase %><%= require('./img/try-yarn-spinner-twitter-large-image.png') %>"
/>
<meta property="twitter:image:alt" content="Try Yarn Spinner" />
<meta
property="og:image"
content="<%= htmlWebpackPlugin.options.urlBase %><%= require('./img/try-yarn-spinner-twitter-large-image.png') %>"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@YarnSpinnerTool" />
<meta name="twitter:creator" content="@YarnSpinnerTool" />
</head>

<body>
<div class="container-fluid h-100 d-flex flex-column">
<div
class="row p-2 flex-shrink-0 align-items-center"
id="mini-app-header"
>
<div class="col-12 d-flex align-items-center justify-content-between">
<div>
<img
markup-inline
height="20px"
src="<%= require('./img/yarnspinner.svg') %>"
id="logo"
/>
<a
id="title-link"
href="https://try.yarnspinner.dev"
target="_blank"
>Try Yarn Spinner</a
>
</div>
<div>
<button
type="button"
class="p-1 fs-0 my-0 btn btn-primary"
id="button-test"
>
<img
markup-inline
height="24px"
src="<%= require('./img/Play.svg') %>"
/>
Run
</button>
</div>
</div>
</div>
<!-- <div class="row p-3 flex-shrink-0 align-items-center" id="app-header">
<div class="col-6">
<img
markup-inline
height="70px"
src="<%= require('./img/yarnspinner.svg') %>"
id="logo"
/>
<h1>Try Yarn Spinner</h1>
<p id="version" class="text-muted">
<small
>Version: <%= htmlWebpackPlugin.options.gitHash %><span
id="yarn-spinner-version"
class="d-none"
>, Yarn Spinner
<span id="yarn-spinner-version-value"></span></span
></small>
</p>
</div>
<div class="col text-end">
<button
type="button"
class="d-none btn btn-primary"
id="button-download-pdf"
>
<img
id="button-download-pdf-icon"
markup-inline
height="24"
src="<%= require('./img/Page-DownArrow.svg') %>"
/>
<div
id="button-download-pdf-spinner"
class="d-none spinner-border spinner-border-sm"
></div>
Save as Book
</button>
<a href="https://docs.yarnspinner.dev/">
<button type="button" class="btn btn-primary" id="button-docs">
<img
markup-inline
height="24"
src="<%= require('./img/Book-QuestionMark.svg') %>"
/>Docs
</button>
</a>
<button type="button" class="btn btn-primary" id="button-save-script">
<img
markup-inline
height="24"
src="<%= require('./img/DownArrow-from-Tray.svg') %>"
/>Save Script
</button>
<button
type="button"
class="btn btn-primary"
id="button-export-runner"
>
<img
markup-inline
height="24px"
src="<%= require('./img/UpArrow-from-Tray.svg') %>"
/>Export Player
</button>
<button type="button" class="btn btn-primary" id="button-test">
<img
markup-inline
height="24px"
src="<%= require('./img/Play.svg') %>"
/>
Run
</button>
</div>
</div> -->
<div class="row flex-fill justify-content-center" id="loader">
<div class="col-1 p-5">
<div class="spinner-border text-primary text-center" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div class="row flex-fill d-none" id="app" style="min-height: 0">
<div class="col-6 mh-100">
<div id="editor" class="h-100"></div>
</div>

<div class="col-6 pt-2 mh-100">
<div class="container h-100 d-flex flex-column">
<div class="row flex-fill mh-100" style="overflow-y: scroll">
<div class="col-12">
<div id="controls">
<div id="log-no-content" class="alert alert-primary">
Click Run to play your conversation!
</div>
<div id="log" class="list-group"></div>
</div>
</div>
</div>
<div
class="row flex-shrink-0 mt-3"
style="max-height: 25%; overflow-y: scroll"
>
<div class="col-12">
<div id="variables">
<table class="table table-borderless">
<thead>
<th>Variable</th>
<th>Value</th>
</thead>
<tbody id="variables-body"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-none row flex-shrink-0" id="app-footer">
<div class="col-12">
<p>
<a href="https://yarnspinner.dev">Yarn Spinner</a> is a project by
<a href="https://secretlab.games">Secret Lab</a>. Learn more about
Yarn Spinner by reading the
<a href="https://docs.yarnspinner.dev">documentation</a>. Join the
project's
<a href="https://discord.gg/yarnspinner">Discord</a> server. Support
us on <a href="https://patreon.com/secretlab">Patreon</a>. Follow us
on <a href="https://twitter.com/YarnSpinnerTool">Twitter</a>.
</p>
</div>
</div>
</div>
</body>
</html>
Loading

0 comments on commit 0bcbf62

Please sign in to comment.