Skip to content

Commit

Permalink
Cleanup and got CoC somewhat working.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Morgul
Morgul committed Oct 8, 2024
1 parent 79ae291 commit 8543f1d
Show file tree
Hide file tree
Showing 24 changed files with 2,852 additions and 90 deletions.
9 changes: 5 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"lodash": "^4.17.21",
"mailgun": "^0.5.0",
"nanoid": "^3.3.6",
"nanoid-dictionary": "^4.3.0",
"nanoid-dictionary": "^5.0.0-beta.1",
"p-map": "^4.0.0",
"passport": "^0.7.0",
"passport-google-oauth20": "^2.0.0",
Expand Down
154 changes: 154 additions & 0 deletions src/client/components/systems/coc/bioCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!----------------------------------------------------------------------------------------------------------------------
-- Biography Card Component
--------------------------------------------------------------------------------------------------------------------->
<template>
<RpgkCard id="coc-bio-block" :class="{ readonly: readonly }" fill>
<!-- Header -->
<template #header>
<div class="d-flex">
<h5 class="align-items-center d-flex m-0 me-2 flex-grow-0 flex-shrink-0 w-75">
<fa class="me-1" icon="address-card"></fa>
<span class="d-none d-md-block">
{{ char.name }}
</span>
</h5>
<div v-if="!readonly" class="ms-auto">
<BButton size="sm" style="margin-bottom: 1px;" @click="openEditModal()">
<fa icon="edit" fixed-width></fa>
<span class="d-none d-md-inline">Edit</span>
</BButton>
</div>
</div>
</template>

<!-- Card Body -->
<div class="d-flex gap-2">
<div class="flex-fill text-nowrap">
<b>Occupation:</b>
<span class="ms-1">{{ bio.occupation || '-' }}</span>
</div>
<div class="flex-fill">
<b>Age:</b>
<span class="ms-1">{{ bio.age }}</span>
</div>
<div class="flex-fill">
<b>Pronoun:</b>
<span class="ms-1">{{ bio.pronouns || '-' }}</span>
</div>
</div>
<div class="d-flex gap-2 mt-2">
<div class="flex-fill text-nowrap">
<b>Birthplace:</b>
<span class="ms-1">{{ bio.birthplace || '-' }}</span>
</div>
<div class="flex-fill text-nowrap">
<b>Residence:</b>
<span class="ms-1">{{ bio.residence || '-' }}</span>
</div>
</div>
<BFormGroup
id="desc-input-group"
label="Description"
label-class="fw-bold"
class="mt-2"
>
<MarkdownBlock class="font-sm" :text="description" inline></MarkdownBlock>
</BFormGroup>

<!-- Edit Modal -->
<EditBioModal id="editModal" ref="editModal" @save="onEditSave"></EditBioModal>
</RpgkCard>
</template>

<!--------------------------------------------------------------------------------------------------------------------->
<style lang="scss">
#coc-bio-block {
&.card:not(.readonly) {
.card-header {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
}
}
</style>
<!--------------------------------------------------------------------------------------------------------------------->
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { truncate } from 'lodash';
// Interfaces
import { Character } from '../../../../common/interfaces/common';
import { CocBiography, CoCSystemDetails } from '../../../../common/interfaces/systems/coc';
// Stores
import { useCharactersStore } from '../../../lib/stores/characters';
// Components
import EditBioModal from './modals/editBioModal.vue';
import MarkdownBlock from '../../ui/markdownBlock.vue';
import RpgkCard from '../../ui/rpgkCard.vue';
//------------------------------------------------------------------------------------------------------------------
// Component Definition
//------------------------------------------------------------------------------------------------------------------
interface Props
{
readonly : boolean;
}
const props = defineProps<Props>();
interface Events
{
(e : 'save') : void;
}
const emit = defineEmits<Events>();
//------------------------------------------------------------------------------------------------------------------
// Refs
//------------------------------------------------------------------------------------------------------------------
const { current } = storeToRefs(useCharactersStore());
const editModal = ref<InstanceType<typeof EditBioModal> | null>(null);
//------------------------------------------------------------------------------------------------------------------
// Computed
//------------------------------------------------------------------------------------------------------------------
const readonly = computed(() => props.readonly);
const char = computed<Character<CoCSystemDetails>>(() => current.value as any);
const bio = computed(() => char.value.details.biography);
const description = computed(() =>
{
return truncate(char.value.description, { length: 160 });
});
//------------------------------------------------------------------------------------------------------------------
// Methods
//------------------------------------------------------------------------------------------------------------------
function openEditModal() : void
{
editModal.value.show(char.value);
}
function onEditSave(editBio : CocBiography & { name : string, description : string }) : void
{
char.value.name = editBio.name;
char.value.description = editBio.description;
char.value.details.biography = editBio;
emit('save');
}
</script>
<!--------------------------------------------------------------------------------------------------------------------->
194 changes: 194 additions & 0 deletions src/client/components/systems/coc/charCard.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!----------------------------------------------------------------------------------------------------------------------
-- Characteristics Card
--------------------------------------------------------------------------------------------------------------------->
<template>
<RpgkCard id="coc-chars-block" :class="{ readonly: readonly }" fill no-body>
<!-- Header -->
<template #header>
<div class="d-flex">
<h5 class="align-items-center d-flex text-nowrap m-0 me-2 flex-grow-0 flex-shrink-0 w-auto">
<fa class="me-1" icon="fist-raised"></fa>
<span class="d-none d-md-inline">Characteristics</span>
</h5>
<div v-if="!readonly" class="ms-auto">
<BButton size="sm" style="margin-bottom: 1px;" @click="openEditModal()">
<fa icon="edit" fixed-width></fa>
<span class="d-none d-md-inline">Edit</span>
</BButton>
</div>
</div>
</template>

