Discreetly/frontend
1
0
Fork 0
mirror of https://github.com/Discreetly/frontend.git synced 2026-01-10 13:27:54 -05:00
Code Issues Packages Projects Releases Wiki Activity

All the action points

Browse Source
This commit is contained in:
AtHeartEngineer
2023-08-31 01:22:08 -07:00
parent 4b8943845a
commit 4ffa3e1bca
12 changed files with 178 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/lib/components/AP.svelte
View File

@@ -1,29 +1,22 @@
<script lang="ts">
import FullCircle from 'svelte-material-icons/Circle.svelte';
import CircleEmpty from 'svelte-material-icons/CircleOutline.svelte';
import Hearts from '$lib/components/ActionPoints/Hearts.svelte';
import AP from '$lib/components/ActionPoints/ActionPoints.svelte';
import { ActionRepresentationE } from '$lib/types';
import Shields from '$lib/components/ActionPoints/Shields.svelte';
import { configStore } from '$lib/stores';
import Battery from './ActionPoints/Battery.svelte';
export let health: number;
export let maxHealth: number;
export let reverse: boolean = false;
$: fullcircles = health;
$: emptycircles = maxHealth - health;
</script>
<div class="flex flex-row ms-2 place-items-center">
{#if reverse}
{#each { length: emptycircles } as _, i}
<CircleEmpty class="w-4 h-4 text-surface-600-300-token" />
{/each}
{#each { length: fullcircles } as _, i}
<FullCircle class="w-4 h-4 text-green-500" />
{/each}
{:else}
{#each { length: fullcircles } as _, i}
<FullCircle class="w-4 h-4 text-green-500" />
{/each}
{#each { length: emptycircles } as _, i}
<CircleEmpty class="w-4 h-4 text-surface-600-300-token" />
{/each}
{/if}
</div>
{#if $configStore.actionRepresentation == ActionRepresentationE.AP}
<AP {health} {maxHealth} />
{:else if $configStore.actionRepresentation == ActionRepresentationE.Hearts}
<Hearts {health} {maxHealth} />
{:else if $configStore.actionRepresentation == ActionRepresentationE.Shields}
<Shields {health} {maxHealth} />
{:else if $configStore.actionRepresentation == ActionRepresentationE.Battery}
<Battery {health} {maxHealth} />
{:else}
<AP {health} {maxHealth} />
{/if}

19
src/lib/components/ActionPoints/ActionPoints.svelte Normal file
View File

@@ -0,0 +1,19 @@
<script lang="ts">
import FullCircle from 'svelte-material-icons/Circle.svelte';
import CircleEmpty from 'svelte-material-icons/CircleOutline.svelte';
export let health: number;
export let maxHealth: number;
$: fullcircles = health;
$: emptycircles = maxHealth - health;
</script>
<div class="flex flex-row ms-2 place-items-center">
{#each { length: fullcircles } as _, i}
<FullCircle class="w-4 h-4 text-green-500" />
{/each}
{#each { length: emptycircles } as _, i}
<CircleEmpty class="w-4 h-4 text-surface-600-300-token" />
{/each}
</div>

46
src/lib/components/ActionPoints/Battery.svelte Normal file
View File

@@ -0,0 +1,46 @@
<script lang="ts">
import Battery0 from 'svelte-material-icons/BatteryOutline.svelte';
import Battery10 from 'svelte-material-icons/Battery10.svelte';
import Battery20 from 'svelte-material-icons/Battery20.svelte';
import Battery30 from 'svelte-material-icons/Battery30.svelte';
import Battery40 from 'svelte-material-icons/Battery40.svelte';
import Battery50 from 'svelte-material-icons/Battery50.svelte';
import Battery60 from 'svelte-material-icons/Battery60.svelte';
import Battery70 from 'svelte-material-icons/Battery70.svelte';
import Battery80 from 'svelte-material-icons/Battery80.svelte';
import Battery90 from 'svelte-material-icons/Battery90.svelte';
import Battery100 from 'svelte-material-icons/Battery.svelte';
export let health: number;
export let maxHealth: number;
$: battery = (health / maxHealth) * 100;
</script>
<div class="flex flex-row ms-2 place-items-center">
{#if battery === 0}
<Battery0 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 10}
<Battery10 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 20}
<Battery20 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 30}
<Battery30 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 40}
<Battery40 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 50}
<Battery50 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 60}
<Battery60 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 70}
<Battery70 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 80}
<Battery80 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 90}
<Battery90 class="w-5 h-5 text-yellow-500" />
{:else if battery <= 100}
<Battery100 class="w-5 h-5 text-yellow-500" />
{:else}
<Battery100 class="w-5 h-5 text-yellow-500" />
{/if}
</div>

