teascade
/
sieni.rip
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Update some css and add info to info.html

This commit is contained in:
Sofia 2020-08-27 22:40:01 +03:00
parent 46b37b1a4f
commit 211c13f4c6
4 changed files with 135 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
public/css/main.css
View File

@ -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);
}

17
public/index.html
View File

@ -23,18 +23,18 @@
</head>
<body onload="on_load()">
<div class="enclosed">
<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">
<div class="flex center">
<div class="content">
<div id="audio-test">
<p>Klikkaa tai paina jotain näppäintä salliaksesi äänet.</p>
</div>
<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">&#60;&#60; 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>

55
public/info.html
View File

@ -23,13 +23,54 @@
</head>
<body onload="on_load()">
<div class="enclosed">
<div class="flex-container">
<div class="flex">
<div class="content">
<h1>Info - sieni.rip</h1>
<p><a class="spa" href="/">Back to sieni.rip</a></p>
</div>
<div class="enclosed flex">
<div class="content infopage">
<h1>Info - sieni.rip</h1>
<p><a class="spa" href="/">Back to sieni.rip</a></p>
<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>

38
public/js/main.js
View File

@ -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);