schreifuchs/tichu-counter
1
0
Fork 0
generated from schreifuchs/wails-template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simple POC
All checks were successful
build / windows (push) Successful in 5m37s
Details
build / linux (push) Successful in 4m20s
Details

Browse Source
This commit is contained in:
schreifuchs
2025-03-10 11:25:38 +01:00
parent 037b593c6b
commit b107b926a2
17 changed files with 364 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
frontend/src/App.svelte
View File

@ -1,15 +1,34 @@
<script lang="ts">
import "./app.css";
import { Router, Route, Link, navigate } from "svelte-routing";
import Things from "./routes/Things.svelte";
import { GetGame, GetGames, NewGame } from "../wailsjs/go/main/App";
import "./app.css";
import { Navbar, DarkMode } from "flowbite-svelte";
import { HomeOutline } from "flowbite-svelte-icons";
import Thing from "./routes/Thing.svelte";
import {
Navbar,
DarkMode,
Button,
Dropdown,
DropdownItem,
Heading,
DropdownDivider,
} from "flowbite-svelte";
import { ChevronDownOutline, HomeOutline } from "flowbite-svelte-icons";
import Game from "./routes/Game.svelte";
import { model } from "../wailsjs/go/models";
import { onMount } from "svelte";
let games: model.Game[] = $state([]);
let game: model.Game | null = $state(null);
let url: string = $state("/");
function update() {
GetGames().then((gs) => (games = gs));
if (game) {
GetGame(game.ID).then((g) => (game = g));
}
}
$effect(() => {
console.log(url);
});
onMount(update);
</script>
<div
@ -17,22 +36,55 @@
>
<Router bind:url>
<Navbar class="border-b">
<button
class="grid grid-cols-3 items-center"
onclick={() => navigate("/")}
<!-- <button -->
<!-- class="grid grid-cols-3 items-center" -->
<!-- onclick={() => navigate("/")} -->
<!-- > -->
<!-- <HomeOutline /> -->
<!-- <span class="col-span-2">HOME</span> -->
<!-- </button> -->
<Button>
{#if game === null}
Select a game
{:else}
{game.CreatedAt}
{/if}
<ChevronDownOutline
class="w-6 h-6 ms-2 text-white dark:text-white"
/></Button
>
<HomeOutline />
<span class="col-span-2">HOME</span>
</button>
<Dropdown>
{#each games as g}
<DropdownItem onclick={() => GetGame(g.ID).then((g) => (game = g))}
>{g.CreatedAt}</DropdownItem
>
{/each}
<DropdownDivider />
<DropdownItem
onclick={() =>
NewGame().then((id) =>
GetGame(id).then((g) => {
game = g;
update();
}),
)}>New Game</DropdownItem
>
</Dropdown>
<DarkMode />
</Navbar>
<main
class="size-full max-h-full max-w-full overflow-y-scroll overflow-x-clip"
>
<Route path="/"><Things /></Route>
<Route path="/things/:id" let:params>
<Thing thingID={parseInt(params.id)} />
<Route path="/">
{#if game !== null}
<Game gameId={game.ID} />
{:else}
<Heading class="m-5">Please select a game</Heading>
{/if}
</Route>
<!-- <Route path="/things/:id" let:params> -->
<!-- <Thing thingID={parseInt(params.id)} /> -->
<!-- </Route> -->
</main>
</Router>
</div>

38
frontend/src/components/TichuSelect.svelte Normal file
View File

@ -0,0 +1,38 @@
<script lang="ts">
import { Button, ButtonGroup } from "flowbite-svelte";
let { value = $bindable() }: { value: number } = $props();
const active: "primary" = "primary";
const passive: "yellow" | "none" = "none";
</script>
<div class="flex flex-col">
<Button
class="rounded-none rounded-t-lg"
color={value === 200 ? active : passive}
onclick={() => (value = 200)}>200</Button
>
<Button
class="rounded-none"
color={value === 100 ? active : passive}
onclick={() => (value = 100)}
>
100</Button
>
<Button
class="rounded-none"
color={value === 0 ? active : passive}
onclick={() => (value = 0)}>0</Button
>
<Button
class="rounded-none"
color={value === -100 ? active : passive}
onclick={() => (value = -100)}>-100</Button
>
<Button
class="rounded-none rounded-b-lg"
color={value === -200 ? active : passive}
onclick={() => (value = -200)}>-200</Button
>
</div>

77
frontend/src/routes/Game.svelte Normal file
View File

@ -0,0 +1,77 @@
<script lang="ts">
import { Button, Heading, P, Range } from "flowbite-svelte";
import { onMount } from "svelte";
import { GetGame, SaveStep } from "../../wailsjs/go/main/App";
import { model } from "../../wailsjs/go/models";
import { derived } from "svelte/store";
import TichuSelect from "@/components/TichuSelect.svelte";
let { gameId }: { gameId: number } = $props();
let game: model.Game = $state(new model.Game());
let rawPoints: number = $state(50);
let pointsTeamA = $derived.by(() => {
if (rawPoints == -30) {
return 200;
}
if (rawPoints == 130) {
return 0;
}
return 100 - rawPoints;
});
let pointsTeamB = $derived.by(() => {
if (rawPoints == -30) {
return 0;
}
if (rawPoints == 130) {
return 200;
}
return rawPoints;
});
let adderTeamA = $state(0);
let adderTeamB = $state(0);
function update() {
GetGame(gameId).then((g) => (game = g));
}
$effect(update);
</script>
<div class="grid grid-cols-2 gap-5 m-5">
<Heading class="text-center">{game.TeamA}</Heading>
<Heading class="text-center">{game.TeamB}</Heading>
<div class="col-span-2 flex gap-5 items-center">
<P>{pointsTeamA}</P>
<Range
id="range-minmax"
min="-30"
max="130"
step="5"
bind:value={rawPoints}
/>
<P>{pointsTeamB}</P>
</div>
<TichuSelect bind:value={adderTeamA} />
<TichuSelect bind:value={adderTeamB} />
<div class="col-span-2 flex gap-5 items-center justify-center">
<Button
onclick={() => {
let step = new model.Step();
step.GameID = gameId;
step.PointsTeamA = pointsTeamA;
step.AdderTeamA = adderTeamA;
step.PointsTeamB = pointsTeamB;
step.AdderTeamB = adderTeamB;
SaveStep(step).then(() => {
update();
rawPoints = 50;
adderTeamA = 0;
adderTeamB = 0;
});
}}>Save</Button
>
</div>
</div>

26
frontend/src/routes/Thing.svelte
View File

@ -1,26 +0,0 @@
<script lang="ts">
import { GetThings } from "../../wailsjs/go/things/Service";
import { model } from "../../wailsjs/go/models";
import { onMount } from "svelte";
import { Heading } from "flowbite-svelte";
let { thingID }: { thingID: number } = $props();
let thing: model.Thing = $state(new model.Thing());
function update() {
GetThings().then((ts) => {
ts.forEach((t) => {
if (t.ID === thingID) {
thing = t;
}
});
});
}
onMount(update);
</script>
<div class="m-5">
<Heading>
{thing.Name}
</Heading>
</div>

77
frontend/src/routes/Things.svelte
View File

@ -1,77 +0,0 @@
<script lang="ts">
import { onMount } from "svelte";
import {
GetThings,
DeleteThing,
NewThing,
} from "../../wailsjs/go/things/Service";
import { model } from "../../wailsjs/go/models";
import {
Label,
Input,
Button,
Table,
TableHead,
TableHeadCell,
TableBody,
TableBodyRow,
TableBodyCell,
} from "flowbite-svelte";
import { navigate } from "svelte-routing";
let name: string = $state();
let thingsList: model.Thing[] = $state([]);
function update() {
GetThings().then((ts) => {
thingsList = ts;
});
}
function submit(e: Event) {
e.preventDefault();
NewThing(name).then(update);
name = "";
}
onMount(update);
</script>
<form class="max-w-96 m-5 grid-cols-1 gap-10" onsubmit={submit}>
<div class="m-5">
<Label for="first_name" class="mb-2">First name</Label>
<Input type="text" placeholder="John" bind:value={name} required />
</div>
<div class="m-5">
<Button type="submit">Submit</Button>
</div>
</form>
<Table>
<TableHead>
<TableHeadCell>ID</TableHeadCell>
<TableHeadCell>Name</TableHeadCell>
<TableHeadCell>View</TableHeadCell>
<TableHeadCell>Delete</TableHeadCell>
</TableHead>
<TableBody>
{#each thingsList as t}
<TableBodyRow>
<TableBodyCell>
{t.ID}
</TableBodyCell>
<TableBodyCell>
{t.Name}
</TableBodyCell>
<TableBodyCell>
<Button onclick={() => navigate(`/things/${t.ID}`)}>View</Button>
</TableBodyCell>
<TableBodyCell>
<Button onclick={() => DeleteThing(t.ID).then(update)}>Delete</Button>
</TableBodyCell>
</TableBodyRow>
{/each}
</TableBody>
</Table>

11
frontend/wailsjs/go/main/App.d.ts vendored
View File

@ -1,4 +1,15 @@
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {model} from '../models';
export function GetGame(arg1:number):Promise<model.Game>;
export function GetGames():Promise<Array<model.Game>>;
export function GetLastGameID():Promise<number>;
export function Greet(arg1:string):Promise<string>;
export function NewGame():Promise<number>;
export function SaveStep(arg1:model.Step):Promise<void>;

20
frontend/wailsjs/go/main/App.js
View File

@ -2,6 +2,26 @@
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
export function GetGame(arg1) {
return window['go']['main']['App']['GetGame'](arg1);
}
export function GetGames() {
return window['go']['main']['App']['GetGames']();
}
export function GetLastGameID() {
return window['go']['main']['App']['GetLastGameID']();
}
export function Greet(arg1) {
return window['go']['main']['App']['Greet'](arg1);
}
export function NewGame() {
return window['go']['main']['App']['NewGame']();
}
export function SaveStep(arg1) {
return window['go']['main']['App']['SaveStep'](arg1);
}

90
frontend/wailsjs/go/models.ts
View File

@ -1,18 +1,100 @@
export namespace model {
export class Thing {
export class Step {
ID: number;
Name: string;
// Go type: time
CreatedAt: any;
// Go type: time
UpdatedAt: any;
// Go type: gorm
DeletedAt: any;
GameID: number;
Game: Game;
PointsTeamA: number;
AdderTeamA: number;
PointsTeamB: number;
AdderTeamB: number;
static createFrom(source: any = {}) {
return new Thing(source);
return new Step(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.ID = source["ID"];
this.Name = source["Name"];
this.CreatedAt = this.convertValues(source["CreatedAt"], null);
this.UpdatedAt = this.convertValues(source["UpdatedAt"], null);
this.DeletedAt = this.convertValues(source["DeletedAt"], null);
this.GameID = source["GameID"];
this.Game = this.convertValues(source["Game"], Game);
this.PointsTeamA = source["PointsTeamA"];
this.AdderTeamA = source["AdderTeamA"];
this.PointsTeamB = source["PointsTeamB"];
this.AdderTeamB = source["AdderTeamB"];
}
convertValues(a: any, classs: any, asMap: boolean = false): any {
if (!a) {
return a;
}
if (a.slice && a.map) {
return (a as any[]).map(elem => this.convertValues(elem, classs));
} else if ("object" === typeof a) {
if (asMap) {
for (const key of Object.keys(a)) {
a[key] = new classs(a[key]);
}
return a;
}
return new classs(a);
}
return a;
}
}
export class Game {
ID: number;
// Go type: time
CreatedAt: any;
// Go type: time
UpdatedAt: any;
// Go type: gorm
DeletedAt: any;
TeamA: number;
TeamB: number;
Steps: Step[];
static createFrom(source: any = {}) {
return new Game(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.ID = source["ID"];
this.CreatedAt = this.convertValues(source["CreatedAt"], null);
this.UpdatedAt = this.convertValues(source["UpdatedAt"], null);
this.DeletedAt = this.convertValues(source["DeletedAt"], null);
this.TeamA = source["TeamA"];
this.TeamB = source["TeamB"];
this.Steps = this.convertValues(source["Steps"], Step);
}
convertValues(a: any, classs: any, asMap: boolean = false): any {
if (!a) {
return a;
}
if (a.slice && a.map) {
return (a as any[]).map(elem => this.convertValues(elem, classs));
} else if ("object" === typeof a) {
if (asMap) {
for (const key of Object.keys(a)) {
a[key] = new classs(a[key]);
}
return a;
}
return new classs(a);
}
return a;
}
}
}

9
frontend/wailsjs/go/things/Service.d.ts vendored
View File

@ -1,9 +0,0 @@
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
import {model} from '../models';
export function DeleteThing(arg1:number):Promise<void>;
export function GetThings():Promise<Array<model.Thing>>;
export function NewThing(arg1:string):Promise<void>;

15
frontend/wailsjs/go/things/Service.js
View File

@ -1,15 +0,0 @@
// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
export function DeleteThing(arg1) {
return window['go']['things']['Service']['DeleteThing'](arg1);
}
export function GetThings() {
return window['go']['things']['Service']['GetThings']();
}
export function NewThing(arg1) {
return window['go']['things']['Service']['NewThing'](arg1);
}