diff --git a/public/css/main.css b/public/css/main.css index 06570b5..e76d443 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -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); } \ No newline at end of file diff --git a/public/index.html b/public/index.html index e1c122a..aa8952b 100644 --- a/public/index.html +++ b/public/index.html @@ -23,18 +23,18 @@ -
+
+

+

Klikkaa sivustoa tai paina jotain näppäintä salliaksesi äänet.

+
+
-
+
-
-

Klikkaa tai paina jotain näppäintä salliaksesi äänet.

-

Sieni elää symbioosissa, eli ns. verkossa.

-
-
+

| @@ -46,9 +46,8 @@

- sieni.us for life! + sieni.rip lives again! click above for information - sieni.rip?
diff --git a/public/info.html b/public/info.html index fc2c15c..a6bb611 100644 --- a/public/info.html +++ b/public/info.html @@ -23,13 +23,54 @@ -
-
-
-
-

Info - sieni.rip

-

Back to sieni.rip

-
+
+
+

Info - sieni.rip

+

Back to sieni.rip

+
+
+

what is it?

+

sieni.rip is a project aimed to, at the same time rescurrect the now proclaimed dead sieni.us, and revitalize it simultaneously. The original + infopage for sieni.us can still be for the time being accessed at sieni.us/info.php and it's contents can be still + viewed at sieni.us/index1.php. Nevertheless, a as + Flash Player + end-of-life draws near, an update of sorts it warranted. +

+

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.

+

how?

+

For this project, Ruffle is used to play back the same flash + animations that were hosted on sieni.us with html5 using canvas and AudioContext together. +

+

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 git.teascade.net.

+

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.

+

issues

+

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 it + does not dispose of it's player properly. This causes sieni.rip to post quite a few + errors to the console, which can cause performance issues, especially if the console is + open.

+

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.

+

author / maintainer

+

Author and maintainer of sieni.us for the time being is Teascade, + and I can be contacted by various medias + listed on my website, or by email to teascade@gmail.com +

diff --git a/public/js/main.js b/public/js/main.js index 07b34a2..3f40911 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -8,12 +8,14 @@ POSSIBLE_FLAVOURTEXTS = [ "Kärpässienet aiheuttavat aistiharhoja.", 'Todellisuus on vain psilosybiinin puutteesta johtuva illuusio.' ]; -ISSUES = [35, 41, 43, 50, 60, 68] +RUFFLE_WIP_ERR = '

Ruffle ei vielä tue tämän id:n .swf tiedostoa tarpeeksi näyttääkseen sen oikein.

\ +

Lue infosivulta rufflen ongelmista tarkemmin.

'; +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: // @@ -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);