€•0     Œsphinx.addnodes”Œdocument”“”)”}”(Œ	rawsource”Œ ”Œchildren”]”(Œdocutils.nodes”Œsection”“”)”}”(hhh]”(h	Œtitle”“”)”}”(hŒ$Seamless interoperation with the DOM”h]”h	ŒText”“”Œ$Seamless interoperation with the DOM”…””}”(hhŒparent”hhhŒsource”NŒline”NubaŒ
attributes”}”(Œids”]”Œclasses”]”Œnames”]”Œdupnames”]”Œbackrefs”]”uŒtagname”hhhhhhŒ_/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/docs/sphinx/integration_javascript.rst”hKubh)”}”(hhh]”(h)”}”(hŒKPractical example: a simple, responsive website using no HTML or CSS at all”h]”hŒKPractical example: a simple, responsive website using no HTML or CSS at all”…””}”(hh1hh/hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhh,hhhh+hKubh	Œ	paragraph”“”)”}”(hXQ  To many programmers, using 'static' HTML and CSS feels like being locked up in a closet.
As an alternative, responsiveness can simply be programmed using Transcrypt, as can be seen on `the website of Transcrypt itself <http://www.transcrypt.org>`_.
The site adapts to diverse screen formats, device types and landscape vs. portrait mode.”h]”(hŒ¼To many programmers, using â€˜staticâ€™ HTML and CSS feels like being locked up in a closet.
As an alternative, responsiveness can simply be programmed using Transcrypt, as can be seen on ”…””}”(hŒ¸To many programmers, using 'static' HTML and CSS feels like being locked up in a closet.
As an alternative, responsiveness can simply be programmed using Transcrypt, as can be seen on ”hh?hhhNhNubh	Œ	reference”“”)”}”(hŒ?`the website of Transcrypt itself <http://www.transcrypt.org>`_”h]”hŒ the website of Transcrypt itself”…””}”(hŒ the website of Transcrypt itself”hhJubah}”(h ]”h"]”h$]”h&]”h(]”Œname”Œ the website of Transcrypt itself”Œrefuri”Œhttp://www.transcrypt.org”uh*hHhh?ubh	Œtarget”“”)”}”(hŒ <http://www.transcrypt.org>”h]”h}”(h ]”Œ the-website-of-transcrypt-itself”ah"]”h$]”Œ the website of transcrypt itself”ah&]”h(]”Œrefuri”h\uh*h]Œ
referenced”Khh?ubhŒZ.
The site adapts to diverse screen formats, device types and landscape vs. portrait mode.”…””}”(hŒZ.
The site adapts to diverse screen formats, device types and landscape vs. portrait mode.”hh?hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhh,hhubeh}”(h ]”ŒIpractical-example-a-simple-responsive-website-using-no-html-or-css-at-all”ah"]”h$]”ŒKpractical example: a simple, responsive website using no html or css at all”ah&]”h(]”uh*h
hhhhhh+hKubh)”}”(hhh]”(h)”}”(hŒSVG example: Turtle graphics”h]”hŒSVG example: Turtle graphics”…””}”(hh…hhƒhhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhh€hhhh+hKubh>)”}”(hXª  *Turtle graphics* are a way to teach computer programming to children, invented by Seymour Papert in the 1960's.
Lines are drawn as 'track' of a walking turtle, that can move ahead and turn.
Children use turtle graphics intuitively by imagining what they would do if they were the turtle.
This leads to a *recipe of motion*, indeed an *algorithm*, which is the basis of imperative (as opposed to e.g. declarative) programming.”h]”(h	Œemphasis”“”)”}”(hŒ*Turtle graphics*”h]”hŒTurtle graphics”…””}”(hhhh—ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hh‘ubhX&   are a way to teach computer programming to children, invented by Seymour Papert in the 1960â€™s.
Lines are drawn as â€˜trackâ€™ of a walking turtle, that can move ahead and turn.
Children use turtle graphics intuitively by imagining what they would do if they were the turtle.
This leads to a ”…””}”(hX    are a way to teach computer programming to children, invented by Seymour Papert in the 1960's.
Lines are drawn as 'track' of a walking turtle, that can move ahead and turn.
Children use turtle graphics intuitively by imagining what they would do if they were the turtle.
This leads to a ”hh‘hhhNhNubh–)”}”(hŒ*recipe of motion*”h]”hŒrecipe of motion”…””}”(hhhhªubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hh‘ubhŒ, indeed an ”…””}”(hŒ, indeed an ”hh‘hhhNhNubh–)”}”(hŒ*algorithm*”h]”hŒ	algorithm”…””}”(hhhh½ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hh‘ubhŒP, which is the basis of imperative (as opposed to e.g. declarative) programming.”…””}”(hŒP, which is the basis of imperative (as opposed to e.g. declarative) programming.”hh‘hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhh€hhubh>)”}”(hX-  *SVG* or *Scalable Vector Graphics* are a way to display high quality graphs, e.g. in the browser.
SVG, as opposed to e.g. the HTML Canvas, bypasses the pixel paradigm and works with floating point coordinates directly.
As a consequence, SVG plots can be zoomed without becoming ragged or 'pixelated'.”h]”(h–)”}”(hŒ*SVG*”h]”hŒSVG”…””}”(hhhhÚubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hhÖubhŒ or ”…””}”(hŒ or ”hhÖhhhNhNubh–)”}”(hŒ*Scalable Vector Graphics*”h]”hŒScalable Vector Graphics”…””}”(hhhhíubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hhÖubhX   are a way to display high quality graphs, e.g. in the browser.
SVG, as opposed to e.g. the HTML Canvas, bypasses the pixel paradigm and works with floating point coordinates directly.
As a consequence, SVG plots can be zoomed without becoming ragged or â€˜pixelatedâ€™.”…””}”(hX
   are a way to display high quality graphs, e.g. in the browser.
SVG, as opposed to e.g. the HTML Canvas, bypasses the pixel paradigm and works with floating point coordinates directly.
As a consequence, SVG plots can be zoomed without becoming ragged or 'pixelated'.”hhÖhhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhh€hhubh>)”}”(hX  When looking under the hood of SVG, there's an amazing correspondence between the primitives in an SVG *path* and the primitives of turtle graphics.
So both from an aestethical and from a conceptual point of view, turtle graphics and SVG form a happy mariage.”h]”(hŒiWhen looking under the hood of SVG, thereâ€™s an amazing correspondence between the primitives in an SVG ”…””}”(hŒgWhen looking under the hood of SVG, there's an amazing correspondence between the primitives in an SVG ”hj  hhhNhNubh–)”}”(hŒ*path*”h]”hŒpath”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj  ubhŒ– and the primitives of turtle graphics.
So both from an aestethical and from a conceptual point of view, turtle graphics and SVG form a happy mariage.”…””}”(hŒ– and the primitives of turtle graphics.
So both from an aestethical and from a conceptual point of view, turtle graphics and SVG form a happy mariage.”hj  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhh€hhubh>)”}”(hX  Turtle graphics in Transcrypt do not require the use of any graphics libraries. Below are two turtle graphics examples and the source code of Transcrypt's *turtle* module, which is quite compact. As can be seen from the code integration between Transcrypt and JavaScript is trivial.”h]”(hŒTurtle graphics in Transcrypt do not require the use of any graphics libraries. Below are two turtle graphics examples and the source code of Transcryptâ€™s ”…””}”(hŒ›Turtle graphics in Transcrypt do not require the use of any graphics libraries. Below are two turtle graphics examples and the source code of Transcrypt's ”hj(  hhhNhNubh–)”}”(hŒ*turtle*”h]”hŒturtle”…””}”(hhhj1  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj(  ubhŒw module, which is quite compact. As can be seen from the code integration between Transcrypt and JavaScript is trivial.”…””}”(hŒw module, which is quite compact. As can be seen from the code integration between Transcrypt and JavaScript is trivial.”hj(  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhh€hhubh	Œ	container”“”)”}”(hhh]”(h	Œcaption”“”)”}”(hŒ(Drawing a alternatingly floodfilled star”h]”hŒ(Drawing a alternatingly floodfilled star”…””}”(hjS  hjQ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKhjL  ubh	Œliteral_block”“”)”}”(hX  # Free after the example from the Python 3.5 manual

from turtle import *

up ()
goto (-250, -21)
startPos = pos ()

down ()
color ('red', 'yellow')
begin_fill ()
while True:
    forward (500)
    right (170)
    if distance (startPos) < 1:
        break
end_fill ()
done ()
”h]”hX  # Free after the example from the Python 3.5 manual

from turtle import *

up ()
goto (-250, -21)
startPos = pos ()

down ()
color ('red', 'yellow')
begin_fill ()
while True:
    forward (500)
    right (170)
    if distance (startPos) < 1:
        break
end_fill ()
done ()
”…””}”(hhhja  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒS/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/turtle_demos/star.py”Œ	xml:space”Œpreserve”Œforce”‰Œhighlight_args”}”Œlinenostart”Ksuh*j_  hh+hKhjL  ubeh}”(h ]”Œid1”ah"]”Œliteral-block-wrapper”ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hh€hhhhhNubh>)”}”(hŒ{`Click here to view the resulting zoomable star <http://www.transcrypt.org/live/transcrypt/demos/turtle_demos/star.html>`_.”h]”(hI)”}”(hŒz`Click here to view the resulting zoomable star <http://www.transcrypt.org/live/transcrypt/demos/turtle_demos/star.html>`_”h]”hŒ.Click here to view the resulting zoomable star”…””}”(hŒ.Click here to view the resulting zoomable star”hj„  ubah}”(h ]”h"]”h$]”h&]”h(]”Œname”Œ.Click here to view the resulting zoomable star”h[ŒFhttp://www.transcrypt.org/live/transcrypt/demos/turtle_demos/star.html”uh*hHhj€  ubh^)”}”(hŒI <http://www.transcrypt.org/live/transcrypt/demos/turtle_demos/star.html>”h]”h}”(h ]”Œ.click-here-to-view-the-resulting-zoomable-star”ah"]”h$]”Œ.click here to view the resulting zoomable star”ah&]”h(]”Œrefuri”j•  uh*h]hlKhj€  ubhŒ.”…””}”(hŒ.”hj€  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK hh€hhubjK  )”}”(hhh]”(jP  )”}”(hŒ#Drawing the contours of a snowflake”h]”hŒ#Drawing the contours of a snowflake”…””}”(hj³  hj±  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK"hj®  ubj`  )”}”(hXì  from turtle import *

josh = Turtle ()

def draw (length):
    if length > 9:
        draw (length / 3)
        josh.left (60)
        draw (length / 3)
        josh.right (120)
        draw (length / 3)
        josh.left (60)
        draw (length / 3)
    else:
        josh.forward (length)

length = 150
josh.up ()
josh.forward (length / 2)
josh.left (90)
josh.forward (length / 4)
josh.right (90)
josh.down ()

for i in range (3):
    josh.right (120)
    draw (length)
    
josh.done ()
”h]”hXì  from turtle import *

josh = Turtle ()

def draw (length):
    if length > 9:
        draw (length / 3)
        josh.left (60)
        draw (length / 3)
        josh.right (120)
        draw (length / 3)
        josh.left (60)
        draw (length / 3)
    else:
        josh.forward (length)

length = 150
josh.up ()
josh.forward (length / 2)
josh.left (90)
josh.forward (length / 4)
josh.right (90)
josh.down ()

for i in range (3):
    josh.right (120)
    draw (length)
    
