y u no permission
` 20 | : html`Weatherboard
`} 21 | ${state.hasTag('getName') 22 | ? html`` 38 | : ''} 39 |
42 | ${state.context.name && !leaderboard[state.context.id]
43 | ? html`
44 |
82 | `;
83 | };
84 |
85 | const elApp = document.getElementById('app') as HTMLDivElement;
86 |
87 | // get room from query params or default to 'thunderdome'
88 | const room =
89 | new URLSearchParams(window.location.search).get('room') ?? 'thunderdome';
90 |
91 | export const partySocket = new PartySocket({
92 | host: PARTYKIT_HOST,
93 | room,
94 | });
95 |
96 | const actor = createActor(weatherMachine, {
97 | input: {
98 | id: partySocket.id,
99 | },
100 | });
101 |
102 | actor.subscribe((s) => {
103 | if ('startViewTransition' in document) {
104 | (document as any).startViewTransition(() => {
105 | render(view(actor.getSnapshot(), actor.send), elApp);
106 | });
107 | } else {
108 | render(view(actor.getSnapshot(), actor.send), elApp);
109 | }
110 | });
111 |
112 | actor.start();
113 |
--------------------------------------------------------------------------------
/src/machine.ts:
--------------------------------------------------------------------------------
1 | import type { Leaderboard } from './server';
2 | import {
3 | assign,
4 | createMachine,
5 | fromPromise,
6 | fromCallback,
7 | sendTo,
8 | } from 'xstate';
9 | import { partySocket } from './client';
10 |
11 | export const weatherMachine = createMachine(
12 | {
13 | initial: 'connecting',
14 | types: {
15 | context: {} as {
16 | name: string | null;
17 | location: string | null;
18 | leaderboard: Leaderboard;
19 | id: string;
20 | },
21 | input: {} as {
22 | id: string;
23 | },
24 | },
25 | context: ({ input }) => {
26 | return {
27 | name: null,
28 | location: null,
29 | leaderboard: {},
30 | id: input.id,
31 | };
32 | },
33 | invoke: {
34 | id: 'party',
35 | src: fromCallback(({ sendBack, receive }) => {
36 | partySocket.addEventListener('message', (event) => {
37 | const eventObject = JSON.parse(event.data);
38 | console.log(eventObject);
39 | sendBack(eventObject);
40 | });
41 |
42 | partySocket.addEventListener('open', () => {
43 | sendBack({ type: 'partySocket.open' });
44 | });
45 |
46 | receive((event) => {
47 | partySocket.send(JSON.stringify(event));
48 | });
49 | }),
50 | },
51 | states: {
52 | connecting: {
53 | on: {
54 | 'partySocket.open': 'connected',
55 | },
56 | },
57 | connected: {
58 | initial: 'checkIfRegistered',
59 |
60 | states: {
61 | checkIfRegistered: {
62 | always: [
63 | {
64 | guard: 'hasRegistered',
65 | target: 'leaderboard',
66 | },
67 | { target: 'getName' },
68 | ],
69 | },
70 | getName: {
71 | tags: 'getName',
72 | on: {
73 | nameGiven: {
74 | target: 'getLocation',
75 | guard: ({ event }) => event.name.length,
76 | actions: assign({
77 | name: ({ event }) => event.name,
78 | }),
79 | },
80 | },
81 | },
82 | getLocation: {
83 | invoke: {
84 | src: 'getLocation',
85 | onError: {
86 | target: 'noPermission',
87 | },
88 | onDone: [
89 | {
90 | guard: ({ event }) => event.output,
91 | actions: [
92 | assign({
93 | location: ({ event }) => event.output,
94 | }),
95 | sendTo('party', ({ context }) => ({
96 | type: 'register',
97 | name: context.name,
98 | location: context.location,
99 | })),
100 | ],
101 | target: 'leaderboard',
102 | },
103 | { target: 'noPermission' },
104 | ],
105 | },
106 | },
107 | noPermission: {
108 | tags: 'noPermission',
109 | },
110 | leaderboard: {
111 | entry: () => {
112 | localStorage.setItem('registered', 'true');
113 | },
114 | },
115 | },
116 | },
117 | },
118 | on: {
119 | 'leaderboard.updated': {
120 | actions: assign({
121 | leaderboard: ({ event }) => event.leaderboard,
122 | }),
123 | },
124 | },
125 | },
126 | {
127 | guards: {
128 | hasRegistered: () => {
129 | return localStorage.getItem('registered') === 'true';
130 | },
131 | },
132 | actors: {
133 | getLocation: fromPromise(async () => {
134 | if (!navigator.geolocation) {
135 | return Promise.reject('no permission');
136 | }
137 |
138 | // get location from browser
139 | const location = await new Promise((res, rej) =>
140 | navigator.geolocation.getCurrentPosition(
141 | (pos) => {
142 | res(`${pos.coords.latitude},${pos.coords.longitude}`);
143 | },
144 | (err) => {
145 | rej(err);
146 | }
147 | )
148 | );
149 |
150 | const res = Promise.resolve(location);
151 |
152 | return res;
153 | }),
154 | },
155 | }
156 | );
157 |
--------------------------------------------------------------------------------
/src/server.ts:
--------------------------------------------------------------------------------
1 | import type * as Party from 'partykit/server';
2 |
3 | const WEATHER_API_KEY = '36dd02d5282f473caec170818230810';
4 |
5 | const createUrl = (location: string) =>
6 | `http://api.weatherapi.com/v1/current.json?key=${WEATHER_API_KEY}&q=${location}&aqi=no`;
7 |
8 | export type Leaderboard = Record<
9 | string,
10 | {
11 | name: string;
12 | location: Location;
13 | current: Current;
14 | }
15 | >;
16 |
17 | interface Location {
18 | name: string;
19 | region: string;
20 | country: string;
21 | lat: number;
22 | lon: number;
23 | tz_id: string;
24 | localtime_epoch: number;
25 | localtime: string;
26 | }
27 |
28 | interface Condition {
29 | text: string;
30 | icon: string;
31 | code: number;
32 | }
33 |
34 | interface Current {
35 | last_updated_epoch: number;
36 | last_updated: string;
37 | temp_c: number;
38 | temp_f: number;
39 | is_day: number;
40 | condition: Condition;
41 | wind_mph: number;
42 | wind_kph: number;
43 | wind_degree: number;
44 | wind_dir: string;
45 | pressure_mb: number;
46 | pressure_in: number;
47 | precip_mm: number;
48 | precip_in: number;
49 | humidity: number;
50 | cloud: number;
51 | feelslike_c: number;
52 | feelslike_f: number;
53 | vis_km: number;
54 | vis_miles: number;
55 | uv: number;
56 | gust_mph: number;
57 | gust_kph: number;
58 | }
59 |
60 | interface WeatherResponse {
61 | location: Location;
62 | current: Current;
63 | }
64 |
65 | async function refetch(leaderboard: Leaderboard) {
66 | const promises = Object.values(leaderboard).map(({ location }) =>
67 | fetch(createUrl(location.name))
68 | );
69 | const responses = await Promise.all(promises);
70 | const jsons = await Promise.all(responses.map((r) => r.json()));
71 | const newLeaderboard = Object.fromEntries(
72 | Object.entries(leaderboard).map(([id, user], i) => [
73 | id,
74 | {
75 | ...user,
76 | current: jsons[i].current,
77 | },
78 | ])
79 | );
80 |
81 | return newLeaderboard;
82 | }
83 |
84 | export default class Server implements Party.Server {
85 | constructor(readonly party: Party.Party) {}
86 |
87 | async onConnect(conn: Party.Connection, ctx: Party.ConnectionContext) {
88 | // A websocket just connected!
89 | console.log(
90 | `Connected:
91 | id: ${conn.id}
92 | room: ${this.party.id}
93 | url: ${new URL(ctx.request.url).pathname}`
94 | );
95 |
96 | const leaderboard =
97 | (await this.party.storage.get
48 |
57 | `
58 | : ''}
59 | ${Object.entries(leaderboard)
60 | .sort(
61 | ([, itemA], [, itemB]) => itemB.current.temp_c - itemA.current.temp_c
62 | )
63 | .map(
64 | ([id, { name, location, current }], i) => html`
65 |
49 |
50 |
52 | ?? °
51 |
53 | ${state.context.name}
54 |
55 | Finding a thermometer…
56 |
70 |
79 | `
80 | )}
81 |
71 | 
72 |
74 | ${current.temp_c}°
73 | ${name}
75 |
76 | ${location.name}, ${location.country}
77 |
78 |