Bugfixing + Most Game & Group API Routes

This commit is contained in:
Neshura 2023-08-31 01:09:05 +02:00
parent 3992d964da
commit 5499916e10
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
12 changed files with 231 additions and 13117 deletions

View file

@ -1,5 +1,5 @@
import { writable, type Writable } from "svelte/store";
const AdminSelectedGameStore: Writable<number> = writable();
const AdminSelectedGameStore: Writable<number> = writable(0);
export default AdminSelectedGameStore;

View file

@ -0,0 +1,5 @@
import { writable, type Writable } from "svelte/store";
const AdminSelectedGroupStore: Writable<{ [key: number]: number }> = writable({});
export default AdminSelectedGroupStore;

View file

@ -25,6 +25,7 @@ export type ChellarisEmpire = {
group: number,
empire_portrait: number, // TODO replace with Enum?
empire_portrait_group: number, // TODO replace with Enum?
name: string,
discord_user?: string,
ethics: { [key: number]: Ethic },
}
@ -66,9 +67,10 @@ export const createChellarisGameGroup = (): ChellarisGameGroup => {
export const createChellarisEmpire = (
{
id, discord_user, group_id, gestalt, empire_portrait_id, empire_portrait_group_id
id, name, discord_user, group_id, gestalt, empire_portrait_id, empire_portrait_group_id
}: {
id: number,
name: string,
discord_user?: string,
group_id: number,
gestalt: boolean,
@ -84,6 +86,7 @@ export const createChellarisEmpire = (
empire_portrait_group: empire_portrait_group_id,
ethics: [],
discord_user: discord_user,
name: name
};
return newChellarisEmpire;

View file

@ -4,29 +4,77 @@
import AuthTokenStore from '$lib/stores/AuthTokenStore';
import AdminSelectedEmpireStore from '$lib/stores/admin-page/EmpireStore';
import AdminSelectedGameStore from '$lib/stores/admin-page/GameStore';
import AdminSelectedGroupStore from '$lib/stores/admin-page/GroupStore';
import type { ChellarisEmpire, ChellarisGame, ChellarisGameGroup } from '$lib/types/chellaris';
import EmpireDetails from './EmpireDetails.svelte';
import List from './List.svelte';
export let data;
// Game Variables
let newGameForm = false;
let addingNewGame = false;
let newGameName = '';
$: gameList = data.games;
let loadingGameData = false;
// Group Variables
let newGroupForm = false;
let addingNewGroup = false;
let newGroupName = '';
let groupList: {[key: number]: ChellarisGameGroup };
$: groupList = {};
// Empire Variables
let empireList: { [key: number]: ChellarisEmpire } = {};
const updateGameData = () => {
fetch(apiBaseUrl + '/v3/game?game_id=' + $AdminSelectedGameStore, {
headers: {
'Content-Type': 'application/json',
'x-api-key': $AuthTokenStore
}
}).then((res) => {
res.json().then((data) => {
console.log(data);
groupList = data.groups;
empireList = data.empires;
loadingGameData = false;
});
});
};
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminGameSelection', JSON.stringify($AdminSelectedGameStore));
}
};
}
AdminSelectedGameStore.subscribe(() => {
updateGameData();
loadingGameData = true;
});
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminGroupSelection', JSON.stringify($AdminSelectedGroupStore));
}
}
$: {
if (typeof localStorage !== 'undefined') {
localStorage.setItem('adminEmpireSelection', JSON.stringify($AdminSelectedEmpireStore));
}
};
}
// Game Functions
const getGameList = () => {
fetch(apiBaseUrl + '/v3/list_games').then((response) => response.json().then((result) => (gameList = result)));
fetch(apiBaseUrl + '/v3/games').then((response) => response.json().then((result) => (gameList = result)));
};
const setActiveGame = (game: number) => {
@ -35,46 +83,93 @@
const addGame = () => {
let newGame = {
auth: { token: $AuthTokenStore },
game_name: newGameName
};
addingNewGame = true;
newGameForm = false;
fetch(apiBaseUrl + '/v3/game', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'x-api-key': $AuthTokenStore
},
body: JSON.stringify(newGame)
}).then((response) => {
getGameList();
addingNewGame = false;
response.json().then((result) => $AdminSelectedGameStore = result.id);
});
newGameName = '';
newGameForm = false;
addingNewGame = true;
response.json().then((result) => ($AdminSelectedGameStore = result.id));
});
};
const deleteGame = (game_id: number) => {
fetch(apiBaseUrl + "/v3/game?game_id=" + game_id, {
fetch(apiBaseUrl + '/v3/game?game_id=' + game_id, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({token: $AuthTokenStore}),
'Content-Type': 'application/json',
'x-api-key': $AuthTokenStore
}
}).then(() => {
getGameList();
if ($AdminSelectedGameStore == game_id) {
$AdminSelectedGameStore = Object.values(gameList)[0].id;
}
});
delete gameList[game_id];
gameList = gameList;
};
const startNewGameForm = () => {
newGameForm = true;
setActiveGame(Object.values(gameList).length);
// Group Functions
const setActiveGroup = (group: number) => {
$AdminSelectedGroupStore[$AdminSelectedGameStore] = group;
};
const addGroup = () => {
let newGroup = {
game_id: $AdminSelectedGameStore,
group_name: newGroupName
};
addingNewGroup = true;
newGroupForm = false;
fetch(apiBaseUrl + '/v3/group', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-api-key': $AuthTokenStore
},
body: JSON.stringify(newGroup)
}).then((response) => {
updateGameData();
addingNewGroup = false;
newGroupName = '';
response.json().then((result) => ($AdminSelectedGroupStore[$AdminSelectedGameStore] = result.id));
});
};
const deleteGroup = (group_id: number) => {
fetch(apiBaseUrl + '/v3/group?group_id=' + group_id + '&game_id=' + $AdminSelectedGameStore, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'x-api-key': $AuthTokenStore
}
}).then(() => {
updateGameData();
if ($AdminSelectedGroupStore[$AdminSelectedGameStore] == group_id) {
$AdminSelectedGroupStore[$AdminSelectedGameStore] = Object.values(groupList)[0].id;
}
});
delete groupList[group_id];
groupList = groupList;
};
// Empire Functions
const setActiveEmpire = (empireId: number) => {
$AdminSelectedEmpireStore[$AdminSelectedGameStore] = empireId;
};
@ -115,15 +210,63 @@
</form>
</div>
{:else if addingNewGame}
<div class="list-card active">
<div class="card-content">Adding Game...</div>
<div class="list-card loading">
<div class="card-content">{newGameName}</div>
</div>
{:else}
<button class="list-card" on:click={startNewGameForm}>
<button
class="list-card"
on:click={() => {
newGameForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if}
</List>
<List area="groups" listTitle="Groups">
{#if loadingGameData}
<div>Loading</div>
{:else}
{#each Object.values(groupList) as group}
<button
class="list-card"
class:active={group.id == $AdminSelectedGroupStore[$AdminSelectedGameStore] ? 'active' : ''}
on:click={() => setActiveGroup(group.id)}
>
<div class="card-content">{group.name}</div>
{#if group.name !== 'N/A'}
<button class="delete-box" on:click={() => deleteGroup(group.id)}>
<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0 24 24 M24 0 0 24" />
</svg>
</button>
{/if}
</button>
{/each}
{#if newGroupForm}
<div class="list-card active">
<form on:submit={addGroup}>
<input bind:value={newGroupName} />
<input type="submit" value="Add Group" />
</form>
</div>
{:else if addingNewGroup}
<div class="list-card loading">
<div class="card-content">{newGroupName}</div>
</div>
{:else}
<button
class="list-card"
on:click={() => {
newGroupForm = true;
}}
>
<div class="card-content button">+</div>
</button>
{/if}
{/if}
</List>
<List area="empires" listTitle="Empires">
<div class="empires-table">
<div class="table-headers">
@ -131,29 +274,43 @@
<div class="table-header">Discord User</div>
</div>
<div class="table-content">
{#each list2 as elem}
<button class="list-card" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''} on:click={() => setActiveEmpire(elem)}>
<div class="card-content" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{elem}</div>
<div class="card-content" class:active={elem == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{elem}</div>
{#if loadingGameData}
<button class="list-card">
<div class="card-content">Loading Empires</div>
</button>
{:else}
{#each Object.values(empireList) as empire}
<button
class="list-card"
class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
on:click={() => setActiveEmpire(empire.id)}
>
<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}
</div>
</button>
{/each}
<button class="list-card" on:click={addEmpire}>
<div class="card-content button">+</div>
</button>
{/if}
</div>
</div>
</List>
<List area="details" listTitle="Empire Details">
{$AdminSelectedEmpireStore[$AdminSelectedGameStore]}
<EmpireDetails id={$AdminSelectedEmpireStore[$AdminSelectedGameStore]} />
</List>
</div>
<style>
.frame {
display: grid;
grid-template-areas: 'games empires details';
grid-template-areas:
'games empires details'
'groups empires details';
grid-template-columns: 20% 40% 40%;
grid-template-rows: 100%;
grid-template-rows: 50% 50%;
max-height: calc(100%);
overflow: hidden;
margin: 3rem;
@ -166,6 +323,12 @@
border-color: darkorange !important;
}
.loading {
cursor: default !important;
border-color: grey !important;
color: grey !important;
}
.list-card {
display: flex;
margin: 0.5rem;
@ -174,6 +337,7 @@
background-color: var(--color-bg);
color: var(--color-text);
width: calc(100% - 1rem);
box-sizing: border-box;
text-align: left;
}
@ -182,7 +346,7 @@
}
.list-card form {
padding: 4px 9px;
padding: 5px 12px;
}
.list-card input {
@ -190,7 +354,7 @@
color: var(--color-text);
border: 1px solid darkcyan;
font-size: 1rem;
padding: 3px 6px;
padding: 3px 7px;
}
.list-card input:focus {
@ -208,6 +372,7 @@
padding: 0.5rem 1rem;
box-sizing: border-box;
border-left: 1px solid darkcyan;
width: 50%;
}
.button {

View file

@ -2,9 +2,10 @@ import { apiBaseUrl } from "$lib/components/consts";
import AdminSelectedEmpireStore from "$lib/stores/admin-page/EmpireStore";
import AdminSelectedGameStore from "$lib/stores/admin-page/GameStore";
import type { ChellarisGameInfo } from "$lib/types/chellaris";
import AdminSelectedGroupStore from '../../lib/stores/admin-page/GroupStore';
export async function load ({ fetch }) {
const gameList: { [key: number]: ChellarisGameInfo } = await (await fetch(apiBaseUrl + "/v3/list_games")).json();
const gameList: { [key: number]: ChellarisGameInfo } = await (await fetch(apiBaseUrl + "/v3/games")).json();
let store: string | null;
@ -15,6 +16,16 @@ export async function load ({ fetch }) {
AdminSelectedGameStore.set(JSON.parse(store));
}
// Group Selection
store = localStorage.getItem('adminGroupSelection');
if (typeof store === 'string' && store != "\"\"") {
AdminSelectedGroupStore.set(JSON.parse(store));
}
else if (typeof store === 'string') {
AdminSelectedGroupStore.set({});
}
// Empire Selection
store = localStorage.getItem('adminEmpireSelection');

View file

@ -0,0 +1,11 @@
<script lang="ts">
export let id: number;
</script>
<div>
{id}
</div>
<style>
</style>

View file

@ -37,7 +37,7 @@
grid-area: list-content;
min-height: none;
max-height: 100%;
overflow: hidden;
overflow: auto;
border: 1px solid var(--color-text);
}
</style>

View file

@ -1,75 +0,0 @@
import { words, allowed } from './words.server';
export class Game {
index: number;
guesses: string[];
answers: string[];
answer: string;
/**
* Create a game object from the player's cookie, or initialise a new game
*/
constructor(serialized: string | undefined = undefined) {
if (serialized) {
const [index, guesses, answers] = serialized.split('-');
this.index = +index;
this.guesses = guesses ? guesses.split(' ') : [];
this.answers = answers ? answers.split(' ') : [];
} else {
this.index = Math.floor(Math.random() * words.length);
this.guesses = ['', '', '', '', '', ''];
this.answers = [];
}
this.answer = words[this.index];
}
/**
* Update game state based on a guess of a five-letter word. Returns
* true if the guess was valid, false otherwise
*/
enter(letters: string[]) {
const word = letters.join('');
const valid = allowed.has(word);
if (!valid) return false;
this.guesses[this.answers.length] = word;
const available = Array.from(this.answer);
const answer = Array(5).fill('_');
// first, find exact matches
for (let i = 0; i < 5; i += 1) {
if (letters[i] === available[i]) {
answer[i] = 'x';
available[i] = ' ';
}
}
// then find close matches (this has to happen
// in a second step, otherwise an early close
// match can prevent a later exact match)
for (let i = 0; i < 5; i += 1) {
if (answer[i] === '_') {
const index = available.indexOf(letters[i]);
if (index !== -1) {
answer[i] = 'c';
available[index] = ' ';
}
}
}
this.answers.push(answer.join(''));
return true;
}
/**
* Serialize game state so it can be set as a cookie
*/
toString() {
return `${this.index}-${this.guesses.join(' ')}-${this.answers.join(' ')}`;
}
}

View file

@ -1,23 +0,0 @@
import { readable } from 'svelte/store';
import { browser } from '$app/environment';
const reduced_motion_query = '(prefers-reduced-motion: reduce)';
const get_initial_motion_preference = () => {
if (!browser) return false;
return window.matchMedia(reduced_motion_query).matches;
};
export const reduced_motion = readable(get_initial_motion_preference(), (set) => {
if (browser) {
const set_reduced_motion = (event: MediaQueryListEvent) => {
set(event.matches);
};
const media_query_list = window.matchMedia(reduced_motion_query);
media_query_list.addEventListener('change', set_reduced_motion);
return () => {
media_query_list.removeEventListener('change', set_reduced_motion);
};
}
});

File diff suppressed because it is too large Load diff

View file

@ -11,9 +11,6 @@ export const load: LayoutLoad = async ({ fetch }) => {
let store: string | null;
const apiBaseUrl = 'https://wip.chellaris.net/api';
// Auth Cookies
// Chellaris Data Code
const chellarisData: ChellarisInfo = await (await fetch(apiBaseUrl + '/v3/full_view_data')).json();