<div class="text tb-1" id="t-1-1">Calm and solid. A gleaming layer of cold covers the now dead waves and transforms into a sleek and still surface. Your name is $input_1.</div>
<div class="text tb-3" id="t-1-2">Testi kolmoseen (Testi-1 -pasaagesta).</div><div class="text tb-4" id="t-1-4">Testi neloseen (Testi-1 -passagesta).</div><div class="text tb-3"><br>Tässä Testi-2 passagen tekstiä. First name is $input_1 .</div>(set: $input_2 to (prompt: "Mikä on suosikkisi?", "Tuisku", "Cancel", "Jatka"))<div class="text tb-4"><br>Tässä Testi-2 passagen tekstiä promptin jälkeen. Suosikki is $input_2 .</div><div class="container" id="container-1"><div id="header"><h1 id="site-title">Lukupiiri</h1></div></div><div class="container" id="container-2">(display: "Character")<div class="game-object" id="character-2"></div><div class="game-object" id="pallets"></div></div><div class="container" id="container-4"><h1 id="intro-title">Johdanto pelin teemoihin ja taustoihin</span><p class="text "id="intro">
Lukupiiri on luonnonsysteemien, rakennetun ympäristön, teknologisten infrastruktuurien ja muotoilukulttuurin yhteenkietoutumia tutkiva rooliseikkailu. Verkkopelissä liikutaan jälkifossiilisessa maailmassa kaupungin laitamilla ja ollaan vuorovaikutuksessa erilaisten muotoilun teoriaa ja kokeellisia käytäntöja hahmottelevien yhteisöjen kanssa. Peli perustuu ympäristön ja erilaisten ylipaikallisten (trans-local) yhteisöjen kanssa olemiseen sekä työskentelyyn tekstien, sanojen ja erilaisten muistiinpanopraktiikoiden parissa.
Peli on kehitysvaiheessa. Ensimmäisen kokeiluversion on tarkoitus valmistua vuoden 2023 ensimmäisellä puoliskolla.</p>
<div class="container" id="footer"><div class="footer-text" id="footer-1"><h2 class="footer-title">Yhteystiedot</h2><a href="mailto:info@lukupiiri.org">info@lukupiiri.org</a><br><a href="https://lukupiiri.substack.com/">Uutiskirje</a><br><a href="https://www.instagram.com/lukupiiri_peli/">Instagram</a></div><div class="footer-text" id="footer-2"><h2 class="footer-title">Kolofoni</h2>Pelin suunnittelu ja kehitys<br><a href="https://tommivasko.info/">Tommi Vasko</a><br><br>Kirjasintyypit<br><a href="https://usemodify.com/fonts/routed-gothic-font/">Routed Gothic</a>, Darren Embry<br><a href="https://velvetyne.fr/fonts/terminal-grotesque/">Terminal Grotesque</a>, Raphaël Bastide and Jérémy Landes<br><br></div><div class="footer-text" id="footer-3"><h2 class="footer-title">Kiitokset</h2>Taike on tukenut tämän projektin kehittelyä.
Taiken logo</div>
</div></div>
(display: "Narration-1")(set: $typewriterText to "Tervetuloa Lukupiiri-pelin nettisivuille!")(set: $typewriterText2 to "Peli on tällä hetkellä kehittelyvaiheessa.")(set: $typewriterText3 to "Tällä sivulla on kokeiluja pelin visuaalisesta maailmasta, kerronnan muodoista ja pelimekaniikoista.")(set: $typewriterText4 to "Sivun alareunassa on johdanto pelin taustoihin ja yhteystiedot.")
<div class="text narration" id="narration-1-1">(display: "Typewriter")(click-replace: "Tervetuloa Lukupiiri-pelin nettisivuille!")[(display: "Typewriter2")](click-replace: "Peli on tällä hetkellä kehittelyvaiheessa. ")[(display: "Typewriter3")](click-replace: "Tällä sivulla on kokeiluja pelin visuaalisesta maailmasta, kerronnan muodoista ja pelimekaniikoista.")[(display: "Typewriter4")]</div>{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}(set: $input_1 to (prompt: " Miksi haluat sinua kutsuttavan?", "Riite", "Cancel", "Jatka")){
<!-- Create a variable to track the position within the $typewriterText2 string -->
(set: $typewriterPos2 to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput2>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput2)[(print: $typewriterText2's $typewriterPos2)]
<!-- Update the position -->
(set: $typewriterPos2 to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos2 is $typewriterText2's length + 1)[
(stop:)
]
]
}{
<!-- Create a variable to track the position within the $typewriterText3 string -->
(set: $typewriterPos3 to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput3>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput3)[(print: $typewriterText3's $typewriterPos3)]
<!-- Update the position -->
(set: $typewriterPos3 to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos3 is $typewriterText3's length + 1)[
(stop:)
]
]
}{
<!-- Create a variable to track the position within the $typewriterText4 string -->
(set: $typewriterPos4 to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput4>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput4)[(print: $typewriterText4's $typewriterPos4)]
<!-- Update the position -->
(set: $typewriterPos4 to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos4 is $typewriterText4's length + 1)[
(stop:)
]
]
}{
<!-- Create a variable to track the position within the $typewriterText5 string -->
(set: $typewriterPos5 to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput5>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput5)[(print: $typewriterText5's $typewriterPos5)]
<!-- Update the position -->
(set: $typewriterPos5 to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos5 is $typewriterText5's length + 1)[
(stop:)
]
]
}<div class="text question" id="question-1-1">Minkälaisia teemoja peli käsittelee?</div>
<div class="text question" id="question-1-2">Mitä pelissä tehdään?</div>
<div class="text question" id="question-1-3">Onko peli osa laajempaa tutkimusta tai suunnitelmaa?</div>(click-replace: "Minkälaisia teemoja peli käsittelee?")[(display: "Narration-2")](click-replace: "Mitä pelissä tehdään?")[(display: "Narration-3")](click-replace: "Onko peli osa laajempaa tutkimusta tai suunnitelmaa?")[(display: "Narration-4")]Double-click this passage to edit it.<div class="sprite-container-1" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;"><div class="sprite-1" style="position: absolute; top: calc(50% - 80px); left: 50%; width: 139.2px; height: 300px; background-image: url(https://lukupiiri.org/kok/links/hahmo_sprite4.png); background-size: 1113px 300px; transform: translate(-50%, -50%);"></div>
</div>
<script>
const spriteContainer1 = document.querySelector('.sprite-container-1');
const sprite1 = document.querySelector('.sprite-1');
spriteContainer1.addEventListener('mousemove', event => {
const angle = instance1_calculateAngle(event);
const backgroundPosition = instance1_calculateBackgroundPosition(angle);
sprite1.style.backgroundPosition = backgroundPosition;
});
function instance1_calculateAngle(event) {
const { clientX, clientY } = event;
const { left, top } = spriteContainer1.getBoundingClientRect();
const centerX = left + spriteContainer1.offsetWidth / 2;
const centerY = top + spriteContainer1.offsetHeight / 2;
const x = clientX - centerX;
const y = clientY - centerY;
return Math.atan2(y, x) * 180 / Math.PI;
}
function instance1_calculateBackgroundPosition(angle) {
const steps = 8;
const stepSize = 360 / steps;
angle = (angle + 360) % 360;
const step = Math.floor((angle + stepSize / 2) / stepSize) % steps;
return `-${step * (1113 / 8)}px 0`;
}
</script>
<div class="sprite-container-2" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;"><div class="sprite-2" style="position: absolute; top: calc(50% - 80px); left: 50%; width: 139.2px; height: 300px; background-image: url(https://lukupiiri.org/kok/links/hahmo_sprite4.png); background-size: 1113px 300px; transform: translate(-50%, -50%);"></div>
</div>
<script>
const spriteContainer2 = document.querySelector('.sprite-container-2');
const sprite2 = document.querySelector('.sprite-2');
spriteContainer2.addEventListener('mousemove', event => {
const angle = instance2_calculateAngle(event);
const backgroundPosition = instance2_calculateBackgroundPosition(angle);
sprite2.style.backgroundPosition = backgroundPosition;
});
function instance2_calculateAngle(event) {
const { clientX, clientY } = event;
const { left, top } = spriteContainer2.getBoundingClientRect();
const centerX = left + spriteContainer2.offsetWidth / 2;
const centerY = top + spriteContainer2.offsetHeight / 2;
const x = clientX - centerX;
const y = clientY - centerY;
return Math.atan2(y, x) * 180 / Math.PI;
}
function instance2_calculateBackgroundPosition(angle) {
const steps = 8;
const stepSize = 360 / steps;
angle = (angle + 360) % 360;
const step = Math.floor((angle + stepSize / 2) / stepSize) % steps;
return `-${step * (1113 / 8)}px 0`;
}
</script>
(display: "Character")