josh.done ()
”…””}”(hhhj¿  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒX/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/turtle_demos/snowflake.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK"hj®  ubeh}”(h ]”Œid2”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hh€hhhhhNubh>)”}”(hŒ…`Click here to view the resulting zoomable snowflake <http://www.transcrypt.org/live/demos/transcrypt/turtle_demos/snowflake.html>`_.”h]”(hI)”}”(hŒ„`Click here to view the resulting zoomable snowflake <http://www.transcrypt.org/live/demos/transcrypt/turtle_demos/snowflake.html>`_”h]”hŒ3Click here to view the resulting zoomable snowflake”…””}”(hŒ3Click here to view the resulting zoomable snowflake”hjÜ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œname”Œ3Click here to view the resulting zoomable snowflake”h[ŒKhttp://www.transcrypt.org/live/demos/transcrypt/turtle_demos/snowflake.html”uh*hHhjØ  ubh^)”}”(hŒN <http://www.transcrypt.org/live/demos/transcrypt/turtle_demos/snowflake.html>”h]”h}”(h ]”Œ3click-here-to-view-the-resulting-zoomable-snowflake”ah"]”h$]”Œ3click here to view the resulting zoomable snowflake”ah&]”h(]”Œrefuri”jí  uh*h]hlKhjØ  ubhŒ.”…””}”(hj§  hjØ  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK&hh€hhubjK  )”}”(hhh]”(jP  )”}”(hŒpTranscrypt's turtle graphics module sits directly on top of SVG, no libraries needed, so a very compact download”h]”hŒrTranscryptâ€™s turtle graphics module sits directly on top of SVG, no libraries needed, so a very compact download”…””}”(hj
  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK(hj  ubj`  )”}”(hXÆ  __pragma__ ('skip')
document = Math = setInterval = clearInterval = 0
__pragma__ ('noskip')

_debug = False

#def abs (vec2D):
#    return Math.sqrt (vec2D [0] * vec2D [0] + vec2D [1] * vec2D [1])

_ns = 'http://www.w3.org/2000/svg'
_svg = document.createElementNS (_ns, 'svg')

_defaultElement = document.getElementById ('__turtlegraph__')
if not _defaultElement:
    _defaultElement = document.body
_defaultElement.appendChild (_svg)

_width = None
_height = None
_offset = None

def _rightSize (self):
    nonlocal _width
    nonlocal _height
    nonlocal _offset
    
    _width = _defaultElement.offsetWidth
    _height = _defaultElement.offsetHeight
    _offset = [_width // 2, _height // 2]
    
    _svg.setAttribute ('width', _width)
    _svg.setAttribute ('height', _height)
    
window.onresize = _rightSize

_rightSize ()

def bgcolor (color):
    nonlocal _defaultElement

    _bgcolor = color
    _defaultElement.style.backgroundColor = _bgcolor

bgcolor ('white')
    
def setDefaultElement (element):
    nonlocal _defaultElement

    _defaultElement.removeChild (_svg)
    _defaultElement = element
    element.appendChild (_svg)
    
    _rightSize ()
    bgcolor ('white')

_allTurtles = []
    
class Turtle:
    def __init__ (self):
        _allTurtles.append (self)
        self._paths = []
        self.reset ()
        
    def reset (self):
        self._heading = Math.PI / 2
        self.pensize (1)
        self.color ('black', 'black')
        self.down ()
        self._track = []    # Need to make track explicitly because:
        self.home ()        #   Makes a position but needs a track to put in in
        self.clear ()       #   Makes a track but needs a position to initialize it with
        
    def clear (self):
        for path in self._paths:
            _svg.removeChild (path)
        self._paths = []
        
        self._track = []
        self._moveto (self._position)
        
    def _flush (self):
        if _debug:
            print ('Flush:', self._track)
    
        if len (self._track) > 1:
            path = document.createElementNS (_ns, 'path')
            path.setAttribute ('d', ' '.join (self._track))
            path.setAttribute ('stroke', self._pencolor if self._pencolor != None else 'none')
            path.setAttribute ('stroke-width', self._pensize)
            path.setAttribute ('fill', self._fillcolor if self._fill and self._fillcolor != None else 'none')           
            path.setAttribute ('fill-rule', 'evenodd')
            _svg.appendChild (path)
            self._paths.append (path)
                
            self._track = []
            self._moveto (self._position)   # _track should start with a move command
        
    def done (self):
        self._flush ()
        
    def pensize (self, width):
        self._flush ()
        if width == None:
            return self._pensize
        else:
            self._pensize = width
    
    def color (self, pencolor, fillcolor = None):
        self._flush ()
        self._pencolor = pencolor
        
        if fillcolor != None:
            self._fillcolor = fillcolor
    
    def goto (self, x, y = None):
        if y == None:
            self._position = x
        else:
            self._position = [x, y]
            
        self._track.append ('{} {} {}'.format (
            'L' if self._down else 'M',
            self._position [0] + _offset [0],
            self._position [1] + _offset [1])
        )
        
    def _moveto (self, x, y = None):
        wasdown = self.isdown ()
        self.up ()
        self.goto (x, y)
        if wasdown:
            self.down ()
            
    def home (self):
        self._moveto (0, 0)
        
    def position (self):
        return self._position [:]
        
    def pos (self):
        return self.position ()
        
    def distance (self, x, y = None):
        if y == None:
            other = x
        else:
            other = [x, y]
            
        dX = other [0] - self._position [0]
        dY = other [1] - self._position [1]
        
        return Math.sqrt (dX * dX + dY * dY)
            
    def up (self):
        self._down = False
        
    def down (self):
        self._down = True
        
    def isdown (self):
        return self._down
        
    def _predict (self, length):
        delta = [Math.sin (self._heading), Math.cos (self._heading)]
        return [self._position [0] + length * delta [0], self._position [1] + length * delta [1]]
        
    def forward (self, length):
        self._position = self._predict (length)
        
        self._track.append ('{} {} {}'.format (
            'L' if self._down else 'M',
            self._position [0] + _offset [0],
            self._position [1] + _offset [1])
        )
        
    def back (self, length):
        self.forward (-length)
        
    def circle (self, radius):
        self.left (90)
        opposite = self._predict (2 * (radius + 1) + 1)
        self.right (90)
    
        self._track.append ('{} {} {} {} {} {} {} {}'.format (
            'A',
            radius,
            radius,
            0,
            1,
            0,
            opposite [0] + _offset [0],
            opposite [1] + _offset [1]
        ))
        
        self._track.append ('{} {} {} {} {} {} {} {}'.format (
            'A',
            radius,
            radius,
            0,
            1,
            0,
            self._position [0] + _offset [0],
            self._position [1] + _offset [1]
        ))
        
    def left (self, angle):
        self._heading = (self._heading + Math.PI * angle / 180) % (2 * Math.PI)
            
    def right (self, angle): 
        self.left (-angle)
        
    def begin_fill (self):
        self._flush ()
        self._fill = True
    
    def end_fill (self):
        self._flush ()
        self._fill = False
        
    def speed (speed = None):
        pass
        
_defaultTurtle = Turtle ()
_timer = None
    
def reset ():
    nonlocal _timer, _allTurtles
    if _timer:
        clearTimeout (_timer)
    bgcolor ('white')
    for turtle in _allTurtles:
        turtle.reset ()
        turtle.done ()
        
def clear ():
    nonlocal _allTurtles
    for turtle in _allTurtles:
        turtle.clear ()
        
def ontimer (fun, t = 0):
    nonlocal _timer
    _timer = setTimeout (fun, t)

def done ():                            _defaultTurtle.done ()
def pensize (width):                    _defaultTurtle.pensize (width)
def color (pencolor, fillcolor = None): _defaultTurtle.color (pencolor, fillcolor)
def home ():                            _defaultTurtle.home ()
def goto (x, y = None):                 _defaultTurtle.goto (x, y)
def position ():                        return _defaultTurtle.position ()
def pos ():                             return _defaultTurtle.pos ()
def distance (x, y = None):             return _defaultTurtle.distance (x, y)
def up ():                              _defaultTurtle.up ()
def down ():                            _defaultTurtle.down ()
def forward (length):                   _defaultTurtle.forward (length)
def back (length):                      _defaultTurtle.back (length)
def circle (radius):                    _defaultTurtle.circle (radius)
def left (angle):                       _defaultTurtle.left (angle)
def right (angle):                      _defaultTurtle.right (angle)
def begin_fill ():                      _defaultTurtle.begin_fill ()
def end_fill ():                        _defaultTurtle.end_fill ()
def speed (speed):                      _defaultTurtle.speed (speed)
”h]”hXÆ  __pragma__ ('skip')
document = Math = setInterval = clearInterval = 0
__pragma__ ('noskip')

_debug = False

#def abs (vec2D):
#    return Math.sqrt (vec2D [0] * vec2D [0] + vec2D [1] * vec2D [1])

_ns = 'http://www.w3.org/2000/svg'
_svg = document.createElementNS (_ns, 'svg')

_defaultElement = document.getElementById ('__turtlegraph__')
if not _defaultElement:
    _defaultElement = document.body
_defaultElement.appendChild (_svg)

_width = None
_height = None
_offset = None

def _rightSize (self):
    nonlocal _width
    nonlocal _height
    nonlocal _offset
    
    _width = _defaultElement.offsetWidth
    _height = _defaultElement.offsetHeight
    _offset = [_width // 2, _height // 2]
    
    _svg.setAttribute ('width', _width)
    _svg.setAttribute ('height', _height)
    
window.onresize = _rightSize

_rightSize ()

def bgcolor (color):
    nonlocal _defaultElement

    _bgcolor = color
    _defaultElement.style.backgroundColor = _bgcolor

bgcolor ('white')
    
def setDefaultElement (element):
    nonlocal _defaultElement

    _defaultElement.removeChild (_svg)
    _defaultElement = element
    element.appendChild (_svg)
    
    _rightSize ()
    bgcolor ('white')

_allTurtles = []
    
class Turtle:
    def __init__ (self):
        _allTurtles.append (self)
        self._paths = []
        self.reset ()
        
    def reset (self):
        self._heading = Math.PI / 2
        self.pensize (1)
        self.color ('black', 'black')
        self.down ()
        self._track = []    # Need to make track explicitly because:
        self.home ()        #   Makes a position but needs a track to put in in
        self.clear ()       #   Makes a track but needs a position to initialize it with
        
    def clear (self):
        for path in self._paths:
            _svg.removeChild (path)
        self._paths = []
        
        self._track = []
        self._moveto (self._position)
        
    def _flush (self):
        if _debug:
            print ('Flush:', self._track)
    
        if len (self._track) > 1:
            path = document.createElementNS (_ns, 'path')
            path.setAttribute ('d', ' '.join (self._track))
            path.setAttribute ('stroke', self._pencolor if self._pencolor != None else 'none')
            path.setAttribute ('stroke-width', self._pensize)
            path.setAttribute ('fill', self._fillcolor if self._fill and self._fillcolor != None else 'none')           
            path.setAttribute ('fill-rule', 'evenodd')
            _svg.appendChild (path)
            self._paths.append (path)
                
            self._track = []
            self._moveto (self._position)   # _track should start with a move command
        
    def done (self):
        self._flush ()
        
    def pensize (self, width):
        self._flush ()
        if width == None:
            return self._pensize
        else:
            self._pensize = width
    
    def color (self, pencolor, fillcolor = None):
        self._flush ()
        self._pencolor = pencolor
        
        if fillcolor != None:
            self._fillcolor = fillcolor
    
    def goto (self, x, y = None):
        if y == None:
            self._position = x
        else:
            self._position = [x, y]
            
        self._track.append ('{} {} {}'.format (
            'L' if self._down else 'M',
            self._position [0] + _offset [0],
            self._position [1] + _offset [1])
        )
        
    def _moveto (self, x, y = None):
        wasdown = self.isdown ()
        self.up ()
        self.goto (x, y)
        if wasdown:
            self.down ()
            
    def home (self):
        self._moveto (0, 0)
        
    def position (self):
        return self._position [:]
        
    def pos (self):
        return self.position ()
        
    def distance (self, x, y = None):
        if y == None:
            other = x
        else:
            other = [x, y]
            
        dX = other [0] - self._position [0]
        dY = other [1] - self._position [1]
        
        return Math.sqrt (dX * dX + dY * dY)
            
    def up (self):
        self._down = False
        
    def down (self):
        self._down = True
        
    def isdown (self):
        return self._down
        
    def _predict (self, length):
        delta = [Math.sin (self._heading), Math.cos (self._heading)]
        return [self._position [0] + length * delta [0], self._position [1] + length * delta [1]]
        
    def forward (self, length):
        self._position = self._predict (length)
        
        self._track.append ('{} {} {}'.format (
            'L' if self._down else 'M',
            self._position [0] + _offset [0],
            self._position [1] + _offset [1])
        )
        
    def back (self, length):
        self.forward (-length)
        
    def circle (self, radius):
        self.left (90)
        opposite = self._predict (2 * (radius + 1) + 1)
        self.right (90)
    
        self._track.append ('{} {} {} {} {} {} {} {}'.format (
            'A',
            radius,
            radius,
            0,
            1,
            0,
            opposite [0] + _offset [0],
            opposite [1] + _offset [1]
        ))
        
        self._track.append ('{} {} {} {} {} {} {} {}'.format (
            'A',
            radius,
            radius,
            0,
            1,
            0,
            self._position [0] + _offset [0],
            self._position [1] + _offset [1]
        ))
        
    def left (self, angle):
        self._heading = (self._heading + Math.PI * angle / 180) % (2 * Math.PI)
            
    def right (self, angle): 
        self.left (-angle)
        
    def begin_fill (self):
        self._flush ()
        self._fill = True
    
    def end_fill (self):
        self._flush ()
        self._fill = False
        
    def speed (speed = None):
        pass
        
_defaultTurtle = Turtle ()
_timer = None
    
def reset ():
    nonlocal _timer, _allTurtles
    if _timer:
        clearTimeout (_timer)
    bgcolor ('white')
    for turtle in _allTurtles:
        turtle.reset ()
        turtle.done ()
        
def clear ():
    nonlocal _allTurtles
    for turtle in _allTurtles:
        turtle.clear ()
        
def ontimer (fun, t = 0):
    nonlocal _timer
    _timer = setTimeout (fun, t)

def done ():                            _defaultTurtle.done ()
def pensize (width):                    _defaultTurtle.pensize (width)
def color (pencolor, fillcolor = None): _defaultTurtle.color (pencolor, fillcolor)
def home ():                            _defaultTurtle.home ()
def goto (x, y = None):                 _defaultTurtle.goto (x, y)
def position ():                        return _defaultTurtle.position ()
def pos ():                             return _defaultTurtle.pos ()
def distance (x, y = None):             return _defaultTurtle.distance (x, y)
def up ():                              _defaultTurtle.up ()
def down ():                            _defaultTurtle.down ()
def forward (length):                   _defaultTurtle.forward (length)
def back (length):                      _defaultTurtle.back (length)
def circle (radius):                    _defaultTurtle.circle (radius)
def left (angle):                       _defaultTurtle.left (angle)
def right (angle):                      _defaultTurtle.right (angle)
def begin_fill ():                      _defaultTurtle.begin_fill ()
def end_fill ():                        _defaultTurtle.end_fill ()
def speed (speed):                      _defaultTurtle.speed (speed)
”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒS/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/modules/turtle/__init__.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK(hj  ubeh}”(h ]”Œid3”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hh€hhhhhNubh>)”}”(hX  Remark: In a later stage animation may be added. As a further step, for complicated fractals, transparent server side compilation of a relatively simple algorithm would allow on-line editing combined with fast client side rendering of high-resolution graphics.”h]”hX  Remark: In a later stage animation may be added. As a further step, for complicated fractals, transparent server side compilation of a relatively simple algorithm would allow on-line editing combined with fast client side rendering of high-resolution graphics.”…””}”(hj1  hj/  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK,hh€hhubeh}”(h ]”Œsvg-example-turtle-graphics”ah"]”h$]”Œsvg example: turtle graphics”ah&]”h(]”uh*h
hhhhhh+hKubeh}”(h ]”Œ$seamless-interoperation-with-the-dom”ah"]”h$]”Œ$seamless interoperation with the dom”ah&]”h(]”uh*h
hhhhhh+hKubh)”}”(hhh]”(h)”}”(hŒMixed examples”h]”hŒMixed examples”…””}”(hjR  hjP  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhjM  hhhh+hK0ubh)”}”(hhh]”(h)”}”(hŒExample: Pong”h]”hŒExample: Pong”…””}”(hjc  hja  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj^  hhhh+hK3ubh>)”}”(hŒ¯In using the fabric.js JavaScript library this for example, the only thing differing from plain JavaScipt is that *new <constructor>* is replaced by *__new__ (<constructor>)*.”h]”(hŒrIn using the fabric.js JavaScript library this for example, the only thing differing from plain JavaScipt is that ”…””}”(hŒrIn using the fabric.js JavaScript library this for example, the only thing differing from plain JavaScipt is that ”hjo  hhhNhNubh–)”}”(hŒ*new <constructor>*”h]”hŒnew <constructor>”…””}”(hhhjx  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjo  ubhŒ is replaced by ”…””}”(hŒ is replaced by ”hjo  hhhNhNubh–)”}”(hŒ*__new__ (<constructor>)*”h]”hŒ__new__ (<constructor>)”…””}”(hhhj‹  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjo  ubhŒ.”…””}”(hj§  hjo  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK5hj^  hhubh^)”}”(hŒ.. _code_pong:”h]”h}”(h ]”h"]”h$]”h&]”h(]”Œrefid”Œ	code-pong”uh*h]hK7hj^  hhhh+ubh	Œtable”“”)”}”(hhh]”h	Œtgroup”“”)”}”(hhh]”(h	Œcolspec”“”)”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K.uh*j¹  hj¶  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K9uh*j¹  hj¶  ubh	Œtbody”“”)”}”(hhh]”h	Œrow”“”)”}”(hhh]”(h	Œentry”“”)”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒpong.py”h]”hŒpong.py”…””}”(hjã  hjá  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK:hjÞ  ubj`  )”}”(hX9  __pragma__ ('skip')
document = window = Math = Date = 0 # Prevent complaints by optional static checker
__pragma__ ('noskip')

__pragma__ ('noalias', 'clear')

from com.fabricjs import fabric

orthoWidth = 1000
orthoHeight = 750
fieldHeight = 650

enter, esc, space = 13, 27, 32

window.onkeydown = lambda event: event.keyCode != space # Prevent scrolldown on spacebar press

class Attribute:    # Attribute in the gaming sense of the word, rather than of an object
    def __init__ (self, game):
        self.game = game                    # Attribute knows game it's part of
        self.game.attributes.append (self)  # Game knows all its attributes
        self.install ()                     # Put in place graphical representation of attribute
        self.reset ()                       # Reset attribute to start position
                
    def reset (self):       # Restore starting positions or score, then commit to fabric
        self.commit ()      # Nothing to restore for the Attribute base class
                
    def predict (self):
        pass
                
    def interact (self):
        pass
        
    def commit (self):
        pass

class Sprite (Attribute):   # Here, a sprite is an attribute that can move
    def __init__ (self, game, width, height):
        self.width = width
        self.height = height
        Attribute.__init__ (self, game)
        
    def install (self):     # The sprite holds an image that fabric can display
        self.image = __new__ (fabric.Rect ({
            'width': self.game.scaleX (self.width), 'height': self.game.scaleY (self.height),
            'originX': 'center', 'originY': 'center', 'fill': 'white'
        }))
        
    __pragma__ ('kwargs')
    def reset (self, vX = 0, vY = 0, x = 0, y = 0):
        self.vX = vX        # Speed
        self.vY = vY
        
        self.x = x          # Predicted position, can be commit, no bouncing initially
        self.y = y
        
        Attribute.reset (self)
    __pragma__ ('nokwargs')
        
    def predict (self):     # Predict position, do not yet commit, bouncing may alter it
        self.x += self.vX * self.game.deltaT
        self.y += self.vY * self.game.deltaT

    def commit (self):      # Update fabric image for asynch draw
        self.image.left = self.game.orthoX (self.x)
        self.image.top = self.game.orthoY (self.y)
        
    def draw (self):
        self.game.canvas.add (self.image)
         
class Paddle (Sprite):
    margin = 30 # Distance of paddles from walls
    width = 10
    height = 100
    speed = 400 # / s
    
    def __init__ (self, game, index):
        self.index = index  # Paddle knows its player index, 0 == left, 1 == right
        Sprite.__init__ (self, game, self.width, self.height)
        
    def reset (self):       # Put paddle in rest position, dependent on player index
        Sprite.reset (
            self,
            x = orthoWidth // 2 - self.margin if self.index else -orthoWidth // 2 + self.margin,
            y = 0
        )
        
    def predict (self): # Let paddle react on keys
        self.vY = 0
        
        if self.index:                          # Right player
            if self.game.keyCode == ord ('K'):  # Letter K pressed
                self.vY = self.speed
            elif self.game.keyCode == ord ('M'):
                self.vY = -self.speed
        else:                                   # Left player
            if self.game.keyCode == ord ('A'):
                self.vY = self.speed
            elif self.game.keyCode == ord ('Z'):
                self.vY = -self.speed
                
        Sprite.predict (self)                   # Do not yet commit, paddle may bounce with walls

    def interact (self):    # Paddles and ball assumed infinitely thin
        # Paddle touches wall
        self.y = Math.max (self.height // 2 - fieldHeight // 2, Math.min (self.y, fieldHeight // 2 - self.height // 2))
        
        # Paddle hits ball
        if (
            (self.y - self.height // 2) < self.game.ball.y < (self.y + self.height // 2)
            and (
                (self.index == 0 and self.game.ball.x < self.x) # On or behind left paddle
                or
                (self.index == 1 and self.game.ball.x > self.x) # On or behind right paddle
            )
        ):
            self.game.ball.x = self.x               # Ball may have gone too far already
            self.game.ball.vX = -self.game.ball.vX  # Bounce on paddle
            self.game.ball.speedUp (self)
        
class Ball (Sprite):
    side = 8
    speed = 300 # / s
    
    def __init__ (self, game):
        Sprite.__init__ (self, game, self.side, self.side)
 
    def reset (self):   # Launch according to service direction with random angle offset from horizontal
        angle =  (
            self.game.serviceIndex * Math.PI    # Service direction
            +
            (1 if Math.random () > 0.5 else -1) * Math.random () * Math.atan (fieldHeight / orthoWidth)
        )
        
        Sprite.reset (
            self,
            vX = self.speed * Math.cos (angle),
            vY = self.speed * Math.sin (angle)
        )
        
    def predict (self):
        Sprite.predict (self)           # Integrate velocity to position
        
        if self.x < -orthoWidth // 2:   # If out on left side
            self.game.scored (1)        #   Right player scored
        elif self.x > orthoWidth // 2:
            self.game.scored (0)
            
        if self.y > fieldHeight // 2:   # If it hits top wall
            self.y = fieldHeight // 2   #   It may have gone too far already
            self.vY = -self.vY          #   Bounce
        elif self.y < -fieldHeight // 2:
            self.y = -fieldHeight // 2
            self.vY = -self.vY

    def speedUp (self, bat):
        factor = 1 + 0.15 * (1 - Math.abs (self.y - bat.y) / (bat.height // 2)) ** 2    # Speed will increase more if paddle hit near centre
        
        if Math.abs (self.vX) < 3 * self.speed:
            self.vX *= factor
            self.vY *= factor           

class Scoreboard (Attribute):
    nameShift = 75
    hintShift = 25
            
    def install (self): # Graphical representation of scoreboard are four labels and a separator line
        self.playerLabels = [__new__ (fabric.Text ('Player {}'.format (name), {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}' .format (self.game.canvas.width / 30),
                'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.nameShift)
        })) for name, position in (('AZ keys:', -7/16), ('KM keys:', 1/16))]
        
        self.hintLabel = __new__ (fabric.Text ('[spacebar] starts game, [enter] resets score', {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 70),
                'left': self.game.orthoX (-7/16 * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.hintShift)
        }))
        
        self.image = __new__ (fabric.Line ([
                self.game.orthoX (-orthoWidth // 2), self.game.orthoY (fieldHeight // 2),
                self.game.orthoX (orthoWidth // 2), self.game.orthoY (fieldHeight // 2)
            ],
            {'stroke': 'white'}
        ))
                
    def increment (self, playerIndex):
        self.scores [playerIndex] += 1
        
    def reset (self):
        self.scores = [0, 0]
        Attribute.reset (self)  # Only does a commit here
        
    def commit (self):          # Committing labels is adapting their texts
        self.scoreLabels = [__new__ (fabric.Text ('{}'.format (score), {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30),
                'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.nameShift)
        })) for score, position in zip (self.scores, (-2/16, 6/16))]

    def draw (self):
        for playerLabel, scoreLabel in zip (self.playerLabels, self.scoreLabels):
            self.game.canvas.add (playerLabel)
            self.game.canvas.add (scoreLabel)
            self.game.canvas.add (self.hintLabel)
        self.game.canvas.add (self.image)
        
class Game:
    def __init__ (self):
        self.serviceIndex = 1 if Math.random () > 0.5 else 0    # Index of player that has initial service
        self.pause = True                           # Start game in paused state
        self.keyCode = None
        
        self.textFrame = document.getElementById ('text_frame')
        self.canvasFrame = document.getElementById ('canvas_frame')
        self.buttonsFrame = document.getElementById ('buttons_frame')
        
        self.canvas = __new__ (fabric.Canvas ('canvas', {'backgroundColor': 'black', 'originX': 'center', 'originY': 'center'}))
        self.canvas.onWindowDraw = self.draw        # Install draw callback, will be called asynch
        self.canvas.lineWidth = 2
        self.canvas.clear ()    

        self.attributes = []                        # All attributes will insert themselves here
        self.paddles = [Paddle (self, index) for index in range (2)]    # Pass game as parameter self
        self.ball = Ball (self)
        self.scoreboard = Scoreboard (self)     

        window.setInterval (self.update, 10)    # Install update callback, time in ms
        window.setInterval (self.draw, 20)      # Install draw callback, time in ms
        window.addEventListener ('keydown', self.keydown)
        window.addEventListener ('keyup', self.keyup)
        
        self.buttons = []
        
        for key in ('A', 'Z', 'K', 'M', 'space', 'enter'):
            button = document.getElementById (key)
            button.addEventListener ('mousedown', (lambda aKey: lambda: self.mouseOrTouch (aKey, True)) (key))  # Returns inner lambda
            button.addEventListener ('touchstart', (lambda aKey: lambda: self.mouseOrTouch (aKey, True)) (key))
            button.addEventListener ('mouseup', (lambda aKey: lambda: self.mouseOrTouch (aKey, False)) (key))
            button.addEventListener ('touchend', (lambda aKey: lambda: self.mouseOrTouch (aKey, False)) (key))
            button.style.cursor = 'pointer'
            button.style.userSelect = 'none'
            self.buttons.append (button)
            
        self.time = + __new__ (Date)
        
        window.onresize = self.resize
        self.resize ()
        
    def install (self):
        for attribute in self.attributes:
            attribute.install ()
        
    def mouseOrTouch (self, key, down):
        if down:
            if key == 'space':
                self.keyCode = space
            elif key == 'enter':
                self.keyCode = enter
            else:
                self.keyCode = ord (key)
        else:
            self.keyCode = None
 
    def update (self):                          # Note that update and draw are not synchronized
        oldTime = self.time
        self.time = + __new__ (Date)
        self.deltaT = (self.time - oldTime) / 1000.
        
        if self.pause:                          # If in paused state
            if self.keyCode == space:           #   If spacebar hit
                self.pause = False              #         Start playing
            elif self.keyCode == enter:         #   Else if enter hit
                self.scoreboard.reset ()        #         Reset score
        else:                                   # Else, so if in active state
            for attribute in self.attributes:   #   Compute predicted values
                attribute.predict ()
            
            for attribute in self.attributes:   #   Correct values for bouncing and scoring
                attribute.interact ()
            
            for attribute in self.attributes:   #   Commit them to pyglet for display
                attribute.commit ()
            
    def scored (self, playerIndex):             # Player has scored
        self.scoreboard.increment (playerIndex) # Increment player's points
        self.serviceIndex = 1 - playerIndex     # Grant service to the unlucky player
        
        for paddle in self.paddles:             # Put paddles in rest position
            paddle.reset ()
            
        self.ball.reset ()                      # Put ball in rest position
        self.pause = True                       # Wait for next round
        
    def commit (self):
        for attribute in self.attributes:
            attribute.commit ()
        
    def draw (self):
        self.canvas.clear ()
        for attribute in self.attributes:
            attribute.draw ()
             
    def resize (self):
        self.pageWidth = window.innerWidth
        self.pageHeight = window.innerHeight
        
        self.textTop = 0

        if self.pageHeight > 1.2 * self.pageWidth:
            self.canvasWidth = self.pageWidth
            self.canvasTop = self.textTop + 300
        else:
            self.canvasWidth = 0.6 * self.pageWidth
            self.canvasTop = self.textTop + 200

        self.canvasLeft = 0.5 * (self.pageWidth - self.canvasWidth)
        self.canvasHeight = 0.6 * self.canvasWidth

        self.buttonsTop = self.canvasTop + self.canvasHeight + 50
        self.buttonsWidth = 500
            
        self.textFrame.style.top = self.textTop;
        self.textFrame.style.left = self.canvasLeft + 0.05 * self.canvasWidth
        self.textFrame.style.width = 0.9 * self.canvasWidth
            
        self.canvasFrame.style.top = self.canvasTop
        self.canvasFrame.style.left = self.canvasLeft
        self.canvas.setDimensions ({'width': self.canvasWidth, 'height': self.canvasHeight})
        
        self.buttonsFrame.style.top = self.buttonsTop
        self.buttonsFrame.style.left = 0.5 * (self.pageWidth - self.buttonsWidth)
        self.buttonsFrame.style.width = self.canvasWidth
        
        self.install ()
        self.commit ()
        self.draw ()
        
    def scaleX (self, x):
        return x * (self.canvas.width / orthoWidth)
            
    def scaleY (self, y):
        return y * (self.canvas.height / orthoHeight)   
        
    def orthoX (self, x):
        return self.scaleX (x + orthoWidth // 2)
        
    def orthoY (self, y):
        return self.scaleY (orthoHeight - fieldHeight // 2 - y)
                
    def keydown (self, event):
        self.keyCode = event.keyCode
        
    def keyup (self, event):
        self.keyCode = None 
        
game = Game ()  # Create and run game
”h]”hX9  __pragma__ ('skip')
document = window = Math = Date = 0 # Prevent complaints by optional static checker
__pragma__ ('noskip')

__pragma__ ('noalias', 'clear')

from com.fabricjs import fabric

orthoWidth = 1000
orthoHeight = 750
fieldHeight = 650

enter, esc, space = 13, 27, 32

window.onkeydown = lambda event: event.keyCode != space # Prevent scrolldown on spacebar press

class Attribute:    # Attribute in the gaming sense of the word, rather than of an object
    def __init__ (self, game):
        self.game = game                    # Attribute knows game it's part of
        self.game.attributes.append (self)  # Game knows all its attributes
        self.install ()                     # Put in place graphical representation of attribute
        self.reset ()                       # Reset attribute to start position
                
    def reset (self):       # Restore starting positions or score, then commit to fabric
        self.commit ()      # Nothing to restore for the Attribute base class
                
    def predict (self):
        pass
                
    def interact (self):
        pass
        
    def commit (self):
        pass

class Sprite (Attribute):   # Here, a sprite is an attribute that can move
    def __init__ (self, game, width, height):
        self.width = width
        self.height = height
        Attribute.__init__ (self, game)
        
    def install (self):     # The sprite holds an image that fabric can display
        self.image = __new__ (fabric.Rect ({
            'width': self.game.scaleX (self.width), 'height': self.game.scaleY (self.height),
            'originX': 'center', 'originY': 'center', 'fill': 'white'
        }))
        
    __pragma__ ('kwargs')
    def reset (self, vX = 0, vY = 0, x = 0, y = 0):
        self.vX = vX        # Speed
        self.vY = vY
        
        self.x = x          # Predicted position, can be commit, no bouncing initially
        self.y = y
        
        Attribute.reset (self)
    __pragma__ ('nokwargs')
        
    def predict (self):     # Predict position, do not yet commit, bouncing may alter it
        self.x += self.vX * self.game.deltaT
        self.y += self.vY * self.game.deltaT

    def commit (self):      # Update fabric image for asynch draw
        self.image.left = self.game.orthoX (self.x)
        self.image.top = self.game.orthoY (self.y)
        
    def draw (self):
        self.game.canvas.add (self.image)
         
class Paddle (Sprite):
    margin = 30 # Distance of paddles from walls
    width = 10
    height = 100
    speed = 400 # / s
    
    def __init__ (self, game, index):
        self.index = index  # Paddle knows its player index, 0 == left, 1 == right
        Sprite.__init__ (self, game, self.width, self.height)
        
    def reset (self):       # Put paddle in rest position, dependent on player index
        Sprite.reset (
            self,
            x = orthoWidth // 2 - self.margin if self.index else -orthoWidth // 2 + self.margin,
            y = 0
        )
        
    def predict (self): # Let paddle react on keys
        self.vY = 0
        
        if self.index:                          # Right player
            if self.game.keyCode == ord ('K'):  # Letter K pressed
                self.vY = self.speed
            elif self.game.keyCode == ord ('M'):
                self.vY = -self.speed
        else:                                   # Left player
            if self.game.keyCode == ord ('A'):
                self.vY = self.speed
            elif self.game.keyCode == ord ('Z'):
                self.vY = -self.speed
                
        Sprite.predict (self)                   # Do not yet commit, paddle may bounce with walls

    def interact (self):    # Paddles and ball assumed infinitely thin
        # Paddle touches wall
        self.y = Math.max (self.height // 2 - fieldHeight // 2, Math.min (self.y, fieldHeight // 2 - self.height // 2))
        
        # Paddle hits ball
        if (
            (self.y - self.height // 2) < self.game.ball.y < (self.y + self.height // 2)
            and (
                (self.index == 0 and self.game.ball.x < self.x) # On or behind left paddle
                or
                (self.index == 1 and self.game.ball.x > self.x) # On or behind right paddle
            )
        ):
            self.game.ball.x = self.x               # Ball may have gone too far already
            self.game.ball.vX = -self.game.ball.vX  # Bounce on paddle
            self.game.ball.speedUp (self)
        
class Ball (Sprite):
    side = 8
    speed = 300 # / s
    
    def __init__ (self, game):
        Sprite.__init__ (self, game, self.side, self.side)
 
    def reset (self):   # Launch according to service direction with random angle offset from horizontal
        angle =  (
            self.game.serviceIndex * Math.PI    # Service direction
            +
            (1 if Math.random () > 0.5 else -1) * Math.random () * Math.atan (fieldHeight / orthoWidth)
        )
        
        Sprite.reset (
            self,
            vX = self.speed * Math.cos (angle),
            vY = self.speed * Math.sin (angle)
        )
        
    def predict (self):
        Sprite.predict (self)           # Integrate velocity to position
        
        if self.x < -orthoWidth // 2:   # If out on left side
            self.game.scored (1)        #   Right player scored
        elif self.x > orthoWidth // 2:
            self.game.scored (0)
            
        if self.y > fieldHeight // 2:   # If it hits top wall
            self.y = fieldHeight // 2   #   It may have gone too far already
            self.vY = -self.vY          #   Bounce
        elif self.y < -fieldHeight // 2:
            self.y = -fieldHeight // 2
            self.vY = -self.vY

    def speedUp (self, bat):
        factor = 1 + 0.15 * (1 - Math.abs (self.y - bat.y) / (bat.height // 2)) ** 2    # Speed will increase more if paddle hit near centre
        
        if Math.abs (self.vX) < 3 * self.speed:
            self.vX *= factor
            self.vY *= factor           

class Scoreboard (Attribute):
    nameShift = 75
    hintShift = 25
            
    def install (self): # Graphical representation of scoreboard are four labels and a separator line
        self.playerLabels = [__new__ (fabric.Text ('Player {}'.format (name), {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}' .format (self.game.canvas.width / 30),
                'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.nameShift)
        })) for name, position in (('AZ keys:', -7/16), ('KM keys:', 1/16))]
        
        self.hintLabel = __new__ (fabric.Text ('[spacebar] starts game, [enter] resets score', {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 70),
                'left': self.game.orthoX (-7/16 * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.hintShift)
        }))
        
        self.image = __new__ (fabric.Line ([
                self.game.orthoX (-orthoWidth // 2), self.game.orthoY (fieldHeight // 2),
                self.game.orthoX (orthoWidth // 2), self.game.orthoY (fieldHeight // 2)
            ],
            {'stroke': 'white'}
        ))
                
    def increment (self, playerIndex):
        self.scores [playerIndex] += 1
        
    def reset (self):
        self.scores = [0, 0]
        Attribute.reset (self)  # Only does a commit here
        
    def commit (self):          # Committing labels is adapting their texts
        self.scoreLabels = [__new__ (fabric.Text ('{}'.format (score), {
                'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30),
                'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (fieldHeight // 2 + self.nameShift)
        })) for score, position in zip (self.scores, (-2/16, 6/16))]

    def draw (self):
        for playerLabel, scoreLabel in zip (self.playerLabels, self.scoreLabels):
            self.game.canvas.add (playerLabel)
            self.game.canvas.add (scoreLabel)
            self.game.canvas.add (self.hintLabel)
        self.game.canvas.add (self.image)
        
class Game:
    def __init__ (self):
        self.serviceIndex = 1 if Math.random () > 0.5 else 0    # Index of player that has initial service
        self.pause = True                           # Start game in paused state
        self.keyCode = None
        
        self.textFrame = document.getElementById ('text_frame')
        self.canvasFrame = document.getElementById ('canvas_frame')
        self.buttonsFrame = document.getElementById ('buttons_frame')
        
        self.canvas = __new__ (fabric.Canvas ('canvas', {'backgroundColor': 'black', 'originX': 'center', 'originY': 'center'}))
        self.canvas.onWindowDraw = self.draw        # Install draw callback, will be called asynch
        self.canvas.lineWidth = 2
        self.canvas.clear ()    

        self.attributes = []                        # All attributes will insert themselves here
        self.paddles = [Paddle (self, index) for index in range (2)]    # Pass game as parameter self
        self.ball = Ball (self)
        self.scoreboard = Scoreboard (self)     

        window.setInterval (self.update, 10)    # Install update callback, time in ms
        window.setInterval (self.draw, 20)      # Install draw callback, time in ms
        window.addEventListener ('keydown', self.keydown)
        window.addEventListener ('keyup', self.keyup)
        
        self.buttons = []
        
        for key in ('A', 'Z', 'K', 'M', 'space', 'enter'):
            button = document.getElementById (key)
            button.addEventListener ('mousedown', (lambda aKey: lambda: self.mouseOrTouch (aKey, True)) (key))  # Returns inner lambda
            button.addEventListener ('touchstart', (lambda aKey: lambda: self.mouseOrTouch (aKey, True)) (key))
            button.addEventListener ('mouseup', (lambda aKey: lambda: self.mouseOrTouch (aKey, False)) (key))
            button.addEventListener ('touchend', (lambda aKey: lambda: self.mouseOrTouch (aKey, False)) (key))
            button.style.cursor = 'pointer'
            button.style.userSelect = 'none'
            self.buttons.append (button)
            
        self.time = + __new__ (Date)
        
        window.onresize = self.resize
        self.resize ()
        
    def install (self):
        for attribute in self.attributes:
            attribute.install ()
        
    def mouseOrTouch (self, key, down):
        if down:
            if key == 'space':
                self.keyCode = space
            elif key == 'enter':
                self.keyCode = enter
            else:
                self.keyCode = ord (key)
        else:
            self.keyCode = None
 
    def update (self):                          # Note that update and draw are not synchronized
        oldTime = self.time
        self.time = + __new__ (Date)
        self.deltaT = (self.time - oldTime) / 1000.
        
        if self.pause:                          # If in paused state
            if self.keyCode == space:           #   If spacebar hit
                self.pause = False              #         Start playing
            elif self.keyCode == enter:         #   Else if enter hit
                self.scoreboard.reset ()        #         Reset score
        else:                                   # Else, so if in active state
            for attribute in self.attributes:   #   Compute predicted values
                attribute.predict ()
            
            for attribute in self.attributes:   #   Correct values for bouncing and scoring
                attribute.interact ()
            
            for attribute in self.attributes:   #   Commit them to pyglet for display
                attribute.commit ()
            
    def scored (self, playerIndex):             # Player has scored
        self.scoreboard.increment (playerIndex) # Increment player's points
        self.serviceIndex = 1 - playerIndex     # Grant service to the unlucky player
        
        for paddle in self.paddles:             # Put paddles in rest position
            paddle.reset ()
            
        self.ball.reset ()                      # Put ball in rest position
        self.pause = True                       # Wait for next round
        
    def commit (self):
        for attribute in self.attributes:
            attribute.commit ()
        
    def draw (self):
        self.canvas.clear ()
        for attribute in self.attributes:
            attribute.draw ()
             
    def resize (self):
        self.pageWidth = window.innerWidth
        self.pageHeight = window.innerHeight
        
        self.textTop = 0

        if self.pageHeight > 1.2 * self.pageWidth:
            self.canvasWidth = self.pageWidth
            self.canvasTop = self.textTop + 300
        else:
            self.canvasWidth = 0.6 * self.pageWidth
            self.canvasTop = self.textTop + 200

        self.canvasLeft = 0.5 * (self.pageWidth - self.canvasWidth)
        self.canvasHeight = 0.6 * self.canvasWidth

        self.buttonsTop = self.canvasTop + self.canvasHeight + 50
        self.buttonsWidth = 500
            
        self.textFrame.style.top = self.textTop;
        self.textFrame.style.left = self.canvasLeft + 0.05 * self.canvasWidth
        self.textFrame.style.width = 0.9 * self.canvasWidth
            
        self.canvasFrame.style.top = self.canvasTop
        self.canvasFrame.style.left = self.canvasLeft
        self.canvas.setDimensions ({'width': self.canvasWidth, 'height': self.canvasHeight})
        
        self.buttonsFrame.style.top = self.buttonsTop
        self.buttonsFrame.style.left = 0.5 * (self.pageWidth - self.buttonsWidth)
        self.buttonsFrame.style.width = self.canvasWidth
        
        self.install ()
        self.commit ()
        self.draw ()
        
    def scaleX (self, x):
        return x * (self.canvas.width / orthoWidth)
            
    def scaleY (self, y):
        return y * (self.canvas.height / orthoHeight)   
        
    def orthoX (self, x):
        return self.scaleX (x + orthoWidth // 2)
        
    def orthoY (self, y):
        return self.scaleY (orthoHeight - fieldHeight // 2 - y)
                
    def keydown (self, event):
        self.keyCode = event.keyCode
        
    def keyup (self, event):
        self.keyCode = None 
        
game = Game ()  # Create and run game
”…””}”(hhhjï  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒK/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/pong/pong.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK:hjÞ  ubeh}”(h ]”Œid4”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjÛ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjÖ  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒpong.js”h]”hŒpong.js”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK:hj  ubj`  )”}”(hX˜D  // Transcrypt'ed from Python, 2021-06-01 16:19:09
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {fabric} from './com.fabricjs.js';
var __name__ = '__main__';
export var orthoWidth = 1000;
export var orthoHeight = 750;
export var fieldHeight = 650;
var __left0__ = tuple ([13, 27, 32]);
export var enter = __left0__ [0];
export var esc = __left0__ [1];
export var space = __left0__ [2];
window.onkeydown = (function __lambda__ (event) {
    return event.keyCode != space;
});
export var Attribute =  __class__ ('Attribute', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, game) {
        self.game = game;
        self.game.attributes.append (self);
        self.install ();
        self.reset ();
    });},
    get reset () {return __get__ (this, function (self) {
        self.commit ();
    });},
    get predict () {return __get__ (this, function (self) {
        // pass;
    });},
    get interact () {return __get__ (this, function (self) {
        // pass;
    });},
    get commit () {return __get__ (this, function (self) {
        // pass;
    });}
});
export var Sprite =  __class__ ('Sprite', [Attribute], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, game, width, height) {
        self.width = width;
        self.height = height;
        Attribute.__init__ (self, game);
    });},
    get install () {return __get__ (this, function (self) {
        self.image = new fabric.Rect (dict ({'width': self.game.scaleX (self.width), 'height': self.game.scaleY (self.height), 'originX': 'center', 'originY': 'center', 'fill': 'white'}));
    });},
    get reset () {return __get__ (this, function (self, vX, vY, x, y) {
        if (typeof vX == 'undefined' || (vX != null && vX.hasOwnProperty ("__kwargtrans__"))) {;
            var vX = 0;
        };
        if (typeof vY == 'undefined' || (vY != null && vY.hasOwnProperty ("__kwargtrans__"))) {;
            var vY = 0;
        };
        if (typeof x == 'undefined' || (x != null && x.hasOwnProperty ("__kwargtrans__"))) {;
            var x = 0;
        };
        if (typeof y == 'undefined' || (y != null && y.hasOwnProperty ("__kwargtrans__"))) {;
            var y = 0;
        };
        if (arguments.length) {
            var __ilastarg0__ = arguments.length - 1;
            if (arguments [__ilastarg0__] && arguments [__ilastarg0__].hasOwnProperty ("__kwargtrans__")) {
                var __allkwargs0__ = arguments [__ilastarg0__--];
                for (var __attrib0__ in __allkwargs0__) {
                    switch (__attrib0__) {
                        case 'self': var self = __allkwargs0__ [__attrib0__]; break;
                        case 'vX': var vX = __allkwargs0__ [__attrib0__]; break;
                        case 'vY': var vY = __allkwargs0__ [__attrib0__]; break;
                        case 'x': var x = __allkwargs0__ [__attrib0__]; break;
                        case 'y': var y = __allkwargs0__ [__attrib0__]; break;
                    }
                }
            }
        }
        else {
        }
        self.vX = vX;
        self.vY = vY;
        self.x = x;
        self.y = y;
        Attribute.reset (self);
    });},
    get predict () {return __get__ (this, function (self) {
        self.x += self.vX * self.game.deltaT;
        self.y += self.vY * self.game.deltaT;
    });},
    get commit () {return __get__ (this, function (self) {
        self.image.left = self.game.orthoX (self.x);
        self.image.top = self.game.orthoY (self.y);
    });},
    get draw () {return __get__ (this, function (self) {
        self.game.canvas.add (self.image);
    });}
});
export var Paddle =  __class__ ('Paddle', [Sprite], {
    __module__: __name__,
    margin: 30,
    width: 10,
    height: 100,
    speed: 400,
    get __init__ () {return __get__ (this, function (self, game, index) {
        self.index = index;
        Sprite.__init__ (self, game, self.width, self.height);
    });},
    get reset () {return __get__ (this, function (self) {
        Sprite.reset (self, __kwargtrans__ ({x: (self.index ? Math.floor (orthoWidth / 2) - self.margin : Math.floor (-(orthoWidth) / 2) + self.margin), y: 0}));
    });},
    get predict () {return __get__ (this, function (self) {
        self.vY = 0;
        if (self.index) {
            if (self.game.keyCode == ord ('K')) {
                self.vY = self.speed;
            }
            else if (self.game.keyCode == ord ('M')) {
                self.vY = -(self.speed);
            }
        }
        else if (self.game.keyCode == ord ('A')) {
            self.vY = self.speed;
        }
        else if (self.game.keyCode == ord ('Z')) {
            self.vY = -(self.speed);
        }
        Sprite.predict (self);
    });},
    get interact () {return __get__ (this, function (self) {
        self.y = Math.max (Math.floor (self.height / 2) - Math.floor (fieldHeight / 2), Math.min (self.y, Math.floor (fieldHeight / 2) - Math.floor (self.height / 2)));
        if ((self.y - Math.floor (self.height / 2) < self.game.ball.y && self.game.ball.y < self.y + Math.floor (self.height / 2)) && (self.index == 0 && self.game.ball.x < self.x || self.index == 1 && self.game.ball.x > self.x)) {
            self.game.ball.x = self.x;
            self.game.ball.vX = -(self.game.ball.vX);
            self.game.ball.speedUp (self);
        }
    });}
});
export var Ball =  __class__ ('Ball', [Sprite], {
    __module__: __name__,
    side: 8,
    speed: 300,
    get __init__ () {return __get__ (this, function (self, game) {
        Sprite.__init__ (self, game, self.side, self.side);
    });},
    get reset () {return __get__ (this, function (self) {
        var angle = self.game.serviceIndex * Math.PI + ((Math.random () > 0.5 ? 1 : -(1)) * Math.random ()) * Math.atan (fieldHeight / orthoWidth);
        Sprite.reset (self, __kwargtrans__ ({vX: self.speed * Math.cos (angle), vY: self.speed * Math.sin (angle)}));
    });},
    get predict () {return __get__ (this, function (self) {
        Sprite.predict (self);
        if (self.x < Math.floor (-(orthoWidth) / 2)) {
            self.game.scored (1);
        }
        else if (self.x > Math.floor (orthoWidth / 2)) {
            self.game.scored (0);
        }
        if (self.y > Math.floor (fieldHeight / 2)) {
            self.y = Math.floor (fieldHeight / 2);
            self.vY = -(self.vY);
        }
        else if (self.y < Math.floor (-(fieldHeight) / 2)) {
            self.y = Math.floor (-(fieldHeight) / 2);
            self.vY = -(self.vY);
        }
    });},
    get speedUp () {return __get__ (this, function (self, bat) {
        var factor = 1 + 0.15 * Math.pow (1 - Math.abs (self.y - bat.y) / (Math.floor (bat.height / 2)), 2);
        if (Math.abs (self.vX) < 3 * self.speed) {
            self.vX *= factor;
            self.vY *= factor;
        }
    });}
});
export var Scoreboard =  __class__ ('Scoreboard', [Attribute], {
    __module__: __name__,
    nameShift: 75,
    hintShift: 25,
    get install () {return __get__ (this, function (self) {
        self.playerLabels = (function () {
            var __accu0__ = [];
            for (var [py_name, position] of tuple ([tuple (['AZ keys:', -(7) / 16]), tuple (['KM keys:', 1 / 16])])) {
                __accu0__.append (new fabric.Text ('Player {}'.format (py_name), dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30), 'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.nameShift)})));
            }
            return __accu0__;
        }) ();
        self.hintLabel = new fabric.Text ('[spacebar] starts game, [enter] resets score', dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 70), 'left': self.game.orthoX ((-(7) / 16) * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.hintShift)}));
        self.image = new fabric.Line ([self.game.orthoX (Math.floor (-(orthoWidth) / 2)), self.game.orthoY (Math.floor (fieldHeight / 2)), self.game.orthoX (Math.floor (orthoWidth / 2)), self.game.orthoY (Math.floor (fieldHeight / 2))], dict ({'stroke': 'white'}));
    });},
    get increment () {return __get__ (this, function (self, playerIndex) {
        self.scores [playerIndex]++;
    });},
    get reset () {return __get__ (this, function (self) {
        self.scores = [0, 0];
        Attribute.reset (self);
    });},
    get commit () {return __get__ (this, function (self) {
        self.scoreLabels = (function () {
            var __accu0__ = [];
            for (var [score, position] of zip (self.scores, tuple ([-(2) / 16, 6 / 16]))) {
                __accu0__.append (new fabric.Text ('{}'.format (score), dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30), 'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.nameShift)})));
            }
            return __accu0__;
        }) ();
    });},
    get draw () {return __get__ (this, function (self) {
        for (var [playerLabel, scoreLabel] of zip (self.playerLabels, self.scoreLabels)) {
            self.game.canvas.add (playerLabel);
            self.game.canvas.add (scoreLabel);
            self.game.canvas.add (self.hintLabel);
        }
        self.game.canvas.add (self.image);
    });}
});
export var Game =  __class__ ('Game', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self) {
        self.serviceIndex = (Math.random () > 0.5 ? 1 : 0);
        self.pause = true;
        self.keyCode = null;
        self.textFrame = document.getElementById ('text_frame');
        self.canvasFrame = document.getElementById ('canvas_frame');
        self.buttonsFrame = document.getElementById ('buttons_frame');
        self.canvas = new fabric.Canvas ('canvas', dict ({'backgroundColor': 'black', 'originX': 'center', 'originY': 'center'}));
        self.canvas.onWindowDraw = self.draw;
        self.canvas.lineWidth = 2;
        self.canvas.clear ();
        self.attributes = [];
        self.paddles = (function () {
            var __accu0__ = [];
            for (var index = 0; index < 2; index++) {
                __accu0__.append (Paddle (self, index));
            }
            return __accu0__;
        }) ();
        self.ball = Ball (self);
        self.scoreboard = Scoreboard (self);
        window.setInterval (self.py_update, 10);
        window.setInterval (self.draw, 20);
        window.addEventListener ('keydown', self.keydown);
        window.addEventListener ('keyup', self.keyup);
        self.buttons = [];
        for (var key of tuple (['A', 'Z', 'K', 'M', 'space', 'enter'])) {
            var button = document.getElementById (key);
            button.addEventListener ('mousedown', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, true);
                });
            }) (key));
            button.addEventListener ('touchstart', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, true);
                });
            }) (key));
            button.addEventListener ('mouseup', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, false);
                });
            }) (key));
            button.addEventListener ('touchend', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, false);
                });
            }) (key));
            button.style.cursor = 'pointer';
            button.style.userSelect = 'none';
            self.buttons.append (button);
        }
        self.time = +(new Date);
        window.onresize = self.resize;
        self.resize ();
    });},
    get install () {return __get__ (this, function (self) {
        for (var attribute of self.attributes) {
            attribute.install ();
        }
    });},
    get mouseOrTouch () {return __get__ (this, function (self, key, down) {
        if (down) {
            if (key == 'space') {
                self.keyCode = space;
            }
            else if (key == 'enter') {
                self.keyCode = enter;
            }
            else {
                self.keyCode = ord (key);
            }
        }
        else {
            self.keyCode = null;
        }
    });},
    get py_update () {return __get__ (this, function (self) {
        var oldTime = self.time;
        self.time = +(new Date);
        self.deltaT = (self.time - oldTime) / 1000.0;
        if (self.pause) {
            if (self.keyCode == space) {
                self.pause = false;
            }
            else if (self.keyCode == enter) {
                self.scoreboard.reset ();
            }
        }
        else {
            for (var attribute of self.attributes) {
                attribute.predict ();
            }
            for (var attribute of self.attributes) {
                attribute.interact ();
            }
            for (var attribute of self.attributes) {
                attribute.commit ();
            }
        }
    });},
    get scored () {return __get__ (this, function (self, playerIndex) {
        self.scoreboard.increment (playerIndex);
        self.serviceIndex = 1 - playerIndex;
        for (var paddle of self.paddles) {
            paddle.reset ();
        }
        self.ball.reset ();
        self.pause = true;
    });},
    get commit () {return __get__ (this, function (self) {
        for (var attribute of self.attributes) {
            attribute.commit ();
        }
    });},
    get draw () {return __get__ (this, function (self) {
        self.canvas.clear ();
        for (var attribute of self.attributes) {
            attribute.draw ();
        }
    });},
    get resize () {return __get__ (this, function (self) {
        self.pageWidth = window.innerWidth;
        self.pageHeight = window.innerHeight;
        self.textTop = 0;
        if (self.pageHeight > 1.2 * self.pageWidth) {
            self.canvasWidth = self.pageWidth;
            self.canvasTop = self.textTop + 300;
        }
        else {
            self.canvasWidth = 0.6 * self.pageWidth;
            self.canvasTop = self.textTop + 200;
        }
        self.canvasLeft = 0.5 * (self.pageWidth - self.canvasWidth);
        self.canvasHeight = 0.6 * self.canvasWidth;
        self.buttonsTop = (self.canvasTop + self.canvasHeight) + 50;
        self.buttonsWidth = 500;
        self.textFrame.style.top = self.textTop;
        self.textFrame.style.left = self.canvasLeft + 0.05 * self.canvasWidth;
        self.textFrame.style.width = 0.9 * self.canvasWidth;
        self.canvasFrame.style.top = self.canvasTop;
        self.canvasFrame.style.left = self.canvasLeft;
        self.canvas.setDimensions (dict ({'width': self.canvasWidth, 'height': self.canvasHeight}));
        self.buttonsFrame.style.top = self.buttonsTop;
        self.buttonsFrame.style.left = 0.5 * (self.pageWidth - self.buttonsWidth);
        self.buttonsFrame.style.width = self.canvasWidth;
        self.install ();
        self.commit ();
        self.draw ();
    });},
    get scaleX () {return __get__ (this, function (self, x) {
        return x * (self.canvas.width / orthoWidth);
    });},
    get scaleY () {return __get__ (this, function (self, y) {
        return y * (self.canvas.height / orthoHeight);
    });},
    get orthoX () {return __get__ (this, function (self, x) {
        return self.scaleX (x + Math.floor (orthoWidth / 2));
    });},
    get orthoY () {return __get__ (this, function (self, y) {
        return self.scaleY ((orthoHeight - Math.floor (fieldHeight / 2)) - y);
    });},
    get keydown () {return __get__ (this, function (self, event) {
        self.keyCode = event.keyCode;
    });},
    get keyup () {return __get__ (this, function (self, event) {
        self.keyCode = null;
    });}
});
export var game = Game ();

//# sourceMappingURL=pong.map”•û
     h]”hX˜D  // Transcrypt'ed from Python, 2021-06-01 16:19:09
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {fabric} from './com.fabricjs.js';
var __name__ = '__main__';
export var orthoWidth = 1000;
export var orthoHeight = 750;
export var fieldHeight = 650;
var __left0__ = tuple ([13, 27, 32]);
export var enter = __left0__ [0];
export var esc = __left0__ [1];
export var space = __left0__ [2];
window.onkeydown = (function __lambda__ (event) {
    return event.keyCode != space;
});
export var Attribute =  __class__ ('Attribute', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, game) {
        self.game = game;
        self.game.attributes.append (self);
        self.install ();
        self.reset ();
    });},
    get reset () {return __get__ (this, function (self) {
        self.commit ();
    });},
    get predict () {return __get__ (this, function (self) {
        // pass;
    });},
    get interact () {return __get__ (this, function (self) {
        // pass;
    });},
    get commit () {return __get__ (this, function (self) {
        // pass;
    });}
});
export var Sprite =  __class__ ('Sprite', [Attribute], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, game, width, height) {
        self.width = width;
        self.height = height;
        Attribute.__init__ (self, game);
    });},
    get install () {return __get__ (this, function (self) {
        self.image = new fabric.Rect (dict ({'width': self.game.scaleX (self.width), 'height': self.game.scaleY (self.height), 'originX': 'center', 'originY': 'center', 'fill': 'white'}));
    });},
    get reset () {return __get__ (this, function (self, vX, vY, x, y) {
        if (typeof vX == 'undefined' || (vX != null && vX.hasOwnProperty ("__kwargtrans__"))) {;
            var vX = 0;
        };
        if (typeof vY == 'undefined' || (vY != null && vY.hasOwnProperty ("__kwargtrans__"))) {;
            var vY = 0;
        };
        if (typeof x == 'undefined' || (x != null && x.hasOwnProperty ("__kwargtrans__"))) {;
            var x = 0;
        };
        if (typeof y == 'undefined' || (y != null && y.hasOwnProperty ("__kwargtrans__"))) {;
            var y = 0;
        };
        if (arguments.length) {
            var __ilastarg0__ = arguments.length - 1;
            if (arguments [__ilastarg0__] && arguments [__ilastarg0__].hasOwnProperty ("__kwargtrans__")) {
                var __allkwargs0__ = arguments [__ilastarg0__--];
                for (var __attrib0__ in __allkwargs0__) {
                    switch (__attrib0__) {
                        case 'self': var self = __allkwargs0__ [__attrib0__]; break;
                        case 'vX': var vX = __allkwargs0__ [__attrib0__]; break;
                        case 'vY': var vY = __allkwargs0__ [__attrib0__]; break;
                        case 'x': var x = __allkwargs0__ [__attrib0__]; break;
                        case 'y': var y = __allkwargs0__ [__attrib0__]; break;
                    }
                }
            }
        }
        else {
        }
        self.vX = vX;
        self.vY = vY;
        self.x = x;
        self.y = y;
        Attribute.reset (self);
    });},
    get predict () {return __get__ (this, function (self) {
        self.x += self.vX * self.game.deltaT;
        self.y += self.vY * self.game.deltaT;
    });},
    get commit () {return __get__ (this, function (self) {
        self.image.left = self.game.orthoX (self.x);
        self.image.top = self.game.orthoY (self.y);
    });},
    get draw () {return __get__ (this, function (self) {
        self.game.canvas.add (self.image);
    });}
});
export var Paddle =  __class__ ('Paddle', [Sprite], {
    __module__: __name__,
    margin: 30,
    width: 10,
    height: 100,
    speed: 400,
    get __init__ () {return __get__ (this, function (self, game, index) {
        self.index = index;
        Sprite.__init__ (self, game, self.width, self.height);
    });},
    get reset () {return __get__ (this, function (self) {
        Sprite.reset (self, __kwargtrans__ ({x: (self.index ? Math.floor (orthoWidth / 2) - self.margin : Math.floor (-(orthoWidth) / 2) + self.margin), y: 0}));
    });},
    get predict () {return __get__ (this, function (self) {
        self.vY = 0;
        if (self.index) {
            if (self.game.keyCode == ord ('K')) {
                self.vY = self.speed;
            }
            else if (self.game.keyCode == ord ('M')) {
                self.vY = -(self.speed);
            }
        }
        else if (self.game.keyCode == ord ('A')) {
            self.vY = self.speed;
        }
        else if (self.game.keyCode == ord ('Z')) {
            self.vY = -(self.speed);
        }
        Sprite.predict (self);
    });},
    get interact () {return __get__ (this, function (self) {
        self.y = Math.max (Math.floor (self.height / 2) - Math.floor (fieldHeight / 2), Math.min (self.y, Math.floor (fieldHeight / 2) - Math.floor (self.height / 2)));
        if ((self.y - Math.floor (self.height / 2) < self.game.ball.y && self.game.ball.y < self.y + Math.floor (self.height / 2)) && (self.index == 0 && self.game.ball.x < self.x || self.index == 1 && self.game.ball.x > self.x)) {
            self.game.ball.x = self.x;
            self.game.ball.vX = -(self.game.ball.vX);
            self.game.ball.speedUp (self);
        }
    });}
});
export var Ball =  __class__ ('Ball', [Sprite], {
    __module__: __name__,
    side: 8,
    speed: 300,
    get __init__ () {return __get__ (this, function (self, game) {
        Sprite.__init__ (self, game, self.side, self.side);
    });},
    get reset () {return __get__ (this, function (self) {
        var angle = self.game.serviceIndex * Math.PI + ((Math.random () > 0.5 ? 1 : -(1)) * Math.random ()) * Math.atan (fieldHeight / orthoWidth);
        Sprite.reset (self, __kwargtrans__ ({vX: self.speed * Math.cos (angle), vY: self.speed * Math.sin (angle)}));
    });},
    get predict () {return __get__ (this, function (self) {
        Sprite.predict (self);
        if (self.x < Math.floor (-(orthoWidth) / 2)) {
            self.game.scored (1);
        }
        else if (self.x > Math.floor (orthoWidth / 2)) {
            self.game.scored (0);
        }
        if (self.y > Math.floor (fieldHeight / 2)) {
            self.y = Math.floor (fieldHeight / 2);
            self.vY = -(self.vY);
        }
        else if (self.y < Math.floor (-(fieldHeight) / 2)) {
            self.y = Math.floor (-(fieldHeight) / 2);
            self.vY = -(self.vY);
        }
    });},
    get speedUp () {return __get__ (this, function (self, bat) {
        var factor = 1 + 0.15 * Math.pow (1 - Math.abs (self.y - bat.y) / (Math.floor (bat.height / 2)), 2);
        if (Math.abs (self.vX) < 3 * self.speed) {
            self.vX *= factor;
            self.vY *= factor;
        }
    });}
});
export var Scoreboard =  __class__ ('Scoreboard', [Attribute], {
    __module__: __name__,
    nameShift: 75,
    hintShift: 25,
    get install () {return __get__ (this, function (self) {
        self.playerLabels = (function () {
            var __accu0__ = [];
            for (var [py_name, position] of tuple ([tuple (['AZ keys:', -(7) / 16]), tuple (['KM keys:', 1 / 16])])) {
                __accu0__.append (new fabric.Text ('Player {}'.format (py_name), dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30), 'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.nameShift)})));
            }
            return __accu0__;
        }) ();
        self.hintLabel = new fabric.Text ('[spacebar] starts game, [enter] resets score', dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 70), 'left': self.game.orthoX ((-(7) / 16) * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.hintShift)}));
        self.image = new fabric.Line ([self.game.orthoX (Math.floor (-(orthoWidth) / 2)), self.game.orthoY (Math.floor (fieldHeight / 2)), self.game.orthoX (Math.floor (orthoWidth / 2)), self.game.orthoY (Math.floor (fieldHeight / 2))], dict ({'stroke': 'white'}));
    });},
    get increment () {return __get__ (this, function (self, playerIndex) {
        self.scores [playerIndex]++;
    });},
    get reset () {return __get__ (this, function (self) {
        self.scores = [0, 0];
        Attribute.reset (self);
    });},
    get commit () {return __get__ (this, function (self) {
        self.scoreLabels = (function () {
            var __accu0__ = [];
            for (var [score, position] of zip (self.scores, tuple ([-(2) / 16, 6 / 16]))) {
                __accu0__.append (new fabric.Text ('{}'.format (score), dict ({'fill': 'white', 'fontFamily': 'arial', 'fontSize': '{}'.format (self.game.canvas.width / 30), 'left': self.game.orthoX (position * orthoWidth), 'top': self.game.orthoY (Math.floor (fieldHeight / 2) + self.nameShift)})));
            }
            return __accu0__;
        }) ();
    });},
    get draw () {return __get__ (this, function (self) {
        for (var [playerLabel, scoreLabel] of zip (self.playerLabels, self.scoreLabels)) {
            self.game.canvas.add (playerLabel);
            self.game.canvas.add (scoreLabel);
            self.game.canvas.add (self.hintLabel);
        }
        self.game.canvas.add (self.image);
    });}
});
export var Game =  __class__ ('Game', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self) {
        self.serviceIndex = (Math.random () > 0.5 ? 1 : 0);
        self.pause = true;
        self.keyCode = null;
        self.textFrame = document.getElementById ('text_frame');
        self.canvasFrame = document.getElementById ('canvas_frame');
        self.buttonsFrame = document.getElementById ('buttons_frame');
        self.canvas = new fabric.Canvas ('canvas', dict ({'backgroundColor': 'black', 'originX': 'center', 'originY': 'center'}));
        self.canvas.onWindowDraw = self.draw;
        self.canvas.lineWidth = 2;
        self.canvas.clear ();
        self.attributes = [];
        self.paddles = (function () {
            var __accu0__ = [];
            for (var index = 0; index < 2; index++) {
                __accu0__.append (Paddle (self, index));
            }
            return __accu0__;
        }) ();
        self.ball = Ball (self);
        self.scoreboard = Scoreboard (self);
        window.setInterval (self.py_update, 10);
        window.setInterval (self.draw, 20);
        window.addEventListener ('keydown', self.keydown);
        window.addEventListener ('keyup', self.keyup);
        self.buttons = [];
        for (var key of tuple (['A', 'Z', 'K', 'M', 'space', 'enter'])) {
            var button = document.getElementById (key);
            button.addEventListener ('mousedown', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, true);
                });
            }) (key));
            button.addEventListener ('touchstart', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, true);
                });
            }) (key));
            button.addEventListener ('mouseup', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, false);
                });
            }) (key));
            button.addEventListener ('touchend', (function __lambda__ (aKey) {
                return (function __lambda__ () {
                    return self.mouseOrTouch (aKey, false);
                });
            }) (key));
            button.style.cursor = 'pointer';
            button.style.userSelect = 'none';
            self.buttons.append (button);
        }
        self.time = +(new Date);
        window.onresize = self.resize;
        self.resize ();
    });},
    get install () {return __get__ (this, function (self) {
        for (var attribute of self.attributes) {
            attribute.install ();
        }
    });},
    get mouseOrTouch () {return __get__ (this, function (self, key, down) {
        if (down) {
            if (key == 'space') {
                self.keyCode = space;
            }
            else if (key == 'enter') {
                self.keyCode = enter;
            }
            else {
                self.keyCode = ord (key);
            }
        }
        else {
            self.keyCode = null;
        }
    });},
    get py_update () {return __get__ (this, function (self) {
        var oldTime = self.time;
        self.time = +(new Date);
        self.deltaT = (self.time - oldTime) / 1000.0;
        if (self.pause) {
            if (self.keyCode == space) {
                self.pause = false;
            }
            else if (self.keyCode == enter) {
                self.scoreboard.reset ();
            }
        }
        else {
            for (var attribute of self.attributes) {
                attribute.predict ();
            }
            for (var attribute of self.attributes) {
                attribute.interact ();
            }
            for (var attribute of self.attributes) {
                attribute.commit ();
            }
        }
    });},
    get scored () {return __get__ (this, function (self, playerIndex) {
        self.scoreboard.increment (playerIndex);
        self.serviceIndex = 1 - playerIndex;
        for (var paddle of self.paddles) {
            paddle.reset ();
        }
        self.ball.reset ();
        self.pause = true;
    });},
    get commit () {return __get__ (this, function (self) {
        for (var attribute of self.attributes) {
            attribute.commit ();
        }
    });},
    get draw () {return __get__ (this, function (self) {
        self.canvas.clear ();
        for (var attribute of self.attributes) {
            attribute.draw ();
        }
    });},
    get resize () {return __get__ (this, function (self) {
        self.pageWidth = window.innerWidth;
        self.pageHeight = window.innerHeight;
        self.textTop = 0;
        if (self.pageHeight > 1.2 * self.pageWidth) {
            self.canvasWidth = self.pageWidth;
            self.canvasTop = self.textTop + 300;
        }
        else {
            self.canvasWidth = 0.6 * self.pageWidth;
            self.canvasTop = self.textTop + 200;
        }
        self.canvasLeft = 0.5 * (self.pageWidth - self.canvasWidth);
        self.canvasHeight = 0.6 * self.canvasWidth;
        self.buttonsTop = (self.canvasTop + self.canvasHeight) + 50;
        self.buttonsWidth = 500;
        self.textFrame.style.top = self.textTop;
        self.textFrame.style.left = self.canvasLeft + 0.05 * self.canvasWidth;
        self.textFrame.style.width = 0.9 * self.canvasWidth;
        self.canvasFrame.style.top = self.canvasTop;
        self.canvasFrame.style.left = self.canvasLeft;
        self.canvas.setDimensions (dict ({'width': self.canvasWidth, 'height': self.canvasHeight}));
        self.buttonsFrame.style.top = self.buttonsTop;
        self.buttonsFrame.style.left = 0.5 * (self.pageWidth - self.buttonsWidth);
        self.buttonsFrame.style.width = self.canvasWidth;
        self.install ();
        self.commit ();
        self.draw ();
    });},
    get scaleX () {return __get__ (this, function (self, x) {
        return x * (self.canvas.width / orthoWidth);
    });},
    get scaleY () {return __get__ (this, function (self, y) {
        return y * (self.canvas.height / orthoHeight);
    });},
    get orthoX () {return __get__ (this, function (self, x) {
        return self.scaleX (x + Math.floor (orthoWidth / 2));
    });},
    get orthoY () {return __get__ (this, function (self, y) {
        return self.scaleY ((orthoHeight - Math.floor (fieldHeight / 2)) - y);
    });},
    get keydown () {return __get__ (this, function (self, event) {
        self.keyCode = event.keyCode;
    });},
    get keyup () {return __get__ (this, function (self, event) {
        self.keyCode = null;
    });}
});
export var game = Game ();

//# sourceMappingURL=pong.map”…””}”(hhhj"  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒV/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/pong/__target__/pong.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK:hj  ubeh}”(h ]”Œid5”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjÖ  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjÑ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj¶  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj±  ubah}”(h ]”j®  ah"]”h$]”Œ	code_pong”ah&]”h(]”uh*j¯  hj^  hhhNhNŒexpect_referenced_by_name”}”jX  j£  sŒexpect_referenced_by_id”}”j®  j£  subh)”}”(hhh]”(h)”}”(hŒ3Three ways of integration with JavaScript libraries”h]”hŒ3Three ways of integration with JavaScript libraries”…””}”(hjd  hjb  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj_  hhhh+hKAubh>)”}”(hŒ]There are three ways to integrate Transcrypt applications with existing JavaScript libraries.”h]”hŒ]There are three ways to integrate Transcrypt applications with existing JavaScript libraries.”…””}”(hjr  hjp  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKChj_  hhubh	Œenumerated_list”“”)”}”(hhh]”(h	Œ	list_item”“”)”}”(hŒéThe simplest way is to use the library as is, without any encapsulation. In this way all symbols of that library will be in the global namespace. While many JavaScript programmers don't seem to mind that, many Python programmers do.
”h]”h>)”}”(hŒèThe simplest way is to use the library as is, without any encapsulation. In this way all symbols of that library will be in the global namespace. While many JavaScript programmers don't seem to mind that, many Python programmers do.”h]”hŒêThe simplest way is to use the library as is, without any encapsulation. In this way all symbols of that library will be in the global namespace. While many JavaScript programmers donâ€™t seem to mind that, many Python programmers do.”…””}”(hj‹  hj‰  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKEhj…  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jƒ  hj€  hhhh+hNubj„  )”}”(hX  Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distibution this is done for the *fabric* module, that encapsulates *fabric.js* and is imported in the Pong example. In this way the global namespace stays clean.
”h]”h>)”}”(hX  Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distibution this is done for the *fabric* module, that encapsulates *fabric.js* and is imported in the Pong example. In this way the global namespace stays clean.”h]”(hŒ€Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distibution this is done for the ”…””}”(hŒ€Another way is to encapsulate the JavaScript library as a whole in a Transcrypt module. In the distibution this is done for the ”hj¡  ubh–)”}”(hŒ*fabric*”h]”hŒfabric”…””}”(hhhjª  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj¡  ubhŒ module, that encapsulates ”…””}”(hŒ module, that encapsulates ”hj¡  ubh–)”}”(hŒ*fabric.js*”h]”hŒ	fabric.js”…””}”(hhhj½  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj¡  ubhŒS and is imported in the Pong example. In this way the global namespace stays clean.”…””}”(hŒS and is imported in the Pong example. In this way the global namespace stays clean.”hj¡  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKGhj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jƒ  hj€  hhhh+hNubj„  )”}”(hX8  The third way is to write a complete Pythonic API for the JavaScript library. This is overkill in most cases and makes it harder to keep up with new versions of the library. Note that Transcrypt was desiged to make seamless cooperation between Transcrypt and JavaScript libraries possible without any glue code.
”h]”h>)”}”(hX7  The third way is to write a complete Pythonic API for the JavaScript library. This is overkill in most cases and makes it harder to keep up with new versions of the library. Note that Transcrypt was desiged to make seamless cooperation between Transcrypt and JavaScript libraries possible without any glue code.”h]”hX7  The third way is to write a complete Pythonic API for the JavaScript library. This is overkill in most cases and makes it harder to keep up with new versions of the library. Note that Transcrypt was desiged to make seamless cooperation between Transcrypt and JavaScript libraries possible without any glue code.”…””}”(hjâ  hjà  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKIhjÜ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jƒ  hj€  hhhh+hNubeh}”(h ]”h"]”h$]”h&]”h(]”Œenumtype”Œarabic”Œprefix”hŒsuffix”j§  uh*j~  hj_  hhhh+hKEubh>)”}”(hŒ„In most cases this approach 2 strikes a good balance between effort and yield. As can be seen below, the effort involved is minimal.”h]”hŒ„In most cases this approach 2 strikes a good balance between effort and yield. As can be seen below, the effort involved is minimal.”…””}”(hj   hjþ  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKKhj_  hhubh^)”}”(hŒ.. _code_encaps_fabric:”h]”h}”(h ]”h"]”h$]”h&]”h(]”j­  Œcode-encaps-fabric”uh*h]hKMhj_  hhhh+ubjK  )”}”(hhh]”(jP  )”}”(hŒ%The encapsulation layer for fabric.js”h]”hŒ%The encapsulation layer for fabric.js”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKOhj  ubj`  )”}”(hX  __pragma__ ('noanno')

fabric = __pragma__ ('js',
    '''
(function () {{
    var exports = {{}};
    {}  // Puts fabric in exports and in global window
    delete window.fabric;
    return exports;
}}) () .fabric;
    ''',
    __include__ ('com/fabricjs/fabric_downloaded.js')
)
”h]”hX  __pragma__ ('noanno')

fabric = __pragma__ ('js',
    '''
(function () {{
    var exports = {{}};
    {}  // Puts fabric in exports and in global window
    delete window.fabric;
    return exports;
}}) () .fabric;
    ''',
    __include__ ('com/fabricjs/fabric_downloaded.js')
)
”…””}”(hhhj(  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒY/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/modules/com/fabricjs/__init__.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKOhj  ubeh}”(h ]”(Œid6”j  eh"]”j{  ah$]”Œcode_encaps_fabric”ah&]”h(]”Œliteral_block”ˆuh*jJ  hj_  hhhhhNj[  }”j>  j  sj]  }”j  j  subh>)”}”(hXþ  Note that __pragma__ ('js', <skeletoncode>, includes = [<file1>, <file2>, ..]) is used to achieve the encapsulation. It replaces the {} by the respective contents of the files. The *fabric* module is part of the download. Note that not all facilities were included in customizing fabric.js. You can drop-in replace the *fabric.js* by another customized version without changing anything. Preferably download a development version, since that enables easy debugging. Transcryp will minify it for you on the fly.”h]”(hŒ¹Note that __pragma__ (â€˜jsâ€™, <skeletoncode>, includes = [<file1>, <file2>, ..]) is used to achieve the encapsulation. It replaces the {} by the respective contents of the files. The ”…””}”(hŒµNote that __pragma__ ('js', <skeletoncode>, includes = [<file1>, <file2>, ..]) is used to achieve the encapsulation. It replaces the {} by the respective contents of the files. The ”hjD  hhhNhNubh–)”}”(hŒ*fabric*”h]”hŒfabric”…””}”(hhhjM  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjD  ubhŒ‚ module is part of the download. Note that not all facilities were included in customizing fabric.js. You can drop-in replace the ”…””}”(hŒ‚ module is part of the download. Note that not all facilities were included in customizing fabric.js. You can drop-in replace the ”hjD  hhhNhNubh–)”}”(hŒ*fabric.js*”h]”hŒ	fabric.js”…””}”(hhhj`  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjD  ubhŒ´ by another customized version without changing anything. Preferably download a development version, since that enables easy debugging. Transcryp will minify it for you on the fly.”…””}”(hŒ´ by another customized version without changing anything. Preferably download a development version, since that enables easy debugging. Transcryp will minify it for you on the fly.”hjD  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKShj_  hhubeh}”(h ]”Œ3three-ways-of-integration-with-javascript-libraries”ah"]”h$]”Œ3three ways of integration with javascript libraries”ah&]”h(]”uh*h
hj^  hhhh+hKAubh)”}”(hhh]”(h)”}”(hŒMinification”h]”hŒMinification”…””}”(hj†  hj„  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj  hhhh+hKVubh>)”}”(hŒüMinification is currently performed by the Google closure compiler, that's also part of the distribution. Currently closures ADVANCED_OPTIMIZATIONS switch breaks the working *strict* code, however, so the SIMPLE_OPTIMIZATIONS switch is used by default.”h]”(hŒ°Minification is currently performed by the Google closure compiler, thatâ€™s also part of the distribution. Currently closures ADVANCED_OPTIMIZATIONS switch breaks the working ”…””}”(hŒ®Minification is currently performed by the Google closure compiler, that's also part of the distribution. Currently closures ADVANCED_OPTIMIZATIONS switch breaks the working ”hj’  hhhNhNubh–)”}”(hŒ*strict*”h]”hŒstrict”…””}”(hhhj›  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj’  ubhŒF code, however, so the SIMPLE_OPTIMIZATIONS switch is used by default.”…””}”(hŒF code, however, so the SIMPLE_OPTIMIZATIONS switch is used by default.”hj’  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKXhj  hhubh>)”}”(hXú  As can be seen from the listings of the Pong example, even the non-minified *pong.js* module is only slightly larger than *pong.py*. This is despite the expensive keyword arguments mechanism that is activated for the *reset* function, using *__pragma__ ('kargs')* and *__pragma__ ('nokwargs')*. The minified but not treeshaked Transcrypt runtime is slightly above 40 kB. The *fabric.js* library on the other hand occupies 180 kB. From this example it becomes clear that Transcrypt is extremely lightweight.”h]”(hŒLAs can be seen from the listings of the Pong example, even the non-minified ”…””}”(hŒLAs can be seen from the listings of the Pong example, even the non-minified ”hj´  hhhNhNubh–)”}”(hŒ	*pong.js*”h]”hŒpong.js”…””}”(hhhj½  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒ% module is only slightly larger than ”…””}”(hŒ% module is only slightly larger than ”hj´  hhhNhNubh–)”}”(hŒ	*pong.py*”h]”hŒpong.py”…””}”(hhhjÐ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒV. This is despite the expensive keyword arguments mechanism that is activated for the ”…””}”(hŒV. This is despite the expensive keyword arguments mechanism that is activated for the ”hj´  hhhNhNubh–)”}”(hŒ*reset*”h]”hŒreset”…””}”(hhhjã  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒ function, using ”…””}”(hŒ function, using ”hj´  hhhNhNubh–)”}”(hŒ*__pragma__ ('kargs')*”h]”hŒ__pragma__ (â€˜kargsâ€™)”…””}”(hhhjö  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒ and ”…””}”(hŒ and ”hj´  hhhNhNubh–)”}”(hŒ*__pragma__ ('nokwargs')*”h]”hŒ__pragma__ (â€˜nokwargsâ€™)”…””}”(hhhj	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒR. The minified but not treeshaked Transcrypt runtime is slightly above 40 kB. The ”…””}”(hŒR. The minified but not treeshaked Transcrypt runtime is slightly above 40 kB. The ”hj´  hhhNhNubh–)”}”(hŒ*fabric.js*”h]”hŒ	fabric.js”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj´  ubhŒx library on the other hand occupies 180 kB. From this example it becomes clear that Transcrypt is extremely lightweight.”…””}”(hŒx library on the other hand occupies 180 kB. From this example it becomes clear that Transcrypt is extremely lightweight.”hj´  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKZhj  hhubeh}”(h ]”Œminification”ah"]”h$]”Œminification”ah&]”h(]”uh*h
hj^  hhhh+hKVubeh}”(h ]”Œexample-pong”ah"]”h$]”Œexample: pong”ah&]”h(]”uh*h
hjM  hhhh+hK3ubh)”}”(hhh]”(h)”}”(hŒExample: jQuery”h]”hŒExample: jQuery”…””}”(hjJ  hjH  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhjE  hhhh+hK]ubh>)”}”(hXX  In contrast to the use of the *fabric.js* library in the Pong example, *jQuery* hasn't been encapsulated at all. It's just downloaded on the fly from a content delivery network and used as-is. Instead of the *$* (that is not a valid Python identifier), an *S* is used as :ref:`alias <pragma_alias>`. This might have been any character sequence.”h]”(hŒIn contrast to the use of the ”…””}”(hŒIn contrast to the use of the ”hjV  hhhNhNubh–)”}”(hŒ*fabric.js*”h]”hŒ	fabric.js”…””}”(hhhj_  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjV  ubhŒ library in the Pong example, ”…””}”(hŒ library in the Pong example, ”hjV  hhhNhNubh–)”}”(hŒ*jQuery*”h]”hŒjQuery”…””}”(hhhjr  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjV  ubhŒ… hasnâ€™t been encapsulated at all. Itâ€™s just downloaded on the fly from a content delivery network and used as-is. Instead of the ”…””}”(hŒ hasn't been encapsulated at all. It's just downloaded on the fly from a content delivery network and used as-is. Instead of the ”hjV  hhhNhNubh–)”}”(hŒ*$*”h]”hŒ$”…””}”(hhhj…  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjV  ubhŒ- (that is not a valid Python identifier), an ”…””}”(hŒ- (that is not a valid Python identifier), an ”hjV  hhhNhNubh–)”}”(hŒ*S*”h]”hŒS”…””}”(hhhj˜  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjV  ubhŒ is used as ”…””}”(hŒ is used as ”hjV  hhhNhNubh Œpending_xref”“”)”}”(hŒ:ref:`alias <pragma_alias>`”h]”h	Œinline”“”)”}”(hj¯  h]”hŒalias”…””}”(hhhj³  ubah}”(h ]”h"]”(Œxref”Œstd”Œstd-ref”eh$]”h&]”h(]”uh*j±  hj­  ubah}”(h ]”h"]”h$]”h&]”h(]”Œrefdoc”Œintegration_javascript”Œ	refdomain”j¾  Œreftype”Œref”Œrefexplicit”ˆŒrefwarn”ˆŒ	reftarget”Œpragma_alias”uh*j«  hh+hK_hjV  ubhŒ.. This might have been any character sequence.”…””}”(hŒ.. This might have been any character sequence.”hjV  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK_hjE  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K<uh*j¹  hjà  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KGuh*j¹  hjà  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒjquery_demo.py”h]”hŒjquery_demo.py”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKbhj   ubj`  )”}”(hXK  __pragma__ ('alias', 'S', '$')

def start ():
    def changeColors ():
        for div in S__divs:
            S (div) .css ({
                'color': 'rgb({},{},{})'.format (* [int (256 * Math.random ()) for i in range (3)]),
            })

    S__divs = S ('div')
    changeColors ()
    window.setInterval (changeColors, 500)
”h]”hXK  __pragma__ ('alias', 'S', '$')

def start ():
    def changeColors ():
        for div in S__divs:
            S (div) .css ({
                'color': 'rgb({},{},{})'.format (* [int (256 * Math.random ()) for i in range (3)]),
            })

    S__divs = S ('div')
    changeColors ()
    window.setInterval (changeColors, 500)
”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒY/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/jquery_demo/jquery_demo.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKbhj   ubeh}”(h ]”Œid7”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjý  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjú  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒjquery_demo.js”h]”hŒjquery_demo.js”…””}”(hj8  hj6  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKbhj3  ubj`  )”}”(hXÝ  // Transcrypt'ed from Python, 2021-06-01 16:18:31
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
var __name__ = '__main__';
export var start = function () {
    var changeColors = function () {
        for (var div of $divs) {
            $ (div).css (dict ({'color': 'rgb({},{},{})'.format (...(function () {
                var __accu0__ = [];
                for (var i = 0; i < 3; i++) {
                    __accu0__.append (int (256 * Math.random ()));
                }
                return __accu0__;
            }) ())}));
        }
    };
    var $divs = $ ('div');
    changeColors ();
    window.setInterval (changeColors, 500);
};

//# sourceMappingURL=jquery_demo.map”h]”hXÝ  // Transcrypt'ed from Python, 2021-06-01 16:18:31
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
var __name__ = '__main__';
export var start = function () {
    var changeColors = function () {
        for (var div of $divs) {
            $ (div).css (dict ({'color': 'rgb({},{},{})'.format (...(function () {
                var __accu0__ = [];
                for (var i = 0; i < 3; i++) {
                    __accu0__.append (int (256 * Math.random ()));
                }
                return __accu0__;
            }) ())}));
        }
    };
    var $divs = $ ('div');
    changeColors ();
    window.setInterval (changeColors, 500);
};

//# sourceMappingURL=jquery_demo.map”…””}”(hhhjD  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œd/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/jquery_demo/__target__/jquery_demo.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKbhj3  ubeh}”(h ]”Œid8”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj0  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjú  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj÷  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjà  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjÝ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hjE  hhhNhNubeh}”(h ]”Œexample-jquery”ah"]”h$]”Œexample: jquery”ah&]”h(]”uh*h
hjM  hhhh+hK]ubh)”}”(hhh]”(h)”}”(hŒ.Example: iOS web app with native look and feel”h]”hŒ.Example: iOS web app with native look and feel”…””}”(hj‰  hj‡  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj„  hhhh+hKhubh>)”}”(hXø  You can write full screen iOS web apps in Transcrypt with native look and feel. As example here's an app simulating 6 dice. While this example is kept very simple, you can in fact make apps of arbitrary complexity, with fast and beautiful graphics using any JS graphics library, e.g. multiplayer games working over the Internet. If you add the app to your homescreen it will be cached, so no Internet connection is needed to use it. Web apps for iOS can obtain and use location information from the user.”h]”hXú  You can write full screen iOS web apps in Transcrypt with native look and feel. As example hereâ€™s an app simulating 6 dice. While this example is kept very simple, you can in fact make apps of arbitrary complexity, with fast and beautiful graphics using any JS graphics library, e.g. multiplayer games working over the Internet. If you add the app to your homescreen it will be cached, so no Internet connection is needed to use it. Web apps for iOS can obtain and use location information from the user.”…””}”(hj—  hj•  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKjhj„  hhubh	Œfigure”“”)”}”(hhh]”h	Œimage”“”)”}”(hŒe.. figure:: ../images/ios_app.png
        :height: 500px
        :alt: A simple dice web app for iOS
”h]”h}”(h ]”h"]”h$]”h&]”h(]”Œheight”Œ500px”Œalt”ŒA simple dice web app for iOS”Œuri”Œ../images/ios_app.png”Œ
candidates”}”Œ*”j¹  suh*j¨  hj¥  hh+hNubah}”(h ]”h"]”h$]”h&]”h(]”uh*j£  hj„  hhhh+hNubj¤  )”}”(hhh]”j©  )”}”(hŒv.. figure:: ../images/ios_app_icon.png
        :height: 500px
        :alt: The prepacked dice icon on the homescreen
