revealable_tiles.py

#!/usr/bin/env python3

import random

def printen(strr):
	print(strr, end='')


PANEL_ON = "https://staging.cohostcdn.org/attachment/f4e82b02-9cce-4da5-a768-9b9e90271b7b/panel1.png"
PANEL_OFF = "https://staging.cohostcdn.org/attachment/91402e8b-ad9b-4bc2-a710-9f4b411b1229/panel2.png"
BACKGROUND = "https://staging.cohostcdn.org/attachment/f006276b-462e-4b45-a061-a2a6c3c7ea64/eggbugbg.png"

printen(f'''<div style="position:relative;width:100%;padding-bottom:100%;background-image:url('{BACKGROUND}');background-size:cover;background-position:center;">''')
NUM=4
positions = [(x,y) for x in range(NUM) for y in range(NUM)]
random.shuffle(positions)
first = (2,3)
positions.remove(first)
printen(f'''<details style="position:absolute;top:{first[1]/NUM*100}%;left:{first[0]/NUM*100}%;height:{100/NUM}%;width:{100/NUM}%;overflow:show;pointer-events:none;" open>''')
printen('''<summary style="position:absolute;top:0%;left:0%;height:100%;width:100%;background:rgba(0,0,0,.01);font-size:0;pointer-events:auto;cursor:pointer;"></summary>''')
printen(f'''<div style="position:absolute;top:0%;left:0%;height:100%;width:100%;background-image:url('{PANEL_OFF}');background-size:100%;font-size:0;pointer-events:none;"></div>''')

positions.remove((1,2))
positions.insert(0,(1,2))

for pos in positions:
	diffx = pos[0]-first[0]
	diffy = pos[1]-first[1]
	printen(f'''<details style="position:absolute;top:{diffy*100}%;left:{diffx*100}%;height:100%;width:100%;font-size:0;pointer-events:none;" open>''')
	printen('''<summary style="position:absolute;top:0%;left:0%;height:100%;width:100%;background:rgba(0,0,0,.01);font-size:0;pointer-events:auto;cursor:pointer;"></summary>''')
	printen(f'''<div style="position:absolute;top:0%;left:0%;height:100%;width:100%;background-image:url('{PANEL_OFF}');background-size:100%;font-size:0;pointer-events:none;"></div>''')
	printen(f'''<div style="position:absolute;top:{-diffy*100}%;left:{-diffx*100}%;height:100%;width:100%;background-image:url('{PANEL_ON}');background-size:100%;font-size:0;pointer-events:auto;"></div>''')
	first = pos
for pos in positions:
	printen('''</details>''')
printen('''</details>''')