Update some css and add info to info.html
This commit is contained in:
parent
46b37b1a4f
commit
211c13f4c6
@ -1,55 +1,74 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
--background-color: #000;
|
||||
--text-color: #fff;
|
||||
--link-color: #f00;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: verdana;
|
||||
font-size: 10px;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.enclosed {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.enclosed { width: 100%; height: 100%; }
|
||||
.flex { display: flex; justify-content: space-around; }
|
||||
.flex-container { flex: auto; }
|
||||
.center.flex { align-items: center; height: 100%; }
|
||||
|
||||
.info { padding: 3px; text-align: right; width: 167px; }
|
||||
.info {
|
||||
padding: 3px;
|
||||
text-align: right;
|
||||
width: 167px;
|
||||
}
|
||||
.info > a { font-size: 16px; display: block; }
|
||||
.info > i { display: block; }
|
||||
|
||||
a { color: #f00; text-decoration: none; }
|
||||
a:hover { color:#fff; text-decoration:none;}
|
||||
a { color: var(--link-color); text-decoration: none; }
|
||||
a:hover { color:var(--text-color); text-decoration:none;}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content { text-align: center; }
|
||||
.content > * { padding: auto; }
|
||||
|
||||
#ruffle-container {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
#ruffle-container { margin-top: 10px; margin-bottom: 10px; }
|
||||
#flavourtext { margin-top: 20px; }
|
||||
|
||||
.messages {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: calc(100% - 167px);
|
||||
}
|
||||
|
||||
#flavourtext {
|
||||
color: #fff;
|
||||
margin-top: 20px;
|
||||
.messages > p { padding-top: 10px; }
|
||||
|
||||
.infopage {
|
||||
font-size: 12px;
|
||||
border: 2px solid var(--link-color);
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
width: 500px;
|
||||
margin: auto;
|
||||
}
|
||||
.infopage > .info-content p { padding: 0.5em; padding-right: 0; }
|
||||
.infopage > .info-content { text-align: left; }
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.infopage {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
|
||||
#audio-test {
|
||||
line-height: 0;
|
||||
color: #fff;
|
||||
.infopage > hr {
|
||||
width: calc(100% + 4em);
|
||||
margin-left: -2em;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-color: var(--link-color);
|
||||
}
|
||||
@ -23,18 +23,18 @@
|
||||
</head>
|
||||
|
||||
<body onload="on_load()">
|
||||
<div class="enclosed">
|
||||
<div class="flex-container">
|
||||
<div class="flex">
|
||||
<div class="content">
|
||||
<div id="audio-test">
|
||||
<p>Klikkaa tai paina jotain näppäintä salliaksesi äänet.</p>
|
||||
<div class="messages">
|
||||
<p id="error"></p>
|
||||
<p id="audio-test">Klikkaa sivustoa tai paina jotain näppäintä salliaksesi äänet.</p>
|
||||
</div>
|
||||
<div class="enclosed flex">
|
||||
<div class="flex-container">
|
||||
<div class="flex center">
|
||||
<div class="content">
|
||||
<div id="flavourtext">
|
||||
<p>Sieni elää symbioosissa, eli ns. verkossa.</p>
|
||||
</div>
|
||||
<div id="ruffle-container">
|
||||
</div>
|
||||
<div id="ruffle-container"> </div>
|
||||
<div>
|
||||
<p>
|
||||
<a id="previous"><< Previous</a> |
|
||||
@ -46,9 +46,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="http://sieni.us/info.php">sieni.us for life!</a>
|
||||
<a class="spa" href="/info.html">sieni.rip lives again!</a>
|
||||
<i>click above for information</i>
|
||||
<a class="spa" href="/info.html">sieni.rip?</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -23,13 +23,54 @@
|
||||
</head>
|
||||
|
||||
<body onload="on_load()">
|
||||
<div class="enclosed">
|
||||
<div class="flex-container">
|
||||
<div class="flex">
|
||||
<div class="content">
|
||||
<div class="enclosed flex">
|
||||
<div class="content infopage">
|
||||
<h1>Info - sieni.rip</h1>
|
||||
<p><a class="spa" href="/">Back to sieni.rip</a></p>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="info-content">
|
||||
<h2>what is it?</h2>
|
||||
<p>sieni.rip is a project aimed to, at the same time rescurrect the now proclaimed dead <a
|
||||
href="http://sieni.us">sieni.us</a>, and revitalize it simultaneously. The original
|
||||
infopage for sieni.us can still be for the time being accessed at <a
|
||||
href="http://sieni.us/info.php">sieni.us/info.php</a> and it's contents can be still
|
||||
viewed at <a href="http://sieni.us/index1.php">sieni.us/index1.php</a>. Nevertheless, a as
|
||||
<a href="https://www.adobe.com/products/flashplayer/end-of-life.html#">Flash Player
|
||||
end-of-life</a> draws near, an update of sorts it warranted.
|
||||
</p>
|
||||
<p>sieni.rip aims to be that update in the time being, and if sieni.us doesn't come back up, for
|
||||
the rest of time.</p>
|
||||
<h2>how?</h2>
|
||||
<p>For this project, <a href="https://ruffle.rs">Ruffle</a> is used to play back the same flash
|
||||
animations that were hosted on sieni.us with html5 using canvas and AudioContext together.
|
||||
</p>
|
||||
<p>The HTML and JavaScript for this project have also been entirely re-written in order to more
|
||||
closely follow modern web-standards. For the time being, the entire website can run on
|
||||
any regular html server and it's source can be found at <a
|
||||
href="https://git.teascade.net/teascade/sieni.rip">git.teascade.net</a>.</p>
|
||||
<p>If such requirements come up, external server software can be developed to
|
||||
accommodate any needs not provided by regular html servers, but such a time has not yet
|
||||
come.</p>
|
||||
<h2>issues</h2>
|
||||
<p>Ruffle is still a work-in-progress piece of software, so there are numerous problems with
|
||||
this execution still, most notably, some of the animations previously available, can not be
|
||||
found with "next", "previous" or "random", because their emulation is too lacking to display
|
||||
properly. A few of the animations also play correctly enough, but still have some notable
|
||||
problems. A list of the id's not available can be found below. Along with this, ruffle also
|
||||
has some bugs, most notably that <a href="https://github.com/ruffle-rs/ruffle/issues/876">it
|
||||
does not dispose of it's player properly</a>. This causes sieni.rip to post quite a few
|
||||
errors to the console, which can cause performance issues, especially if the console is
|
||||
open.</p>
|
||||
<p>Another issue with porting sieni.us to html5 is that modern web browsers follow modern web
|
||||
standards with autoplay. This means that unless the website is whitelisted with autoplay,
|
||||
the user must interact (click something, or type something) with the site at least once at
|
||||
first for the animations to play sound
|
||||
properly.</p>
|
||||
<h2>author / maintainer</h2>
|
||||
<p>Author and maintainer of sieni.us for the time being is <a href="https://teascade.net">Teascade</a>,
|
||||
and I can be contacted by various medias
|
||||
listed on my website, or by email to <a href="mailto:teascade@gmail.com">teascade@gmail.com</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,12 +8,14 @@ POSSIBLE_FLAVOURTEXTS = [
|
||||
"Kärpässienet aiheuttavat aistiharhoja.",
|
||||
'Todellisuus on vain <a href="https://fi.wikipedia.org/wiki/Psilosybiini">psilosybiinin</a> puutteesta johtuva illuusio.'
|
||||
];
|
||||
ISSUES = [35, 41, 43, 50, 60, 68]
|
||||
RUFFLE_WIP_ERR = '<p>Ruffle ei vielä tue tämän id:n .swf tiedostoa tarpeeksi näyttääkseen sen oikein.</p> \
|
||||
<p>Lue <a href="/info.html#issues">infosivulta</a> rufflen ongelmista tarkemmin.</p> ';
|
||||
ISSUES = [35, 41, 43, 50, 60, 68];
|
||||
CURRENT_SWF = null;
|
||||
LAST_LOADED_SWF = null;
|
||||
|
||||
|
||||
/////////////////// Initializing stuff
|
||||
/////////////////// Initializing & Generic stuff
|
||||
|
||||
// Called on document.onload by definition in html document:
|
||||
// <body onload="on_load()">
|
||||
@ -69,6 +71,23 @@ function on_load_index() {
|
||||
document.onmousedown = try_resume;
|
||||
}
|
||||
|
||||
function set_error(message) {
|
||||
document.getElementById("error").innerHTML = "";
|
||||
console.log(message);
|
||||
if (message) {
|
||||
var template = document.createElement('template');
|
||||
template.innerHTML = message;
|
||||
document.getElementById("error").append(template.content);
|
||||
}
|
||||
}
|
||||
|
||||
function set_flavourtext(flavourtext) {
|
||||
var template = document.createElement('template');
|
||||
template.innerHTML = flavourtext;
|
||||
document.getElementById("flavourtext").innerHTML = "";
|
||||
document.getElementById("flavourtext").append(template.content);
|
||||
}
|
||||
|
||||
|
||||
/////////////////// SPA (single-page-application) stuff
|
||||
|
||||
@ -131,6 +150,7 @@ function current_id() {
|
||||
}
|
||||
|
||||
// Returns id if id is valid, otherwise increments increment to it, or chooses a random id if increment is null
|
||||
// Skip id's with issues
|
||||
function try_get_id(id, increment) {
|
||||
let returned = id;
|
||||
|
||||
@ -149,11 +169,10 @@ function try_get_id(id, increment) {
|
||||
return returned;
|
||||
}
|
||||
|
||||
// Get an entirely random id
|
||||
// Get an entirely random id, but skip id's with issues
|
||||
function get_random_id() {
|
||||
let random_id = Math.floor(Math.random() * (ID_MAX + 1));
|
||||
while (ISSUES.includes(random_id)) {
|
||||
console.log("Skipped issue: " + random_id);
|
||||
random_id = Math.floor(Math.random() * (ID_MAX + 1));
|
||||
}
|
||||
return random_id;
|
||||
@ -162,14 +181,17 @@ function get_random_id() {
|
||||
// Load the swf with current_id(), and set_up_link() previous, random and next
|
||||
function load_current_id() {
|
||||
let flavourtext = POSSIBLE_FLAVOURTEXTS[Math.floor(Math.random() * POSSIBLE_FLAVOURTEXTS.length)].trim();
|
||||
var template = document.createElement('template');
|
||||
template.innerHTML = flavourtext;
|
||||
document.getElementById("flavourtext").innerHTML = "";
|
||||
document.getElementById("flavourtext").append(template.content);
|
||||
set_flavourtext(flavourtext);
|
||||
|
||||
let id = current_id();
|
||||
let url = swf_url(id);
|
||||
|
||||
let error = null;
|
||||
if (ISSUES.includes(id)) {
|
||||
error = RUFFLE_WIP_ERR;
|
||||
}
|
||||
set_error(error);
|
||||
|
||||
CURRENT_SWF = url;
|
||||
|
||||
let previous_id = try_get_id(id, -1);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user