”h]”h}”(h ]”h"]”h$]”h&]”h(]”Œheight”Œ500px”Œalt”Œ)The prepacked dice icon on the homescreen”Œuri”Œ../images/ios_app_icon.png”jº  }”j¼  jÕ  suh*j¨  hjÃ  hh+hNubah}”(h ]”h"]”h$]”h&]”h(]”uh*j£  hj„  hhhh+hNubh>)”}”(hŒsYou can install this app on your iPhone from http://www.transcrypt.org/live/transcrypt/demos/ios_app/ios_app.html .”h]”(hŒ-You can install this app on your iPhone from ”…””}”(hŒ-You can install this app on your iPhone from ”hjÝ  hhhNhNubhI)”}”(hŒDhttp://www.transcrypt.org/live/transcrypt/demos/ios_app/ios_app.html”h]”hŒDhttp://www.transcrypt.org/live/transcrypt/demos/ios_app/ios_app.html”…””}”(hhhjæ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œrefuri”jè  uh*hHhjÝ  ubhŒ .”…””}”(hŒ .”hjÝ  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKthj„  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K4uh*j¹  hj  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ
ios_app.py”h]”hŒ
ios_app.py”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKwhj  ubj`  )”}”(hX>  import random

class Dice:
    def __init__ (self):
        document.body.addEventListener ('touchstart', lambda event: event.preventDefault ())
        document.body.addEventListener ('mousedown', lambda event: event.preventDefault ())
        document.body.style.margin = 0
        document.body.style.overflow = 'hidden';
    
        self.all = document.createElement ('div')
        self.all.style.color = 'white'
        self.all.style.backgroundColor = 'black'
        self.all.style.height = '100%'
        self.all.style.width = '100%'
        self.all.style.padding = 0
        self.all.style.margin = 0
        document.body.appendChild (self.all)
        
        self.dices = []
        
        for index in range (6):
            dice = document.createElement ('div')
            dice.normalColor = '#770000' if index < 3 else '#0000ff'
            dice.style.position = 'absolute'
            dice.style.backgroundColor = dice.normalColor
            dice.addEventListener ('touchstart', (lambda aDice: lambda: self.roll (aDice)) (dice))  # Returns inner lambda
            dice.addEventListener ('mousedown', (lambda aDice: lambda: self.roll (aDice)) (dice))
            self.dices.append (dice)
            self.all.appendChild (dice)
            
            dice.inner = document.createElement ('div')
            dice.inner.setAttribute ('unselectable', 'on')
            dice.inner.style.fontWeight = 'bold'
            dice.inner.style.textAlign = 'center'
            dice.inner.style.position = 'absolute'
            dice.inner.innerHTML = '?'
            dice.appendChild (dice.inner)
            
        self.banner = document.createElement ('div')
        self.banner.style.position = 'absolute'
        self.banner.style.cursor = 'pointer'
        self.banner.addEventListener ('touchstart', self.gotoTranscryptSite)
        self.banner.addEventListener ('mousedown', self.gotoTranscryptSite)
        self.banner.style.fontFamily = 'arial'
        self.banner.innerHTML = (
            '<span id="bannerLarge"><font color="777777">www.<b><i>' +
            '<font color="ff4422">T<font color="ffb000">r<font color="228822">a<font color="3366ff">n' +
            '<font color="ff4422">s<font color="ffb000">c<font color="228822">r<font color="3366ff">y<font color="ffb000">p<font color="228822">t' +
            '</i></b><font color="777777">.org<font size={}><font color="cccccc"></span>' +
            '<span id="bannerSmall"><i> Write your apps in Python for free!</i></span>'
        )
        self.all.appendChild (self.banner)

        self.bannerLarge = document.getElementById ('bannerLarge')
        self.bannerSmall = document.getElementById ('bannerSmall')
        
        self.audio = __new__ (Audio ('ios_app.mp3'))
        
        window.onresize = self.rightSize
        self.rightSize ()
        
    def gotoTranscryptSite (self):
        document.location.href = 'http://www.transcrypt.org'
        
    def roll (self, dice):
        frameIndex = 10

        self.audio.play ()
        
        def frame ():
            nonlocal frameIndex
            frameIndex -= 1
            
            dice.inner.innerHTML = random.randint (1, 6)

            if frameIndex:
                dice.style.color = random.choice (('red', 'green', 'blue', 'yellow'))
                setTimeout (frame, 100)
            else:
                dice.style.backgroundColor = dice.normalColor
                dice.style.color = 'white'
                
        frame ()
    
    def rightSize (self):
        self.pageWidth = window.innerWidth
        self.pageHeight = window.innerHeight
        portrait = self.pageHeight > self.pageWidth
        
        for index, dice in enumerate (self.dices):
            if self.pageHeight > self.pageWidth:    # Portrait
                dice.style.height = 0.3 * self.pageHeight
                dice.style.width = 0.4 * self.pageWidth
                dice.style.top = (0.03 + (index if index < 3 else index - 3) * 0.32) * self.pageHeight
                dice.style.left = (0.06 if index < 3 else 0.54) * self.pageWidth
                
                charBoxSide = 0.3 * self.pageHeight
                dice.inner.style.top = 0.15 * self.pageHeight - 0.6 * charBoxSide
                dice.inner.style.left = 0.2 * self.pageWidth - 0.5 * charBoxSide

                self.banner.style.top = 0.975 * self.pageHeight
                self.banner.style.left = 0.06 * self.pageWidth              
                self.bannerLarge.style.fontSize = 0.017 * self.pageHeight
                self.bannerSmall.style.fontSize = 0.014 * self.pageHeight
            else:                                   # Landscape
                dice.style.height = 0.4 * self.pageHeight
                dice.style.width = 0.3 * self.pageWidth
                dice.style.top = (0.06 if index < 3 else 0.54) * self.pageHeight
                dice.style.left = (0.03 + (index if index < 3 else index - 3) * 0.32) * self.pageWidth
                
                charBoxSide = 0.4 * self.pageHeight
                dice.inner.style.top = 0.2 * self.pageHeight - 0.6 * charBoxSide
                dice.inner.style.left = 0.15 * self.pageWidth - 0.5 * charBoxSide
                
                self.banner.style.top = 0.95 * self.pageHeight
                self.banner.style.left = 0.03 * self.pageWidth
                self.bannerLarge.style.fontSize = 0.015 * self.pageWidth
                self.bannerSmall.style.fontSize = 0.012 * self.pageWidth
                
            dice.inner.style.height = charBoxSide
            dice.inner.style.width = charBoxSide
            dice.inner.style.fontSize = charBoxSide
            
dice = Dice ()
”h]”hX>  import random

class Dice:
    def __init__ (self):
        document.body.addEventListener ('touchstart', lambda event: event.preventDefault ())
        document.body.addEventListener ('mousedown', lambda event: event.preventDefault ())
        document.body.style.margin = 0
        document.body.style.overflow = 'hidden';
    
        self.all = document.createElement ('div')
        self.all.style.color = 'white'
        self.all.style.backgroundColor = 'black'
        self.all.style.height = '100%'
        self.all.style.width = '100%'
        self.all.style.padding = 0
        self.all.style.margin = 0
        document.body.appendChild (self.all)
        
        self.dices = []
        
        for index in range (6):
            dice = document.createElement ('div')
            dice.normalColor = '#770000' if index < 3 else '#0000ff'
            dice.style.position = 'absolute'
            dice.style.backgroundColor = dice.normalColor
            dice.addEventListener ('touchstart', (lambda aDice: lambda: self.roll (aDice)) (dice))  # Returns inner lambda
            dice.addEventListener ('mousedown', (lambda aDice: lambda: self.roll (aDice)) (dice))
            self.dices.append (dice)
            self.all.appendChild (dice)
            
            dice.inner = document.createElement ('div')
            dice.inner.setAttribute ('unselectable', 'on')
            dice.inner.style.fontWeight = 'bold'
            dice.inner.style.textAlign = 'center'
            dice.inner.style.position = 'absolute'
            dice.inner.innerHTML = '?'
            dice.appendChild (dice.inner)
            
        self.banner = document.createElement ('div')
        self.banner.style.position = 'absolute'
        self.banner.style.cursor = 'pointer'
        self.banner.addEventListener ('touchstart', self.gotoTranscryptSite)
        self.banner.addEventListener ('mousedown', self.gotoTranscryptSite)
        self.banner.style.fontFamily = 'arial'
        self.banner.innerHTML = (
            '<span id="bannerLarge"><font color="777777">www.<b><i>' +
            '<font color="ff4422">T<font color="ffb000">r<font color="228822">a<font color="3366ff">n' +
            '<font color="ff4422">s<font color="ffb000">c<font color="228822">r<font color="3366ff">y<font color="ffb000">p<font color="228822">t' +
            '</i></b><font color="777777">.org<font size={}><font color="cccccc"></span>' +
            '<span id="bannerSmall"><i> Write your apps in Python for free!</i></span>'
        )
        self.all.appendChild (self.banner)

        self.bannerLarge = document.getElementById ('bannerLarge')
        self.bannerSmall = document.getElementById ('bannerSmall')
        
        self.audio = __new__ (Audio ('ios_app.mp3'))
        
        window.onresize = self.rightSize
        self.rightSize ()
        
    def gotoTranscryptSite (self):
        document.location.href = 'http://www.transcrypt.org'
        
    def roll (self, dice):
        frameIndex = 10

        self.audio.play ()
        
        def frame ():
            nonlocal frameIndex
            frameIndex -= 1
            
            dice.inner.innerHTML = random.randint (1, 6)

            if frameIndex:
                dice.style.color = random.choice (('red', 'green', 'blue', 'yellow'))
                setTimeout (frame, 100)
            else:
                dice.style.backgroundColor = dice.normalColor
                dice.style.color = 'white'
                
        frame ()
    
    def rightSize (self):
        self.pageWidth = window.innerWidth
        self.pageHeight = window.innerHeight
        portrait = self.pageHeight > self.pageWidth
        
        for index, dice in enumerate (self.dices):
            if self.pageHeight > self.pageWidth:    # Portrait
                dice.style.height = 0.3 * self.pageHeight
                dice.style.width = 0.4 * self.pageWidth
                dice.style.top = (0.03 + (index if index < 3 else index - 3) * 0.32) * self.pageHeight
                dice.style.left = (0.06 if index < 3 else 0.54) * self.pageWidth
                
                charBoxSide = 0.3 * self.pageHeight
                dice.inner.style.top = 0.15 * self.pageHeight - 0.6 * charBoxSide
                dice.inner.style.left = 0.2 * self.pageWidth - 0.5 * charBoxSide

                self.banner.style.top = 0.975 * self.pageHeight
                self.banner.style.left = 0.06 * self.pageWidth              
                self.bannerLarge.style.fontSize = 0.017 * self.pageHeight
                self.bannerSmall.style.fontSize = 0.014 * self.pageHeight
            else:                                   # Landscape
                dice.style.height = 0.4 * self.pageHeight
                dice.style.width = 0.3 * self.pageWidth
                dice.style.top = (0.06 if index < 3 else 0.54) * self.pageHeight
                dice.style.left = (0.03 + (index if index < 3 else index - 3) * 0.32) * self.pageWidth
                
                charBoxSide = 0.4 * self.pageHeight
                dice.inner.style.top = 0.2 * self.pageHeight - 0.6 * charBoxSide
                dice.inner.style.left = 0.15 * self.pageWidth - 0.5 * charBoxSide
                
                self.banner.style.top = 0.95 * self.pageHeight
                self.banner.style.left = 0.03 * self.pageWidth
                self.bannerLarge.style.fontSize = 0.015 * self.pageWidth
                self.bannerSmall.style.fontSize = 0.012 * self.pageWidth
                
            dice.inner.style.height = charBoxSide
            dice.inner.style.width = charBoxSide
            dice.inner.style.fontSize = charBoxSide
            
dice = Dice ()
”…””}”(hhhj*  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒQ/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/ios_app/ios_app.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKwhj  ubeh}”(h ]”Œid9”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj   ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj„  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K6uh*j¹  hje  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒios_app.html”h]”hŒios_app.html”…””}”(hj€  hj~  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK}hj{  ubj`  )”}”(hXX  <html manifest="cache.manifest">
    <!-- v45 -->
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Dice">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="apple-touch-icon" href="ios_app.png">
    </head>
    <body>
        <script type="module">
            import * as ios_app from "./__target__/ios_app.js"; window.ios_app = ios_app;
        </script>
    </body> 
</html>”h]”hXX  <html manifest="cache.manifest">
    <!-- v45 -->
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-title" content="Dice">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <link rel="apple-touch-icon" href="ios_app.png">
    </head>
    <body>
        <script type="module">
            import * as ios_app from "./__target__/ios_app.js"; window.ios_app = ios_app;
        </script>
    </body> 
