initial ui

.gitignore

@@ -0,0 +1 @@
+.vscode

conjugation-api/Cargo.toml

@@ -11,3 +11,4 @@ juniper = "0.15.11"
 lazy_static = "1.4.0"
 tide = "0.16.0"
 sqlx = { version = "0.7", features = [ "runtime-async-std-native-tls", "sqlite",  ] }
+http-types = "2.12.0"

conjugation-api/src/main.rs

@@ -199,10 +199,24 @@ async fn handle_graphiql(_: Request<State>) -> tide::Result<impl Into<Response>>
 async fn main() -> std::io::Result<()> {
     let db = SqlitePool::connect(DB_URL).await.unwrap();
     let mut app = Server::with_state(State { pool: db });
+    app.with(
+        tide::security::CorsMiddleware::new()
+            .allow_methods(
+                "GET, PUT, POST, DELETE, HEAD, OPTIONS"
+                    .parse::<http_types::headers::HeaderValue>()
+                    .unwrap(),
+            )
+            .allow_origin(tide::security::Origin::from("http://localhost:5173"))
+            .allow_headers(
+                "Authorization, Accept, Content-Type"
+                    .parse::<http_types::headers::HeaderValue>()
+                    .unwrap(),
+            )
+            .allow_credentials(true),
+    );
     app.at("/").get(Redirect::permanent("/graphiql"));
     app.at("/graphql").post(handle_graphql);
     app.at("/graphiql").get(handle_graphiql);
     app.listen("0.0.0.0:8080").await?;
     Ok(())
 }
-

conjugation-ui/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

conjugation-ui/.eslintrc.cjs

@@ -0,0 +1,30 @@
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

conjugation-ui/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

conjugation-ui/.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

conjugation-ui/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

conjugation-ui/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

conjugation-ui/README.md

@@ -0,0 +1,34 @@
+# conjugation-ui
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## GraphQL
+
+```sh
+rover graph introspect http://localhost:8080/graphql > schema/schema.graphql
+```
+
+```sh
+bun run codegen
+```

conjugation-ui/codegen.ts

@@ -0,0 +1,11 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+	schema: 'schema/schema.graphql',
+	generates: {
+		'./src/generated/graphql.ts': {
+			plugins: ['typescript']
+		}
+	}
+};
+export default config;

conjugation-ui/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "conjugation-ui",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "codegen": "graphql-codegen --config codegen.ts"
+  },
+  "devDependencies": {
+    "@fontsource/fira-mono": "^4.5.10",
+    "@graphql-codegen/cli": "5.0.0",
+    "@graphql-codegen/typescript": "4.0.1",
+    "@neoconfetti/svelte": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@types/cookie": "^0.5.1",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "graphql-codegen-svelte-apollo": "^1.1.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.10.1",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.2"
+  },
+  "type": "module",
+  "dependencies": {
+    "@graphql-typed-document-node/core": "^3.2.0",
+    "graphql": "^16.8.1",
+    "svelte-apollo": "^0.5.0"
+  }
+}

conjugation-ui/schema/schema.graphql

@@ -0,0 +1,34 @@
+schema {
+  query: QueryRoot
+}
+type QueryRoot {
+  "get a verb"
+  conjugatedVerb(infinitive: String!, tense: Tense!): ConjugatedVerb
+}
+type ConjugatedVerb {
+  "Infinitive form of the verb"
+  infinitive: String!
+  "English form of the verb"
+  verbEnglish: String!
+  "Tense the verb has been conjugated"
+  tense: Tense!
+  "First person singular"
+  yo: String!
+  "Second person singular"
+  tu: String!
+  "Third person singular"
+  el: String!
+  "First person plural"
+  nosotros: String!
+  "Second person plural"
+  vosotros: String!
+  "Third person plural"
+  ellos: String!
+}
+enum Tense {
+  PRESENTE
+  PRETERITO
+  IMPERFECTO
+  FUTURO
+}
+

conjugation-ui/src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

conjugation-ui/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

conjugation-ui/src/components/Game.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { ConjugatedVerb } from '../generated/graphql';
+	import Guess from './Guess.svelte';
+
+	export let verb: ConjugatedVerb;
+	export let close: () => void;
+
+	let yo: boolean;
+	let tu: boolean;
+	let el: boolean;
+	let nosotros: boolean;
+	let vosotros: boolean;
+	let ellos: boolean;
+
+	let score: number = 0;
+</script>
+
+<div>
+	<div class="modal">
+		<div class="content">
+			<div class="close-button" on:click={close}>x</div>
+			{#if !yo}
+				<Guess
+					tense={verb.tense}
+					pronoun="Yo"
+					infinitive={verb.infinitive}
+					answer={verb.yo}
+					correct={() => score++}
+					done={() => (yo = true)}
+				/>
+			{:else if !tu}
+				<Guess
+					tense={verb.tense}
+					pronoun="Tu"
+					infinitive={verb.infinitive}
+					answer={verb.tu}
+					correct={() => score++}
+					done={() => (tu = true)}
+				/>
+			{:else if !el}
+				<Guess
+					tense={verb.tense}
+					pronoun="El"
+					infinitive={verb.infinitive}
+					answer={verb.el}
+					correct={() => score++}
+					done={() => (el = true)}
+				/>
+			{:else if !nosotros}
+				<Guess
+					tense={verb.tense}
+					pronoun="Nosotros"
+					infinitive={verb.infinitive}
+					answer={verb.nosotros}
+					correct={() => score++}
+					done={() => (nosotros = true)}
+				/>
+			{:else if !vosotros}
+				<Guess
+					tense={verb.tense}
+					pronoun="Vosotros"
+					infinitive={verb.infinitive}
+					answer={verb.vosotros}
+					correct={() => score++}
+					done={() => (vosotros = true)}
+				/>
+			{:else if !ellos}
+				<Guess
+					tense={verb.tense}
+					pronoun="Ellos"
+					infinitive={verb.infinitive}
+					answer={verb.ellos}
+					correct={() => score++}
+					done={() => (ellos = true)}
+				/>
+			{:else}
+				<h3>You scored {+((score / 6) * 100).toFixed(2)}%!</h3>
+				You got {score} out of 6 correct.
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.modal {
+		position: fixed;
+		z-index: 9999;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: rgb(0, 0, 0);
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+	.content {
+		position: relative;
+		background-color: #fefefe;
+		margin: 15% auto;
+		padding: 20px;
+		border: 1px solid #888;
+		width: 80%;
+	}
+	.close-button {
+		position: absolute;
+		top: 0;
+		right: 0.5rem;
+		color: #aaa;
+		font-size: 28px;
+		font-weight: bold;
+		cursor: pointer;
+	}
+	.close-button:hover,
+	.close-button:focus {
+		color: black;
+		text-decoration: none;
+		cursor: pointer;
+	}
+</style>