wip

frontend/src/lib/ButtonMain.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
     export let onClick = (e?) => {};
+    export let square = false;
 </script>
 
 <button
     type="button"
-    class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 w-6 h-6 justify-center"
+    class="bg-violet-600 hover:bg-violet-700 rounded-md text-white p-1 px-2 justify-center {square
+        ? 'w-6 h-6'
+        : ''}"
     on:click|preventDefault={onClick}
 >
     <slot />

frontend/src/lib/types.ts

@@ -11,3 +11,10 @@ export interface Word {
     definition: string;
     level: Level;
 }
+
+export interface Grid {
+    id: number;
+    words: Word[];
+    width: number;
+    height: number;
+}

frontend/src/routes/ma_chaeliou/+page.svelte

@@ -1,7 +1,22 @@
 <script>
     import { page } from "$app/stores";
+    import ButtonMain from "$lib/ButtonMain.svelte";
+    import axios from "$lib/api";
+
+    function newGrid() {
+        try {
+            axios.post("grids/").then((data) => {
+                const gridId = data.data.id;
+                window.location.href = "/ma_chaeliou/" + gridId;
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
 </script>
 
 <main>
-    {$page.url.pathname}
+    <ButtonMain onClick={newGrid}
+        ><span class="fa-solid fa-plus mr-2" />Krouiñ ur gael</ButtonMain
+    >
 </main>

frontend/src/routes/ma_chaeliou/[id]/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import ButtonMain from "$lib/ButtonMain.svelte";
+    import axios from "$lib/api";
+    import { onMount } from "svelte";
+    import type { Grid } from "$lib/types";
+    import { snakeToCamelCase } from "$lib/case";
+
+    let grid: Grid | null;
+    $: grid = null;
+
+    function fetchData() {
+        try {
+            axios.get("grids/" + $page.params.id + "/").then((data) => {
+                grid = snakeToCamelCase(data.data);
+            });
+        } catch (e) {
+            console.log(e);
+        }
+    }
+
+    onMount(() => {
+        fetchData();
+    });
+</script>
+
+<main>
+    {#if grid}
+        id : {grid.id}, width: {grid.width}, height: {grid.height}
+    {/if}
+</main>

frontend/src/routes/ma_geriou/+page.svelte

@@ -37,8 +37,13 @@
 
     function fetchLevels() {
         try {
-            promiseLevels = axios.get("levels/").then((data) => {
+            promiseLevels = axios
+                .get("levels/")
+                .then((data) => {
                     levels = snakeToCamelCase(data.data);
+                })
+                .then(() => {
+                    $form.level = levels[0].id.toString();
                 });
         } catch (e) {
             console.log(e);
@@ -97,6 +102,12 @@
     onMount(() => {
         fetchData();
         fetchLevels();
+
+        window.addEventListener("keyup", (e) => {
+            if (e.key == "Escape") {
+                toggleFormNew();
+            }
+        });
     });
 </script>
 
@@ -139,7 +150,7 @@
                                     class="p-1 rounded-md border"
                                 >
                                     {#await promiseLevels then}
-                                        {#each levels as level, i}
+                                        {#each levels as level}
                                             <option value={level.levelNumber}>
                                                 {level.levelString}</option
                                             >

grids/migrations/0004_grid_height_grid_width.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.2.5 on 2023-09-17 19:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("grids", "0003_rename_string_number_level_level_string"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="grid",
+            name="height",
+            field=models.IntegerField(default=0),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name="grid",
+            name="width",
+            field=models.IntegerField(default=0),
+            preserve_default=False,
+        ),
+    ]

grids/models.py

@@ -15,6 +15,13 @@ class Word(models.Model):
 class Grid(models.Model):
     level = models.ForeignKey(Level, on_delete=models.CASCADE, related_name="grids")
     words = models.ManyToManyField(Word, through="Placement")
+    width = models.IntegerField()
+    height = models.IntegerField()
+
+    def save(self, *args, **kwargs):
+        if not hasattr(self, "level") or self.level is None:
+            self.level = Level.objects.first()
+        super(Grid, self).save(*args, **kwargs)
 
 
 class Direction: