Skip to content

Commit 368fc76

Browse files
clragonclragon
committed
applied format
1 parent 3cd3fd0 commit 368fc76

5 files changed

Lines changed: 129 additions & 64 deletions

File tree

‎src/app/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export const App = () => {
88
<WalltakerSocketServiceProvider>
99
<BrowserRouter>
1010
<Routes>
11-
<Route path="/" element={<HomePage />} />
12-
<Route path="/play" element={<GamePage />} />
11+
<Route path='/' element={<HomePage />} />
12+
<Route path='/play' element={<GamePage />} />
1313
</Routes>
1414
</BrowserRouter>
1515
</WalltakerSocketServiceProvider>

‎src/settings/SettingsProvider.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { useCallback } from 'react';
2-
import { GameEvent, GameHypnoType, PlayerBody, PlayerGender, WalltakerConfig } from '../types';
2+
import {
3+
GameEvent,
4+
GameHypnoType,
5+
PlayerBody,
6+
PlayerGender,
7+
WalltakerConfig,
8+
} from '../types';
39
import { createLocalStorageProvider, VibrationMode } from '../utils';
410
import { interpolateWith } from '../utils/translate';
511

@@ -40,8 +46,8 @@ export const defaultSettings: Settings = {
4046
vibrations: VibrationMode.thump,
4147
walltaker: {
4248
enabled: false,
43-
id: null
44-
}
49+
id: null,
50+
},
4551
};
4652

4753
const settingsStorageKey = 'settings';

‎src/settings/components/WalltalkerSettings.tsx‎

Lines changed: 62 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,44 @@
1-
import { Button, SettingsLabel, SettingsTile, Spinner, TextInput, ToggleTile, ToggleTileType } from '../../common';
2-
import { faCheckSquare, faPowerOff, faSpinner, faSquare } from '@fortawesome/free-solid-svg-icons';
1+
import {
2+
Button,
3+
SettingsLabel,
4+
SettingsTile,
5+
Spinner,
6+
TextInput,
7+
ToggleTile,
8+
ToggleTileType,
9+
} from '../../common';
10+
import {
11+
faCheckSquare,
12+
faPowerOff,
13+
faSpinner,
14+
faSquare,
15+
} from '@fortawesome/free-solid-svg-icons';
316
import { usePornSocketService } from '../../utils/porn-socket/porn-socket-service.tsx';
417
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
518
import styled from 'styled-components';
619
import { useSetting } from '../SettingsProvider.tsx';
720
import { useEffect, useState } from 'react';
8-
import { LinkResponse, WalltakerSocketService } from '../../utils/porn-socket/walltaker.tsx';
21+
import {
22+
LinkResponse,
23+
WalltakerSocketService,
24+
} from '../../utils/porn-socket/walltaker.tsx';
925
import { defaultTransition } from '../../utils';
1026
import { motion } from 'framer-motion';
1127
import { useImages } from '../ImageProvider.tsx';
1228
import { ImageServiceType, ImageType } from '../../types';
1329

1430
const Header = styled.div`
15-
display: flex;
16-
gap: 1ex;
17-
align-items: center;
18-
margin-bottom: 0.75rem;
31+
display: flex;
32+
gap: 1ex;
33+
align-items: center;
34+
margin-bottom: 0.75rem;
1935
`;
2036

2137
const StyledLinksForm = styled.div`
22-
grid-column: 1 / -1;
23-
display: grid;
24-
grid-template-columns: auto 1fr auto;
25-
gap: 0.75rem;
38+
grid-column: 1 / -1;
39+
display: grid;
40+
grid-template-columns: auto 1fr auto;
41+
gap: 0.75rem;
2642
`;
2743

2844
export const WalltalkerSettings = () => {
@@ -41,53 +57,63 @@ export const WalltalkerSettings = () => {
4157
if (config.id && service.ready) {
4258
setLoadingLink(true);
4359

44-
service.service?.listenTo(config.id)
60+
service.service
61+
?.listenTo(config.id)
4562
.then(() => WalltakerSocketService.getLink(config.id ?? 0))
4663
.then(link => {
47-
if (images.find(image => image.full === link.post_url)) return link
64+
if (images.find(image => image.full === link.post_url)) return link;
4865

49-
setImages([...images, {
50-
thumbnail: link.post_thumbnail_url,
51-
preview: link.post_thumbnail_url,
52-
full: link.post_url,
53-
type: ImageType.image,
54-
source: link.post_url,
55-
service: ImageServiceType.e621,
56-
id: link.post_url,
57-
}]);
66+
setImages([
67+
...images,
68+
{
69+
thumbnail: link.post_thumbnail_url,
70+
preview: link.post_thumbnail_url,
71+
full: link.post_url,
72+
type: ImageType.image,
73+
source: link.post_url,
74+
service: ImageServiceType.e621,
75+
id: link.post_url,
76+
},
77+
]);
5878
return link;
5979
})
6080
.then(link => link && setListenedLink(link))
6181
.finally(() => setLoadingLink(false));
6282
}
6383

6484
return () => {
65-
if (config.id) service.service?.muteFrom(config.id).catch(() => setListenedLink(null));
85+
if (config.id)
86+
service.service?.muteFrom(config.id).catch(() => setListenedLink(null));
6687
};
6788
}, [config.id, service.enabled, service.ready, service.service]);
6889