</html>”…””}”(hhhjŒ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒS/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/ios_app/ios_app.html”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK}hj{  ubeh}”(h ]”Œid10”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjx  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hju  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjr  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hje  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjb  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj„  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K8uh*j¹  hjÇ  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒcache.manifest”h]”hŒcache.manifest”…””}”(hjâ  hjà  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKƒhjÝ  ubj`  )”}”(hŒPCACHE MANIFEST

# v45

CACHE:
ios_app.html
ios_app.mp3
__javascript__/ios_app.js”h]”hŒPCACHE MANIFEST

# v45

CACHE:
ios_app.html
ios_app.mp3
__javascript__/ios_app.js”…””}”(hhhjî  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒU/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/ios_app/cache.manifest”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKƒhjÝ  ubeh}”(h ]”Œid11”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjÚ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj×  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjÔ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjÇ  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjÄ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj„  hhhNhNubh>)”}”(hŒMN.B.1 Cache manifests have to be served with mime type *text/cache-manifest*.”h]”(hŒ7N.B.1 Cache manifests have to be served with mime type ”…””}”(hŒ7N.B.1 Cache manifests have to be served with mime type ”hj&  hhhNhNubh–)”}”(hŒ*text/cache-manifest*”h]”hŒtext/cache-manifest”…””}”(hhhj/  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj&  ubhŒ.”…””}”(hj§  hj&  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKˆhj„  hhubh>)”}”(hŒ|N.B.2 For native behaviour, e.g. no visible address bar, the app must indeed be added to the home screen of your iOS device.”h]”hŒ|N.B.2 For native behaviour, e.g. no visible address bar, the app must indeed be added to the home screen of your iOS device.”…””}”(hjI  hjG  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKŠhj„  hhubeh}”(h ]”Œ-example-ios-web-app-with-native-look-and-feel”ah"]”h$]”Œ.example: ios web app with native look and feel”ah&]”h(]”uh*h
hjM  hhhh+hKhubh)”}”(hhh]”(h)”}”(hŒExample: D3.js”h]”hŒExample: D3.js”…””}”(hjb  hj`  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj]  hhhh+hKubh>)”}”(hŒéThe *D3.js* graphics library offers animation by data driven DOM manipulation. It combines well with class based object oriented programming as supported by Trancrypt, leading to applications that are easy to understand and maintain.”h]”(hŒThe ”…””}”(hŒThe ”hjn  hhhNhNubh–)”}”(hŒ*D3.js*”h]”hŒD3.js”…””}”(hhhjw  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjn  ubhŒÞ graphics library offers animation by data driven DOM manipulation. It combines well with class based object oriented programming as supported by Trancrypt, leading to applications that are easy to understand and maintain.”…””}”(hŒÞ graphics library offers animation by data driven DOM manipulation. It combines well with class based object oriented programming as supported by Trancrypt, leading to applications that are easy to understand and maintain.”hjn  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKhj]  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K8uh*j¹  hj“  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KCuh*j¹  hj“  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒd3js_demo.py”h]”hŒd3js_demo.py”…””}”(hj¸  hj¶  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK’hj³  ubj`  )”}”(hX­	  class Spawn:
    def __init__ (self, width, height):
        self.width, self.height, self.spacing = self.fill = width, height, 100, d3.scale.category20 ()

        self.svg = d3.select ('body'
        ) .append ('svg'
        ) .attr ('width', self.width
        ) .attr ('height', self.height
        ) .on ('mousemove', self.mousemove
        ) .on ('mousedown', self.mousedown)
        
        self.svg.append ('rect'
        ) .attr ('width', self.width
        ) .attr ('height', self.height)

        self.cursor = self.svg.append ('circle'
        ) .attr ('r', self.spacing
        ) .attr ('transform', 'translate ({}, {})' .format (self.width / 2, self.height / 2)
        ) .attr ('class', 'cursor')

        self.force = d3.layout.force (
        ) .size ([self.width, self.height]
        ) .nodes ([{}]
        ) .linkDistance (self.spacing
        ) .charge (-1000
        ) .on ('tick', self.tick)       

        self.nodes, self.links, self.node, self.link = self.force.nodes (), self.force.links (), self.svg.selectAll ('.node'), self.svg.selectAll ('.link')
        
        self.restart ()
        
    def mousemove (self):
        self.cursor.attr ('transform', 'translate (' + d3.mouse (self.svg.node ()) + ')')

    def mousedown (self):
        def pushLink (target):
            x, y = target.x - node.x, target.y - node.y
            if Math.sqrt (x * x + y * y) < self.spacing:
                spawn.links.push ({'source': node, 'target': target})
                
        point = d3.mouse (self.svg.node ())
        node = {'x': point [0], 'y': point [1]}
        self.nodes.push (node)
        self.nodes.forEach (pushLink)
        self.restart ()     
            
    def tick (self):
        self.link.attr ('x1', lambda d: d.source.x
        ) .attr ('y1', lambda d: d.source.y
        ) .attr ('x2', lambda d: d.target.x
        ) .attr ('y2', lambda d: d.target.y)
            
        self.node.attr ('cx', lambda d: d.x
        ) .attr ('cy', lambda d: d.y)

    def restart (self):
        self.link = self.link.data (self.links)
        
        self.link.enter (
        ) .insert ('line', '.node'
        ) .attr('class', 'link')

        self.node = self.node.data (self.nodes)
            
        self.node.enter (
        ) .insert ('circle', '.cursor'
        ) .attr ('class', 'node'
        ) .attr ('r', 7
        ) .call (self.force.drag)

        self.force.start ()

spawn = Spawn (window.innerWidth, window.innerHeight)
”h]”hX­	  class Spawn:
    def __init__ (self, width, height):
        self.width, self.height, self.spacing = self.fill = width, height, 100, d3.scale.category20 ()

        self.svg = d3.select ('body'
        ) .append ('svg'
        ) .attr ('width', self.width
        ) .attr ('height', self.height
        ) .on ('mousemove', self.mousemove
        ) .on ('mousedown', self.mousedown)
        
        self.svg.append ('rect'
        ) .attr ('width', self.width
        ) .attr ('height', self.height)

        self.cursor = self.svg.append ('circle'
        ) .attr ('r', self.spacing
        ) .attr ('transform', 'translate ({}, {})' .format (self.width / 2, self.height / 2)
        ) .attr ('class', 'cursor')

        self.force = d3.layout.force (
        ) .size ([self.width, self.height]
        ) .nodes ([{}]
        ) .linkDistance (self.spacing
        ) .charge (-1000
        ) .on ('tick', self.tick)       

        self.nodes, self.links, self.node, self.link = self.force.nodes (), self.force.links (), self.svg.selectAll ('.node'), self.svg.selectAll ('.link')
        
        self.restart ()
        
    def mousemove (self):
        self.cursor.attr ('transform', 'translate (' + d3.mouse (self.svg.node ()) + ')')

    def mousedown (self):
        def pushLink (target):
            x, y = target.x - node.x, target.y - node.y
            if Math.sqrt (x * x + y * y) < self.spacing:
                spawn.links.push ({'source': node, 'target': target})
                
        point = d3.mouse (self.svg.node ())
        node = {'x': point [0], 'y': point [1]}
        self.nodes.push (node)
        self.nodes.forEach (pushLink)
        self.restart ()     
            
    def tick (self):
        self.link.attr ('x1', lambda d: d.source.x
        ) .attr ('y1', lambda d: d.source.y
        ) .attr ('x2', lambda d: d.target.x
        ) .attr ('y2', lambda d: d.target.y)
            
        self.node.attr ('cx', lambda d: d.x
        ) .attr ('cy', lambda d: d.y)

    def restart (self):
        self.link = self.link.data (self.links)
        
        self.link.enter (
        ) .insert ('line', '.node'
        ) .attr('class', 'link')

        self.node = self.node.data (self.nodes)
            
        self.node.enter (
        ) .insert ('circle', '.cursor'
        ) .attr ('class', 'node'
        ) .attr ('r', 7
        ) .call (self.force.drag)

        self.force.start ()

spawn = Spawn (window.innerWidth, window.innerHeight)
”…””}”(hhhjÄ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒU/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/d3js_demo/d3js_demo.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK’hj³  ubeh}”(h ]”Œid12”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj°  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj­  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒd3js_demo.js”h]”hŒd3js_demo.js”…””}”(hjë  hjé  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK’hjæ  ubj`  )”}”(hX  // Transcrypt'ed from Python, 2021-06-01 16:18:36
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
var __name__ = '__main__';
export var Spawn =  __class__ ('Spawn', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, width, height) {
        var __left0__ = tuple ([width, height, 100, d3.scale.category20 ()]);
        self.width = __left0__ [0];
        self.height = __left0__ [1];
        self.spacing = __left0__ [2];
        self.fill = __left0__;
        self.svg = d3.select ('body').append ('svg').attr ('width', self.width).attr ('height', self.height).on ('mousemove', self.mousemove).on ('mousedown', self.mousedown);
        self.svg.append ('rect').attr ('width', self.width).attr ('height', self.height);
        self.cursor = self.svg.append ('circle').attr ('r', self.spacing).attr ('transform', 'translate ({}, {})'.format (self.width / 2, self.height / 2)).attr ('class', 'cursor');
        self.force = d3.layout.force ().size ([self.width, self.height]).nodes ([dict ({})]).linkDistance (self.spacing).charge (-(1000)).on ('tick', self.tick);
        var __left0__ = tuple ([self.force.nodes (), self.force.links (), self.svg.selectAll ('.node'), self.svg.selectAll ('.link')]);
        self.nodes = __left0__ [0];
        self.links = __left0__ [1];
        self.node = __left0__ [2];
        self.link = __left0__ [3];
        self.restart ();
    });},
    get mousemove () {return __get__ (this, function (self) {
        self.cursor.attr ('transform', ('translate (' + d3.mouse (self.svg.node ())) + ')');
    });},
    get mousedown () {return __get__ (this, function (self) {
        var pushLink = function (target) {
            var __left0__ = tuple ([target.x - node.x, target.y - node.y]);
            var x = __left0__ [0];
            var y = __left0__ [1];
            if (Math.sqrt (x * x + y * y) < self.spacing) {
                spawn.links.push (dict ({'source': node, 'target': target}));
            }
        };
        var point = d3.mouse (self.svg.node ());
        var node = dict ({'x': point [0], 'y': point [1]});
        self.nodes.push (node);
        self.nodes.forEach (pushLink);
        self.restart ();
    });},
    get tick () {return __get__ (this, function (self) {
        self.link.attr ('x1', (function __lambda__ (d) {
            return d.source.x;
        })).attr ('y1', (function __lambda__ (d) {
            return d.source.y;
        })).attr ('x2', (function __lambda__ (d) {
            return d.target.x;
        })).attr ('y2', (function __lambda__ (d) {
            return d.target.y;
        }));
        self.node.attr ('cx', (function __lambda__ (d) {
            return d.x;
        })).attr ('cy', (function __lambda__ (d) {
            return d.y;
        }));
    });},
    get restart () {return __get__ (this, function (self) {
        self.link = self.link.data (self.links);
        self.link.enter ().insert ('line', '.node').attr ('class', 'link');
        self.node = self.node.data (self.nodes);
        self.node.enter ().insert ('circle', '.cursor').attr ('class', 'node').attr ('r', 7).call (self.force.drag);
        self.force.start ();
    });}
});
export var spawn = Spawn (window.innerWidth, window.innerHeight);

