├── .env.local
├── src
    ├── env.d.ts
    ├── layouts
    │   └── default.astro
    ├── components
    │   ├── slide.astro
    │   └── team-unlock.astro
    ├── pages
    │   ├── admin.astro
    │   └── index.astro
    └── scripts
    │   └── slide-state.ts
├── tsconfig.json
├── .vscode
    ├── extensions.json
    └── launch.json
├── partykit.json
├── astro.config.mjs
├── .gitignore
├── README.md
├── package.json
├── public
    └── favicon.svg
└── party
    └── index.ts


/.env.local:
--------------------------------------------------------------------------------
1 | PUBLIC_PARTYKIT_URL=localhost:1999


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/partykit.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://www.partykit.io/schema.json",
3 |   "name": "astro-slides-party",
4 |   "main": "party/index.ts",
5 |   "compatibilityDate": "2024-04-16"
6 | }
7 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/astro.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'astro/config';
 2 | 
 3 | import sentry from '@sentry/astro';
 4 | 
 5 | // https://astro.build/config
 6 | export default defineConfig({
 7 | 	integrations: [sentry()],
 8 | 	devToolbar: {
 9 | 		enabled: false,
10 | 	},
11 | });
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | # generated types
 4 | .astro/
 5 | 
 6 | # dependencies
 7 | node_modules/
 8 | 
 9 | # logs
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 
23 | # jetbrains setting folder
24 | .idea/
25 | 
26 | .partykit/
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Slide deck but it's actually a bunch of mini-games
 2 | 
 3 | This is an interactive slide deck that's intended to be playful and require audience participation.
 4 | 
 5 | ## Ideas
 6 | 
 7 | - X people to unlock
 8 | - flash poll
 9 | - pop quiz
10 | - reactions
11 | - collab space invaders
12 | - encore button
13 | 
14 | ## Requirements
15 | 
16 | - slide view
17 | - presenter view
18 | - mobile view / audience view
19 | 
20 | ## TODO
21 | 
22 | - [ ] Attendee view
23 | - [ ] Auth for admin actions protection
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-slides",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro check && astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "@astrojs/check": "^0.5.10",
14 |     "@sentry/astro": "^7.109.0",
15 |     "astro": "^4.5.15",
16 |     "partysocket": "1.0.1",
17 |     "typescript": "^5.4.3",
18 |     "xstate": "^5.11.0"
19 |   },
20 |   "devDependencies": {
21 |     "partykit": "0.0.103"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/layouts/default.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 | 	title: string;
 4 | }
 5 | 
 6 | const { title } = Astro.props;
 7 | ---
 8 | 
 9 | <html lang="en">
10 | 	<head>
11 | 		<meta charset="utf-8" />
12 | 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13 | 		<meta name="viewport" content="width=device-width" />
14 | 		<meta name="generator" content={Astro.generator} />
15 | 		<title>{title}</title>
16 | 	</head>
17 | 	<body>
18 | 		<slot />
19 | 	</body>
20 | </html>
21 | 
22 | <style>
23 | 	:root {
24 | 		font-family: mallory-ultra;
25 | 		font-size: 22px;
26 | 		line-height: 1.1;
27 | 	}
28 | 
29 | 	* {
30 | 		box-sizing: border-box;
31 | 	}
32 | 
33 | 	body {
34 | 		margin: 0;
35 | 		overflow: hidden;
36 | 	}
37 | </style>
38 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/slide.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | export interface Props {
 3 | 	slug?: string;
 4 | }
 5 | 
 6 | const { slug = '' } = Astro.props;
 7 | ---
 8 | 
 9 | <div class="slide" data-slug={slug}>
10 | 	<div class="content">
11 | 		<slot />
12 | 	</div>
13 | </div>
14 | 
15 | <style>
16 | 	.slide {
17 | 		align-items: center;
18 | 		background: #fee;
19 | 		block-size: 100dvh;
20 | 		display: flex;
21 | 		inline-size: 100vw;
22 | 		place-content: center;
23 | 		text-align: center;
24 | 
25 | 		&.hidden {
26 | 			display: none;
27 | 		}
28 | 	}
29 | 
30 | 	.content {
31 | 		block-size: 90dvh;
32 | 		inline-size: 90vw;
33 | 		place-content: center;
34 | 
35 | 		h1 {
36 | 			font-size: clamp(1.25rem, 3vw, 2.25rem);
37 | 			margin: 0;
38 | 			text-transform: uppercase;
39 | 			text-wrap: balance;
40 | 		}
41 | 	}
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/pages/admin.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/default.astro';
 3 | ---
 4 | 
 5 | <Layout title="Putting fun back into coding">
 6 | 	<div class="admin-controls">
 7 | 		<button class="decrement">Previous Slide</button>
 8 | 		<input name="current-slide" class="current-slide" value="0" type="text" />
 9 | 		<button class="increment">Next Slide</button>
