he4et/elseifplayer
1
0
Fork 0
mirror of https://github.com/He4eT/elseifplayer.git synced 2026-05-04 17:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity

Dirty markup

Browse source
This commit is contained in:
He4eT 2021-03-02 02:30:22 +05:00
commit 42015eca8f
3 changed files with 100 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/style/base.css
View file

@ -1,3 +1,5 @@
/* Layout */
html, body {
margin: 0;
height: 100%;
@ -52,8 +54,18 @@ a:focus {
background-color: hsl(0, 0%, 0%, 0.1);
}
a:hover {
border-width: 3px;
}
ul {
list-style: square;
}
/* Dirty views */
/* Home */
.app > main.home {
padding: var(--inner-padding);
max-height: unset;
@ -76,17 +88,14 @@ a:focus {
cursor: pointer;
}
.home details > ul {
border-left: 4px solid currentColor;
}
.home .play label {
display: block;
display: inline-block;
margin-bottom: 16px;
width: 100%;
max-width: 400px;
}
.home .play input {
box-sizing: border-box;
width: 100%;
max-width: 400px;
}

1
src/style/themes.css
View file

@ -69,6 +69,7 @@
--outer-padding: 8px;
--inner-padding: 8px;
--border-width: 2px;
--input-box-margin: 8px;
}
.solarized-light,

165
src/views/HomeView.jsx
View file

@ -24,88 +24,93 @@ export default function ({ themeEngine }) {
ifplayer
</h1>
<p>
Interactive Fiction interpreter
that runs right in your browser.
<br />
Powered by <a
target="_blank"
href="https://github.com/He4eT/emglken">
Emglken
</a> and <a
target="_blank"
href="https://github.com/He4eT/cheap-glkote">
cheap-glkote
</a>.
</p>
<p>
Source code can be found here: <a
target="_blank"
href="https://github.com/He4eT/ifplayer">
ifplayer
</a>.
</p>
<section>
<p>
Interactive Fiction interpreter
that runs right in your browser.
<br/>
Source code can be found in this <a
target="_blank"
href="https://github.com/He4eT/ifplayer">
repository
</a>.
</p>
</section>
<hr />
<h3>
Interface theme
</h3>
<p>
<ThemeSelector {...{
themeEngine
}} />
<br /><br />
<small>
Themes without borders
are better suited for small screens.
</small><br />
<small>
Double-click on the input field during the game
to enter full-screen mode.
</small>
</p>
<hr />
<h3>
Play a game from the list
</h3>
<p>
<Link href='/top100'>IFDB Top 100 games</Link>
</p>
<hr />
<h3>
Play the game from a file
</h3>
<p>
<details>
<summary>Supported formats</summary>
<ul>
<li>TADS games (.t3, .gam);</li>
<li>Z-machine games (.z3, .z4, .z5, .z8, .blorb);</li>
<li>Glulx VM games (.gblorb, .ulx);</li>
<li>Hugo games (.hex);</li>
<li>Text-only games are supported;</li>
</ul>
</details>
</p>
<p className='play'>
<label>
<div>
Local file:
</div>
<FileSelector {...{
setTargetName,
setTargetUrl
<section>
<h3>
Interface theme
</h3>
<p>
<ThemeSelector {...{
themeEngine
}} />
</label>
<label>
<div>
Direct link:
</div>
<URLSelector {...{
setTargetName,
setTargetUrl
}} />
</label>
</p>
<br /><br />
<small>
Themes without borders
are better suited for small screens.
</small>
<br />
<small>
Double-click on the input field during the game
to enter full-screen mode.
</small>
</p>
</section>
<hr />
<section>
<h3>
Play a game from the list
</h3>
<p>
<Link href='/top100'>
IFDB Top 100 games
</Link>
</p>
</section>
<hr />
<section>
<h3>
Play the game from a file
</h3>
<p>
<details>
<summary>Supported formats</summary>
<ul>
<li>TADS games (.t3, .gam);</li>
<li>Z-machine games (.z3, .z4, .z5, .z8, .blorb);</li>
<li>Glulx VM games (.gblorb, .ulx);</li>
<li>Hugo games (.hex);</li>
<li>Text-only games are supported;</li>
</ul>
</details>
</p>
<p className='play'>
<label>
Local file: <br />
<FileSelector {...{
setTargetName,
setTargetUrl
}} />
</label>
<br />
<label>
Direct link: <br />
<URLSelector {...{
setTargetName,
setTargetUrl
}} />
</label>
</p>
</section>
{ targetUrl
? playButton(targetName, targetUrl, themeEngine.currentTheme)
: null }