29
src/lib/components/ActionPoints/Hearts.svelte Normal file
View File

@@ -0,0 +1,29 @@
<script lang="ts">
import FullHeart from 'svelte-material-icons/Heart.svelte';
import HeartHalfFullHalfEmpty from 'svelte-material-icons/HeartHalfFull.svelte';
import HeartEmpty from 'svelte-material-icons/HeartOutline.svelte';
import HeartHalfFull from 'svelte-material-icons/HeartHalf.svelte';
import HeartHalfEmpty from 'svelte-material-icons/HeartHalfOutline.svelte';
export let health: number;
export let maxHealth: number;
$: totalHearts = Math.ceil(maxHealth / 2);
$: isLastHeartHalf = maxHealth % 2 === 1;
</script>
<div class="flex flex-row ms-2 place-items-center">
{#each Array(totalHearts).fill(null) as _, i}
{#if 2 * i < health && 2 * i + 1 < health}
<FullHeart class="w-5 h-5 text-red-500" />
{:else if 2 * i < health && 2 * i + 1 === health && i === totalHearts - 1 && isLastHeartHalf}
<HeartHalfFull class="w-5 h-5 text-red-500" />
{:else if 2 * i < health && 2 * i + 1 === health}
<HeartHalfFullHalfEmpty class="w-5 h-5 text-red-500" />
{:else if i === totalHearts - 1 && isLastHeartHalf}
<HeartHalfEmpty class="w-5 h-5 text-red-500" />
{:else}
<HeartEmpty class="w-5 h-5 text-red-500" />
{/if}
{/each}
</div>

28
src/lib/components/ActionPoints/Shields.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
import FullShield from 'svelte-material-icons/Shield.svelte';
import ShieldHalfFullHalfEmpty from 'svelte-material-icons/ShieldHalfFull.svelte';
import ShieldEmpty from 'svelte-material-icons/ShieldOutline.svelte';
import ShieldHalfFull from 'svelte-material-icons/ShieldHalf.svelte';
export let health: number;
export let maxHealth: number;
$: totalShields = Math.ceil(maxHealth / 2);
$: isLastShieldHalf = maxHealth % 2 === 1;
</script>
<div class="flex flex-row ms-2 place-items-center">
{#each Array(totalShields).fill(null) as _, i}
{#if 2 * i < health && 2 * i + 1 < health}
<FullShield class="w-5 h-5 text-red-500" />
{:else if 2 * i < health && 2 * i + 1 === health && i === totalShields - 1 && isLastShieldHalf}
<ShieldHalfFullHalfEmpty class="w-5 h-5 text-red-500" />
{:else if 2 * i < health && 2 * i + 1 === health}
<ShieldHalfFullHalfEmpty class="w-5 h-5 text-red-500" />
{:else if i === totalShields - 1 && isLastShieldHalf}
<ShieldEmpty class="w-5 h-5 text-red-500" />
{:else}
<ShieldEmpty class="w-5 h-5 text-red-500" />
{/if}
{/each}
</div>

4
src/lib/components/Demo.svelte Normal file
View File

@@ -0,0 +1,4 @@
<script lang="ts">
import Group from 'svelte-material-icons/AccountGroup.svelte';
import MemberSecret from 'svelte-material-icons/AccountKey.svelte';
</script>

59
src/lib/components/Hearts.svelte
View File

@@ -1,59 +0,0 @@
<script lang="ts">
import FullHeart from 'svelte-material-icons/Heart.svelte';
import HeartHalfFullHalfEmpty from 'svelte-material-icons/HeartHalfFull.svelte';
import HeartEmpty from 'svelte-material-icons/HeartOutline.svelte';
import HeartHalfFull from 'svelte-material-icons/HeartHalf.svelte';
import HeartHalfEmpty from 'svelte-material-icons/HeartHalfOutline.svelte';
export let health: number;
export let maxHealth: number;
export let reverse: boolean = false;
$: fullhearts = Math.floor(health / 2);
$: halffullhearts = health % 2;
$: maxHealthMod2 = maxHealth % 2;
$: emptyhalfhearts = (maxHealth - health) % 2;
$: emptyfullhearts = Math.floor((maxHealth - health) / 2);
</script>
<div class="flex flex-row ms-2 place-items-center">
{#if reverse}
{#if maxHealthMod2 === 1}
{#each { length: halffullhearts } as _, i}
<HeartHalfFull class="w-5 h-5 text-red-500 mirror" />
{/each}
{#each { length: emptyhalfhearts } as _, i}
<HeartHalfEmpty class="w-5 h-5 text-red-500 mirror" />
{/each}
{:else}
{#each { length: halffullhearts } as _, i}
<HeartHalfFullHalfEmpty class="w-5 h-5 text-red-500 mirror" />
{/each}
{#each { length: emptyfullhearts } as _, i}
<HeartEmpty class="w-5 h-5 text-red-500 mirror" />
{/each}
{/if}
{#each { length: fullhearts } as _, i}
<FullHeart class="w-5 h-5 text-red-500 mirror" />
{/each}
{:else}
{#each { length: fullhearts } as _, i}
<FullHeart class="w-5 h-5 text-red-500" />
{/each}
{#if maxHealthMod2 === 1}
{#each { length: halffullhearts } as _, i}
<HeartHalfFull class="w-5 h-5 text-red-500" />
{/each}
{#each { length: emptyhalfhearts } as _, i}
<HeartHalfEmpty class="w-5 h-5 text-red-500" />
{/each}
{:else}
{#each { length: halffullhearts } as _, i}
<HeartHalfFullHalfEmpty class="w-5 h-5 text-red-500" />
{/each}
{#each { length: emptyfullhearts } as _, i}
<HeartEmpty class="w-5 h-5 text-red-500" />
{/each}
{/if}
{/if}
</div>

2
src/lib/components/SelectRoom.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { selectedServer, selectedRoom, currentRoomsStore } from '$lib/stores';
import { updateMessages } from '$lib/utils';
import { drawerStore } from '@skeletonlabs/skeleton';
@@ -7,6 +8,7 @@
$selectedRoom[$selectedServer] = roomId;
updateMessages($selectedServer, roomId);
drawerStore.close();
goto('/chat');
}
</script>

4
src/lib/types/index.ts
View File

@@ -61,7 +61,9 @@ export interface SignUpStatusI {
export enum ActionRepresentationE {
'AP',
'Hearts'
'Hearts',
'Shields',
'Battery'
}
export interface ConfigurationI {

1
src/routes/chat/ChatRoom.svelte
View File

@@ -31,6 +31,7 @@
});
$: currentRateLimit = $rateLimitStore[$currentSelectedRoom.roomId!.toString()];
$: messagesLeft = () => {
if (currentRateLimit.lastEpoch !== currentEpoch) {
currentRateLimit.lastEpoch = currentEpoch;

22
src/routes/chat/ChatRoomHeader.svelte
View File

@@ -1,9 +1,8 @@
<script lang="ts">
import Hearts from '$lib/components/Hearts.svelte';
import AP from '$lib/components/AP.svelte';
import FullCircle from 'svelte-material-icons/Circle.svelte';
import { configStore, currentSelectedRoom } from '$lib/stores';
import { ActionRepresentationE } from '$lib/types';
import { ProgressBar } from '@skeletonlabs/skeleton';
import FullCircle from 'svelte-material-icons/Circle.svelte';
export let connected: boolean;
export let currentEpoch: number;
export let timeLeftInEpoch: string;
@@ -18,7 +17,7 @@
</script>
<header
class="hidden border-b border-surface-500/30 px-2 py-1 md:px-5 md:py-3 sm:flex flex-col text-xs md:text-base"
class="flex flex-col text-xs md:text-base border-b border-surface-500/30 px-2 py-1 md:px-5 md:py-3"
>
<div class="flex flex-row justify-between place-items-center mb-2">
<div class="flex flex-row">
@@ -39,16 +38,15 @@
<div
title={`These are action points, you get ${userMessageLimit} every ${epochLengthSeconds} seconds`}
>
{#if $configStore.actionRepresentation == ActionRepresentationE.AP}
<AP health={messagesLeft()} maxHealth={userMessageLimit} reverse={true} />
{:else if $configStore.actionRepresentation == ActionRepresentationE.Hearts}
<Hearts health={messagesLeft()} maxHealth={userMessageLimit} reverse={true} />
{:else}
<AP health={messagesLeft()} maxHealth={userMessageLimit} reverse={true} />
{/if}
<AP health={messagesLeft()} maxHealth={userMessageLimit} />
</div>
</div>
<progress value={timeToNextEpoch} max={epochLengthSeconds} />
<div class="hidden sm:block">
<ProgressBar value={timeToNextEpoch} max={epochLengthSeconds} />
</div>
<div class="block sm:hidden">
<ProgressBar value={timeToNextEpoch} max={epochLengthSeconds} height={'h-1'} />
</div>
</header>
<style>

30
src/routes/settings/ActionRepresentation.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import ActionPoints from '$lib/components/AP.svelte';
import Hearts from '$lib/components/Hearts.svelte';
import AP from '$lib/components/AP.svelte';
import { configStore } from '$lib/stores';
import { ActionRepresentationE } from '$lib/types';
$: ap = $configStore.actionRepresentation;
$: if ($configStore.actionRepresentation == undefined) {
$configStore.actionRepresentation = ActionRepresentationE.AP;
}
let health = 4;
let maxHealth = 5;
</script>
<div class="card variant-soft-secondary">
@@ -16,13 +16,6 @@
</header>
<section class="p-2 mb-2 sm:p-4 sm:mb-4">
<div class="flex flex-col">
<div class="mb-2 sm:mb-4">
{#if $configStore.actionRepresentation == ActionRepresentationE.AP}
<ActionPoints health={4} maxHealth={5} />
{:else if $configStore.actionRepresentation == ActionRepresentationE.Hearts}
<Hearts health={4} maxHealth={5} />
{/if}
</div>
<select
id="action-representation"
class="select"
@@ -30,7 +23,22 @@
>
<option value={ActionRepresentationE.AP}>Action Points</option>
<option value={ActionRepresentationE.Hearts}>Hearts</option>
<option value={ActionRepresentationE.Shields}>Shields</option>
<option value={ActionRepresentationE.Battery}>Battery</option>
</select>
<div class="border-t mt-2 pt-2 mb-2 sm:mb-4 flex flex-col place-items-center">
<h6 class="h6">Demo</h6>
<AP {health} {maxHealth} />
<label
><div>Health: {health}</div>
<input type="range" min="0" max={maxHealth} bind:value={health} />
</label>
<label
><div>Max Health: {maxHealth}</div>
<input type="range" min="1" max={10} bind:value={maxHealth} />
</label>
</div>
</div>
</section>
</div>