10 | 	</div>
11 | </Layout>
12 | 
13 | <script>
14 | 	import { countActor } from '../scripts/slide-state';
15 | 
16 | 	const prevBtn = document.querySelector('.decrement');
17 | 	const nextBtn = document.querySelector('.increment');
18 | 	const currentSlide = document.querySelector(
19 | 		'.current-slide',
20 | 	) as HTMLInputElement;
21 | 
22 | 	countActor.subscribe((state) => {
23 | 		currentSlide!.value = `${state.context.count}`;
24 | 	});
25 | 
26 | 	prevBtn?.addEventListener('click', () => {
27 | 		countActor.send({ type: 'DEC' });
28 | 	});
29 | 
30 | 	nextBtn?.addEventListener('click', () => {
31 | 		countActor.send({ type: 'INC' });
32 | 	});
33 | </script>
34 | 
35 | <style>
36 | 	.admin-controls {
37 | 		position: absolute;
38 | 		inset-block-end: 0;
39 | 		inset-inline: 0;
40 | 		background: black;
41 | 		padding: 5rem 2rem;
42 | 		display: flex;
43 | 		place-content: center;
44 | 		gap: 0.5rem;
45 | 	}
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from '../layouts/default.astro';
 3 | import Slide from '../components/slide.astro';
 4 | import TeamUnlock from '../components/team-unlock.astro';
 5 | ---
 6 | 
 7 | <Layout title="Putting fun back into coding">
 8 | 	<Slide>
 9 | 		<h1>What happens if I add way too much text and it wraps?</h1>
10 | 	</Slide>
11 | 	<TeamUnlock />
12 | 	<Slide>
13 | 		<h1>Another one</h1>
14 | 	</Slide>
15 | 	<Slide>
16 | 		<h1>Wow</h1>
17 | 	</Slide>
18 | </Layout>
19 | 
20 | <script>
21 | 	import { countActor, send } from '../scripts/slide-state';
22 | 
23 | 	const slides = document.querySelectorAll(
24 | 		'.slide',
25 | 	) as NodeListOf<HTMLDivElement>;
26 | 
27 | 	countActor.subscribe((state) => {
28 | 		const slideIndex = Math.min(state.context.count, slides.length - 1);
29 | 
30 | 		const currentSlide = slides[slideIndex];
31 | 
32 | 		for (let slide of slides) {
33 | 			const slug = slide.dataset.slug ?? '';
34 | 
35 | 			slide.classList.add('hidden');
36 | 			send({ type: 'exit', value: slug });
37 | 		}
38 | 
39 | 		const currentSlug = currentSlide.dataset.slug ?? '';
40 | 		currentSlide.classList.remove('hidden');
41 | 
42 | 		if (currentSlug !== '') {
43 | 			send({ type: 'enter', value: currentSlug });
44 | 			// 	console.log({ type: 'enter', value: currentSlug });
45 | 			// 	console.log('sending...');
46 | 		}
47 | 	});
48 | </script>
49 | 


--------------------------------------------------------------------------------
/party/index.ts:
--------------------------------------------------------------------------------
 1 | import type * as Party from 'partykit/server';
 2 | 
 3 | export default class Server implements Party.Server {
 4 | 	slide = 0;
 5 | 
 6 | 	// team unlock
 7 | 	unlockers = new Set();
 8 | 
 9 | 	constructor(readonly room: Party.Room) {}
10 | 
11 | 	onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
12 | 		// A websocket just connected!
13 | 		console.log(
14 | 			`Connected:
15 |   id: ${conn.id}
16 |   room: ${this.room.id}
17 |   url: ${new URL(ctx.request.url).pathname}`,
18 | 		);
19 | 
20 | 		// let's send a message to the connection
21 | 		conn.send(
22 | 			JSON.stringify({
23 | 				type: 'initialize',
24 | 				value: this.slide,
25 | 			}),
26 | 		);
27 | 	}
28 | 
29 | 	onMessage(data: string, sender: Party.Connection) {
30 | 		const message = JSON.parse(data);
31 | 
32 | 		switch (message.type) {
33 | 			case 'team-unlock-hold':
34 | 				this.unlockers.add(sender.id);
35 | 				this.room.broadcast(
36 | 					JSON.stringify({
37 | 						type: 'team-unlock-update',
38 | 						value: this.unlockers.size,
39 | 					}),
40 | 				);
41 | 				break;
42 | 
43 | 			case 'team-unlock-release':
44 | 				this.unlockers.delete(sender.id);
45 | 				this.room.broadcast(
46 | 					JSON.stringify({
47 | 						type: 'team-unlock-update',
48 | 						value: this.unlockers.size,
49 | 					}),
50 | 				);
51 | 				break;
52 | 
53 | 			default:
54 | 				this.room.broadcast(JSON.stringify(message));
55 | 		}
56 | 	}
57 | }
58 | 
59 | Server satisfies Party.Worker;
60 | 