//# sourceMappingURL=d3js_demo.map”•     h]”hX  // Transcrypt'ed from Python, 2021-06-01 16:18:36
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
var __name__ = '__main__';
export var Spawn =  __class__ ('Spawn', [object], {
    __module__: __name__,
    get __init__ () {return __get__ (this, function (self, width, height) {
        var __left0__ = tuple ([width, height, 100, d3.scale.category20 ()]);
        self.width = __left0__ [0];
        self.height = __left0__ [1];
        self.spacing = __left0__ [2];
        self.fill = __left0__;
        self.svg = d3.select ('body').append ('svg').attr ('width', self.width).attr ('height', self.height).on ('mousemove', self.mousemove).on ('mousedown', self.mousedown);
        self.svg.append ('rect').attr ('width', self.width).attr ('height', self.height);
        self.cursor = self.svg.append ('circle').attr ('r', self.spacing).attr ('transform', 'translate ({}, {})'.format (self.width / 2, self.height / 2)).attr ('class', 'cursor');
        self.force = d3.layout.force ().size ([self.width, self.height]).nodes ([dict ({})]).linkDistance (self.spacing).charge (-(1000)).on ('tick', self.tick);
        var __left0__ = tuple ([self.force.nodes (), self.force.links (), self.svg.selectAll ('.node'), self.svg.selectAll ('.link')]);
        self.nodes = __left0__ [0];
        self.links = __left0__ [1];
        self.node = __left0__ [2];
        self.link = __left0__ [3];
        self.restart ();
    });},
    get mousemove () {return __get__ (this, function (self) {
        self.cursor.attr ('transform', ('translate (' + d3.mouse (self.svg.node ())) + ')');
    });},
    get mousedown () {return __get__ (this, function (self) {
        var pushLink = function (target) {
            var __left0__ = tuple ([target.x - node.x, target.y - node.y]);
            var x = __left0__ [0];
            var y = __left0__ [1];
            if (Math.sqrt (x * x + y * y) < self.spacing) {
                spawn.links.push (dict ({'source': node, 'target': target}));
            }
        };
        var point = d3.mouse (self.svg.node ());
        var node = dict ({'x': point [0], 'y': point [1]});
        self.nodes.push (node);
        self.nodes.forEach (pushLink);
        self.restart ();
    });},
    get tick () {return __get__ (this, function (self) {
        self.link.attr ('x1', (function __lambda__ (d) {
            return d.source.x;
        })).attr ('y1', (function __lambda__ (d) {
            return d.source.y;
        })).attr ('x2', (function __lambda__ (d) {
            return d.target.x;
        })).attr ('y2', (function __lambda__ (d) {
            return d.target.y;
        }));
        self.node.attr ('cx', (function __lambda__ (d) {
            return d.x;
        })).attr ('cy', (function __lambda__ (d) {
            return d.y;
        }));
    });},
    get restart () {return __get__ (this, function (self) {
        self.link = self.link.data (self.links);
        self.link.enter ().insert ('line', '.node').attr ('class', 'link');
        self.node = self.node.data (self.nodes);
        self.node.enter ().insert ('circle', '.cursor').attr ('class', 'node').attr ('r', 7).call (self.force.drag);
        self.force.start ();
    });}
});
export var spawn = Spawn (window.innerWidth, window.innerHeight);

