feat : concept grid view

This commit is contained in:
2025-01-14 22:47:00 +01:00
parent 452d76ca4b
commit e64d91563e
13 changed files with 901 additions and 164 deletions
+25 -3
View File
@@ -2,14 +2,17 @@
import { useUserStore } from "~/store/user.store";
import { useLobbyStore } from "./store/lobby.store";
import { useConceptStore } from "./store/concepts.store";
import PageHeader from "./components/pageHeader.vue";
const userStore = useUserStore();
const lobbyStore = useLobbyStore();
const conceptStore = useConceptStore()
void userStore.whoami();
void conceptStore.fetchConceptTypes();
void conceptStore.fetchConceptList()
void lobbyStore.fetchGames();
onBeforeMount(() => {
lobbyStore.subscribe();
});
@@ -20,16 +23,35 @@ onBeforeUnmount(() => {
</script>
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtLayout>
<NuxtLoadingIndicator> Loading... </NuxtLoadingIndicator>
<ConceptHeader />
<PageHeader />
<NuxtPage />
</NuxtLayout>
</div>
</template>
<style>
@import "vue-multiselect/dist/vue-multiselect.css";
html {
height: 100%;
}
body {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
#__nuxt {
height: 100%;
display: grid;
grid-template-areas:
"header"
"main";
grid-template-rows: min-content 1fr;
}
</style>
+66
View File
@@ -0,0 +1,66 @@
<script setup lang="ts">
import type { ConceptResponseDTO } from '~/netcode/events/dto/conceptresponse.dto';
import { useConceptStore } from '~/store/concepts.store';
const conceptStore = useConceptStore();
const concepyByType = computed(() => {
const byType: Record<string, ConceptResponseDTO[]> = {}
for (const concept of Object.values(conceptStore.concepts)) {
if (!(concept.type.id in byType)) {
byType[concept.type.id] = []
}
byType[concept.type.id].push(concept)
}
return byType
})
</script>
<template>
<div class="conceptGrid">
<div class="conceptType" v-for="concepts, conceptType in concepyByType">
<div class="conceptTypeHeader">{{ conceptStore.conceptTypes[conceptType].value }}</div>
<div class="concept" v-for="[index, concept] in Object.entries(concepts)">
<NuxtImg class="conceptImg" placeholder :alt="concept.value" :src="'/icons/concept/drawing.svg'"
@click="$emit('click', concept.id)">
</NuxtImg>
</div>
</div>
</div>
</template>
<style lang="css">
div.conceptGrid {
max-height: 100%;
display: flex;
justify-content: center;
gap: 50px;
}
div.conceptType {
display: grid;
align-content: start;
grid-template-columns: 1fr 1fr;
flex: 1 1 0px;
}
.concept {
border: 1px solid black;
box-sizing: border-box;
font-size: x-small;
aspect-ratio: 1/1;
}
div.conceptType>div.conceptTypeHeader {
grid-column: 1/3;
}
.conceptImg {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
</style>
View File
+2 -4
View File
@@ -13,10 +13,8 @@ const user = await userStore.fetchUser(props.id);
<template>
<div class="user">
<img
class="user-avatar"
:src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`"
/>
<img loading="lazy" class="user-avatar"
:src="`https://cdn.discordapp.com/avatars/${user?.id}/${user?.avatar}.webp?size=32`" />
{{ user?.username }}
</div>
</template>
+1 -1
View File
@@ -20,5 +20,5 @@ export default defineNuxtConfig({
},
},
modules: ["@pinia/nuxt"],
modules: ["@pinia/nuxt", "@nuxt/image"],
})
+635
View File
@@ -7,6 +7,7 @@
"name": "nuxt-app",
"hasInstallScript": true,
"dependencies": {
"@nuxt/image": "^1.9.0",
"@pinia/nuxt": "^0.9.0",
"class-transformer": "^0.5.1",
"nuxt": "^3.15.0",
@@ -1066,6 +1067,16 @@
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}
},
"node_modules/@fastify/accept-negotiator": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz",
"integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=14"
}
},
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1582,6 +1593,81 @@
"devtools-wizard": "cli.mjs"
}
},
"node_modules/@nuxt/image": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.9.0.tgz",
"integrity": "sha512-kuuePx/jtlmsuG/G8mTMELntw4p8MLD4tu9f4A064xor/ks29oEoBmFRzvfFwxqZ7cqfG2M4LZfTZFjQz5St+Q==",
"license": "MIT",
"dependencies": {
"@nuxt/kit": "^3.15.1",
"consola": "^3.3.3",
"defu": "^6.1.4",
"h3": "^1.13.0",
"image-meta": "^0.2.1",
"ohash": "^1.1.4",
"pathe": "^2.0.0",
"std-env": "^3.8.0",
"ufo": "^1.5.4"
},
"engines": {
"node": ">=18.20.5"
},
"optionalDependencies": {
"ipx": "^2.1.0"
}
},
"node_modules/@nuxt/image/node_modules/@nuxt/kit": {
"version": "3.15.1",
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.15.1.tgz",
"integrity": "sha512-7cVWjzfz3L6CsZrg6ppDZa7zGrZxCSfZjEQDIvVFn4mFKtJlK9k2izf5EewL6luzWwIQojkZAC3iq/1wtgI0Xw==",
"license": "MIT",
"dependencies": {
"@nuxt/schema": "3.15.1",
"c12": "^2.0.1",
"consola": "^3.3.3",
"defu": "^6.1.4",
"destr": "^2.0.3",
"globby": "^14.0.2",
"ignore": "^7.0.0",
"jiti": "^2.4.2",
"klona": "^2.0.6",
"knitwork": "^1.2.0",
"mlly": "^1.7.3",
"ohash": "^1.1.4",
"pathe": "^2.0.0",
"pkg-types": "^1.3.0",
"scule": "^1.3.0",
"semver": "^7.6.3",
"ufo": "^1.5.4",
"unctx": "^2.4.1",
"unimport": "^3.14.5",
"untyped": "^1.5.2"
},
"engines": {
"node": ">=18.20.5"
}
},
"node_modules/@nuxt/image/node_modules/@nuxt/schema": {
"version": "3.15.1",
"resolved": "https://registry.npmjs.org/@nuxt/schema/-/schema-3.15.1.tgz",
"integrity": "sha512-n5kOHt8uUyUM9z4Wu/8tIZkBYh3KTCGvyruG6oD9bfeT4OaS21+X3M7XsTXFMe+eYBZA70IFFlWn1JJZIPsKeA==",
"license": "MIT",
"dependencies": {
"consola": "^3.3.3",
"defu": "^6.1.4",
"pathe": "^2.0.0",
"std-env": "^3.8.0"
},
"engines": {
"node": "^14.18.0 || >=16.10.0"
}
},
"node_modules/@nuxt/image/node_modules/pathe": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.1.tgz",
"integrity": "sha512-6jpjMpOth5S9ITVu5clZ7NOgHNsv5vRQdheL9ztp2vZmM6fRbLvyua1tiBIL4lk8SAe3ARzeXEly6siXCjDHDw==",
"license": "MIT"
},
"node_modules/@nuxt/kit": {
"version": "3.15.0",
"resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.15.0.tgz",
@@ -3620,6 +3706,63 @@
"license": "Apache-2.0",
"optional": true
},
"node_modules/bare-fs": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.0.1.tgz",
"integrity": "sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==",
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"bare-events": "^2.0.0",
"bare-path": "^3.0.0",
"bare-stream": "^2.0.0"
},
"engines": {
"bare": ">=1.7.0"
}
},
"node_modules/bare-os": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.4.0.tgz",
"integrity": "sha512-9Ous7UlnKbe3fMi7Y+qh0DwAup6A1JkYgPnjvMDNOlmnxNRQvQ/7Nst+OnUQKzk0iAT0m9BisbDVp9gCv8+ETA==",
"license": "Apache-2.0",
"optional": true,
"engines": {
"bare": ">=1.6.0"
}
},
"node_modules/bare-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
"integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"bare-os": "^3.0.1"
}
},
"node_modules/bare-stream": {
"version": "2.6.4",
"resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.4.tgz",
"integrity": "sha512-G6i3A74FjNq4nVrrSTUz5h3vgXzBJnjmWAVlBWaZETkgu+LgKd7AiyOml3EDJY1AHlIbBHKDXE+TUT53Ff8OaA==",
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"streamx": "^2.21.0"
},
"peerDependencies": {
"bare-buffer": "*",
"bare-events": "*"
},
"peerDependenciesMeta": {
"bare-buffer": {
"optional": true
},
"bare-events": {
"optional": true
}
}
},
"node_modules/base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -3670,6 +3813,58 @@
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/bl": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
"integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
"license": "MIT",
"optional": true,
"dependencies": {
"buffer": "^5.5.0",
"inherits": "^2.0.4",
"readable-stream": "^3.4.0"
}
},
"node_modules/bl/node_modules/buffer": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
"integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT",
"optional": true,
"dependencies": {
"base64-js": "^1.3.1",
"ieee754": "^1.1.13"
}
},
"node_modules/bl/node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"optional": true,
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -4032,6 +4227,20 @@
"node": ">=0.10.0"
}
},
"node_modules/color": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
"license": "MIT",
"optional": true,
"dependencies": {
"color-convert": "^2.0.1",
"color-string": "^1.9.0"
},
"engines": {
"node": ">=12.5.0"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4050,6 +4259,17 @@
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"license": "MIT"
},
"node_modules/color-string": {
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
"license": "MIT",
"optional": true,
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
}
},
"node_modules/colord": {
"version": "2.9.3",
"resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
@@ -4311,6 +4531,13 @@
"node": ">=4"
}
},
"node_modules/cssfilter": {
"version": "0.0.10",
"resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
"integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
"license": "MIT",
"optional": true
},
"node_modules/cssnano": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.0.6.tgz",
@@ -4473,6 +4700,32 @@
}
}
},
"node_modules/decompress-response": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
"integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"mimic-response": "^3.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/deep-extend": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
"integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=4.0.0"
}
},
"node_modules/deep-is": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -4711,6 +4964,16 @@
"node": ">= 0.8"
}
},
"node_modules/end-of-stream": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
"integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
"license": "MIT",
"optional": true,
"dependencies": {
"once": "^1.4.0"
}
},
"node_modules/enhanced-resolve": {
"version": "5.18.0",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
@@ -5143,6 +5406,16 @@
"url": "https://github.com/sindresorhus/execa?sponsor=1"
}
},
"node_modules/expand-template": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
"integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
"license": "(MIT OR WTFPL)",
"optional": true,
"engines": {
"node": ">=6"
}
},
"node_modules/externality": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/externality/-/externality-1.0.2.tgz",
@@ -5354,6 +5627,13 @@
"node": ">= 0.6"
}
},
"node_modules/fs-constants": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
"integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
"license": "MIT",
"optional": true
},
"node_modules/fs-extra": {
"version": "11.2.0",
"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
@@ -5586,6 +5866,13 @@
"git-up": "^8.0.0"
}
},
"node_modules/github-from-package": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
"integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
"license": "MIT",
"optional": true
},
"node_modules/glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -5971,6 +6258,34 @@
"url": "https://opencollective.com/ioredis"
}
},
"node_modules/ipx": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/ipx/-/ipx-2.1.0.tgz",
"integrity": "sha512-AVnPGXJ8L41vjd11Z4akIF2yd14636Klxul3tBySxHA6PKfCOQPxBDkCFK5zcWh0z/keR6toh1eg8qzdBVUgdA==",
"license": "MIT",
"optional": true,
"dependencies": {
"@fastify/accept-negotiator": "^1.1.0",
"citty": "^0.1.5",
"consola": "^3.2.3",
"defu": "^6.1.4",
"destr": "^2.0.2",
"etag": "^1.8.1",
"h3": "^1.10.0",
"image-meta": "^0.2.0",
"listhen": "^1.5.6",
"ofetch": "^1.3.3",
"pathe": "^1.1.2",
"sharp": "^0.32.6",
"svgo": "^3.2.0",
"ufo": "^1.3.2",
"unstorage": "^1.10.1",
"xss": "^1.0.14"
},
"bin": {
"ipx": "bin/ipx.mjs"
}
},
"node_modules/iron-webcrypto": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -5980,6 +6295,13 @@
"url": "https://github.com/sponsors/brc-dd"
}
},
"node_modules/is-arrayish": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
"license": "MIT",
"optional": true
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -6635,6 +6957,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/mimic-response": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
"integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6647,6 +6982,16 @@
"node": "*"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"license": "MIT",
"optional": true,
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/minipass": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
@@ -6705,6 +7050,13 @@
"node": ">=10"
}
},
"node_modules/mkdirp-classic": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
"integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
"license": "MIT",
"optional": true
},
"node_modules/mlly": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.3.tgz",
@@ -6756,6 +7108,13 @@
"integrity": "sha512-AiJsGsSF3O0havL1BydvI4+wR76sKT+okKRwWIaK96cZUnXqH0uNBOsHlbwZq3+m2BR1VKqHDVudl3gO4mYjpQ==",
"license": "MIT"
},
"node_modules/napi-build-utils": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
"integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
"license": "MIT",
"optional": true
},
"node_modules/natural-compare": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -6902,6 +7261,19 @@
"node": ">=8.10.0"
}
},
"node_modules/node-abi": {
"version": "3.72.0",
"resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.72.0.tgz",
"integrity": "sha512-a28z9xAQXvDh40lVCknWCP5zYTZt6Av8HZqZ63U5OWxTcP20e3oOIy8yHkYfctQM2adR8ru1GxWCkS0gS+WYKA==",
"license": "MIT",
"optional": true,
"dependencies": {
"semver": "^7.3.5"
},
"engines": {
"node": ">=10"
}
},
"node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -8033,6 +8405,85 @@
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
}
},
"node_modules/prebuild-install": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
"integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^2.0.0",
"expand-template": "^2.0.3",
"github-from-package": "0.0.0",
"minimist": "^1.2.3",
"mkdirp-classic": "^0.5.3",
"napi-build-utils": "^1.0.1",
"node-abi": "^3.3.0",
"pump": "^3.0.0",
"rc": "^1.2.7",
"simple-get": "^4.0.0",
"tar-fs": "^2.0.0",
"tunnel-agent": "^0.6.0"
},
"bin": {
"prebuild-install": "bin.js"
},
"engines": {
"node": ">=10"
}
},
"node_modules/prebuild-install/node_modules/chownr": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
"integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
"license": "ISC",
"optional": true
},
"node_modules/prebuild-install/node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
"integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
"license": "MIT",
"optional": true,
"dependencies": {
"inherits": "^2.0.3",
"string_decoder": "^1.1.1",
"util-deprecate": "^1.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/prebuild-install/node_modules/tar-fs": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
"integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
"license": "MIT",
"optional": true,
"dependencies": {
"chownr": "^1.1.1",
"mkdirp-classic": "^0.5.2",
"pump": "^3.0.0",
"tar-stream": "^2.1.4"
}
},
"node_modules/prebuild-install/node_modules/tar-stream": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
"license": "MIT",
"optional": true,
"dependencies": {
"bl": "^4.0.3",
"end-of-stream": "^1.4.1",
"fs-constants": "^1.0.0",
"inherits": "^2.0.3",
"readable-stream": "^3.1.1"
},
"engines": {
"node": ">=6"
}
},
"node_modules/prelude-ls": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -8119,6 +8570,17 @@
"integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
"license": "MIT"
},
"node_modules/pump": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
"integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
"license": "MIT",
"optional": true,
"dependencies": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
}
},
"node_modules/punycode": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -8179,6 +8641,39 @@
"node": ">= 0.6"
}
},
"node_modules/rc": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
"integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
"license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
"optional": true,
"dependencies": {
"deep-extend": "^0.6.0",
"ini": "~1.3.0",
"minimist": "^1.2.0",
"strip-json-comments": "~2.0.1"
},
"bin": {
"rc": "cli.js"
}
},
"node_modules/rc/node_modules/ini": {
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
"integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"license": "ISC",
"optional": true
},
"node_modules/rc/node_modules/strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
"license": "MIT",
"optional": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/rc9": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
@@ -8646,6 +9141,37 @@
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"license": "ISC"
},
"node_modules/sharp": {
"version": "0.32.6",
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
"integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
"hasInstallScript": true,
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"color": "^4.2.3",
"detect-libc": "^2.0.2",
"node-addon-api": "^6.1.0",
"prebuild-install": "^7.1.1",
"semver": "^7.5.4",
"simple-get": "^4.0.1",
"tar-fs": "^3.0.4",
"tunnel-agent": "^0.6.0"
},
"engines": {
"node": ">=14.15.0"
},
"funding": {
"url": "https://opencollective.com/libvips"
}
},
"node_modules/sharp/node_modules/node-addon-api": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
"integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
"license": "MIT",
"optional": true
},
"node_modules/shebang-command": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -8685,6 +9211,53 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"license": "ISC"
},
"node_modules/simple-concat": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
"integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT",
"optional": true
},
"node_modules/simple-get": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
"integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT",
"optional": true,
"dependencies": {
"decompress-response": "^6.0.0",
"once": "^1.3.1",
"simple-concat": "^1.0.0"
}
},
"node_modules/simple-git": {
"version": "3.27.0",
"resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.27.0.tgz",
@@ -8700,6 +9273,16 @@
"url": "https://github.com/steveukx/git-js?sponsor=1"
}
},
"node_modules/simple-swizzle": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
"integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
"license": "MIT",
"optional": true,
"dependencies": {
"is-arrayish": "^0.3.1"
}
},
"node_modules/sirv": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-3.0.0.tgz",
@@ -9062,6 +9645,21 @@
"node": ">=10"
}
},
"node_modules/tar-fs": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
"integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==",
"license": "MIT",
"optional": true,
"dependencies": {
"pump": "^3.0.0",
"tar-stream": "^3.1.5"
},
"optionalDependencies": {
"bare-fs": "^4.0.1",
"bare-path": "^3.0.0"
}
},
"node_modules/tar-stream": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
@@ -9193,6 +9791,19 @@
"dev": true,
"license": "0BSD"
},
"node_modules/tunnel-agent": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
"license": "Apache-2.0",
"optional": true,
"dependencies": {
"safe-buffer": "^5.0.1"
},
"engines": {
"node": "*"
}
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -10806,6 +11417,30 @@
}
}
},
"node_modules/xss": {
"version": "1.0.15",
"resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
"integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
"license": "MIT",
"optional": true,
"dependencies": {
"commander": "^2.20.3",
"cssfilter": "0.0.10"
},
"bin": {
"xss": "bin/xss"
},
"engines": {
"node": ">= 0.10.0"
}
},
"node_modules/xss/node_modules/commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"license": "MIT",
"optional": true
},
"node_modules/y18n": {
"version": "5.0.8",
"resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+1
View File
@@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/image": "^1.9.0",
"@pinia/nuxt": "^0.9.0",
"class-transformer": "^0.5.1",
"nuxt": "^3.15.0",
+1 -84
View File
@@ -1,89 +1,6 @@
<script setup lang="ts">
import Multiselect from "vue-multiselect";
import { useConceptStore } from "~/store/concepts.store";
const newConcept = ref("");
const conceptStore = useConceptStore();
await Promise.all([
conceptStore.fetchConceptList()
])
const loading = ref(false);
const conceptInput = ref<HTMLInputElement | null>(null);
async function createConcept() {
if (loading.value) {
return;
}
loading.value = true;
try {
await conceptStore.createConcept(newConcept.value);
newConcept.value = "";
} finally {
nextTick(() => {
loading.value = false;
nextTick(() => {
conceptInput.value?.focus();
});
});
}
}
function deleteConcept(id: number) {
conceptStore.deleteConcept(id);
}
onBeforeMount(() => {
conceptStore.subscribe();
});
onUnmounted(() => {
conceptStore.close();
});
</script>
<template>
<div id="concepts">
<div class="header">
<span>Concept</span>
<span>Status</span>
<span>Delete</span>
<span>Type</span>
</div>
<div class="concept" v-for="concept in conceptStore.concepts" :key="concept.id">
<span>{{ concept.value }}</span>
<input type="checkbox" checked="true" disabled="true" />
<input type="button" value="Delete" @click="deleteConcept(concept.id)" />
<Multiselect :options="Object.values(conceptStore.conceptTypes)" track-by="id"
deselect-label="Can't remove this value" :allow-empty="false" label="value" v-model="concept.type">
</Multiselect>
</div>
<div class="new-concept">
<span>
<input ref="conceptInput" type="text" :disabled="loading" @keypress.enter="createConcept"
v-model="newConcept" />
<button :disabled="loading" @click="createConcept">Submit</button>
</span>
</div>
</div>
<ConceptGrid></ConceptGrid>
</template>
<style lang="css" scoped>
div#concepts {
display: grid;
grid-template-columns: 1fr;
}
div.concept {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
div.header {
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: center;
}
</style>
+45 -19
View File
@@ -84,9 +84,15 @@ async function createWord() {
const selfPlayer = computed(() =>
game.value.players.find((p) => p.userId == userStore.self?.id)
);
function conceptClick(value: string) {
console.log(value)
}
</script>
<template>
<main id="game">
<div id="sidebar">
<div v-if="isCurrentTurn">Current word : {{ gameStore.currentWord }}</div>
Players in game :
<div v-for="player in game.players" :key="player.id">
@@ -101,20 +107,10 @@ const selfPlayer = computed(() =>
{{ game }}
<template v-if="userStore.self">
<template v-if="!game.started">
<input
type="button"
v-if="game.ownerId == userStore.self.id"
value="start"
@click="startGame"
/>
<input type="button" v-if="game.ownerId == userStore.self.id" value="start" @click="startGame" />
<input type="button" v-if="!selfPlayer" value="join" @click="joinGame" />
</template>
<input
v-if="game.ownerId == userStore.self.id"
type="button"
value="delete"
@click="deleteGame"
/>
<input v-if="game.ownerId == userStore.self.id" type="button" value="delete" @click="deleteGame" />
</template>
<div>
@@ -127,15 +123,45 @@ const selfPlayer = computed(() =>
<User :id="message.value"></User> Guessed the word !
</template>
</span>
<input
ref="wordInput"
type="text"
:disabled="loading || selfPlayer?.hasGuessed"
@keypress.enter="createWord"
v-model="messageText"
/>
<input ref="wordInput" type="text" :disabled="loading || selfPlayer?.hasGuessed" @keypress.enter="createWord"
v-model="messageText" />
<button :disabled="loading || selfPlayer?.hasGuessed" @click="createWord">
Submit
</button>
</div>
</div>
<div id="gridContainer">
<ConceptGrid @click="conceptClick"></ConceptGrid>
</div>
</main>
</template>
<style lang="css">
main#game {
display: grid;
justify-items: center;
grid-template-columns: 1fr minmax(0, 1fr);
grid-template-rows: 100%;
grid-template-areas: "sidebar grid";
height: 100%
}
#sidebar {
grid-area: sidebar;
}
#gridContainer {
justify-self: left;
grid-area: grid;
}
@media only screen and (max-width: 992px) {
main#game {
grid-template-columns: 100%;
grid-template-rows: minmax(0, 650px) 1fr;
grid-template-areas: "grid" "sidebar";
}
}
</style>
+4 -6
View File
@@ -28,13 +28,11 @@ async function createGame() {
</script>
<template>
<main>
<LobbyGame v-for="game in lobbyStore.games" :key="game.id" :id="game.id" />
<input
type="button"
value="Create Game"
@click="createGame"
:disabled="!userStore.self || loading"
/>
<input type="button" value="Create Game" @click="createGame" :disabled="!userStore.self || loading" />
</main>
</template>
<style lang="css" scoped>
+6 -12
View File
@@ -37,7 +37,7 @@ onUnmounted(() => {
</script>
<template>
<div id="words">
<main id="words">
<div class="header">
<span>Word</span>
<span>Status</span>
@@ -47,23 +47,17 @@ onUnmounted(() => {
<Word v-for="word in wordStore.words" :id="word.id" :key="word.id" />
<div class="new-word">
<span>
<input
ref="wordInput"
type="text"
:disabled="loading"
@keypress.enter="createWord"
v-model="newWord"
/>
<input ref="wordInput" type="text" :disabled="loading" @keypress.enter="createWord" v-model="newWord" />
<button :disabled="loading" @click="createWord">Submit</button>
</span>
</div>
</div>
</main>
</template>
<style lang="css" scoped>
div#words {
display: grid;
grid-template-columns: 1fr;
main#words {
display: flex;
flex-direction: column;
}
div.header {
+80
View File
@@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="50mm"
height="50mm"
viewBox="0 0 50 50"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
inkscape:zoom="2.8170388"
inkscape:cx="142.34806"
inkscape:cy="132.05356"
inkscape:window-width="2560"
inkscape:window-height="1371"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<text
xml:space="preserve"
style="font-size:8.96219px;text-align:start;writing-mode:lr-tb;direction:ltr;text-anchor:start;fill:#000000;stroke:none;stroke-width:0.744;paint-order:stroke fill markers;stroke-dasharray:none;fill-opacity:1"
x="-0.19718018"
y="28.360821"
id="text1"><tspan
sodipodi:role="line"
id="tspan1"
style="stroke-width:0.744;stroke-dasharray:none;stroke:none;fill:#000000;fill-opacity:1"
x="-0.19718018"
y="28.360821">Placeholder</tspan></text>
</g>
<metadata
id="metadata1">
<rdf:RDF>
<cc:Work
rdf:about="">
<cc:license
rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" />
<dc:creator>
<cc:Agent>
<dc:title>Legonzaur</dc:title>
</cc:Agent>
</dc:creator>
</cc:Work>
<cc:License
rdf:about="http://creativecommons.org/publicdomain/zero/1.0/">
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" />
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
</cc:License>
</rdf:RDF>
</metadata>
</svg>

After

Width:  |  Height:  |  Size: 2.6 KiB