programerski-bralni-krozek
/
sicp
4
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity
sicp/vaja/plan.html

483 lines
21 KiB
HTML
Raw Permalink Normal View History

Vnos za srečanje, dokumentacija plana za vaje
2024-12-12 21:14:36 +01:00
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- 2024-12-12 čet 21:14 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>&lrm;</title>
<meta name="author" content="Yuri" />
<meta name="generator" content="Org Mode" />
<style type="text/css">
#content { max-width: 60em; margin: auto; }
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #e6e6e6;
border-radius: 3px;
background-color: #f2f2f2;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: auto;
}
pre.src:before {
display: none;
position: absolute;
top: -8px;
right: 12px;
padding: 3px;
color: #555;
background-color: #f2f2f299;
}
pre.src:hover:before { display: inline; margin-top: 14px;}
/* Languages per Org manual */
pre.src-asymptote:before { content: 'Asymptote'; }
pre.src-awk:before { content: 'Awk'; }
pre.src-authinfo::before { content: 'Authinfo'; }
pre.src-C:before { content: 'C'; }
/* pre.src-C++ doesn't work in CSS */
pre.src-clojure:before { content: 'Clojure'; }
pre.src-css:before { content: 'CSS'; }
pre.src-D:before { content: 'D'; }
pre.src-ditaa:before { content: 'ditaa'; }
pre.src-dot:before { content: 'Graphviz'; }
pre.src-calc:before { content: 'Emacs Calc'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-fortran:before { content: 'Fortran'; }
pre.src-gnuplot:before { content: 'gnuplot'; }
pre.src-haskell:before { content: 'Haskell'; }
pre.src-hledger:before { content: 'hledger'; }
pre.src-java:before { content: 'Java'; }
pre.src-js:before { content: 'Javascript'; }
pre.src-latex:before { content: 'LaTeX'; }
pre.src-ledger:before { content: 'Ledger'; }
pre.src-lisp:before { content: 'Lisp'; }
pre.src-lilypond:before { content: 'Lilypond'; }
pre.src-lua:before { content: 'Lua'; }
pre.src-matlab:before { content: 'MATLAB'; }
pre.src-mscgen:before { content: 'Mscgen'; }
pre.src-ocaml:before { content: 'Objective Caml'; }
pre.src-octave:before { content: 'Octave'; }
pre.src-org:before { content: 'Org mode'; }
pre.src-oz:before { content: 'OZ'; }
pre.src-plantuml:before { content: 'Plantuml'; }
pre.src-processing:before { content: 'Processing.js'; }
pre.src-python:before { content: 'Python'; }
pre.src-R:before { content: 'R'; }
pre.src-ruby:before { content: 'Ruby'; }
pre.src-sass:before { content: 'Sass'; }
pre.src-scheme:before { content: 'Scheme'; }
pre.src-screen:before { content: 'Gnu Screen'; }
pre.src-sed:before { content: 'Sed'; }
pre.src-sh:before { content: 'shell'; }
pre.src-sql:before { content: 'SQL'; }
pre.src-sqlite:before { content: 'SQLite'; }
/* additional languages in org.el's org-babel-load-languages alist */
pre.src-forth:before { content: 'Forth'; }
pre.src-io:before { content: 'IO'; }
pre.src-J:before { content: 'J'; }
pre.src-makefile:before { content: 'Makefile'; }
pre.src-maxima:before { content: 'Maxima'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-picolisp:before { content: 'Pico Lisp'; }
pre.src-scala:before { content: 'Scala'; }
pre.src-shell:before { content: 'Shell Script'; }
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
/* additional language identifiers per "defun org-babel-execute"
in ob-*.el */
pre.src-cpp:before { content: 'C++'; }
pre.src-abc:before { content: 'ABC'; }
pre.src-coq:before { content: 'Coq'; }
pre.src-groovy:before { content: 'Groovy'; }
/* additional language identifiers from org-babel-shell-names in
ob-shell.el: ob-shell is the only babel language using a lambda to put
the execution function name together. */
pre.src-bash:before { content: 'bash'; }
pre.src-csh:before { content: 'csh'; }
pre.src-ash:before { content: 'ash'; }
pre.src-dash:before { content: 'dash'; }
pre.src-ksh:before { content: 'ksh'; }
pre.src-mksh:before { content: 'mksh'; }
pre.src-posh:before { content: 'posh'; }
/* Additional Emacs modes also supported by the LaTeX listings package */
pre.src-ada:before { content: 'Ada'; }
pre.src-asm:before { content: 'Assembler'; }
pre.src-caml:before { content: 'Caml'; }
pre.src-delphi:before { content: 'Delphi'; }
pre.src-html:before { content: 'HTML'; }
pre.src-idl:before { content: 'IDL'; }
pre.src-mercury:before { content: 'Mercury'; }
pre.src-metapost:before { content: 'MetaPost'; }
pre.src-modula-2:before { content: 'Modula-2'; }
pre.src-pascal:before { content: 'Pascal'; }
pre.src-ps:before { content: 'PostScript'; }
pre.src-prolog:before { content: 'Prolog'; }
pre.src-simula:before { content: 'Simula'; }
pre.src-tcl:before { content: 'tcl'; }
pre.src-tex:before { content: 'TeX'; }
pre.src-plain-tex:before { content: 'Plain TeX'; }
pre.src-verilog:before { content: 'Verilog'; }
pre.src-vhdl:before { content: 'VHDL'; }
pre.src-xml:before { content: 'XML'; }
pre.src-nxml:before { content: 'XML'; }
/* add a generic configuration mode; LaTeX export needs an additional
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
pre.src-conf:before { content: 'Configuration File'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.equation-container {
display: table;
text-align: center;
width: 100%;
}
.equation {
vertical-align: middle;
}
.equation-label {
display: table-cell;
text-align: right;
vertical-align: middle;
}
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { }
</style>
</head>
<body>
<div id="content" class="content">
<div id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#orgea1bc79">1. Plan za vajo</a></li>
<li><a href="#orgf3f8684">2. predlogi</a></li>
<li><a href="#org1415cea">3. tekstualna igra stavkov p</a>
<ul>
<li><a href="#org9ef178b">3.1. meta</a></li>
<li><a href="#org8b67be4">3.2. homepage</a></li>
<li><a href="#org75d0d17">3.3. seja igre</a></li>
<li><a href="#org260847d">3.4. program</a>
<ul>
<li><a href="#orga36bb03">3.4.1. boilerplate</a></li>
<li><a href="#orga5cbc1c">3.4.2. navodila za igro</a></li>
</ul>
</li>
<li><a href="#org57c0424">3.5. Nova soba</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="outline-container-orgea1bc79" class="outline-2">
<h2 id="orgea1bc79"><span class="section-number-2">1.</span> Plan za vajo</h2>
</div>
<div id="outline-container-orgf3f8684" class="outline-2">
<h2 id="orgf3f8684"><span class="section-number-2">2.</span> predlogi</h2>
<div class="outline-text-2" id="text-2">
<ul class="org-ul">
<li>tekstualna igra stavkov
<ul class="org-ul">
<li>tista s sestavljanjem povedi je pa iz une igre, mi smo dostkrat igral, neki v smislu, da mora igrat 6+ ljudi in pol vsak napise na vrh lista eno stvar in pol prepogne in list krozi &#x2013; po vrsti grejo neki takega: kdo, kdaj, kje, zakaj, s cim, kaj dela &#x2026; pol pa ven loh pridejo kr zabavni stavki &#x2026; in da je odprto na spletni strani skos naslednje vprasanje, ko se odgovori zadnja stvar (kaj dela), se izpise poved med ze dokoncane, in se zacne nova</li>
</ul></li>
<li>igra v <a href="https://dthompson.us/projects/chickadee.html">chickadee</a>-ju
<ul class="org-ul">
<li>klon she-bo? (<a href="https://www.myabandonware.com/game/she-bo-a6f">https://www.myabandonware.com/game/she-bo-a6f</a>)</li>
</ul></li>
<li>igra v canvasu (preko hoot) - v brskalniku</li>
<li>Command line tool za prevode - prepis <a href="https://git.kompot.si/lio/PonsapiCli">ponsapi-cli</a> v guile</li>
<li>CI (continuous integration) sistem:
<ul class="org-ul">
<li><a href="https://codeberg.org/jjba23/byggsteg">https://codeberg.org/jjba23/byggsteg</a></li>
<li>tegale bi lahko uporabili ^</li>
<li>ideja: imeti spletno stran, ki jo na njej sami lahko v zivo urejas (ima vgrajen urejevalnik) in v kolikor testi passajo, se kar sproti deploya</li>
</ul></li>
</ul>
<p>
'
</p>
</div>
</div>
<div id="outline-container-org1415cea" class="outline-2">
<h2 id="org1415cea"><span class="section-number-2">3.</span> tekstualna igra stavkov p</h2>
<div class="outline-text-2" id="text-3">
</div>
<div id="outline-container-org9ef178b" class="outline-3">
<h3 id="org9ef178b"><span class="section-number-3">3.1.</span> meta</h3>
<div class="outline-text-3" id="text-3-1">
<p>
Sem pišemo plan za program igranja igre. Poskušamo kratko in jedrnato opisati prvi prototip, ki naj čimprej deluje in je zavoljo enostavnosti karseda podoben igranju v živo. Ob pisanju se poraja veliko idej, za katere je bolje, da se potencialno uvedejo kasneje, sicer se cilj delujočega prototipa sproti prehitro oddaljuje.
</p>
</div>
</div>
<div id="outline-container-org8b67be4" class="outline-3">
<h3 id="org8b67be4"><span class="section-number-3">3.2.</span> homepage</h3>
<div class="outline-text-3" id="text-3-2">
<p>
Na home page imamo kratka navodila in formo nova igra s poljem stevilo igralcev.
Submitanje forme te pelje na zgeneriran link, ki ga posljes soigralcem.
</p>
<p>
Na tem koraku se generira seja glede na število igralcev.
</p>
</div>
</div>
<div id="outline-container-org75d0d17" class="outline-3">
<h3 id="org75d0d17"><span class="section-number-3">3.3.</span> seja igre</h3>
<div class="outline-text-3" id="text-3-3">
<p>
Meta Podatki
</p>
<ul class="org-ul">
<li>hash, ki je url</li>
<li>stevilo igralcev</li>
</ul>
<p>
Vsak igralec dobi svoj id (in session). Nato se mu po vrsti prikazujejo vprasanja in on izpolnjuje vprasanja. Novo vprasanje se ti pojavi, ko vsi odgovorijo na trenutno vprasanje (lahko imamo nek semaforcek, kdo je ze odgovoril).
</p>
<p>
Igra "prepozna" obiskovalca nekako unikatno - lahko je session in cookie (kar se uporablja za user tracking), lahko pa je nek ID v browser local storage, ki zavaruje uporabnika pred cross-site trackingom. (@TODO tole je manjša komplikacija). Unikatna prepoznava je pomembna za deterministično prelivanje odgovorov.
</p>
<p>
Ko oddaš odgovore, te pelje na link za rezlultate, kjer piše, koliko odgovorov igralcov še čakamo.
Ko so vsi oddali odgovore, se ti izpiše stavek, ki ga lahko prebereš ostalim igralcem.
</p>
</div>
</div>
<div id="outline-container-org260847d" class="outline-3">
<h3 id="org260847d"><span class="section-number-3">3.4.</span> program</h3>
<div class="outline-text-3" id="text-3-4">
<p>
Izbrali smo artanis web framework: <a href="https://artanis.dev/">https://artanis.dev/</a>
Namestitev:
</p>
<ul class="org-ul">
<li>GNU guix: <code>guix install artanis</code></li>
<li>Debian: <code>apt install guix; guix install artanis</code></li>
</ul>
</div>
<div id="outline-container-orga36bb03" class="outline-4">
<h4 id="orga36bb03"><span class="section-number-4">3.4.1.</span> boilerplate</h4>
<div class="outline-text-4" id="text-3-4-1">
<p>
Artanis ima orodje za terminal, imenovano <code>art</code>. Z orodje mdr. pripravimo skelet novega projekta: <code>art create igra-stavkov</code>.
</p>
<p>
Strežnik potem lahko poženemo z ukazoma:
</p>
<ul class="org-ul">
<li><code>cd igra-stavkov</code></li>
<li><code>art work</code></li>
</ul>
<p>
Strežnik se nam odpre na naslovu <a href="http://127.0.0.1:3000">http://127.0.0.1:3000</a>
</p>
<div id="orgd80eba0" class="figure">
<p><img src="./igra-stavkov-1.png" alt="igra-stavkov-1.png" />
</p>
</div>
<p>
Stran tako deluje samo lokalno, če jo želimo deliti z drugimi na omrežju, spremenimo konfiguracijo; v datoteki <code>conf/artanis.conf</code> spremenimo <code>host.addr = 127.0.0.1</code> v lasten IP naslov (v mojem primeru <code>host.addr = 10.27.3.12</code>)
Drugi potem stran vidijo na naslovu <code>http://&lt;ip_naslov&gt;:3000</code>, v času in kraju pisanja tega dokumenta je to <code>http://10.27.3.12:3000</code> (deluje pa samo CTK wifi omrežju, na katerega sem trenutno povezan).
</p>
</div>
</div>
<div id="outline-container-orga5cbc1c" class="outline-4">
<h4 id="orga5cbc1c"><span class="section-number-4">3.4.2.</span> navodila za igro</h4>
<div class="outline-text-4" id="text-3-4-2">
<p>
Igro lahko igrata dva ali več igralcev. Igralci skupaj sestavljajo stavke, tako da vnaprej odgovarjajo na vprašanja:
</p>
<ul class="org-ul">
<li>Kdo?</li>
<li>Kdaj?</li>
<li>Kje?</li>
<li>zakaj?</li>
<li>S čim?</li>
<li>Kaj dela?</li>
</ul>
</div>
<ol class="org-ol">
<li><a id="org2d9239a"></a>v živo<br />
<div class="outline-text-5" id="text-3-4-2-1">
<p>
Vsak igralec potrebuje listek in pisalo. Igralci skupaj odgovarjajo na
vprašanja, po vsakem odgovoru pa listek prepognejo in podajo naprej. Svoj
naslednji odgovor nato napišejo pod prepognjen del in spet podajo listek naprej.
Ko odogovorijo na vsa vprašanja, še enkrat podajo listek naprej naslednjemu
igralcu in preberejo cel stavek.
</p>
</div>
</li>
<li><a id="org4867869"></a>na naši aplikaciji<br />
<div class="outline-text-5" id="text-3-4-2-2">
<p>
Na naši aplikaciji je igra zelo podobna. Izberete število igralcev in ustvarite
novo sobo za igranje. Povezavo do sobo pošljete soigralcem in po vrsti
odgovarjate na vprašanja, dokler ne izpolnite vseh. Vsakemu igralcu se na koncu
izpiše en sestavljen stavek.
</p>
<p>
Ustvarimo nov fajl na lokaciji <code>pub/index.html</code>:
</p>
<div class="org-src-container">
<pre class="src src-html"> &lt;<span style="color: #fabd2f;">html</span>&gt;
&lt;<span style="color: #fabd2f;">head</span>&gt;
&lt;<span style="color: #fabd2f;">meta</span> <span style="color: #83a598;">charset</span>=<span style="color: #b8bb26;">"UTF-8"</span>&gt;
&lt;<span style="color: #fabd2f;">meta</span> <span style="color: #83a598;">name</span>=<span style="color: #b8bb26;">"viewport"</span> <span style="color: #83a598;">content</span>=<span style="color: #b8bb26;">"width=device-width, initial-scale=1.0"</span>&gt;
&lt;<span style="color: #fabd2f;">title</span>&gt;<span style="font-weight: bold; text-decoration: underline;">igra stavkov</span>&lt;/<span style="color: #fabd2f;">title</span>&gt;
&lt;/<span style="color: #fabd2f;">head</span>&gt;
&lt;<span style="color: #fabd2f;">body</span>&gt;
&lt;<span style="color: #fabd2f;">h1</span>&gt;<span style="font-weight: bold; text-decoration: underline;">igra stavkov</span>&lt;/<span style="color: #fabd2f;">h1</span>&gt;
&lt;<span style="color: #fabd2f;">h2</span>&gt;<span style="font-weight: bold; font-style: italic; text-decoration: underline;">v &#382;ivo</span>&lt;/<span style="color: #fabd2f;">h2</span>&gt;
&lt;<span style="color: #fabd2f;">p</span>&gt;
Vsak igralec potrebuje listek in pisalo. Igralci skupaj odgovarjajo na
vpra&#353;anja, po vsakem odgovoru pa listek prepognejo in podajo naprej. Svoj
naslednji odgovor nato napi&#353;ejo pod prepognjen del in spet podajo listek naprej.
Ko odogovorijo na vsa vpra&#353;anja, &#353;e enkrat podajo listek naprej naslednjemu
igralcu in preberejo cel stavek.
&lt;/<span style="color: #fabd2f;">p</span>&gt;
&lt;<span style="color: #fabd2f;">h2</span>&gt;<span style="font-weight: bold; font-style: italic; text-decoration: underline;">prek spleta (na&#353;a varianta)</span>&lt;/<span style="color: #fabd2f;">h2</span>&gt;
&lt;<span style="color: #fabd2f;">p</span>&gt;
Vsak igralec potrebuje ra&#269;unalnik z brskalnikom in internetno povezavo. Dobavna veriga obsega rudnike redkih kovin, silicij, proizvodnjo &#269;ipov, komunikacijsko mre&#382;o, etcetera.
&lt;/<span style="color: #fabd2f;">p</span>&gt;
&lt;<span style="color: #fabd2f;">p</span>&gt;
Na na&#353;i aplikaciji je igra zelo podobna. Izberete &#353;tevilo igralcev in ustvarite
novo sobo za igranje. Povezavo do sobo po&#353;ljete soigralcem in po vrsti
odgovarjate na vpra&#353;anja, dokler ne izpolnite vseh. Vsakemu igralcu se na koncu
izpi&#353;e en sestavljen stavek.
&lt;<span style="color: #fabd2f;">form</span>&gt;
&lt;<span style="color: #fabd2f;">label</span> <span style="color: #83a598;">for</span>=<span style="color: #b8bb26;">"num-of-players"</span>&gt;Izberi &#353;tevilo igralcev&lt;/<span style="color: #fabd2f;">label</span>&gt;
&lt;<span style="color: #fabd2f;">input</span> <span style="color: #83a598;">type</span>=<span style="color: #b8bb26;">"number"</span> <span style="color: #83a598;">min</span>=<span style="color: #b8bb26;">"1"</span> <span style="color: #83a598;">name</span>=<span style="color: #b8bb26;">"num-of-players"</span> <span style="color: #83a598;">id</span>=<span style="color: #b8bb26;">"num-of-players"</span>&gt;&lt;/<span style="color: #fabd2f;">input</span>&gt;
&lt;<span style="color: #fabd2f;">input</span> <span style="color: #83a598;">type</span>=<span style="color: #b8bb26;">"submit"</span> <span style="color: #83a598;">value</span>=<span style="color: #b8bb26;">"igraj"</span>&gt;
&lt;/<span style="color: #fabd2f;">form</span>&gt;
&lt;/<span style="color: #fabd2f;">body</span>&gt;
&lt;/<span style="color: #fabd2f;">html</span>&gt;
</pre>
</div>
<p>
Ker artanis privzeto ne prikazuje <code>index.html</code> datoteke, mu to zaukažemo z vnosom v fajlu <code>ENTRY</code>:
</p>
<div class="org-src-container">
<pre class="src src-scheme"><span style="color: #458588;">(</span>get <span style="color: #b8bb26;">"/"</span> <span style="color: #b16286;">(</span><span style="color: #fb4933;">lambda</span> <span style="color: #8ec07c;">(</span>rc<span style="color: #8ec07c;">)</span> <span style="color: #8ec07c;">(</span>redirect-to rc <span style="color: #b8bb26;">"index.html"</span><span style="color: #8ec07c;">)</span><span style="color: #b16286;">)</span><span style="color: #458588;">)</span>
</pre>
</div>
<p>
Sprememba se ne zgodi "avtomatsko", ampak moramo prekiniti proces <code>art work</code> (<code>Ctrl+C</code>), in ga ponovno pognati (<code>art work</code>). Lahko ga pa poženemo tudi z <code>art work -g</code>, načinu za razhroščevanje, ki ponovno naloži izvorno kodo, ko se le ta spremeni.
</p>
<p>
Domača stran se nam zdaj naloži!
</p>
<div id="org99d57f7" class="figure">
<p><img src="igra-stavkov-2.png" alt="igra-stavkov-2.png" />
</p>
</div>
</div>
</li>
</ol>
</div>
</div>
<div id="outline-container-org57c0424" class="outline-3">
<h3 id="org57c0424"><span class="section-number-3">3.5.</span> Nova soba</h3>
<div class="outline-text-3" id="text-3-5">
<p>
Zavoljo enostavnosti v <code>conf/artanis.conf</code> omogočimo podporo za sqlite3 bazo (ki je v fajlu in tako nismo odvisno od dodatne programske opreme za shranjevanje stanja):
</p>
<div class="org-src-container">
<pre class="src src-conf"><span style="color: #83a598;">db.dbd</span> = sqlite3
<span style="color: #83a598;">db.enable</span> = true
</pre>
</div>
<p>
In ponovno poženemo strežnik: <code>art work -g</code>
</p>
<p>
Soba ima dve lastnosti; unikaten ID in število igralcev.
</p>
<p>
Ustvarimo model zanjo;
</p>
</div>
</div>
</div>
</div>
</body>
</html>