//# sourceMappingURL=d3js_demo.map”…””}”(hhhj÷  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ`/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/d3js_demo/__target__/d3js_demo.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK’hjæ  ubeh}”(h ]”Œid13”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjã  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj­  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjª  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj“  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj]  hhhNhNubeh}”(h ]”Œexample-d3-js”ah"]”h$]”Œexample: d3.js”ah&]”h(]”uh*h
hjM  hhhh+hKubh)”}”(hhh]”(h)”}”(hŒExample: React”h]”hŒExample: React”…””}”(hj<	  hj:	  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj7	  hhhh+hK˜ubh>)”}”(hX‡  *React* is a JavaScript library for easy creation of interactive UI's. Changes to the UI are made by fast manipulation of a light-weight virtual DOM. The real DOM, which is much slower to manipulate, is then compared with the altered virtual DOM and updated efficiently in a minimum number of steps. This way of working leads to good performance, at the same time keeping a straightforward structure of application UI code, since the complexities of optimizing DOM updates are left to the React library. React is unintrusive and mixes well with Transcrypt, allowing creation of extensive web applications that combine maintainability with speed. This example once again clearly illustrates the philosophy behind Transcrypt: rather than confining you to a "parallel" universe that could never keep up, Transcrypt offers you direct access to the ever expanding universe of innovative JavaScript libraries.”h]”(h–)”}”(hŒ*React*”h]”hŒReact”…””}”(hhhjL	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hjH	  ubhX†   is a JavaScript library for easy creation of interactive UIâ€™s. Changes to the UI are made by fast manipulation of a light-weight virtual DOM. The real DOM, which is much slower to manipulate, is then compared with the altered virtual DOM and updated efficiently in a minimum number of steps. This way of working leads to good performance, at the same time keeping a straightforward structure of application UI code, since the complexities of optimizing DOM updates are left to the React library. React is unintrusive and mixes well with Transcrypt, allowing creation of extensive web applications that combine maintainability with speed. This example once again clearly illustrates the philosophy behind Transcrypt: rather than confining you to a â€œparallelâ€ universe that could never keep up, Transcrypt offers you direct access to the ever expanding universe of innovative JavaScript libraries.”…””}”(hX€   is a JavaScript library for easy creation of interactive UI's. Changes to the UI are made by fast manipulation of a light-weight virtual DOM. The real DOM, which is much slower to manipulate, is then compared with the altered virtual DOM and updated efficiently in a minimum number of steps. This way of working leads to good performance, at the same time keeping a straightforward structure of application UI code, since the complexities of optimizing DOM updates are left to the React library. React is unintrusive and mixes well with Transcrypt, allowing creation of extensive web applications that combine maintainability with speed. This example once again clearly illustrates the philosophy behind Transcrypt: rather than confining you to a "parallel" universe that could never keep up, Transcrypt offers you direct access to the ever expanding universe of innovative JavaScript libraries.”hjH	  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKšhj7	  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K:uh*j¹  hjh	  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KEuh*j¹  hjh	  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒreact_demo.py”h]”hŒreact_demo.py”…””}”(hj	  hj‹	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKhjˆ	  ubj`  )”}”(hX  from org.reactjs import createElement, useState, useEffect, useRef
from org.reactjs.dom import render as react_render


# Helper functions

def h(elm_type, props='', *args):
    return createElement(elm_type, props, *args)


def render(react_element, destination_id, callback=lambda: None):
    container = document.getElementById(destination_id)
    react_render(react_element, container, callback)


def useInterval(func, delay=None):
    # can be used as `useInterval(func, delay)`
    # or as `@useInterval(delay)`
    if delay is None:
        delay = func
        return lambda fn: useInterval(fn, delay)

    ref = useRef(func)
    ref.current = func

    @useEffect.withDeps(delay)
    def setup():
        id = setInterval(lambda: ref.current(), delay)
        return lambda: clearInterval(id)

    return func


# Create a component

def Hello(props):
    count, setCount = useState(0)

    @useInterval(1000)
    def updateCounter():
        setCount(count+1)

    return h(
        'div',
        {'className': 'maindiv'},
        h('h1', None, 'Hello ', props['name']),
        h('p', None, 'Lorem ipsum dolor sit ame.'),
        h('p', None, 'Counter: ', count),
        h(
            'button',
            {'onClick': updateCounter},
            'Increment',
        )
    )


# Render the component in a 'container' div

element = React.createElement(Hello, {'name': 'React!'})
render(element, 'container')
”h]”hX  from org.reactjs import createElement, useState, useEffect, useRef
from org.reactjs.dom import render as react_render


# Helper functions

def h(elm_type, props='', *args):
    return createElement(elm_type, props, *args)


def render(react_element, destination_id, callback=lambda: None):
    container = document.getElementById(destination_id)
    react_render(react_element, container, callback)


def useInterval(func, delay=None):
    # can be used as `useInterval(func, delay)`
    # or as `@useInterval(delay)`
    if delay is None:
        delay = func
        return lambda fn: useInterval(fn, delay)

    ref = useRef(func)
    ref.current = func

    @useEffect.withDeps(delay)
    def setup():
        id = setInterval(lambda: ref.current(), delay)
        return lambda: clearInterval(id)

    return func


# Create a component

def Hello(props):
    count, setCount = useState(0)

    @useInterval(1000)
    def updateCounter():
        setCount(count+1)

    return h(
        'div',
        {'className': 'maindiv'},
        h('h1', None, 'Hello ', props['name']),
        h('p', None, 'Lorem ipsum dolor sit ame.'),
        h('p', None, 'Counter: ', count),
        h(
            'button',
            {'onClick': updateCounter},
            'Increment',
        )
    )


# Render the component in a 'container' div

element = React.createElement(Hello, {'name': 'React!'})
render(element, 'container')
”…””}”(hhhj™	  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒW/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/react_demo/react_demo.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKhjˆ	  ubeh}”(h ]”Œid14”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj…	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj‚	  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒreact_demo.js”h]”hŒreact_demo.js”…””}”(hjÀ	  hj¾	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKhj»	  ubj`  )”}”(hX  // Transcrypt'ed from Python, 2021-06-01 16:18:47
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {render as react_render} from './org.reactjs.dom.js';
import {createElement, useEffect, useRef, useState} from './org.reactjs.js';
var __name__ = '__main__';
export var h = function (elm_type, props) {
    if (typeof props == 'undefined' || (props != null && props.hasOwnProperty ("__kwargtrans__"))) {;
        var props = '';
    };
    var args = tuple ([].slice.apply (arguments).slice (2));
    return createElement (elm_type, props, ...args);
};
export var render = function (react_element, destination_id, callback) {
    if (typeof callback == 'undefined' || (callback != null && callback.hasOwnProperty ("__kwargtrans__"))) {;
        var callback = (function __lambda__ () {
            return null;
        });
    };
    var container = document.getElementById (destination_id);
    react_render (react_element, container, callback);
};
export var useInterval = function (func, delay) {
    if (typeof delay == 'undefined' || (delay != null && delay.hasOwnProperty ("__kwargtrans__"))) {;
        var delay = null;
    };
    if (delay === null) {
        var delay = func;
        return (function __lambda__ (fn) {
            return useInterval (fn, delay);
        });
    }
    var ref = useRef (func);
    ref.current = func;
    var setup = useEffect.withDeps (delay) (function () {
        var id = setInterval ((function __lambda__ () {
            return ref.current ();
        }), delay);
        return (function __lambda__ () {
            return clearInterval (id);
        });
    });
    return func;
};
export var Hello = function (props) {
    var __left0__ = useState (0);
    var count = __left0__ [0];
    var setCount = __left0__ [1];
    var updateCounter = useInterval (1000) (function () {
        setCount (count + 1);
    });
    return h ('div', dict ({'className': 'maindiv'}), h ('h1', null, 'Hello ', props ['name']), h ('p', null, 'Lorem ipsum dolor sit ame.'), h ('p', null, 'Counter: ', count), h ('button', dict ({'onClick': updateCounter}), 'Increment'));
};
export var element = React.createElement (Hello, dict ({'name': 'React!'}));
render (element, 'container');

//# sourceMappingURL=react_demo.map”h]”hX  // Transcrypt'ed from Python, 2021-06-01 16:18:47
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {render as react_render} from './org.reactjs.dom.js';
import {createElement, useEffect, useRef, useState} from './org.reactjs.js';
var __name__ = '__main__';
export var h = function (elm_type, props) {
    if (typeof props == 'undefined' || (props != null && props.hasOwnProperty ("__kwargtrans__"))) {;
        var props = '';
    };
    var args = tuple ([].slice.apply (arguments).slice (2));
    return createElement (elm_type, props, ...args);
};
export var render = function (react_element, destination_id, callback) {
    if (typeof callback == 'undefined' || (callback != null && callback.hasOwnProperty ("__kwargtrans__"))) {;
        var callback = (function __lambda__ () {
            return null;
        });
    };
    var container = document.getElementById (destination_id);
    react_render (react_element, container, callback);
};
export var useInterval = function (func, delay) {
    if (typeof delay == 'undefined' || (delay != null && delay.hasOwnProperty ("__kwargtrans__"))) {;
        var delay = null;
    };
    if (delay === null) {
        var delay = func;
        return (function __lambda__ (fn) {
            return useInterval (fn, delay);
        });
    }
    var ref = useRef (func);
    ref.current = func;
    var setup = useEffect.withDeps (delay) (function () {
        var id = setInterval ((function __lambda__ () {
            return ref.current ();
        }), delay);
        return (function __lambda__ () {
            return clearInterval (id);
        });
    });
    return func;
};
export var Hello = function (props) {
    var __left0__ = useState (0);
    var count = __left0__ [0];
    var setCount = __left0__ [1];
    var updateCounter = useInterval (1000) (function () {
        setCount (count + 1);
    });
    return h ('div', dict ({'className': 'maindiv'}), h ('h1', null, 'Hello ', props ['name']), h ('p', null, 'Lorem ipsum dolor sit ame.'), h ('p', null, 'Counter: ', count), h ('button', dict ({'onClick': updateCounter}), 'Increment'));
};
export var element = React.createElement (Hello, dict ({'name': 'React!'}));
render (element, 'container');

//# sourceMappingURL=react_demo.map”…””}”(hhhjÌ	  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œb/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/react_demo/__target__/react_demo.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKhj»	  ubeh}”(h ]”Œid15”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj¸	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj‚	  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjh	  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hje	  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj7	  hhhNhNubeh}”(h ]”Œexample-react”ah"]”h$]”Œexample: react”ah&]”h(]”uh*h
hjM  hhhh+hK˜ubh)”}”(hhh]”(h)”}”(hŒExample: Riot”h]”hŒExample: Riot”…””}”(hj
  hj
  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj
  hhhh+hK£ubh>)”}”(hXÛ  *Riot* is a UI framework that combines the use of custom tags and a virtual DOM, much like the one in React. Custom tags look like ordinary HTML tags, but whereas HTML tags only define structure, Riot tags define structure, style and behaviour. Custom tags are compiled to JavaScript by a compiler that comes with Riot. With these custom tags as reusable components, web pages can be built. Riot itself is tiny, and the virtual DOM allows for fast adaptation of page content.”h]”(h–)”}”(hŒ*Riot*”h]”hŒRiot”…””}”(hhhj!
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj
  ubhXÕ   is a UI framework that combines the use of custom tags and a virtual DOM, much like the one in React. Custom tags look like ordinary HTML tags, but whereas HTML tags only define structure, Riot tags define structure, style and behaviour. Custom tags are compiled to JavaScript by a compiler that comes with Riot. With these custom tags as reusable components, web pages can be built. Riot itself is tiny, and the virtual DOM allows for fast adaptation of page content.”…””}”(hXÕ   is a UI framework that combines the use of custom tags and a virtual DOM, much like the one in React. Custom tags look like ordinary HTML tags, but whereas HTML tags only define structure, Riot tags define structure, style and behaviour. Custom tags are compiled to JavaScript by a compiler that comes with Riot. With these custom tags as reusable components, web pages can be built. Riot itself is tiny, and the virtual DOM allows for fast adaptation of page content.”hj
  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hK¥hj
  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K:uh*j¹  hj=
  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒriot_demo.html”h]”hŒriot_demo.html”…””}”(hjX
  hjV
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK¨hjS
  ubj`  )”}”(hX4  <!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>Hello PyRiot ;-)</title>
    <!-- for transcrypted version we do not need the compiler.
         for the classic version you can use riot+compiler -->
    <script src="https://cdn.jsdelivr.net/riot/2.5/riot.js"></script>
    <style>
        body {font-family:arial;font-size:30px;padding:50px;}
        h1 {font-size:50px;color:#0000ff;}
    </style>
  </head>

  <body>

  <!-- classic riot (compiled on server, could be done in browser)         -->
        <sample id="s1"></sample>
        <script src="tags/sample.js"></script>
        <script>riot.mount('sample')</script>


  <!-- transcrypted version (transpiled on server, using python)           -->
        <sample2 id='s2' label="nr1"></sample2>
        <mp2     id='s3' label="nr2"></mp2>
        <!-- the transpiled tag's js -->
        <script type="module">
            import * as riot_demo from "./__target__/riot_demo.js"

            // register
            var cls = riot_demo.Sample2
            riot.tag2('sample2', cls.template, cls.style, '', function(opts) {
                new cls(this, opts)})
            document.t1 = riot.mount('sample2')[0].update()
            document.t2 = riot.mount('#s3', 'sample2')[0]
            document.t2.update()
        </script>
  </body>
</html>
”h]”hX4  <!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8" />
    <title>Hello PyRiot ;-)</title>
    <!-- for transcrypted version we do not need the compiler.
         for the classic version you can use riot+compiler -->
    <script src="https://cdn.jsdelivr.net/riot/2.5/riot.js"></script>
    <style>
        body {font-family:arial;font-size:30px;padding:50px;}
        h1 {font-size:50px;color:#0000ff;}
    </style>
  </head>

  <body>

  <!-- classic riot (compiled on server, could be done in browser)         -->
        <sample id="s1"></sample>
        <script src="tags/sample.js"></script>
        <script>riot.mount('sample')</script>


  <!-- transcrypted version (transpiled on server, using python)           -->
        <sample2 id='s2' label="nr1"></sample2>
        <mp2     id='s3' label="nr2"></mp2>
        <!-- the transpiled tag's js -->
        <script type="module">
            import * as riot_demo from "./__target__/riot_demo.js"

            // register
            var cls = riot_demo.Sample2
            riot.tag2('sample2', cls.template, cls.style, '', function(opts) {
                new cls(this, opts)})
            document.t1 = riot.mount('sample2')[0].update()
            document.t2 = riot.mount('#s3', 'sample2')[0]
            document.t2.update()
        </script>
  </body>
</html>
”…””}”(hhhjd
  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒW/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/riot_demo.html”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK¨hjS
  ubeh}”(h ]”Œid16”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjP
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjM
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjJ
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj=
  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj:
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj
  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K;uh*j¹  hjŸ
  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K:uh*j¹  hjŸ
  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒsample.tag, a classic Riot tag”h]”hŒsample.tag, a classic Riot tag”…””}”(hjÄ
  hjÂ
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK®hj¿
  ubj`  )”}”(hX  // vim: ft=html
<sample>

    <h1>Riot Native Tag</h1>

    <h5 each="{lv}">name: {name} - counter: {this.count()}</h5>

    <script>
        this.counter = 0

        // riot's synctactic sugar:
        count() { this.counter += 1; return this.counter }

        // to test stuff on console:
        window.native_tag = this

        this.on('update', function() {
            this.lv = [{name: 'n1'}, {'name': 'n2'}]
            this.update()
        })
    </script>
    <style scoped>
    h1 {color: red}
    </style>

</sample>
”h]”hX  // vim: ft=html
<sample>

    <h1>Riot Native Tag</h1>

    <h5 each="{lv}">name: {name} - counter: {this.count()}</h5>

    <script>
        this.counter = 0

        // riot's synctactic sugar:
        count() { this.counter += 1; return this.counter }

        // to test stuff on console:
        window.native_tag = this

        this.on('update', function() {
            this.lv = [{name: 'n1'}, {'name': 'n2'}]
            this.update()
        })
    </script>
    <style scoped>
    h1 {color: red}
    </style>