<!-- Card Body -->
<div class="d-flex flex-wrap justify-content-evenly gap-2 m-2">
<BCard
v-for="char in characteristics"
:key="char"
class="char-table"
style="min-width: 50px; width: 30%"
no-body
>
<table class="table table-bordered table-sm mb-0">
<tbody>
<tr>
<td rowspan="2" class="align-middle bg-secondary-subtle" style="width: 66px">
<h5 class="mb-0 text-center">
{{ formatCharName(char) }}
</h5>
</td>
<td rowspan="2" class="text-center align-middle">
<h3 class="mb-0 text-center">
{{ getCharacteristic(char) }}
</h3>
</td>
<td>
<div class="text-muted text-center">
{{ getHalfCharacteristic(char) }}
</div>
</td>
</tr>
<tr>
<td>
<div class="text-muted text-center">
{{ getFifthCharacteristic(char) }}
</div>
</td>
</tr>
</tbody>
</table>
</BCard>
</div>

<!-- Edit Modal -->
<EditModal ref="editModal" @save="onEditSave"></EditModal>
</RpgkCard>
</template>

<!--------------------------------------------------------------------------------------------------------------------->
<style lang="scss" scoped>
#coc-chars-block {
.char-table {
overflow: hidden;
table {
tr:first-of-type {
border-top: none;
td:first-of-type {
border-left: none;
}
td:last-of-type {
border-right: none;
}
}
tr:last-of-type {
border-bottom: none;
td:last-of-type {
border-right: none;
}
}
}
}
}
</style>
<!--------------------------------------------------------------------------------------------------------------------->
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { storeToRefs } from 'pinia';
// Models
import { Character } from '../../../../common/interfaces/common';
import {
CoCCharacteristics,
CoCSystemDetails,
validCoCCharacteristicNames
} from '../../../../common/interfaces/systems/coc';
// Stores
import { useCharactersStore } from '../../../lib/stores/characters';
// Components
import RpgkCard from '../../ui/rpgkCard.vue';
import EditModal from './modals/editCharacteristicsModal.vue';
//------------------------------------------------------------------------------------------------------------------
// Component Definition
//------------------------------------------------------------------------------------------------------------------
interface Props
{
readonly : boolean;
}
const props = defineProps<Props>();
interface Events
{
(e : 'save') : void;
}
const emit = defineEmits<Events>();
//------------------------------------------------------------------------------------------------------------------
// Refs
//------------------------------------------------------------------------------------------------------------------
const characteristics = validCoCCharacteristicNames;
const { current } = storeToRefs(useCharactersStore());
const editModal = ref<InstanceType<typeof EditModal> | null>(null);
//------------------------------------------------------------------------------------------------------------------
// Computed
//------------------------------------------------------------------------------------------------------------------
const character = computed<Character<CoCSystemDetails>>(() => current.value as any);
const readonly = computed(() => props.readonly);
//------------------------------------------------------------------------------------------------------------------
// Methods
//------------------------------------------------------------------------------------------------------------------
function openEditModal() : void
{
editModal.value.show(character.value);
}
function onEditSave(chars : CoCCharacteristics) : void
{
character.value.details.characteristics = {
...character.value.details.characteristics,
...chars
};
emit('save');
}
function formatCharName(text) : string
{
return text.slice(0, 3).toUpperCase();
}
function getCharacteristic(char) : number
{
return character.value.details.characteristics[char];
}
function getHalfCharacteristic(char) : number
{
return Math.floor(character.value.details.characteristics[char] / 2);
}
function getFifthCharacteristic(char) : number
{
return Math.floor(character.value.details.characteristics[char] / 5);
}
</script>
<!--------------------------------------------------------------------------------------------------------------------->
Loading

0 comments on commit 8543f1d

Please sign in to comment.