forked from external-repos/LifeTrinket
279 lines
9.8 KiB
TypeScript
279 lines
9.8 KiB
TypeScript
import { twc } from 'react-twc';
|
|
import { useAnalytics } from '../../Hooks/useAnalytics';
|
|
import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
|
|
import { PreStartMode } from '../../Types/Settings';
|
|
import { Separator } from '../Misc/Separator';
|
|
import { Paragraph } from '../Misc/TextComponents';
|
|
import { ToggleButton } from '../Misc/ToggleButton';
|
|
import { Dialog } from './Dialog';
|
|
|
|
const SettingContainer = twc.div`w-full flex flex-col mb-2`;
|
|
|
|
const ToggleContainer = twc.div`flex flex-row justify-between items-center -mb-1`;
|
|
|
|
const Description = twc.p`mr-16 text-xs text-left text-text-secondary mt-1`;
|
|
|
|
const baseGithubReleasesUrl =
|
|
'https://github.com/Vikeo/LifeTrinket/releases/tag/';
|
|
|
|
export const SettingsDialog = ({
|
|
dialogRef,
|
|
}: {
|
|
dialogRef: React.MutableRefObject<HTMLDialogElement | null>;
|
|
}) => {
|
|
const { settings, setSettings, isPWA, version } = useGlobalSettings();
|
|
const analytics = useAnalytics();
|
|
|
|
return (
|
|
<Dialog id="settings" title="⚙️ Settings ⚙️" dialogRef={dialogRef}>
|
|
<div className="flex flex-col mb-2 w-full">
|
|
<div className="text-text-primary flex items-center gap-2">
|
|
Current version: {version.installedVersion}{' '}
|
|
{version.isLatest && (
|
|
<span className="text-sm text-text-secondary">(latest)</span>
|
|
)}
|
|
<div className="text-xs text-text-primary opacity-75">
|
|
(
|
|
<a
|
|
href={baseGithubReleasesUrl + version.installedVersion}
|
|
target="_blank"
|
|
className="underline"
|
|
onClick={() => {
|
|
analytics.trackEvent(
|
|
`current_change_log_clicked_v${version.installedVersion}`
|
|
);
|
|
}}
|
|
>
|
|
Release notes
|
|
</a>
|
|
)
|
|
</div>
|
|
</div>
|
|
{!version.isLatest && version.remoteVersion && (
|
|
<>
|
|
<div className="flex gap-2 items-center mt-2">
|
|
<Paragraph className="text-text-secondary">
|
|
{version.remoteVersion} available!
|
|
</Paragraph>
|
|
<div className="text-xs text-text-primary opacity-75">
|
|
(
|
|
<a
|
|
href={baseGithubReleasesUrl + version.remoteVersion}
|
|
target="_blank"
|
|
className="underline"
|
|
onClick={() => {
|
|
analytics.trackEvent(
|
|
`new_change_log_clicked_v${version.remoteVersion}`
|
|
);
|
|
}}
|
|
>
|
|
Release notes
|
|
</a>
|
|
)
|
|
</div>
|
|
</div>
|
|
<button
|
|
className="flex justify-center items-center self-start mt-2 bg-primary-main px-3 py-1 rounded-md"
|
|
onClick={() => {
|
|
{
|
|
analytics.trackEvent(`pressed_update`, {
|
|
toVersion: version.remoteVersion,
|
|
fromVersion: version.installedVersion,
|
|
});
|
|
window?.location?.reload();
|
|
}
|
|
}}
|
|
>
|
|
<span className="text-sm">Update</span>
|
|
<span className="text-xs"> (reload app)</span>
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<Separator height="1px" />
|
|
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<label>Show Player Menu Cog</label>
|
|
<ToggleButton
|
|
checked={settings.showPlayerMenuCog}
|
|
onChange={() => {
|
|
setSettings({
|
|
...settings,
|
|
showPlayerMenuCog: !settings.showPlayerMenuCog,
|
|
});
|
|
}}
|
|
/>
|
|
</ToggleContainer>
|
|
<Description>
|
|
A cog on the top right of each player's card will be shown if this is
|
|
enabled.
|
|
</Description>
|
|
</SettingContainer>
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<label>Show Start Player</label>
|
|
<ToggleButton
|
|
checked={settings.showStartingPlayer}
|
|
onChange={() => {
|
|
setSettings({
|
|
...settings,
|
|
showStartingPlayer: !settings.showStartingPlayer,
|
|
});
|
|
}}
|
|
/>
|
|
</ToggleContainer>
|
|
<Description>
|
|
On start or reset of game, will pick a random starting player,
|
|
according to the <b>Pre-Start mode</b>
|
|
</Description>
|
|
</SettingContainer>
|
|
<SettingContainer>
|
|
<div className="flex flex-row justify-between items-center mb-1">
|
|
<label htmlFor="pre-start-modes">Player selection style</label>
|
|
<select
|
|
name="pre-start-modes"
|
|
id="pre-start-modes"
|
|
value={settings.preStartMode}
|
|
className="bg-secondary-main border-none outline-none text-text-primary rounded-md p-1 text-xs disabled:saturate-50 font-semibold"
|
|
onChange={(e) => {
|
|
setSettings({
|
|
...settings,
|
|
preStartMode: e.target.value as PreStartMode,
|
|
});
|
|
}}
|
|
disabled={!settings.showStartingPlayer}
|
|
>
|
|
<option value={PreStartMode.None}>Instant</option>
|
|
<option value={PreStartMode.RandomKing}>Royal Shuffle</option>
|
|
<option value={PreStartMode.FingerGame}>Touch Roulette</option>
|
|
<option value={PreStartMode.Trivia}>Group Trivia</option>
|
|
</select>
|
|
</div>
|
|
<div className="text-xs text-left text-text-secondary">
|
|
Different ways to determine the starting player before the game
|
|
starts.
|
|
</div>
|
|
|
|
{settings.preStartMode === PreStartMode.None && (
|
|
<div className="text-xs text-left text-text-secondary mt-1">
|
|
<span className="text-text-primary">Instant:</span> A random
|
|
starting player will simply be shown on start.
|
|
</div>
|
|
)}
|
|
{settings.preStartMode === PreStartMode.RandomKing && (
|
|
<div className="text-xs text-left text-text-secondary mt-1">
|
|
<span className="text-text-primary">Royal Shuffle:</span> Randomly
|
|
pass a crown between all players, press the screen to stop it. The
|
|
player who has the crown when it stops gets to start.
|
|
</div>
|
|
)}
|
|
{settings.preStartMode === PreStartMode.FingerGame && (
|
|
<div className="text-xs text-left text-text-secondary mt-1">
|
|
<span className="text-text-primary">Touch Roulette:</span> All
|
|
players put a finger on the screen, one will be chosen at random.
|
|
</div>
|
|
)}
|
|
|
|
{settings.preStartMode === PreStartMode.Trivia && (
|
|
<div className="text-xs text-left text-text-secondary mt-1">
|
|
<span className="text-text-primary">Group Trivia:</span> A random
|
|
"who is the most ..." type question will be shown, the group decides
|
|
which player fits the question best.
|
|
</div>
|
|
)}
|
|
</SettingContainer>
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<label>Keep Awake</label>
|
|
<ToggleButton
|
|
checked={settings.keepAwake}
|
|
onChange={() => {
|
|
setSettings({
|
|
...settings,
|
|
keepAwake: !settings.keepAwake,
|
|
});
|
|
}}
|
|
/>
|
|
</ToggleContainer>
|
|
<Description>
|
|
Will prevent device from going to sleep while this app is open if this
|
|
is enabled.
|
|
</Description>
|
|
</SettingContainer>
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<label>
|
|
Fullscreen on start <span className="text-xs">(Android only)</span>
|
|
</label>
|
|
<ToggleButton
|
|
checked={settings.goFullscreenOnStart}
|
|
onChange={() => {
|
|
setSettings({
|
|
...settings,
|
|
goFullscreenOnStart: !settings.goFullscreenOnStart,
|
|
});
|
|
}}
|
|
/>
|
|
</ToggleContainer>
|
|
<Description>
|
|
Will enter fullscreen mode when starting a game if this is enabled.
|
|
</Description>
|
|
</SettingContainer>
|
|
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<label>Show animations</label>
|
|
<ToggleButton
|
|
checked={settings.showAnimations}
|
|
onChange={() => {
|
|
setSettings({
|
|
...settings,
|
|
showAnimations: !settings.showAnimations,
|
|
});
|
|
}}
|
|
/>
|
|
</ToggleContainer>
|
|
<Description>
|
|
Disables the following animation:
|
|
<ul className="pl-1 list-inside">
|
|
<li className="list-disc">Glow effect on start menu</li>
|
|
</ul>
|
|
</Description>
|
|
</SettingContainer>
|
|
<Separator height="1px" />
|
|
<div className="flex w-full justify-center">
|
|
<button
|
|
className="mt-1 mb-1 bg-primary-main px-3 py-1 rounded-md duration-200 ease-in-out shadow-[1px_2px_4px_0px_rgba(0,0,0,0.3)] hover:bg-primary-dark font-bold"
|
|
onClick={() => {
|
|
analytics.trackEvent('settings_save_clicked');
|
|
dialogRef.current?.close();
|
|
}}
|
|
>
|
|
<span className="text-sm">Save and Close</span>
|
|
</button>
|
|
</div>
|
|
{!isPWA && (
|
|
<>
|
|
<Separator height="1px" />
|
|
<SettingContainer>
|
|
<ToggleContainer>
|
|
<Paragraph>
|
|
<b>Tip:</b> You can{' '}
|
|
<b>add this webapp to your home page on iOS</b> or{' '}
|
|
<b>install it on Android</b> to have it act just like a normal
|
|
app!
|
|
</Paragraph>
|
|
</ToggleContainer>
|
|
<Description className="mt-1">
|
|
If you do, this app will work offline and the toolbar will be
|
|
automatically hidden.
|
|
</Description>
|
|
</SettingContainer>
|
|
</>
|
|
)}
|
|
<Separator height="1px" />
|
|
</Dialog>
|
|
);
|
|
};
|