</sample>
”…””}”(hhhjÐ
  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒX/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/tags/sample.tag”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK®hj¿
  ubeh}”(h ]”Œid17”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj¼
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj¹
  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒsample.js, compiled by Riot”h]”hŒsample.js, compiled by Riot”…””}”(hj÷
  hjõ
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK®hjò
  ubj`  )”}”(hXð  // vim: ft=html
riot.tag2('sample', '<h1>Riot Native Tag</h1> <h5 each="{lv}">name: {name} - counter: {this.count()}</h5>', 
'sample h1,[riot-tag="sample"] h1,[data-is="sample"] h1{color: red}', '', function(opts) {
        this.counter = 0

        this.count = function() { this.counter += 1; return this.counter }.bind(this)

        window.native_tag = this

        this.on('update', function() {
            this.lv = [{name: 'n1'}, {'name': 'n2'}]
            this.update()
        })
});
”h]”hXð  // vim: ft=html
riot.tag2('sample', '<h1>Riot Native Tag</h1> <h5 each="{lv}">name: {name} - counter: {this.count()}</h5>', 
'sample h1,[riot-tag="sample"] h1,[data-is="sample"] h1{color: red}', '', function(opts) {
        this.counter = 0

        this.count = function() { this.counter += 1; return this.counter }.bind(this)

        window.native_tag = this

        this.on('update', function() {
            this.lv = [{name: 'n1'}, {'name': 'n2'}]
            this.update()
        })
});
”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒW/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/tags/sample.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK®hjò
  ubeh}”(h ]”Œid18”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjï
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj¹
  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj¶
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjŸ
  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjœ
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj
  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KAuh*j¹  hj>  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KBuh*j¹  hj>  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ2riot_tag.py, baseclass of all Transcrypt Riot tags”h]”hŒ2riot_tag.py, baseclass of all Transcrypt Riot tags”…””}”(hjc  hja  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK´hj^  ubj`  )”}”(hXO  # Parent Class for a Transcrypt Riot Tag
#
# This binds the namespace of a riot tag at before-mount event 100% to that of
# the a transcrypt instance, except members which begin with an underscore, those
# are private to the transcrypt object.
#
# The 4 riot lifecycle events are bound to overwritable python functions.
#
# Immutables (strings, ints, ...) are bound to property functions within the tag,
# so the templates work, based on state in the transcrypt tag.
# State can be changed in the riot tag as well but take care to not create new
# references - you won't find them in the Transcrypt tag.
#
#
# Best Practices:
#  - mutate state only in the transcrypt tag.
#  - declare all variables so they are bound into the riot tag
#  - IF you declare new variables to be used in templates, run
#    self.bind_vars(self.riot_tag)
# TODO: docstring format not accepted by the transpiler, strange.

__author__ = "Gunther Klessinger, gk@axiros.com, Germany"

# just a minihack to get some colors, mainly to test lamdas and imports:
from color import colors, cprint as col_print
c = colors
M, I, L, R, B = c['purple'], c['orange'], c['gray'], c['red'], c['black']

lifecycle_ev = ['before-mount', 'mount', 'update', 'unmount']

cur_tag_col = 0
class RiotTag:
    """
    taking care for extending the riot tag obj with
    functions and immutable(!) properties of derivations of us
    See counter.
    """
    debug = None
    # placeholders:
    template = '<h1>it worx</h1>'
    style = ''
    node_name = 'unmounted'
    opts = None
    def __init__(self, tag, opts):
        # opts into the python instance, why not:
        self.opts = opts
        self._setup_tag(tag)
        # giving ourselves a unique color:
        global cur_tag_col # working (!)
        cur_tag_col = (cur_tag_col + 1) % len(colors)
        # TODO values() on a dict
        self.my_col = colors.items()[cur_tag_col][1]

    def _setup_tag(self, tag):
        # keeping mutual refs
        tag.py_obj = self
        self.riot_tag = tag
        # making the event system call self's methods:
        handlers = {}
        for ev in lifecycle_ev:
            f = getattr(self, ev.replace('-', '_'))
            if f:
                # this.on('mount', function() {...}):
                # whats nicer?
                tag.on(ev, f)

    def pp(self, *msg):
        # color flash in the console. one color per tag instance.
        col_print(
            #B(self.riot_tag._riot_id),
            L('<', self.my_col(self.node_name, self.my_col), '/> '),
            M(' '.join([s for s in msg])))

    def _lifecycle_ev(self, mode):
        if self.debug:
            self.pp(mode + 'ing')

    # overwrite these for your specific one:
    def update (self): self._lifecycle_ev('update')
    def mount  (self): self._lifecycle_ev('mount')
    def unmount(self): self._lifecycle_ev('unmount')

    def before_mount(self):
        self._lifecycle_ev('before-mount')
        return self.bind_vars()

    def bind_vars(self):
        tag = self.riot_tag
        self.node_name = tag.root.nodeName.lower()
        self.debug and self.pp('binding vars')
        # binding self's functions into the tag instance
        # binding writable properties to everything else (e.g. ints, strs...)
        tag._immutables = im = []
        lc = lifecycle_ev
        for k in dir(self):
            # private or lifecycle function? don't bind:
            if k[0] == '_' or k in lifecycle_ev or k == 'before_mount':
                continue
            v = getattr(self, k)
            # these I can't write in python. Lets use JS then.
            # TODO there should be, maybe some mocking facility for code
            # testing w/o a js runtime:
            __pragma__('js', '{}', '''
                  typeof v === "function" || typeof v === "object" ?
                  tag[k] = self[k] : tag._immutables.push(k)''')

        __pragma__('js', '{}', '''
        var i = tag._immutables, py = self
        i.forEach(function(k, j, i) {
            Object.defineProperty(tag, k, {
                get: function()  { return self[k]},
                set: function(v) { self[k] = v }
            })
        })''')

”h]”hXO  # Parent Class for a Transcrypt Riot Tag
#
# This binds the namespace of a riot tag at before-mount event 100% to that of
# the a transcrypt instance, except members which begin with an underscore, those
# are private to the transcrypt object.
#
# The 4 riot lifecycle events are bound to overwritable python functions.
#
# Immutables (strings, ints, ...) are bound to property functions within the tag,
# so the templates work, based on state in the transcrypt tag.
# State can be changed in the riot tag as well but take care to not create new
# references - you won't find them in the Transcrypt tag.
#
#
# Best Practices:
#  - mutate state only in the transcrypt tag.
#  - declare all variables so they are bound into the riot tag
#  - IF you declare new variables to be used in templates, run
#    self.bind_vars(self.riot_tag)
# TODO: docstring format not accepted by the transpiler, strange.

__author__ = "Gunther Klessinger, gk@axiros.com, Germany"

# just a minihack to get some colors, mainly to test lamdas and imports:
from color import colors, cprint as col_print
c = colors
M, I, L, R, B = c['purple'], c['orange'], c['gray'], c['red'], c['black']

lifecycle_ev = ['before-mount', 'mount', 'update', 'unmount']

cur_tag_col = 0
class RiotTag:
    """
    taking care for extending the riot tag obj with
    functions and immutable(!) properties of derivations of us
    See counter.
    """
    debug = None
    # placeholders:
    template = '<h1>it worx</h1>'
    style = ''
    node_name = 'unmounted'
    opts = None
    def __init__(self, tag, opts):
        # opts into the python instance, why not:
        self.opts = opts
        self._setup_tag(tag)
        # giving ourselves a unique color:
        global cur_tag_col # working (!)
        cur_tag_col = (cur_tag_col + 1) % len(colors)
        # TODO values() on a dict
        self.my_col = colors.items()[cur_tag_col][1]

    def _setup_tag(self, tag):
        # keeping mutual refs
        tag.py_obj = self
        self.riot_tag = tag
        # making the event system call self's methods:
        handlers = {}
        for ev in lifecycle_ev:
            f = getattr(self, ev.replace('-', '_'))
            if f:
                # this.on('mount', function() {...}):
                # whats nicer?
                tag.on(ev, f)

    def pp(self, *msg):
        # color flash in the console. one color per tag instance.
        col_print(
            #B(self.riot_tag._riot_id),
            L('<', self.my_col(self.node_name, self.my_col), '/> '),
            M(' '.join([s for s in msg])))

    def _lifecycle_ev(self, mode):
        if self.debug:
            self.pp(mode + 'ing')

    # overwrite these for your specific one:
    def update (self): self._lifecycle_ev('update')
    def mount  (self): self._lifecycle_ev('mount')
    def unmount(self): self._lifecycle_ev('unmount')

    def before_mount(self):
        self._lifecycle_ev('before-mount')
        return self.bind_vars()

    def bind_vars(self):
        tag = self.riot_tag
        self.node_name = tag.root.nodeName.lower()
        self.debug and self.pp('binding vars')
        # binding self's functions into the tag instance
        # binding writable properties to everything else (e.g. ints, strs...)
        tag._immutables = im = []
        lc = lifecycle_ev
        for k in dir(self):
            # private or lifecycle function? don't bind:
            if k[0] == '_' or k in lifecycle_ev or k == 'before_mount':
                continue
            v = getattr(self, k)
            # these I can't write in python. Lets use JS then.
            # TODO there should be, maybe some mocking facility for code
            # testing w/o a js runtime:
            __pragma__('js', '{}', '''
                  typeof v === "function" || typeof v === "object" ?
                  tag[k] = self[k] : tag._immutables.push(k)''')

        __pragma__('js', '{}', '''
        var i = tag._immutables, py = self
        i.forEach(function(k, j, i) {
            Object.defineProperty(tag, k, {
                get: function()  { return self[k]},
                set: function(v) { self[k] = v }
            })
        })''')

”…””}”(hhhjo  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒT/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/riot_tag.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK´hj^  ubeh}”(h ]”Œid19”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj[  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjX  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ#riot_tag.js, compiled by Transcrypt”h]”hŒ#riot_tag.js, compiled by Transcrypt”…””}”(hj–  hj”  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hK´hj‘  ubj`  )”}”(hXç  // Transcrypt'ed from Python, 2021-06-01 16:18:52
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {cprint as col_print, colors} from './color.js';
var __name__ = 'riot_tag';
export var __author__ = 'Gunther Klessinger, gk@axiros.com, Germany';
export var c = colors;
var __left0__ = tuple ([c ['purple'], c ['orange'], c ['gray'], c ['red'], c ['black']]);
export var M = __left0__ [0];
export var I = __left0__ [1];
export var L = __left0__ [2];
export var R = __left0__ [3];
export var B = __left0__ [4];
export var lifecycle_ev = ['before-mount', 'mount', 'update', 'unmount'];
export var cur_tag_col = 0;
export var RiotTag =  __class__ ('RiotTag', [object], {
    __module__: __name__,
    debug: null,
    template: '<h1>it worx</h1>',
    style: '',
    node_name: 'unmounted',
    opts: null,
    get __init__ () {return __get__ (this, function (self, tag, opts) {
        self.opts = opts;
        self._setup_tag (tag);
        cur_tag_col = __mod__ (cur_tag_col + 1, len (colors));
        self.my_col = colors.py_items () [cur_tag_col] [1];
    });},
    get _setup_tag () {return __get__ (this, function (self, tag) {
        tag.py_obj = self;
        self.riot_tag = tag;
        var handlers = dict ({});
        for (var ev of lifecycle_ev) {
            var f = getattr (self, ev.py_replace ('-', '_'));
            if (f) {
                tag.on (ev, f);
            }
        }
    });},
    get pp () {return __get__ (this, function (self) {
        var msg = tuple ([].slice.apply (arguments).slice (1));
        col_print (L ('<', self.my_col (self.node_name, self.my_col), '/> '), M (' '.join ((function () {
            var __accu0__ = [];
            for (var s of msg) {
                __accu0__.append (s);
            }
            return __accu0__;
        }) ())));
    });},
    get _lifecycle_ev () {return __get__ (this, function (self, mode) {
        if (self.debug) {
            self.pp (mode + 'ing');
        }
    });},
    get py_update () {return __get__ (this, function (self) {
        self._lifecycle_ev ('update');
    });},
    get mount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('mount');
    });},
    get unmount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('unmount');
    });},
    get before_mount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('before-mount');
        return self.bind_vars ();
    });},
    get bind_vars () {return __get__ (this, function (self) {
        var tag = self.riot_tag;
        self.node_name = tag.root.nodeName.lower ();
        self.debug && self.pp ('binding vars');
        var __left0__ = [];
        tag._immutables = __left0__;
        var im = __left0__;
        var lc = lifecycle_ev;
        for (var k of dir (self)) {
            if (k [0] == '_' || __in__ (k, lifecycle_ev) || k == 'before_mount') {
                continue;
            }
            var v = getattr (self, k);
            
                              typeof v === "function" || typeof v === "object" ?
                              tag[k] = self[k] : tag._immutables.push(k)
        }
        
                var i = tag._immutables, py = self
                i.forEach(function(k, j, i) {
                    Object.defineProperty(tag, k, {
                        get: function()  { return self[k]},
                        set: function(v) { self[k] = v }
                    })
                })
    });}
});

//# sourceMappingURL=riot_tag.map”h]”hXç  // Transcrypt'ed from Python, 2021-06-01 16:18:52
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {cprint as col_print, colors} from './color.js';
var __name__ = 'riot_tag';
export var __author__ = 'Gunther Klessinger, gk@axiros.com, Germany';
export var c = colors;
var __left0__ = tuple ([c ['purple'], c ['orange'], c ['gray'], c ['red'], c ['black']]);
export var M = __left0__ [0];
export var I = __left0__ [1];
export var L = __left0__ [2];
export var R = __left0__ [3];
export var B = __left0__ [4];
export var lifecycle_ev = ['before-mount', 'mount', 'update', 'unmount'];
export var cur_tag_col = 0;
export var RiotTag =  __class__ ('RiotTag', [object], {
    __module__: __name__,
    debug: null,
    template: '<h1>it worx</h1>',
    style: '',
    node_name: 'unmounted',
    opts: null,
    get __init__ () {return __get__ (this, function (self, tag, opts) {
        self.opts = opts;
        self._setup_tag (tag);
        cur_tag_col = __mod__ (cur_tag_col + 1, len (colors));
        self.my_col = colors.py_items () [cur_tag_col] [1];
    });},
    get _setup_tag () {return __get__ (this, function (self, tag) {
        tag.py_obj = self;
        self.riot_tag = tag;
        var handlers = dict ({});
        for (var ev of lifecycle_ev) {
            var f = getattr (self, ev.py_replace ('-', '_'));
            if (f) {
                tag.on (ev, f);
            }
        }
    });},
    get pp () {return __get__ (this, function (self) {
        var msg = tuple ([].slice.apply (arguments).slice (1));
        col_print (L ('<', self.my_col (self.node_name, self.my_col), '/> '), M (' '.join ((function () {
            var __accu0__ = [];
            for (var s of msg) {
                __accu0__.append (s);
            }
            return __accu0__;
        }) ())));
    });},
    get _lifecycle_ev () {return __get__ (this, function (self, mode) {
        if (self.debug) {
            self.pp (mode + 'ing');
        }
    });},
    get py_update () {return __get__ (this, function (self) {
        self._lifecycle_ev ('update');
    });},
    get mount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('mount');
    });},
    get unmount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('unmount');
    });},
    get before_mount () {return __get__ (this, function (self) {
        self._lifecycle_ev ('before-mount');
        return self.bind_vars ();
    });},
    get bind_vars () {return __get__ (this, function (self) {
        var tag = self.riot_tag;
        self.node_name = tag.root.nodeName.lower ();
        self.debug && self.pp ('binding vars');
        var __left0__ = [];
        tag._immutables = __left0__;
        var im = __left0__;
        var lc = lifecycle_ev;
        for (var k of dir (self)) {
            if (k [0] == '_' || __in__ (k, lifecycle_ev) || k == 'before_mount') {
                continue;
            }
            var v = getattr (self, k);
            
                              typeof v === "function" || typeof v === "object" ?
                              tag[k] = self[k] : tag._immutables.push(k)
        }
        
                var i = tag._immutables, py = self
                i.forEach(function(k, j, i) {
                    Object.defineProperty(tag, k, {
                        get: function()  { return self[k]},
                        set: function(v) { self[k] = v }
                    })
                })
    });}
});

//# sourceMappingURL=riot_tag.map”…””}”(hhhj¢  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ_/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/__target__/riot_tag.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hK´hj‘  ubeh}”(h ]”Œid20”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjŽ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjX  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjU  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj>  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj;  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj
  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K@uh*j¹  hjÝ  ubjº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KCuh*j¹  hjÝ  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”(jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ1riot_demo.py, a derived Transcrypt Riot tag class”h]”hŒ1riot_demo.py, a derived Transcrypt Riot tag class”…””}”(hj  hj   ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKºhjý  ubj`  )”}”(hX<  # an example user tag, using RiotTag

from riot_tag import RiotTag

class P(RiotTag):
    debug = 1
    # never do mutables on class level. this is just to check if transpiler
    # creates the same behaviour - and it does, a second tag instance gets
    # the same lv object:
    lv = [{'name': 'n0'}]
    # immuatble on class level. does a second instance start at 1?
    # answer: yes, perfect:
    counter = 1

    template = ''' <div><h1>Riot Transcrypt Tag Instance {label}</h1>
                         <div>INNER</div></div> '''
    def count_up(self):
        self.counter = self.counter + 1
        self.pp('counter:', self.counter, 'len lv:', len(self.lv), 'adding one lv' )
        self.lv.append({'name': 'n' + self.counter})
        return self.counter

# try some inheritance...
class Sample2(P):
    # ... and change the state at every update, just for fun:
    template = P.template.replace('INNER', '''
    <div>
    <h5 each="{lv}">name: {name} - counter: {count_up()}</h5>
    </div>
    ''')

    # no scoped styles currently
    style = '''sample2 h5 {color: green}'''


    def __init__(self, tag, opts):
        self.label = opts.label.capitalize()  # this rocks so much.
        # alternative to super:
        RiotTag.__init__(self, tag, opts)
        # uncomment next line and chrome will stop:
        # debugger
        self.pp('tag init', 'adding 2 lv')
        # mutating the lv object:
        self.lv.extend([{'name': 'n1'}, {'name': 'n2'}])


    def update(self):
        self.pp('update handler in the custom tag, calling super')
        RiotTag.update(self)

”h]”hX<  # an example user tag, using RiotTag

from riot_tag import RiotTag

class P(RiotTag):
    debug = 1
    # never do mutables on class level. this is just to check if transpiler
    # creates the same behaviour - and it does, a second tag instance gets
    # the same lv object:
    lv = [{'name': 'n0'}]
    # immuatble on class level. does a second instance start at 1?
    # answer: yes, perfect:
    counter = 1

    template = ''' <div><h1>Riot Transcrypt Tag Instance {label}</h1>
                         <div>INNER</div></div> '''
    def count_up(self):
        self.counter = self.counter + 1
        self.pp('counter:', self.counter, 'len lv:', len(self.lv), 'adding one lv' )
        self.lv.append({'name': 'n' + self.counter})
        return self.counter

# try some inheritance...
class Sample2(P):
    # ... and change the state at every update, just for fun:
    template = P.template.replace('INNER', '''
    <div>
    <h5 each="{lv}">name: {name} - counter: {count_up()}</h5>
    </div>
    ''')

    # no scoped styles currently
    style = '''sample2 h5 {color: green}'''


    def __init__(self, tag, opts):
        self.label = opts.label.capitalize()  # this rocks so much.
        # alternative to super:
        RiotTag.__init__(self, tag, opts)
        # uncomment next line and chrome will stop:
        # debugger
        self.pp('tag init', 'adding 2 lv')
        # mutating the lv object:
        self.lv.extend([{'name': 'n1'}, {'name': 'n2'}])


    def update(self):
        self.pp('update handler in the custom tag, calling super')
        RiotTag.update(self)

”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒU/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/riot_demo.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKºhjý  ubeh}”(h ]”Œid21”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjú  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj÷  ubjÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ$riot_demo.js, compiled by Transcrypt”h]”hŒ$riot_demo.js, compiled by Transcrypt”…””}”(hj5  hj3  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKºhj0  ubj`  )”}”(hXó
  // Transcrypt'ed from Python, 2021-06-01 16:18:52
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {RiotTag} from './riot_tag.js';
var __name__ = '__main__';
export var P =  __class__ ('P', [RiotTag], {
    __module__: __name__,
    debug: 1,
    lv: [dict ({'name': 'n0'})],
    counter: 1,
    template: ' <div><h1>Riot Transcrypt Tag Instance {label}</h1>\n                         <div>INNER</div></div> ',
    get count_up () {return __get__ (this, function (self) {
        self.counter = self.counter + 1;
        self.pp ('counter:', self.counter, 'len lv:', len (self.lv), 'adding one lv');
        self.lv.append (dict ({'name': 'n' + self.counter}));
        return self.counter;
    });}
});
export var Sample2 =  __class__ ('Sample2', [P], {
    __module__: __name__,
    template: P.template.py_replace ('INNER', '\n    <div>\n    <h5 each="{lv}">name: {name} - counter: {count_up()}</h5>\n    </div>\n    '),
    style: 'sample2 h5 {color: green}',
    get __init__ () {return __get__ (this, function (self, tag, opts) {
        self.label = opts.label.capitalize ();
        RiotTag.__init__ (self, tag, opts);
        self.pp ('tag init', 'adding 2 lv');
        self.lv.extend ([dict ({'name': 'n1'}), dict ({'name': 'n2'})]);
    });},
    get py_update () {return __get__ (this, function (self) {
        self.pp ('update handler in the custom tag, calling super');
        RiotTag.py_update (self);
    });}
});

//# sourceMappingURL=riot_demo.map”h]”hXó
  // Transcrypt'ed from Python, 2021-06-01 16:18:52
import {AssertionError, AttributeError, BaseException, DeprecationWarning, Exception, IndexError, IterableError, KeyError, NotImplementedError, RuntimeWarning, StopIteration, UserWarning, ValueError, Warning, __JsIterator__, __PyIterator__, __Terminal__, __add__, __and__, __call__, __class__, __envir__, __eq__, __floordiv__, __ge__, __get__, __getcm__, __getitem__, __getslice__, __getsm__, __gt__, __i__, __iadd__, __iand__, __idiv__, __ijsmod__, __ilshift__, __imatmul__, __imod__, __imul__, __in__, __init__, __ior__, __ipow__, __irshift__, __isub__, __ixor__, __jsUsePyNext__, __jsmod__, __k__, __kwargtrans__, __le__, __lshift__, __lt__, __matmul__, __mergefields__, __mergekwargtrans__, __mod__, __mul__, __ne__, __neg__, __nest__, __or__, __pow__, __pragma__, __pyUseJsNext__, __rshift__, __setitem__, __setproperty__, __setslice__, __sort__, __specialattrib__, __sub__, __super__, __t__, __terminal__, __truediv__, __withblock__, __xor__, abs, all, any, assert, bool, bytearray, bytes, callable, chr, copy, deepcopy, delattr, dict, dir, divmod, enumerate, filter, float, format, getattr, hasattr, input, int, isinstance, issubclass, len, list, map, max, min, object, ord, pow, print, property, py_TypeError, py_iter, py_metatype, py_next, py_reversed, py_typeof, range, repr, round, set, setattr, sorted, str, sum, tuple, zip} from './org.transcrypt.__runtime__.js';
import {RiotTag} from './riot_tag.js';
var __name__ = '__main__';
export var P =  __class__ ('P', [RiotTag], {
    __module__: __name__,
    debug: 1,
    lv: [dict ({'name': 'n0'})],
    counter: 1,
    template: ' <div><h1>Riot Transcrypt Tag Instance {label}</h1>\n                         <div>INNER</div></div> ',
    get count_up () {return __get__ (this, function (self) {
        self.counter = self.counter + 1;
        self.pp ('counter:', self.counter, 'len lv:', len (self.lv), 'adding one lv');
        self.lv.append (dict ({'name': 'n' + self.counter}));
        return self.counter;
    });}
});
export var Sample2 =  __class__ ('Sample2', [P], {
    __module__: __name__,
    template: P.template.py_replace ('INNER', '\n    <div>\n    <h5 each="{lv}">name: {name} - counter: {count_up()}</h5>\n    </div>\n    '),
    style: 'sample2 h5 {color: green}',
    get __init__ () {return __get__ (this, function (self, tag, opts) {
        self.label = opts.label.capitalize ();
        RiotTag.__init__ (self, tag, opts);
        self.pp ('tag init', 'adding 2 lv');
        self.lv.extend ([dict ({'name': 'n1'}), dict ({'name': 'n2'})]);
    });},
    get py_update () {return __get__ (this, function (self) {
        self.pp ('update handler in the custom tag, calling super');
        RiotTag.py_update (self);
    });}
});

//# sourceMappingURL=riot_demo.map”…””}”(hhhjA  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ`/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/riot_demo/__target__/riot_demo.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKºhj0  ubeh}”(h ]”Œid22”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj-  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj÷  ubeh}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjô  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjÝ  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjÚ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj
  hhhNhNubeh}”(h ]”Œexample-riot”ah"]”h$]”Œexample: riot”ah&]”h(]”uh*h
