Skip to content

Commit

Permalink
style 🎨
Browse files Browse the repository at this point in the history
  • Loading branch information
@cobbinma
cobbinma committed Sep 23, 2023
1 parent 157fc1f commit c13a34b
Show file tree
Hide file tree
Showing 29 changed files with 202 additions and 473 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
# conjugation

game for learning how to conjugate spanish verbs 🇪🇸

![](./docs/screenshot.png)
10 changes: 5 additions & 5 deletions conjugation-ui/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
Once you've installed dependencies with `bun install`, start a development server:

```bash
npm run dev
bun run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
bun run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
bun run build
```

You can preview the production build with `npm run preview`.
You can preview the production build with `bun run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
Expand Down
Binary file modified conjugation-ui/bun.lockb
View file
Binary file not shown.
5 changes: 5 additions & 0 deletions conjugation-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,22 @@
"@neoconfetti/svelte": "^1.0.0",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.20.4",
"@tailwindcss/typography": "^0.5.10",
"@types/cookie": "^0.5.1",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"autoprefixer": "^10.4.16",
"daisyui": "latest",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte": "^2.30.0",
"graphql-codegen-svelte-apollo": "^1.1.0",
"postcss": "^8.4.30",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"tslib": "^2.4.1",
"typescript": "^5.2.2",
"vite": "^4.4.2"
Expand Down
6 changes: 6 additions & 0 deletions conjugation-ui/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
7 changes: 5 additions & 2 deletions conjugation-ui/src/app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="%sveltekit.assets%/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png">
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest">
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
<div>>%sveltekit.body%</div>
</body>
</html>
160 changes: 61 additions & 99 deletions conjugation-ui/src/components/Game.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,104 +16,66 @@
</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}
{#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.
<div class="modal-action">
<!-- 🔵 set false on click -->
<button class="btn" on:click={close}>Close</button>
</div>
</div>
{/if}
</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>
12 changes: 9 additions & 3 deletions conjugation-ui/src/components/Guess.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,18 @@
</script>

<div>
<h2>{tense.toString()}</h2>
<h2>{tense.toString().toLowerCase()}</h2>
<h3>{pronoun} ({infinitive})</h3>
<div>
<form on:submit|preventDefault={check}>
<input bind:value={guess} use:focus />
<button>Check</button>
<input
type="text"
placeholder="Type here"
class="input select-secondary w-full max-w-xs"
bind:value={guess}
use:focus
/>
<button class="btn btn-secondary">Check</button>
</form>
</div>
<p>Enter your answer above. "{pronoun} ____"</p>
Expand Down
65 changes: 35 additions & 30 deletions conjugation-ui/src/components/Table.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,35 +4,40 @@
export let verb: ConjugatedVerb;
</script>

<div>
<table>
<tr>
<th>Pronoun</th>
<th>Spanish</th>
</tr>
<tr>
<td>Yo</td>
<td>{verb.yo}</td>
</tr>
<tr>
<td>Tu</td>
<td>{verb.tu}</td>
</tr>
<tr>
<td>El</td>
<td>{verb.el}</td>
</tr>
<tr>
<td>Nosotros</td>
<td>{verb.nosotros}</td>
</tr>
<tr>
<td>Vosotros</td>
<td>{verb.vosotros}</td>
</tr>
<tr>
<td>Ellos</td>
<td>{verb.ellos}</td>
</tr>
<div class="overflow-x-auto">
<table class="table-md">
<!-- head -->
<thead>
<tr>
<th>Pronoun</th>
<th>Spanish</th>
</tr>
</thead>
<tbody>
<tr>
<td>Yo</td>
<td>{verb.yo}</td>
</tr>
<tr>
<td>Tu</td>
<td>{verb.tu}</td>
</tr>
<tr>
<td>El</td>
<td>{verb.el}</td>
</tr>
<tr>
<td>Nosotros</td>
<td>{verb.nosotros}</td>
</tr>
<tr>
<td>Vosotros</td>
<td>{verb.vosotros}</td>
</tr>
<tr>
<td>Ellos</td>
<td>{verb.ellos}</td>
</tr>
</tbody>
</table>
</div>
33 changes: 18 additions & 15 deletions conjugation-ui/src/components/Verb.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,15 @@
});
</script>

<svelte:head>
<title>Verb</title>
<meta name="description" content="About this app" />
</svelte:head>

{#await $verb}
Loading..
<span class="loading loading-spinner loading-lg" />
{:then result}
{#if result.data?.conjugatedVerb}
<div class="text-column">
<h1>{result.data.conjugatedVerb.infinitive}</h1>

<h2>{result.data.conjugatedVerb.tense.toLowerCase()}</h2>

<p>
{result.data.conjugatedVerb.verbEnglish}
</p>
Expand All @@ -54,19 +51,25 @@
{/if}

{#if !playing}
<button on:click={() => (playing = true)}>Practise</button>
<button class="btn modal-button btn-secondary" on:click={() => (playing = true)}
>Practise</button
>
{:else}
<Game
verb={result.data.conjugatedVerb}
close={() => {
playing = false;
played = true;
}}
/>
<div class="modal" class:modal-open={playing}>
<div class="modal-box">
<Game
verb={result.data.conjugatedVerb}
close={() => {
playing = false;
played = true;
}}
/>
</div>
</div>
{/if}
</div>
{:else if result.loading}
Loading..
<span class="loading loading-spinner loading-lg" />
{:else if result.error}
{result.error}
{/if}
Expand Down
Loading

0 comments on commit c13a34b

Please sign in to comment.