playhtml

---

playhtml working log

Overview

make something that creates a world out of websites

• a small data-tag that you can attach to any element that makes it “takeable” and any place that makes it “placeable”
  • can-take
  • can-place
  • can-move
  • can-draw
  • can-age

old

• how to do this without prohibitive data costs?
• how to do this with API key or no account creation / no custom javascript required?

API design

plug-and-play this is intended for immediate use and consumption. Effectively “templates” that you can plug and play with your own data.

<div can-move style="font-size: 80px">🛋</div>

Ideally, these high-level templates are composed of the lower-level functions that can also be used on their own.

low-level functions option 1: persist just the data, make it accessible on the actual html element as a data attribute?

<div onDrag="onDrag">
</div>
 
<script>
	function onDrag(e, currData) {
		let x = currData.x + e.clientX - this.startMouseX
		let y = currData.y + e.clientY - this.startMouseY
		element.style.transform = `translate(${x}px, ${y}px)`;
		return {x,y} 
	}
</script>
 
// after library effects
<div onDrag="onDrag" playhtml-data="{x,y}">
</div>

• is it better to store as data attribute or in localStorage?
  • for simple things I like data attribute because it’s all visible and parseable from the DOM but for longer data it’ll pollute the DOM…
  • it’s already being stored in indexeddb.. I should just provide some easy accessor of global variables to access all that data

option 2: persist style update for that function

<div onDrag="onDrag">
</div>
 
<script>
	function onDrag(e, currTransform) {
		const currData = parse(currTransform)
		let x = e.clientX - this.startMouseX
		let y = e.clientY - this.startMouseY
		return 'transform: translate(${x}px, ${y}px);'
	}
</script>
 
// after library effects
<div onDrag="onDrag" style="transform: translate(${x}px, ${y}px)">
</div>

• this is less flexible than the option 1, but a bit simpler since you just have to worry about the actual CSS properties of the affected element

Project Log

I’m attempting to build this using partykit

• partykit is quite nice but i should use yjs… the real pain is just working in vanilla HTML which im not familiar with

• what happens when multiple people are dragging at the same time?

  • build in indicators that it’s being acted upon for things that have an ongoing action
  • how to handle conflicting actions:
    • only allow one person at a time to do it
    • build in resistance?

security considerations what to worry about here?

accounts do we need identities/accounts associated with people?

• for can-take and can-place will probably require some kind of association of “this is mine” unless there are infinite ones to take
  • could require the extension for these.
• apparently partykit is working on auth and presumably will have identities then

name brainstorming

html, websites, play, collaborative, fun, together, handmade

• open-websites
• playsites
• playsite
• playhtml (playdough)
• freehtml
• bricolage
• moss
• coral
• guest
• lichen
• MMOHTML
• archipelago

for demo

• start with showing we-bsite and talk about the background and motivation? [1min]
• go into the demo [1min]
• show the code [1min]
• talk about extensions and future [1min]

posting into reddit Whenever I work on a personal project, I find myself wanting to add these bits of presence (that remember their state) but it’s so much of a hassle to spin up a database and add on collaboration for a small project, so I made this library to make it super easy to share and persist state across HTML elements and on websites generally.

I want the internet to feel more alive and for real-time collaborative technology to be used for more fun and personal uses! and this has felt like a fun move in that direction.

Demo: https://playhtml.fun/ Github: https://github.com/spencerc99/playhtml