Full Empire Editing Functionality

This commit is contained in:
Neshura 2023-09-09 04:59:12 +02:00
parent 9fdc93be9e
commit 3e2e5a7e63
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
6 changed files with 162 additions and 90 deletions

View file

@ -101,7 +101,7 @@ export const createBlankEmpire = (
machine: false,
portrait_id: 0,
portrait_group_id: 0,
ethics: [],
ethics: {},
discord_user: undefined,
name: ""
};

View file

@ -68,14 +68,11 @@ export type Ethic = {
id: number,
display: string,
gestalt: boolean,
fanatic?: boolean,
}
export type EmpireEthic = {
ethic_id: number,
display: string,
gestalt: boolean,
fanatic?: boolean,
fanatic: boolean,
}
export type Phenotype = {

View file

@ -39,7 +39,6 @@
let empireList: { [key: number]: ChellarisEmpire } = {};
let empireData: ChellarisEmpire;
let addingNewEmpire = false;
$: console.log("adding:", addingNewEmpire);
let loadingEmpireData = true;
const updateGameData = () => {
@ -54,17 +53,19 @@
groupList = data.groups;
empireList = {};
Object.values(data.empires).forEach((empire: ChellarisEmpire) => {
if ($AdminSelectedGroupStore[$AdminSelectedGameStore] === undefined) {
if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore] === 'undefined') {
$AdminSelectedGroupStore[$AdminSelectedGameStore] = {};
}
if ($AdminSelectedGroupStore[$AdminSelectedGameStore][empire.group]) {
if (typeof $AdminSelectedGroupStore[$AdminSelectedGameStore][empire.group] !== 'undefined') {
empireList[empire.id] = empire;
}
});
delay(200).then(() => (loadingGameData = false));
delay(200).then(() => (loaded = true));
if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
loadEmpireData();
}
});
});
}
@ -94,7 +95,10 @@
}
}
AdminSelectedGameStore.subscribe(() => {
AdminSelectedGameStore.subscribe((game) => {
if (typeof game === 'undefined') {
game = Object.values(gameList)[0].id;
}
updateGameData();
loadingGameData = true;
});
@ -217,7 +221,9 @@
const setActiveEmpire = (empireId: number) => {
loadingEmpireData = true;
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = empireId;
if (typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] !== 'undefined') {
loadEmpireData();
}
};
const addEmpire = () => {
@ -228,13 +234,13 @@
list2.push(list2.length); */
};
const finishAddNewEmpire = (event: { detail: { new_id: number; }; }) => {
const finishAddNewEmpire = (event: { detail: { new_id: number } }) => {
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = event.detail.new_id;
updateGameData();
};
const deleteEmpire = (empire: ChellarisEmpire) => {
fetch(apiBaseUrl + '/v3/empire?game_id=' + empire.game + '&group_id=' + empire.group + '&empire_id=' + empire.id, {
fetch(apiBaseUrl + '/v3/empire?game_id=' + empire.game + '&empire_id=' + empire.id, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
@ -358,7 +364,7 @@
>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
{empire.discord_user || "N/A"}
{empire.discord_user || 'N/A'}
</div>
<button class="delete-box" on:click={() => deleteEmpire(empire)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@ -375,7 +381,7 @@
<div class="list-card loading">
<div class="card-content active">{empireData.name}</div>
<div class="card-content active">
{empireData.discord_user || "N/A"}
{empireData.discord_user || 'N/A'}
</div>
</div>
{:else}
@ -388,10 +394,21 @@
</div>
</List>
<List area="details" listTitle="Empire Details">
{#if loadingEmpireData || loadingGameData}
{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
<div>
Select Empire
</div>
{:else if loadingEmpireData || loadingGameData}
<LoadingSpinnerLocal />
{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
<EmpireDetails bind:empire={empireData} groups={groupList} {auth} bind:newEmpire={addingNewEmpire} on:updated={updateGameData} on:created={finishAddNewEmpire}/>
<EmpireDetails
bind:empire={empireData}
groups={groupList}
{auth}
bind:newEmpire={addingNewEmpire}
on:updated={updateGameData}
on:created={finishAddNewEmpire}
/>
{/if}
</List>
{:else}

View file

@ -15,6 +15,10 @@ export async function load ({ fetch }) {
if (typeof store === 'string') {
AdminSelectedGameStore.set(JSON.parse(store));
}
else {
AdminSelectedGameStore.set(Object.values(gameList)[0].id);
localStorage.setItem('adminGameSelection', JSON.stringify(Object.values(gameList)[0].id));
}
// Group Selection
store = localStorage.getItem('adminGroupSelection');

View file

@ -4,6 +4,7 @@
import { MACHINE_GROUP_ID, apiBaseUrl } from '$lib/components/consts';
import { LeanChellarisDataStore } from '$lib/stores/ChellarisData';
import type { ChellarisEmpire, ChellarisGameGroup } from '$lib/types/chellaris';
import type { EmpireEthic } from '$lib/types/stellaris';
import { createEventDispatcher } from 'svelte';
export let empire: ChellarisEmpire;
@ -12,15 +13,47 @@
export let auth: string;
let newEmpirePrepared = false;
let newEmpireError: [boolean, string] = [false, ''];
let oldEmpireData = { ...empire };
let ethicsBuffer: { [key: number]: EmpireEthic } = {...empire.ethics};
const dispatch = createEventDispatcher();
$: {
console.log($LeanChellarisDataStore);
console.log(empire);
}
let ethicsIdArray: [boolean, boolean][] = [];
Object.values($LeanChellarisDataStore.ethics).map((ethic) => (ethicsIdArray[ethic.id] = [false, false]));
Object.values(empire ? ethicsBuffer : []).map((ethic) => (ethicsIdArray[ethic.ethic_id] = [true, false]));
Object.values(empire ? ethicsBuffer : [])
.filter((ethic) => ethic.fanatic)
.map((entry) => (ethicsIdArray[entry.ethic_id][1] = true));
let oldEmpireData = { ...empire };
const updateRegularEthicsSelection = () => {
ethicsIdArray.forEach((selected, idx) => {
if (selected[0]) {
ethicsBuffer[idx] = {
ethic_id: idx,
fanatic: selected[1]
};
} else {
ethicsIdArray[idx][1] = false;
delete ethicsBuffer[idx];
}
});
};
const updateFanaticEthicsSelection = () => {
ethicsIdArray.forEach((selected, idx) => {
if (selected[0] || selected[1]) {
ethicsBuffer[idx] = {
ethic_id: idx,
fanatic: selected[1]
};
ethicsIdArray[idx][0] = true;
} else {
delete ethicsBuffer[idx];
}
});
};
const updateEmpire = () => {
// Generate Diff:
@ -42,10 +75,8 @@
diffEmpire.gestalt = empire.gestalt;
}
if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(empire.ethics)) {
console.log('A', oldEmpireData.ethics);
console.log('B', empire.ethics);
diffEmpire.ethics = empire.ethics;
if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(ethicsBuffer)) {
diffEmpire.ethics = Object.values(ethicsBuffer);
}
if (oldEmpireData.portrait_id != empire.portrait_id) {
@ -77,60 +108,51 @@
};
const createEmpire = () => {
// Generate Diff:
/* let diffEmpire: any = {};
let validData = true;
let errorMessages = [];
if (oldEmpireData.name != empire.name) {
diffEmpire.empire_name = empire.name;
if (empire.name == '') {
// Mark Name Input Window Red
validData = false;
errorMessages.push('Empire Name is invalid!');
}
if (oldEmpireData.discord_user != empire.discord_user) {
diffEmpire.discord_user = empire.discord_user;
if (Object.values(ethicsBuffer).length == 0) {
// Mark Ethics Input Window Red
validData = false;
errorMessages.push('No Ethics Selected!');
}
if (oldEmpireData.group != empire.group) {
diffEmpire.group_id = empire.group;
}
if (oldEmpireData.gestalt != empire.gestalt) {
diffEmpire.gestalt = empire.gestalt;
}
if (JSON.stringify(oldEmpireData.ethics) != JSON.stringify(empire.ethics)) {
console.log('A', oldEmpireData.ethics);
console.log('B', empire.ethics);
diffEmpire.ethics = empire.ethics;
}
if (oldEmpireData.portrait_id != empire.portrait_id) {
diffEmpire.portrait_id = empire.portrait_id;
}
if (oldEmpireData.portrait_group_id != empire.portrait_group_id) {
diffEmpire.portrait_group_id = empire.portrait_group_id;
}
if (Object.values(diffEmpire).length != 0) {
diffEmpire.empire_id = empire.id;
diffEmpire.game_id = empire.game;
if (validData) {
let newEmpireData: any = {};
newEmpireData.group_id = empire.group;
newEmpireData.game_id = empire.game;
newEmpireData.empire_name = empire.name;
newEmpireData.discord_user = empire.discord_user;
newEmpireData.gestalt = empire.gestalt;
newEmpireData.portrait_id = empire.portrait_id;
newEmpireData.portrait_group_id = empire.portrait_group_id;
newEmpireData.ethics = Object.values(ethicsBuffer);
fetch(apiBaseUrl + '/v3/empire', {
method: 'PUT',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': auth
},
body: JSON.stringify(diffEmpire)
body: JSON.stringify(newEmpireData)
}).then((response) => {
response.json().then((result) => {
empire = result;
oldEmpireData = { ...empire };
dispatch('updated');
});
});
} */
dispatch('created', {
new_id: 32
new_id: empire.id
});
});
});
} else {
newEmpireError[0] = true;
newEmpireError[1] = errorMessages.join(' | ');
}
};
// Dropdown UUID to make the Click Event work properly
@ -155,6 +177,7 @@
if (!newEmpire) {
newEmpirePrepared = false;
newEmpireError = [false, ''];
}
}
</script>
@ -216,25 +239,42 @@
<label for="text-discord">Discord User:</label>
<input id="text-discord" type="text" bind:value={empire.discord_user} />
<DropDown dropdownTitle={'Ethics*: ' + Object.values(empire.ethics).map((selection) => $LeanChellarisDataStore.ethics[selection.ethic_id].display).join(", ")} dropdownId={ethicsDropdownId}>
{#each Object.values($LeanChellarisDataStore.ethics) as ethic}
<DropDown
dropdownTitle={'Ethics*: ' +
Object.values(ethicsBuffer)
.map((selection) => (selection.fanatic ? 'Fanatic ' : '') + $LeanChellarisDataStore.ethics[selection.ethic_id].display)
.join(', ')}
dropdownId={ethicsDropdownId}
>
{#each Object.values($LeanChellarisDataStore.ethics) as ethic, index}
{#if ethic}
<DropDownElement dropdownId={ethicsDropdownId}>
<input id={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId} type="radio" bind:group={empire.ethics} value={ethic.id} />
<input
id={'fanatic' + ethic.id}
data-dropdown={ethicsDropdownId}
type="checkbox"
bind:checked={ethicsIdArray[index][1]}
on:change={updateFanaticEthicsSelection}
value={ethic.id}
/>
<label for={'fanatic' + ethic.id} data-dropdown={ethicsDropdownId}>Fanatic</label>
<input
id={'checkbox' + ethic.id}
data-dropdown={ethicsDropdownId}
type="checkbox"
bind:checked={ethicsIdArray[index][0]}
on:change={updateRegularEthicsSelection}
value={ethic.id}
/>
<label for={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId}>{ethic.display}</label>
</DropDownElement>
{/if}
{/each}
</DropDown>
<div>
{#if empire.ethics}
Ethics*:
{#each Object.values(empire.ethics) as ethic}
{ethic.fanatic ? ' Fanatic' : ''} {$LeanChellarisDataStore.ethics[ethic.ethic_id].display},
{/each}
{/if}
</div>
<button on:click={createEmpire}>Save</button>
{#if newEmpireError[0]}
<div>{newEmpireError[1]}</div>
{/if}
{:else if !newEmpire}
<div>
{#if empire}
@ -299,24 +339,38 @@
<br />
<label for="text-discord">Discord User:</label>
<input id="text-discord" type="text" bind:value={empire.discord_user} />
<DropDown dropdownTitle={'Ethics*: ' + Object.values(empire.ethics).map((selection) => (selection.fanatic ? "Fanatic " : "") + $LeanChellarisDataStore.ethics[selection.ethic_id].display).join(", ")} dropdownId={ethicsDropdownId}>
{#each Object.values($LeanChellarisDataStore.ethics) as ethic}
<DropDown
dropdownTitle={'Ethics*: ' +
Object.values(ethicsBuffer)
.map((selection) => (selection.fanatic ? 'Fanatic ' : '') + $LeanChellarisDataStore.ethics[selection.ethic_id].display)
.join(', ')}
dropdownId={ethicsDropdownId}
>
{#each Object.values($LeanChellarisDataStore.ethics) as ethic, index}
{#if ethic}
<DropDownElement dropdownId={ethicsDropdownId}>
<input id={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId} type="radio" bind:group={empire.ethics} value={ethic.id} />
<input
id={'fanatic' + ethic.id}
data-dropdown={ethicsDropdownId}
type="checkbox"
bind:checked={ethicsIdArray[index][1]}
on:change={updateFanaticEthicsSelection}
value={ethic.id}
/>
<label for={'fanatic' + ethic.id} data-dropdown={ethicsDropdownId}>Fanatic</label>
<input
id={'checkbox' + ethic.id}
data-dropdown={ethicsDropdownId}
type="checkbox"
bind:checked={ethicsIdArray[index][0]}
on:change={updateRegularEthicsSelection}
value={ethic.id}
/>
<label for={'checkbox' + ethic.id} data-dropdown={ethicsDropdownId}>{ethic.display}</label>
</DropDownElement>
{/if}
{/each}
</DropDown>
<div>
{#if empire.ethics}
Ethics:
{#each Object.values(empire.ethics) as ethic}
{ethic.fanatic ? ' Fanatic' : ''} {$LeanChellarisDataStore.ethics[ethic.ethic_id].display},
{/each}
{/if}
</div>
{:else}
No Empire Selected
{/if}

View file

@ -118,7 +118,7 @@
const tmpEthicPageData = newPageData.ethicsData[ethic.ethic_id];
if (typeof tmpEthicPageData !== 'undefined') {
tmpEthicPageData.display = ethic.display;
tmpEthicPageData.display = $ChellarisDataStore.ethics[ethic.ethic_id].display;
if (!ethic.fanatic) {
tmpEthicPageData.regular = tmpEthicPageData.regular + 1;
} else {
@ -135,8 +135,8 @@
fanatic: number;
} = {
id: ethic.ethic_id,
gestalt: ethic.gestalt,
display: ethic.display,
gestalt: $ChellarisDataStore.ethics[ethic.ethic_id].gestalt,
display: $ChellarisDataStore.ethics[ethic.ethic_id].display,
regular: 0,
fanatic: 0
};