--------------------------------------------------------------------------------
/src/scripts/slide-state.ts:
--------------------------------------------------------------------------------
 1 | import PartySocket from 'partysocket';
 2 | import { createMachine, assign, createActor } from 'xstate';
 3 | 
 4 | export const partySocket = new PartySocket({
 5 | 	host: import.meta.env.PUBLIC_PARTYKIT_URL,
 6 | 	room: 'lwj',
 7 | });
 8 | 
 9 | export function send({ type, value }: { type: string; value?: any }) {
10 | 	partySocket.send(JSON.stringify({ type, value }));
11 | }
12 | 
13 | partySocket.addEventListener('message', (event) => {
14 | 	const message = JSON.parse(event.data);
15 | 
16 | 	switch (message.type) {
17 | 		case 'initialize':
18 | 		case 'update-slide':
19 | 			countActor.send({ type: 'SET', value: message.value });
20 | 			break;
21 | 
22 | 		default:
23 | 			console.log(`Unknown type "${message.type}"`);
24 | 	}
25 | });
26 | 
27 | const countMachine = createMachine({
28 | 	context: {
29 | 		count: 0,
30 | 	} as { count: number },
31 | 	on: {
32 | 		INC: {
33 | 			actions: assign({
34 | 				count: ({ context }) => {
35 | 					const nextCount = context.count + 1;
36 | 
37 | 					send({
38 | 						type: 'update-slide',
39 | 						value: nextCount,
40 | 					});
41 | 
42 | 					return nextCount;
43 | 				},
44 | 			}),
45 | 		},
46 | 		DEC: {
47 | 			actions: assign({
48 | 				count: ({ context }) => {
49 | 					const nextCount = Math.max(context.count - 1, 0);
50 | 
51 | 					send({
52 | 						type: 'update-slide',
53 | 						value: nextCount,
54 | 					});
55 | 
56 | 					return nextCount;
57 | 				},
58 | 			}),
59 | 		},
60 | 		SET: {
61 | 			actions: assign({
62 | 				count: ({ event }) => event.value,
63 | 			}),
64 | 		},
65 | 	},
66 | });
67 | 
68 | export const countActor = createActor(countMachine).start();
69 | 


--------------------------------------------------------------------------------
/src/components/team-unlock.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | /*
 3 |  * 1. Locked state
 4 |  *    - shows a QR code and a short link
 5 |  *    - instruction: X people need to boop this corgi before we begin
 6 |  *    - show the corgi to be booped
 7 |  *    - counters: people on site, # of boops
 8 |  * 2. Unlocked state
 9 |  *    - slide content
10 |  */
11 | import Slide from './slide.astro';
12 | ---
13 | 
14 | <Slide slug="team-unlock">
15 | 	<h1>TODO: team unlock</h1>
16 | 	<p>Press and hold the button for a surprise.</p>
17 | 	<button id="unlock">HOLD! (<span id="count">0</span>)</button>
18 | </Slide>
19 | 
20 | <script>
21 | 	import { partySocket, send } from '../scripts/slide-state';
22 | 	import { createMachine, createActor } from 'xstate';
23 | 
24 | 	const button = document.getElementById('unlock') as HTMLButtonElement;
25 | 	const count = document.getElementById('count') as HTMLSpanElement;
26 | 
27 | 	function handleButtonHold() {
28 | 		send({ type: 'team-unlock-hold' });
29 | 		console.log('button held');
30 | 	}
31 | 
32 | 	function handleButtonRelease() {
33 | 		send({ type: 'team-unlock-release' });
34 | 		console.log('button released');
35 | 	}
36 | 
37 | 	const teamUnlockMachine = createMachine(
38 | 		{
39 | 			id: 'team-unlock',
40 | 			initial: 'inactive',
41 | 			context: {} as {},
42 | 			states: {
43 | 				inactive: {
44 | 					entry: 'deactivateSlide',
45 | 					on: {
46 | 						activate: 'active',
47 | 					},
48 | 				},
49 | 				active: {
50 | 					entry: 'activateSlide',
51 | 					on: {
52 | 						deactivate: 'inactive',
53 | 					},
54 | 				},
55 | 			},
56 | 		},
57 | 		{
58 | 			actions: {
59 | 				activateSlide: () => {
60 | 					button.addEventListener('mousedown', handleButtonHold);
61 | 					button.addEventListener('mouseup', handleButtonRelease);
62 | 				},
63 | 				deactivateSlide: () => {
64 | 					button.removeEventListener('mousedown', handleButtonHold);
65 | 					button.removeEventListener('mouseup', handleButtonRelease);
66 | 				},
67 | 			},
68 | 		},
69 | 	);
70 | 
71 | 	const teamUnlockActor = createActor(teamUnlockMachine).start();
72 | 
73 | 	partySocket.addEventListener('message', (event) => {
74 | 		const message = JSON.parse(event.data);
75 | 
76 | 		if (message.type === 'enter' && message.value === 'team-unlock') {
77 | 			teamUnlockActor.send({ type: 'activate' });
78 | 			return;
79 | 		}
80 | 
81 | 		if (message.type === 'exit' && message.value === 'team-unlock') {
82 | 			teamUnlockActor.send({ type: 'deactivate' });
83 | 			return;
84 | 		}
85 | 
86 | 		if (message.type === 'team-unlock-update') {
87 | 			const currentCount = parseInt(message.value);
88 | 			count.innerText = `${currentCount}`;
89 | 		}
90 | 	});
91 | </script>
92 | 


--------------------------------------------------------------------------------