Webapp: basic start: loading concepts and allowing user to enter a (ignored) value

GuessNN-webapp/.gitignore

@@ -26,3 +26,7 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+
+# Puzzle-related data
+public/entities.json
+public/concepts.json

GuessNN-webapp/src/Concept.ts

@@ -0,0 +1,5 @@
+export class Concept {
+	elements: Array<string> = []
+	extensionalDistance = 0
+	properSize = 0
+}

GuessNN-webapp/src/NamedEntity.ts

@@ -0,0 +1,5 @@
+export class NamedEntity {
+	name = "";
+	type = "";
+	uri = "";
+}

GuessNN-webapp/src/Utils.ts

@@ -0,0 +1,8 @@
+export function fetchJSON(url: string): Promise<unknown> {
+	return fetch(url)
+		.then((response) => {
+			if (!response.ok)
+				throw new Error(`Error fetching ${url}: ${response.status} - ${response.statusText}`);
+			return response.json();
+		});
+}

GuessNN-webapp/src/assets/test.json

@@ -1,3 +0,0 @@
-{
-  "test": "hello"
-}

GuessNN-webapp/src/components/MainComponent.vue

@@ -1,29 +1,106 @@
 <template>
-	<p>{{ value }}</p>
-	<a :href="jsonURL">Test</a>
+	<div v-if="fetchErrors" class="error">
+		<div v-for="err in fetchErrors" :key="err">
+			{{ err }}<br />
+		</div>
+	</div>
+
+	<form v-if="entities.length > 0" @submit.prevent="submitGuess">
+		Enter a guess: <input type="text" v-model="guessFieldValue" /> <br />
+		<div v-if="guessError" class="error">{{ guessError }} <br /></div>
+		<span class="possibleTypes">It can be any {{ [...entityTypes].join(", ") }}.</span>
+	</form>
+
 </template>
 
 <script lang="ts">
-import jsonURL from "../assets/test.json?url";
 import { defineComponent } from "vue";
+import type { NamedEntity } from "@/NamedEntity";
+import type { Concept } from "@/Concept";
+import { fetchJSON } from "@/Utils";
+
+const entitiesURL = "/entities.json";
+const conceptsURL = "/concepts.json";
 
 export default defineComponent({
 	name: "MainComponent",
 	data() {
 		return {
-			value: "Test",
-			jsonURL: jsonURL,
+			guessFieldValue: "",
+			fetchErrors: [] as Array<string>,
+			guessError: null as string | null,
+			entities: [] as Array<NamedEntity>,
+			concepts: [] as Array<Concept>,
+			target: null as string | null,
 		};
 	},
-	mounted() {
-		fetch(jsonURL)
-			.then((v) => v.json())
-			.then((json) => {
-				console.log(json);
-				this.value = json;
+	computed: {
+		entityTypes(): Set<string> {
+			let result: Set<string> = new Set();
+			this.entities
+				.map(e => e.type)
+				.forEach(t => result.add(t));
+			return result;
+		},
+		entitiesByLowerName(): Map<string, Array<NamedEntity>> {
+			let result: Map<string, Array<NamedEntity>> = new Map();
+			this.entities.forEach(e => {
+				const lowerName = e.name.toLowerCase();
+				const entitiesWithName = result.get(lowerName) ?? [];
+				entitiesWithName.push(e);
+				result.set(lowerName, entitiesWithName);
 			});
+			return result;
+		},
+		entitiesByUri(): Map<string, NamedEntity> {
+			let result: Map<string, NamedEntity> = new Map();
+			this.entities.forEach(e => result.set(e.uri, e));
+			return result;
+		},
+	},
+	created() {
+		this.fetchErrors = [];
+		fetchJSON(entitiesURL)
+			.then(json => this.entities = json as Array<NamedEntity>)
+			.catch(this.fetchErrors.push);
+		fetchJSON(conceptsURL)
+			.then(json => {
+				this.concepts = (json as any).concepts as Array<Concept>; // eslint-disable-line @typescript-eslint/no-explicit-any
+				this.target = (json as any).target as string;  // eslint-disable-line @typescript-eslint/no-explicit-any
+			});
+	},
+	methods: {
+		submitGuess() {
+			this.guessError = null;
+			if (!this.entitiesByLowerName.has(this.guessFieldValue.toLowerCase())) {
+				this.guessError = `${(this.guessFieldValue)} is unknown to me...`;
+				return;
+			}
+			const matchingEntities = this.entitiesByLowerName.get(this.guessFieldValue.toLowerCase()) as NamedEntity[];
+			const matchingUris = new Set(matchingEntities.map(e => e.uri));
+			console.debug(matchingUris);
+			const matchingConcept = this.concepts.find(concept => concept.elements.some(uri => matchingUris.has(uri)));
+			if (typeof matchingConcept == "undefined") {
+				this.guessError = "Entity is known but concept can't be found: this should not happen...";
+				return;
+			}
+			console.info("Found matching guess concept");
+			console.info(matchingConcept);
+			this.guessFieldValue = "";
+		},
 	},
 });
 </script>
 
-<style scoped></style>
+<style scoped lang="scss">
+.error {
+	color: red;
+	font-style: italic;
+	margin-bottom: 2em;
+}
+
+.possibleTypes {
+	font-style: italic;
+	font-size: small;
+}
+</style>