hjM  hhhh+hK£ubh)”}”(hhh]”(h)”}”(hŒLExample: Using input and print in a DOM __terminal__ element in your browser”h]”hŒLExample: Using input and print in a DOM __terminal__ element in your browser”…””}”(hj†  hj„  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhj  hhhh+hKÀubh>)”}”(hXm  Without special measures, Transcrypt's *print* function prints to the debugging console. However if there's an element with id *__terminal__* in your DOM tree, the *print* function prints to this element. Moreover, the *input* function also prints its prompt message to the terminal element. Input is collected using a dialog box and echoed to the terminal element.”h]”(hŒ)Without special measures, Transcryptâ€™s ”…””}”(hŒ'Without special measures, Transcrypt's ”hj’  hhhNhNubh–)”}”(hŒ*print*”h]”hŒprint”…””}”(hhhj›  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj’  ubhŒS function prints to the debugging console. However if thereâ€™s an element with id ”…””}”(hŒQ function prints to the debugging console. However if there's an element with id ”hj’  hhhNhNubh–)”}”(hŒ*__terminal__*”h]”hŒ__terminal__”…””}”(hhhj®  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj’  ubhŒ in your DOM tree, the ”…””}”(hŒ in your DOM tree, the ”hj’  hhhNhNubh–)”}”(hŒ*print*”h]”hŒprint”…””}”(hhhjÁ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj’  ubhŒ0 function prints to this element. Moreover, the ”…””}”(hŒ0 function prints to this element. Moreover, the ”hj’  hhhNhNubh–)”}”(hŒ*input*”h]”hŒinput”…””}”(hhhjÔ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj’  ubhŒ‹ function also prints its prompt message to the terminal element. Input is collected using a dialog box and echoed to the terminal element.”…””}”(hŒ‹ function also prints its prompt message to the terminal element. Input is collected using a dialog box and echoed to the terminal element.”hj’  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKÂhj  hhubh>)”}”(hŒÉThis means that you can write applications with blocking I/O, rather than event driven behaviour, e.g. for simple activities or, since they are intuitively easy to comprehend, for educational purposes.”h]”hŒÉThis means that you can write applications with blocking I/O, rather than event driven behaviour, e.g. for simple activities or, since they are intuitively easy to comprehend, for educational purposes.”…””}”(hjï  hjí  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKÄhj  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”KBuh*j¹  hjþ  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒterminal_demo.html”h]”hŒterminal_demo.html”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKÇhj  ubj`  )”}”(hXD  <html>
    <head>
        <script type="module">import * as terminal_demo from "./__target__/terminal_demo.js";</script>
    </head>
    <body>
        <b>
            Leave input field blank to quit<br>
            Refresh browser window to restart<br>
        </b>
        <div id='__terminal__'></div>
    </body>
</html>”h]”hXD  <html>
    <head>
        <script type="module">import * as terminal_demo from "./__target__/terminal_demo.js";</script>
    </head>
    <body>
        <b>
            Leave input field blank to quit<br>
            Refresh browser window to restart<br>
        </b>
        <div id='__terminal__'></div>
    </body>
</html>”…””}”(hhhj%  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ_/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/terminal_demo/terminal_demo.html”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKÇhj  ubeh}”(h ]”Œid23”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjþ  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjû  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj  hhhNhNubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K@uh*j¹  hj`  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒterminal_demo.py”h]”hŒterminal_demo.py”…””}”(hj{  hjy  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKÍhjv  ubj`  )”}”(hX§  while True:
    name = input ('What''s your name? ')
    
    if name == '':
        break;
    
    print ('Hi', name, 'I am your computer.')

    age = float (input ('How old are you? '))
    if age < 18:
        print ('Sorry', name, ',', age, 'is too young to drive a car in the Netherlands.')
    else:
        print ('OK', name, ',', age, 'is old enough to drive a car in the Netherlands.')
        
    print ()
    ”h]”hX§  while True:
    name = input ('What''s your name? ')
    
    if name == '':
        break;
    
    print ('Hi', name, 'I am your computer.')

    age = float (input ('How old are you? '))
    if age < 18:
        print ('Sorry', name, ',', age, 'is too young to drive a car in the Netherlands.')
    else:
        print ('OK', name, ',', age, 'is old enough to drive a car in the Netherlands.')
        
    print ()
    ”…””}”(hhhj‡  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ]/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/terminal_demo/terminal_demo.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKÍhjv  ubeh}”(h ]”Œid24”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjs  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjp  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjm  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj`  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hj]  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hj  hhhNhNubeh}”(h ]”ŒGexample-using-input-and-print-in-a-dom-terminal-element-in-your-browser”ah"]”h$]”ŒLexample: using input and print in a dom __terminal__ element in your browser”ah&]”h(]”uh*h
hjM  hhhh+hKÀubh)”}”(hhh]”(h)”}”(hŒiExample: Using the Parcel.js bundler to package a set of modules written in diverse programming languages”h]”hŒiExample: Using the Parcel.js bundler to package a set of modules written in diverse programming languages”…””}”(hjÌ  hjÊ  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*hhjÇ  hhhh+hKÓubh>)”}”(hX  Bundlers are increasingly popular in the world of web development.
With the Parcel bundler, it is possible to integrate Transcrypt modules with modules written in other languages.
Whenever the source code of any module changes, automatic recompilation and repackaging takes place.
Sourcemaps are generated for all non-JavaScript modules, enabling source level debugging in the browser.”h]”hX  Bundlers are increasingly popular in the world of web development.
With the Parcel bundler, it is possible to integrate Transcrypt modules with modules written in other languages.
Whenever the source code of any module changes, automatic recompilation and repackaging takes place.
Sourcemaps are generated for all non-JavaScript modules, enabling source level debugging in the browser.”…””•QB      }”(hjÚ  hjØ  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKÕhjÇ  hhubh>)”}”(hŒRIn the example, the top level file of the module hierarchy is the html file below:”h]”hŒRIn the example, the top level file of the module hierarchy is the html file below:”…””}”(hjè  hjæ  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKÚhjÇ  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K@uh*j¹  hj÷  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒ
index.html”h]”hŒ
index.html”…””}”(hj  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKÝhj  ubj`  )”}”(hX  <html>
<head>
    <meta charset="UTF-8">
    <title>parcel-plugin-python</title>
</head>
<body>
    <h1>Python+Transcrypt Plugin for Parcel Bundler</h1>
    <p>[ open the console for program output ]</p>
    <script src="./index.js"></script>
</body>
</html>
”h]”hX  <html>
<head>
    <meta charset="UTF-8">
    <title>parcel-plugin-python</title>
</head>
<body>
    <h1>Python+Transcrypt Plugin for Parcel Bundler</h1>
    <p>[ open the console for program output ]</p>
    <script src="./index.js"></script>
</body>
</html>
”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ]/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/parcel_demo/example/index.html”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKÝhj  ubeh}”(h ]”Œid25”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hj
  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj÷  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjô  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hjÇ  hhhNhNubh>)”}”(hŒ8The html file above refers to the JavaScript file below:”h]”hŒ8The html file above refers to the JavaScript file below:”…””}”(hjX  hjV  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKâhjÇ  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K>uh*j¹  hjg  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒindex.js”h]”hŒindex.js”…””}”(hj‚  hj€  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKåhj}  ubj`  )”}”(hŒ+import { main } from "./main.py";

main();
”h]”hŒ+import { main } from "./main.py";

main();
”…””}”(hhhjŽ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”Œ[/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/parcel_demo/example/index.js”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKåhj}  ubeh}”(h ]”Œid26”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjz  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjw  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjt  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hjg  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjd  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hjÇ  hhhNhNubh>)”}”(hŒ‹This top level JavaScript file in turn refers to a Python file,
that makes use of many modules, some written in Python, some in JavaScript:”h]”hŒ‹This top level JavaScript file in turn refers to a Python file,
that makes use of many modules, some written in Python, some in JavaScript:”…””}”(hjÈ  hjÆ  hhhNhNubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKêhjÇ  hhubj°  )”}”(hhh]”jµ  )”}”(hhh]”(jº  )”}”(hhh]”h}”(h ]”h"]”h$]”h&]”h(]”Œcolwidth”K=uh*j¹  hj×  ubjÐ  )”}”(hhh]”jÕ  )”}”(hhh]”jÚ  )”}”(hhh]”jK  )”}”(hhh]”(jP  )”}”(hŒmain.py”h]”hŒmain.py”…””}”(hjò  hjð  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jO  hh+hKîhjí  ubj`  )”}”(hXL  from testcontext import Test

def main():
    '''Main function of the program (called from index.js)'''
    # sibling module
    with Test('import sibling') as test:
        import sibling
        test.result = sibling.sibling_func(test.random_num)

    with Test('import sibling as alias_sibling') as test:
        import sibling as alias_sibling
        test.result = alias_sibling.sibling_func(test.random_num)

    with Test('from sibling import sibling_func') as test:
        from sibling import sibling_func
        test.result = sibling_func(test.random_num)

    with Test('from sibling import sibling_func as alias_sibling_func') as test:
        from sibling import sibling_func as alias_sibling_func
        test.result = alias_sibling_func(test.random_num)

    # sibling2 module (using sibling2 because `import * from sibling` would overrride sibling_func above)
    with Test('from sibling2 import *') as test:
        from sibling2 import *
        test.result = sibling2_func(test.random_num)

    # siblingjs.js (Javascript file import)
    with Test('import siblingjs') as test:
        import siblingjs
        test.result = siblingjs.siblingjs_func(test.random_num)

    with Test('import siblingjs as alias_siblingjs') as test:
        import siblingjs as alias_siblingjs
        test.result = alias_siblingjs.siblingjs_func(test.random_num)

    with Test('from siblingjs import siblingjs_func') as test:
        from siblingjs import siblingjs_func
        test.result = siblingjs_func(test.random_num)

    with Test('from siblingjs import siblingjs_func as alias_siblingjs_func') as test:
        from siblingjs import siblingjs_func as alias_siblingjs_func
        test.result = alias_siblingjs_func(test.random_num)

    # mymod package (__init__.py file)
    with Test('import mymod') as test:
        import mymod
        test.result = mymod.mymod_func(test.random_num)

    with Test('import mymod as alias_mymod') as test:
        import mymod as alias_mymod
        test.result = alias_mymod.mymod_func(test.random_num)

    with Test('from mymod import mymod_func') as test:
        from mymod import mymod_func
        test.result = mymod_func(test.random_num)

    with Test('from mymod import mymod_func as alias_mymod_func') as test:
        from mymod import mymod_func as alias_mymod_func
        test.result = alias_mymod_func(test.random_num)

    # mymod.child (subdir module)
    with Test('import mymod.child') as test:
        import mymod.child
        test.result = mymod.child.child_func(test.random_num)

    with Test('alias_child.child_func') as test:
        import mymod.child as alias_child
        test.result = alias_child.child_func(test.random_num)

    with Test('from mymod.child import child_func') as test:
        from mymod.child import child_func
        test.result = child_func(test.random_num)

    with Test('from mymod.child import child_func as alias_child_func') as test:
        from mymod.child import child_func as alias_child_func
        test.result = alias_child_func(test.random_num)

    with Test('import mymod.grandchildmod') as test:
        import mymod.grandchildmod
        test.result = mymod.grandchildmod.grandchildmod_func(test.random_num)

    with Test('import mymod.grandchildmod as alias_grandchildmod') as test:
        import mymod.grandchildmod as alias_grandchildmod
        test.result = alias_grandchildmod.grandchildmod_func(test.random_num)

    with Test('from mymod.grandchildmod.grandchild import grandchild_func') as test:
        from mymod.grandchildmod.grandchild import grandchild_func
        test.result = grandchild_func(test.random_num)

    with Test('from mymod.grandchildmod.grandchild import grandchild_func as alias_grandchild_func') as test:
        from mymod.grandchildmod.grandchild import grandchild_func as alias_grandchild_func
        test.result = alias_grandchild_func(test.random_num)
”h]”hXL  from testcontext import Test

def main():
    '''Main function of the program (called from index.js)'''
    # sibling module
    with Test('import sibling') as test:
        import sibling
        test.result = sibling.sibling_func(test.random_num)

    with Test('import sibling as alias_sibling') as test:
        import sibling as alias_sibling
        test.result = alias_sibling.sibling_func(test.random_num)

    with Test('from sibling import sibling_func') as test:
        from sibling import sibling_func
        test.result = sibling_func(test.random_num)

    with Test('from sibling import sibling_func as alias_sibling_func') as test:
        from sibling import sibling_func as alias_sibling_func
        test.result = alias_sibling_func(test.random_num)

    # sibling2 module (using sibling2 because `import * from sibling` would overrride sibling_func above)
    with Test('from sibling2 import *') as test:
        from sibling2 import *
        test.result = sibling2_func(test.random_num)

    # siblingjs.js (Javascript file import)
    with Test('import siblingjs') as test:
        import siblingjs
        test.result = siblingjs.siblingjs_func(test.random_num)

    with Test('import siblingjs as alias_siblingjs') as test:
        import siblingjs as alias_siblingjs
        test.result = alias_siblingjs.siblingjs_func(test.random_num)

    with Test('from siblingjs import siblingjs_func') as test:
        from siblingjs import siblingjs_func
        test.result = siblingjs_func(test.random_num)

    with Test('from siblingjs import siblingjs_func as alias_siblingjs_func') as test:
        from siblingjs import siblingjs_func as alias_siblingjs_func
        test.result = alias_siblingjs_func(test.random_num)

    # mymod package (__init__.py file)
    with Test('import mymod') as test:
        import mymod
        test.result = mymod.mymod_func(test.random_num)

    with Test('import mymod as alias_mymod') as test:
        import mymod as alias_mymod
        test.result = alias_mymod.mymod_func(test.random_num)

    with Test('from mymod import mymod_func') as test:
        from mymod import mymod_func
        test.result = mymod_func(test.random_num)

    with Test('from mymod import mymod_func as alias_mymod_func') as test:
        from mymod import mymod_func as alias_mymod_func
        test.result = alias_mymod_func(test.random_num)

    # mymod.child (subdir module)
    with Test('import mymod.child') as test:
        import mymod.child
        test.result = mymod.child.child_func(test.random_num)

    with Test('alias_child.child_func') as test:
        import mymod.child as alias_child
        test.result = alias_child.child_func(test.random_num)

    with Test('from mymod.child import child_func') as test:
        from mymod.child import child_func
        test.result = child_func(test.random_num)

    with Test('from mymod.child import child_func as alias_child_func') as test:
        from mymod.child import child_func as alias_child_func
        test.result = alias_child_func(test.random_num)

    with Test('import mymod.grandchildmod') as test:
        import mymod.grandchildmod
        test.result = mymod.grandchildmod.grandchildmod_func(test.random_num)

    with Test('import mymod.grandchildmod as alias_grandchildmod') as test:
        import mymod.grandchildmod as alias_grandchildmod
        test.result = alias_grandchildmod.grandchildmod_func(test.random_num)

    with Test('from mymod.grandchildmod.grandchild import grandchild_func') as test:
        from mymod.grandchildmod.grandchild import grandchild_func
        test.result = grandchild_func(test.random_num)

    with Test('from mymod.grandchildmod.grandchild import grandchild_func as alias_grandchild_func') as test:
        from mymod.grandchildmod.grandchild import grandchild_func as alias_grandchild_func
        test.result = alias_grandchild_func(test.random_num)
”…””}”(hhhjþ  ubah}”(h ]”h"]”h$]”h&]”h(]”Œsource”ŒZ/home/jac/active/geatec/transcrypt/Transcrypt/transcrypt/demos/parcel_demo/example/main.py”jq  jr  js  ‰jt  }”jv  Ksuh*j_  hh+hKîhjí  ubeh}”(h ]”Œid27”ah"]”j{  ah$]”h&]”h(]”Œliteral_block”ˆuh*jJ  hjê  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÙ  hjç  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÔ  hjä  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*jÏ  hj×  ubeh}”(h ]”h"]”h$]”h&]”h(]”Œcols”Kuh*j´  hjÔ  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*j¯  hjÇ  hhhNhNubh>)”}”(hX±  Whenever a source file of this mixed bag of modules is changed,
the whole module hierarchy is rebuilt and repackaged.
The bundler gets its information from the *.project* file in the *__target__* directory.
Consequently Transcrypt can be fully integrated in an automated build process for a project featuring an arbitrary mix of source languages.
With this feature, Python has truly become a first class citizen in the browser world.”h]”(hŒ Whenever a source file of this mixed bag of modules is changed,
the whole module hierarchy is rebuilt and repackaged.
The bundler gets its information from the ”…””}”(hŒ Whenever a source file of this mixed bag of modules is changed,
the whole module hierarchy is rebuilt and repackaged.
The bundler gets its information from the ”hj6  hhhNhNubh–)”}”(hŒ
*.project*”h]”hŒ.project”…””}”(hhhj?  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj6  ubhŒ file in the ”…””}”(hŒ file in the ”hj6  hhhNhNubh–)”}”(hŒ*__target__*”h]”hŒ
__target__”…””}”(hhhjR  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h•hj6  ubhŒî directory.
Consequently Transcrypt can be fully integrated in an automated build process for a project featuring an arbitrary mix of source languages.
With this feature, Python has truly become a first class citizen in the browser world.”…””}”(hŒî directory.
Consequently Transcrypt can be fully integrated in an automated build process for a project featuring an arbitrary mix of source languages.
With this feature, Python has truly become a first class citizen in the browser world.”hj6  hhhNhNubeh}”(h ]”h"]”h$]”h&]”h(]”uh*h=hh+hKóhjÇ  hhubeh}”(h ]”Œhexample-using-the-parcel-js-bundler-to-package-a-set-of-modules-written-in-diverse-programming-languages”ah"]”h$]”Œiexample: using the parcel.js bundler to package a set of modules written in diverse programming languages”ah&]”h(]”uh*h
hjM  hhhh+hKÓubeh}”(h ]”Œmixed-examples”ah"]”h$]”Œmixed examples”ah&]”h(]”uh*h
hhhhhh+hK0ubeh}”(h ]”h"]”h$]”h&]”h(]”Œsource”h+uh*hŒcurrent_source”NŒcurrent_line”NŒsettings”Œdocutils.frontend”ŒValues”“”)”}”(hNŒ	generator”NŒ	datestamp”NŒsource_link”NŒ
source_url”NŒtoc_backlinks”jÙ  Œfootnote_backlinks”KŒsectnum_xform”KŒstrip_comments”NŒstrip_elements_with_classes”NŒstrip_classes”NŒreport_level”KŒ
halt_level”KŒexit_status_level”KŒdebug”NŒwarning_stream”NŒ	traceback”ˆŒinput_encoding”Œ	utf-8-sig”Œinput_encoding_error_handler”Œstrict”Œoutput_encoding”Œutf-8”Œoutput_encoding_error_handler”j  Œerror_encoding”Œutf-8”Œerror_encoding_error_handler”Œbackslashreplace”Œlanguage_code”Œen”Œrecord_dependencies”NŒconfig”NŒ	id_prefix”hŒauto_id_prefix”Œid”Œdump_settings”NŒdump_internals”NŒdump_transforms”NŒdump_pseudo_xml”NŒexpose_internals”NŒstrict_visitor”NŒ_disable_config”NŒ_source”h+Œ_destination”NŒ_config_files”]”Œpep_references”NŒpep_base_url”Œ https://www.python.org/dev/peps/”Œpep_file_url_template”Œpep-%04d”Œrfc_references”NŒrfc_base_url”Œhttps://tools.ietf.org/html/”Œ	tab_width”KŒtrim_footnote_reference_space”‰Œfile_insertion_enabled”ˆŒraw_enabled”KŒsyntax_highlight”Œlong”Œsmart_quotes”ˆŒsmartquotes_locales”]”Œcharacter_level_inline_markup”‰Œdoctitle_xform”‰Œdocinfo_xform”KŒsectsubtitle_xform”‰Œembed_stylesheet”‰Œcloak_email_addresses”ˆŒenv”NubŒreporter”NŒindirect_targets”]”Œsubstitution_defs”}”Œsubstitution_names”}”Œrefnames”}”Œrefids”}”(j®  ]”j£  aj  ]”j  auŒnameids”}”(jJ  jG  h}hzhhhejB  j?  jŸ  jœ  j÷  jô  jx  ju  jB  j?  jX  j®  j~  j{  j>  j  j:  j7  j  j~  jZ  jW  j4	  j1	  j	
  j
  j~  j{  jÄ  jÁ  jp  jm  uŒ	nametypes”}”(jJ  Nh}NhhˆjB  NjŸ  ˆj÷  ˆjx  NjB  NjX  ˆj~  Nj>  ˆj:  Nj  NjZ  Nj4	  Nj	
  Nj~  NjÄ  Njp  Nuh }”(jG  hhzh,heh_j?  h€jœ  j–  jô  jî  ju  jM  j?  j^  j®  j±  j{  j_  j  j  j7  j  j~  jE  jW  j„  j1	  j]  j
  j7	  j{  j
  jÁ  j  jm  jÇ  jy  jL  jÒ  j®  j)  j  j  jÞ  j5  j  j;  j  j$  j   jW  j3  j=  j  jŸ  j{  j  jÝ  j×  j³  j
	  jæ  j¬	  jˆ	  jß	  j»	  jw
  jS
  jã
  j¿
  j  jò
  j‚  j^  jµ  j‘  j!  jý  jT  j0  j8  j  jš  jv  j1  j  j¡  j}  j  jí  uŒfootnote_refs”}”Œcitation_refs”}”Œautofootnotes”]”Œautofootnote_refs”]”Œsymbol_footnotes”]”Œsymbol_footnote_refs”]”Œ	footnotes”]”Œ	citations”]”Œautofootnote_start”KŒsymbol_footnote_start”K Œ
id_counter”Œcollections”ŒCounter”“”}”j«  Ks…”R”Œparse_messages”]”Œtransform_messages”]”(h	Œsystem_message”“”)”}”(hhh]”h>)”}”(hhh]”hŒ/Hyperlink target "code-pong" is not referenced.”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hj   ubah}”(h ]”h"]”h$]”h&]”h(]”Œlevel”KŒtype”ŒINFO”Œsource”h+Œline”K7uh*jþ  ubjÿ  )”}”(hhh]”h>)”}”(hhh]”hŒ8Hyperlink target "code-encaps-fabric" is not referenced.”…””}”(hhhj  ubah}”(h ]”h"]”h$]”h&]”h(]”uh*h=hj  ubah}”(h ]”h"]”h$]”h&]”h(]”Œlevel”KŒtype”j  Œsource”h+Œline”KMuh*jþ  ubeŒtransformer”NŒ
decoration”Nhhub.