def __init__(self, place):
def set_target_x(ev):
print(self.x, self.target_x)
self.x = self.target_x
self.x = 0
it = self.it = svg.g(id="theblogguy", transform="translate(0,600)", className="hander")
self.lleg = svg.image(href=RLEG, x= "50px", y="85px", width=RLX, height=RLX)
self.rleg = svg.image(href=RLEG, x= "20px", y="85px", width=RLX, height=RLX)
self.img = svg.image(href=BLOG, x= "0px", y="0px", width="100px", height="100px")
self.go = svg.rect(id="theblog", x="0px", y="700px", width="1024px", height="40px")
self.go.style.fillOpacity = 0.3
self.go.onclick = self.goer
self.tlk = svg.image(href=SPEECH, x= "40px", y="-90px", width="100px", height="100px")
self.tlk.style.opacity = 0
self.talk()
place <= self.go
place <= self.it
it <= self.lleg
it <= self.rleg
it <= self.img
it <= self.tlk
it.onanimationend = set_target_x
#it.onclick = self.walk
self.ax = self.anim()
self.ar = self.walk()
def draw(self):
self.layer = svg.g(id='buildlayer')
self.catcher = svg.rect(
x=0, y=0, width=WIDTH, height=HEIGHT,
style={'fill': '#fff'}
)
self.layer <= self.catcher
return self.layer
def draw(self, svg_interface):
self.svg_interface = svg_interface
self.builder_layer = self.builder.draw()
self.grid_layer = self.draw_grid()
self.rail_layer = svg.g(id='raillayer')
self.node_layer = self.draw_nodes()
self.exit_layer = svg.g(id='exitlayer')
Exit.highlighter = svg.path(id='routehighlighter')
Exit.highlighter.classList.add('highlighted')
self.exit_layer <= Exit.highlighter
self.aux_pt = self.svg_interface.createSVGPoint()
return [
self.builder_layer,
self.grid_layer,
self.rail_layer,
self.node_layer,
self.exit_layer,
]
def draw(self, x, y):
self.x = x
self.y = y
self.object = svg.g(
transform='translate({},{})'.format(x, y),
id=self.id,
)
self.object.classList.add('node')
self.object <= svg.circle(cx=0, cy=0, r=7)
self.dead_end_stop = None
return self.object
def draw_grid(self):
layer = svg.g(id='gridlayer')
for y in self.row_ys:
line = svg.line(x1=0, x2=self._win_width, y1=y, y2=y)
line.classList.add('grid')
layer <= line
for x in self.col_xs:
line = svg.line(x1=x, x2=x, y1=0, y2=self._win_height)
line.classList.add('grid')
layer <= line
return layer
def draw(self, grid):
self.x = 0 if self.left else WIDTH
self.y = self.node.y
self.object = svg.g(
transform='translate({},{})'.format(self.x, self.y),
id=self.id,
)
self.object.classList.add('exit')
self.object <= centered_rect(
width=int(grid.col_width * .66),
height=grid.row_height,
color=self.color,
)
self.object.bind('mouseover', self.highlight_route)
self.object.bind('mouseout', self.unhighlight_route)
return self.object
def set_up_board_svg_graphics():
# alternative graphics method.
global APANEL, SHOW_SELECTION_Button, board
boarddiv = html.DIV(Id="boarddivid", style={"backgroundColor":"#CCFFCC"})
boarddiv <= html.I("Puzzle state:")
APANEL = svg.g(Id="panel")
board = svg.svg(Id="svgboard",
style={"width":PAINTING_WIDTH, "height":PAINTING_HEIGHT,
"backgroundColor":"#AAAABB"})
board <= APANEL
boarddiv <= board
# Put in a button for controlling whether or not the currently selected box is highlighted.
SHOW_SELECTION_Button = html.BUTTON("Hide/Show selected box", Id="HideOrShowSelected")
SHOW_SELECTION_Button.bind('click', hideOrShowSelection)
boarddiv <= SHOW_SELECTION_Button
gui <= boarddiv
def draw_nodes(self):
layer = svg.g(id='nodelayer')
for y, row_nodes in zip(self.row_ys, self.nodes):
for x, node in zip(self.col_xs, row_nodes):
layer <= node.draw(x, y)
return layer
def __init__(self, place):
it = self.it = svg.g(id="alien0", transform="translate(400,600)", Class="hander")
self.img = svg.image(href=ALIEN, x= "0px", y="0px", width="100px", height="120px")
place <= self.it
it <= self.img
def __init__(self, resource, line_height, line_width):
self.graphic_container = svg.g()
self.resource = resource
self.item_height = line_height
voffset = 5
# Name string HACK:dominant-baseline
self.text = svg.text(resource.name,
x=10,
y=voffset,
font_size=20,
text_anchor='start')
self.text.attrs['dominant-baseline'] = "hanging"
# Progress rectangle
self.rect_width = 100
rect_right_margin = 5
rect_x_start = line_width - self.rect_width - rect_right_margin
rect_y_start = voffset
rect_height = 15
rect_rx = 5
self.rect = svg.rect(x=rect_x_start,
y=rect_y_start,
width=self.rect_width,
height=rect_height,
rx=0)
self.number_text = svg.text("",
x=line_width - rect_right_margin -
(self.rect_width / 2),
y=voffset + 2,
font_size=16,
text_anchor="middle",
font_weight="bold")
self.number_text.attrs['dominant-baseline'] = "hanging"
# Contour rectangle
id_str = ('contour_' + resource.name).replace(" ", "_")
clip_id_str = ('clip_rect_' + resource.name).replace(" ", "_")
clip_rect = svg.rect(x=rect_x_start,
y=rect_y_start,
width=self.rect_width,
height=rect_height,
rx=rect_rx,
stroke="black",
style={
"fill-opacity": "0",
"stroke-opacity": "1"
},
id=clip_id_str)
# 'use' structure
clip = svg.clipPath(id=id_str)
clip <= clip_rect
g = svg.g(style={"clip-path": "url(#" + id_str + ")"})
g <= self.rect
g <= svg.use(href="#" + clip_id_str)
self.border = svg.rect(id="itemContainer_rect",
x=0,
y=0,
width=line_width,
height=line_height,
rx=rect_rx,
fill="grey",
style={"fill-opacity": "0.5"})
self.border.attrs['visibility'] = 'hidden'
self.graphic_container <= self.border
# SVG elements
self.graphic_container <= clip
self.graphic_container <= g
self.graphic_container <= self.text
self.graphic_container <= self.number_text
self.graphic_container.attrs['visibility'] = 'hidden'
# Visible
self.hidden = True
def initial_render():
boarddiv = html.DIV(Id = "boarddivid", style = {"backgroundColor":"rgb(180,198,211)"})
# Create canvas
global ctx, roleCanvas
roleCanvas = html.CANVAS(id = "roleCanvas", width = GAME_WIDTH, height = GAME_HEIGHT)
ctx = roleCanvas.getContext("2d")
# Create svg board
global APANEL, board, PList
board = svg.svg(Id = "svgboard",
style = {"width":GAME_WIDTH, "height":GAME_HEIGHT,
"backgroundColor":"rgb(190,208,221)"})
board.elt.style.display = "none"
APANEL = svg.g(Id = "panel", style = {"text-align" : "center"})
# Create music divs
global musicDisplay
musicDisplay = html.DIV(id ="musicDisplay")
musicDisplay.style = { 'width' : str(GAME_WIDTH) + "px",
'height' : str(GAME_HEIGHT) + "px",
"backgroundColor":"black",
'display' : 'none',
'color' : 'white',
'text-align' : 'center',
'font-weight' : 'bold',
'font-size' : '28pt'}
playButton = html.BUTTON(id = "playButton", type = "button")
playButton.style = {'width' : str( 1/4 *GAME_WIDTH) + "px",
'height' : str( 1/5 * GAME_HEIGHT) + "px",
'position' : 'absolute',
'top' : str(GAME_HEIGHT + 10) + "px",
'left' : "28px"
}
playButton.innerHTML = "Play Song"
playButton.bind('click',handlePlayButtonClick)
songSelected = html.P(id = "songSelected")
songSelected.style = {'margin' : 0}
songSelected.innerHTML = "No Song Selected"
# Create rule divs
global ruleDisplay
ruleDisplay = html.DIV(id="ruleDisplay")
ruleDisplay.style = { 'width' : str(GAME_WIDTH) + "px",
'height' : str(GAME_HEIGHT) + "px",
"backgroundColor":"black",
'display' : 'none',
'color' : 'white',
'text-align' : 'center',
'font-weight' : 'bold',
'font-size' : '28pt'}
board <= APANEL
boarddiv <= board
boarddiv <= roleCanvas
musicDisplay <= songSelected
musicDisplay <= playButton
boarddiv <= musicDisplay
boarddiv <= ruleDisplay
gui <= boarddiv
# Javascript that manages canvas.
setCanvasManager()