6990
const getLinks = () => {
7091
setLoadingLinks(true);
7192

7293
WalltakerSocketService.getLinksFromUsername(username)
73-
.then((links) => setLinks(links ?? []))
94+
.then(links => setLinks(links ?? []))
7495
.catch(() => setLinks([]))
7596
.finally(() => setLoadingLinks(false));
7697
};
7798

7899
const enabledAndReady = config.enabled && service.enabled && service.ready;
79100

80101
return (
81-
<SettingsTile label="Walltalker">
102+
<SettingsTile label='Walltalker'>
82103
<ToggleTile
83104
value={enabledAndReady}
84105
onClick={() => {
85106
setConfig({ ...config, enabled: !service.enabled });
86107
service.setEnabled(!service.enabled);
87108
}}
88109
type={ToggleTileType.radio}
89-
trailing={service.enabled && !service.ready ? <FontAwesomeIcon icon={faSpinner} spinPulse /> :
90-
<FontAwesomeIcon icon={faPowerOff} />}
110+
trailing={
111+
service.enabled && !service.ready ? (
112+
<FontAwesomeIcon icon={faSpinner} spinPulse />
113+
) : (
114+
<FontAwesomeIcon icon={faPowerOff} />
115+
)
116+
}
91117
>
92118
<strong>Use Walltaker</strong>
93119
<p>Let others choose wallpapers for your session, live!</p>
@@ -103,7 +129,12 @@ export const WalltalkerSettings = () => {
103129
<>
104130
<FontAwesomeIcon icon={faCheckSquare} />
105131
<span>Listening to {listenedLink.id}</span>
106-
<a href={`https://walltaker.joi.how/links/${listenedLink.id}`} target="_blank">Change Wallpaper</a>
132+
<a
133+
href={`https://walltaker.joi.how/links/${listenedLink.id}`}
134+
target='_blank'
135+
>
136+
Change Wallpaper
137+
</a>
107138
</>
108139
)}
109140
{service.enabled && !service.ready && (
@@ -135,13 +166,13 @@ export const WalltalkerSettings = () => {
135166
transition={defaultTransition}
136167
>
137168
<StyledLinksForm>
138-
<SettingsLabel htmlFor="username">Username</SettingsLabel>
169+
<SettingsLabel htmlFor='username'>Username</SettingsLabel>
139170
<TextInput
140-
id="username"
171+
id='username'
141172
value={username}
142173
onChange={setUsername}
143174
onSubmit={getLinks}
144-
placeholder="Enter walltaker username..."
175+
placeholder='Enter walltaker username...'
145176
style={{ gridColumn: '2 / -1' }}
146177
disabled={!enabledAndReady}
147178
/>

‎src/utils/porn-socket/porn-socket-service.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ export function usePornSocketService(enableDefault = false) {
2121

2222
useEffect(() => {
2323
if (enabled) {
24-
service?.connect()
24+
service
25+
?.connect()
2526
.then(() => setReady(true))
26-
.catch(() => setReady(false));}
27+
.catch(() => setReady(false));
28+
}
2729

2830
return () => {
2931
service?.disconnect().then(() => setReady(false));
@@ -36,4 +38,4 @@ export function usePornSocketService(enableDefault = false) {
3638
ready,
3739
service,
3840
};
39-
}
41+
}

‎src/utils/porn-socket/walltaker.tsx‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
import { PropsWithChildren, useEffect, useRef } from 'react';
2-
import { PornSocketContext, PornSocketService } from './porn-socket-service.tsx';
2+
import {
3+
PornSocketContext,
4+
PornSocketService,
5+
} from './porn-socket-service.tsx';
36
import { useImages } from '../../settings';
47
import { ImageServiceType, ImageType } from '../../types';
58

@@ -30,8 +33,7 @@ export interface UserResponse {
3033

3134
export class WalltakerSocketService implements PornSocketService {
3235
private socket: WebSocket | null = null;
33-
onChange: (link: LinkResponse) => void = () => {
34-
};
36+
onChange: (link: LinkResponse) => void = () => {};
3537

3638
connect(): Promise<void> {
3739
return new Promise((res, rej) => {
@@ -62,7 +64,7 @@ export class WalltakerSocketService implements PornSocketService {
6264
}
6365

6466
disconnect(): Promise<void> {
65-
return new Promise((res) => {
67+
return new Promise(res => {
6668
if (this.socket) {
6769
this.socket.addEventListener('close', () => res());
6870
this.socket.close();
@@ -81,7 +83,10 @@ export class WalltakerSocketService implements PornSocketService {
8183
const channelId = this.channelIdentifierFor(id);
8284
const message = { command: 'subscribe', identifier: channelId };
8385

84-
this.socket.addEventListener('message', this.firstMessageHandlerFor('confirm_subscription', id, rej, res));
86+
this.socket.addEventListener(
87+
'message',
88+
this.firstMessageHandlerFor('confirm_subscription', id, rej, res)
89+
);
8590
this.socket.send(JSON.stringify(message));
8691
});
8792
}
@@ -102,13 +107,15 @@ export class WalltakerSocketService implements PornSocketService {
102107
}
103108

104109
static async getLink(id: number) {
105-
return fetch(`https://walltaker.joi.how/api/links/${id}.json`)
106-
.then(res => res.json() as unknown as LinkResponse);
110+
return fetch(`https://walltaker.joi.how/api/links/${id}.json`).then(
111+
res => res.json() as unknown as LinkResponse
112+
);
107113
}
108114

109115
static async getLinksFromUsername(username: string) {
110-
const result = await fetch(`https://walltaker.joi.how/api/users/${username}.json`)
111-
.then(res => res.json() as unknown as UserResponse);
116+
const result = await fetch(
117+
`https://walltaker.joi.how/api/users/${username}.json`
118+
).then(res => res.json() as unknown as UserResponse);
112119
return result.links;
113120
}
114121

@@ -123,47 +130,66 @@ export class WalltakerSocketService implements PornSocketService {
123130
return JSON.stringify({ channel: 'LinkChannel', id });
124131
}
125132

126-
private firstMessageHandlerFor(eventName: string, id: number, rej: (message?: string) => void, res: () => void) {
133+
private firstMessageHandlerFor(
134+
eventName: string,
135+
id: number,
136+
rej: (message?: string) => void,
137+
res: () => void
138+
) {
127139
const MAX_RETRIES = 4;
128140
let tries = 0;
129141

130142
const handler = (message: MessageEvent<string>) => {
131143
const content = JSON.parse(message.data);
132-
if (content.type === eventName && content.identifier === this.channelIdentifierFor(id)) {
144+
if (
145+
content.type === eventName &&
146+
content.identifier === this.channelIdentifierFor(id)
147+
) {
133148
this.socket?.removeEventListener('message', handler);
134149
res();
135150
return;
136151
}
137152

138153
if (++tries > MAX_RETRIES) {
139154
this.socket?.removeEventListener('message', handler);
140-
rej(`Max retries hit when waiting for subscription confirmation for Link#${id}.`);
155+
rej(
156+
`Max retries hit when waiting for subscription confirmation for Link#${id}.`
157+
);
141158
}
142159
};
143160

144161
return handler;
145162
}
146163
}
147164

148-
export function WalltakerSocketServiceProvider({ children }: PropsWithChildren<object>) {
165+
export function WalltakerSocketServiceProvider({
166+
children,
167+
}: PropsWithChildren<object>) {
149168
const [images, setImages] = useImages();
150169
const walltakerSocketService = useRef(new WalltakerSocketService());
151170

152171
useEffect(() => {
153-
walltakerSocketService.current.onChange = (link) => {
172+
walltakerSocketService.current.onChange = link => {
154173
if (images.find(image => image.full === link.post_url)) return;
155174

156-
setImages([...images, {
157-
thumbnail: link.post_thumbnail_url,
158-
preview: link.post_thumbnail_url,
159-
full: link.post_url,
160-
type: ImageType.image,
161-
source: link.post_url,
162-
service: ImageServiceType.e621,
163-
id: link.post_url,
164-
}]);
175+
setImages([
176+
...images,
177+
{
178+
thumbnail: link.post_thumbnail_url,
179+
preview: link.post_thumbnail_url,
180+
full: link.post_url,
181+
type: ImageType.image,
182+
source: link.post_url,
183+
service: ImageServiceType.e621,
184+
id: link.post_url,
185+
},
186+
]);
165187
};
166188
}, [images, setImages]);
167189

168-
return <PornSocketContext.Provider value={walltakerSocketService.current}>{children}</PornSocketContext.Provider>;
169-
}
190+
return (
191+
<PornSocketContext.Provider value={walltakerSocketService.current}>
192+
{children}
193+
</PornSocketContext.Provider>
194+
);
195+
}

0 commit comments

Comments
 (0)