Rework the fuck of everything

This commit is contained in:
2025-10-19 15:17:36 +02:00
parent 123b2961a2
commit e016dd7851
19 changed files with 762 additions and 155 deletions

View File

@@ -3,6 +3,9 @@
import Router from "$lib/router/Router.svelte";
import { Close } from "$wails/main/App";
import { scrollingTimeFrameStore } from "$lib/store/scrollingTimeFrameStore";
import BillManager from "$lib/components/BillManager.svelte";
let showSettings = false;
function keyDown(event: KeyboardEvent) {
if (event.ctrlKey && event.key == "r") {
@@ -11,27 +14,79 @@
if (event.ctrlKey && event.key == "w") {
Close();
}
if (event.key == "ArrowLeft") {
scrollingTimeFrameStore.prev();
}
if (event.key == "ArrowRight") {
scrollingTimeFrameStore.next();
}
}
function scroll(event: WheelEvent) {
event.preventDefault();
// Don't navigate if settings modal is open
if (showSettings) return;
if (event.deltaY < 0) {
scrollingTimeFrameStore.prev();
} else {
scrollingTimeFrameStore.next();
}
}
</script>
</script>
<svelte:window on:keydown={keyDown} on:wheel={scroll} />
<svelte:window on:keydown={keyDown} on:wheel|preventDefault={scroll} />
<Toaster theme="dark" expand visibleToasts={9} />
<!-- <Header /> -->
<main class="flex-1">
<template>
<header class="glass-morphism border-b border-white/10 px-6 py-3">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h1 class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
Bill Manager
</h1>
</div>
<div class="flex items-center space-x-3">
<div class="text-xs text-white/60">
Use mouse scroll to navigate months
</div>
<button class="action-button text-xs px-3 py-1" on:click={() => showSettings = true}>
Settings
</button>
<button class="action-button text-xs px-3 py-1" on:click={() => window.location.reload()}>
Refresh
</button>
</div>
</div>
</header>
<main class="flex-1 overflow-hidden p-0">
<Router />
</main>
<!-- Settings Modal -->
{#if showSettings}
<div
class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50"
on:click={() => showSettings = false}
on:keydown={(e) => e.key === 'Escape' && (showSettings = false)}
role="dialog"
aria-modal="true"
aria-labelledby="settings-title"
tabindex="0"
>
<div class="glass-morphism rounded-xl p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto m-4" on:click|stopPropagation>
<div class="flex items-center justify-between mb-4">
<h2 id="settings-title" class="text-2xl font-bold text-white">Settings</h2>
<button
class="w-8 h-8 rounded-lg bg-white/10 hover:bg-white/20 flex items-center justify-center text-white"
on:click={() => showSettings = false}
on:keydown={(e) => e.key === 'Enter' && (showSettings = false)}
aria-label="Close settings"
>
</button>
</div>
<BillManager />
</div>
</div>
{/if}

View File

@@ -0,0 +1,108 @@
<script lang="ts">
import { AddBill, RemoveBill } from "$wails/main/App";
import { billsStore } from "$lib/store/billsStore";
import { toast } from "svelte-sonner";
let showAddForm = false;
let newBillName = "";
async function addBill() {
if (!newBillName.trim()) {
toast.error("Please enter a bill name");
return;
}
const res = await AddBill(newBillName.trim());
if (!res.success) {
toast.error(`Failed to add bill: ${res.error}`);
return;
}
// Refresh the bills store
billsStore.refresh();
toast.success(`Bill "${newBillName}" added successfully`);
newBillName = "";
showAddForm = false;
}
async function removeBill(billId: number, billName: string) {
if (!confirm(`Are you sure you want to remove "${billName}"? This will also delete all payment history for this bill.`)) {
return;
}
const res = await RemoveBill(billId);
if (!res.success) {
toast.error(`Failed to remove bill: ${res.error}`);
return;
}
// Refresh the bills store
billsStore.refresh();
toast.success(`Bill "${billName}" removed successfully`);
}
</script>
<div class="glass-morphism rounded-xl p-6 mb-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-2xl font-bold text-white">Bill Management</h2>
<button
class="action-button text-sm px-4 py-2"
on:click={() => showAddForm = !showAddForm}
>
{showAddForm ? 'Cancel' : 'Add New Bill'}
</button>
</div>
{#if showAddForm}
<div class="mb-6 p-4 bg-white/5 rounded-lg border border-white/10">
<div class="flex flex-col space-y-3">
<label for="bill-name-input" class="text-sm font-medium text-white/80">New Bill Name:</label>
<input
id="bill-name-input"
type="text"
bind:value={newBillName}
placeholder="Enter bill name"
class="date-input"
on:keydown={(e) => e.key === 'Enter' && addBill()}
/>
<div class="flex space-x-2">
<button
class="action-button text-sm px-3 py-1.5"
on:click={addBill}
>
Add Bill
</button>
<button
class="px-3 py-1.5 text-sm rounded-lg font-semibold transition-all duration-200 bg-white/10 hover:bg-white/20 text-white/80"
on:click={() => { showAddForm = false; newBillName = ""; }}
>
Cancel
</button>
</div>
</div>
</div>
{/if}
<div class="space-y-2">
<h3 class="text-lg font-semibold text-white/80 mb-3">Current Bills:</h3>
{#if Array.from($billsStore.values()).length === 0}
<div class="text-center py-8 text-white/50">
<p>No bills found. Add your first bill to get started!</p>
</div>
{:else}
{#each Array.from($billsStore.values()) as bill}
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg border border-white/10">
<span class="text-white font-medium">{bill.name}</span>
<button
class="px-3 py-1 text-sm rounded-lg font-semibold transition-all duration-200 bg-red-500/20 hover:bg-red-500/30 text-red-400 border border-red-500/30"
on:click={() => removeBill(bill.id, bill.name)}
>
Remove
</button>
</div>
{/each}
{/if}
</div>
</div>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { type PaymentBill } from "$lib/types";
import { SetPaid } from "$wails/main/App";
import { SetPaid, SetPaidWithDate, UnmarkPaid } from "$wails/main/App";
import { toast } from "svelte-sonner";
export let paymentBill: PaymentBill = {
@@ -10,36 +10,114 @@
};
export let monthFor: Date = new Date();
let showDatePicker = false;
let selectedDate = "";
let paymentDate: string = "";
$: {
if (!!paymentBill.payment?.paymentDate) {
if (paymentBill.payment && paymentBill.payment.paymentDate) {
// @ts-ignore Yes split exists... The type is time.Time but it's actually a string
// Because typescript is a worthless waste of bytes
// And I don't know how to properly convert time.Time to Date or String
// So I'm doing this bullshit
paymentDate = paymentBill.payment!.paymentDate.split("T")[0];
paymentDate = paymentBill.payment.paymentDate.split("T")[0];
selectedDate = paymentDate;
}
}
async function doPaid(event: MouseEvent) {
const res = await SetPaid(paymentBill.id, monthFor);
if (!res.success) {
toast.error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
return;
throw new Error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
}
paymentBill.payment = res.data;
showDatePicker = false;
}
async function doPaidWithDate() {
const dateObj = new Date(selectedDate + "T00:00:00");
const res = await SetPaidWithDate(paymentBill.id, monthFor, dateObj);
if (!res.success) {
throw new Error(`failed setting paid for ${paymentBill.id} with custom date: ${res.error}`);
}
paymentBill.payment = res.data;
showDatePicker = false;
}
async function doUnmarkPaid() {
const res = await UnmarkPaid(paymentBill.id, monthFor);
if (!res.success) {
throw new Error(`failed unmarking paid for ${paymentBill.id}: ${res.error}`);
}
paymentBill.payment = null;
}
function openDatePicker() {
if (paymentBill.payment) {
showDatePicker = true;
} else {
doPaid();
}
}
</script>
<template>
<div class="grid grid-cols-2 w-full text-start px-3 text-xl">
<p class={paymentBill.payment == null ? "text-red-700" : ""}>{paymentBill.name}</p>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<p
class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500"
on:click={doPaid}
>
{paymentDate}
</p>
<div class="bill-card p-3">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-2">
<div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold {paymentBill.payment == null ? 'bg-red-500' : 'bg-green-500'}">
{paymentBill.payment == null ? "!" : "✓"}
</div>
<div class="min-w-0">
<h3 class="text-sm font-semibold {paymentBill.payment == null ? 'text-red-400' : 'text-white'} truncate">
{paymentBill.name}
</h3>
<p class="text-xs text-white/60">
{paymentBill.payment == null ? 'Unpaid' : paymentDate}
</p>
</div>
</div>
<div class="flex space-x-1">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<button
class="px-2 py-1 text-xs rounded font-medium transition-all duration-200 bg-blue-500/20 hover:bg-blue-500/30 text-blue-400"
on:click={openDatePicker}
>
{paymentBill.payment == null ? 'Pay' : 'Edit'}
</button>
{#if paymentBill.payment}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<button
class="px-2 py-1 text-xs rounded font-medium transition-all duration-200 bg-red-500/20 hover:bg-red-500/30 text-red-400"
on:click={doUnmarkPaid}
>
×
</button>
{/if}
</div>
</div>
{#if showDatePicker}
<div class="mt-2 p-2 bg-white/5 rounded border border-white/10">
<div class="flex flex-col space-y-2">
<input
type="date"
bind:value={selectedDate}
class="px-2 py-1 text-xs rounded bg-white/10 border border-white/20 text-white"
/>
<div class="flex space-x-1">
<button
class="px-2 py-1 text-xs rounded font-medium bg-blue-500/30 text-blue-400"
on:click={doPaidWithDate}
>
Set
</button>
<button
class="px-2 py-1 text-xs rounded font-medium bg-white/10 text-white/70"
on:click={() => showDatePicker = false}
>
Cancel
</button>
</div>
</div>
</div>
{/if}
</div>
</template>

View File

@@ -13,37 +13,62 @@
dateString = dateString.split("-").slice(0, 2).join("-");
}
const paymentsModel: { [key: number]: PaymentBill } = {};
for (const bill of $billsStore) {
paymentsModel[bill[1].id] = {
id: bill[1].id,
name: bill[1].name,
payment: null,
};
}
for (const payment of payments) {
const bill = $billsStore.get(payment.billId);
if (!!!bill) {
toast.error(`Bill not found for id ${payment.billId}`);
continue;
$: paymentsModel = (() => {
console.log('Payments component recalculating...', {
date: dateString,
paymentsCount: payments.length,
billsCount: $billsStore.size
});
const model: { [key: number]: PaymentBill } = {};
// First, create entries for all bills
for (const bill of $billsStore) {
model[bill[1].id] = {
id: bill[1].id,
name: bill[1].name,
payment: null,
};
}
paymentsModel[bill.id] = {
id: bill.id,
name: bill.name,
payment: payment,
};
}
// Then, add payment data for bills that have payments
for (const payment of payments) {
const bill = $billsStore.get(payment.billId);
if (!bill) {
throw new Error(`Bill not found for id ${payment.billId}`);
}
model[bill.id] = {
id: bill.id,
name: bill.name,
payment: payment,
};
console.log(`Payment found: ${bill.name} -> ${payment.paymentDate}`);
}
console.log('Final paymentsModel:', model);
return model;
})();
</script>
<template>
<div class="border-double border-2 border-gray-500 m-1">
<div class="text-4xl font-bold">
<div class="glass-morphism rounded-xl p-4 h-full flex flex-col">
<div class="month-header text-xl mb-4">
{dateString}
</div>
<div class="">
<div class="flex-1 overflow-y-auto space-y-2">
{#each Object.values(paymentsModel) as payment}
<PaymentBillComp paymentBill={payment} monthFor={date} />
{/each}
</div>
{#if Object.values(paymentsModel).length === 0}
<div class="flex-1 flex items-center justify-center text-white/50">
<div class="text-center">
<svg class="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
</svg>
<p class="text-sm">No bills found</p>
</div>
</div>
{/if}
</div>
</template>

View File

@@ -14,13 +14,15 @@
</script>
<template>
<div class="grid grid-cols-2">
{#if forceupdate}
<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
{:else}
<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
{/if}
<div class="h-full p-4">
<div class="grid grid-cols-2 gap-4 h-full">
{#if forceupdate}
<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
{:else}
<Payments date={$scrollingTimeFrameStore.from} payments={$lastMonthPaymentsStore} />
<Payments date={$scrollingTimeFrameStore.to} payments={$thisMonthPaymentsStore} />
{/if}
</div>
</div>
</template>

View File

@@ -25,10 +25,12 @@ async function createStore(): Promise<Writable<Map<number, main.Bill>> & { refre
if (!res.success) {
toast.error("Error getting bills " + res.error);
} else {
bills.clear();
for (let i = 0; i < res.data.length; i++) {
const bill = res.data[i];
bills.set(bill.id, bill);
}
set(bills);
}
},
};

View File

@@ -23,11 +23,12 @@ async function createStore(): Promise<Writable<main.Payment[]>> {
const lastMonthPaymentsStore = await createStore();
scrollingTimeFrameStore.subscribe(async (timeframe) => {
console.log('lastMonthPaymentsStore: timeframe updated', timeframe.from);
const res = await GetPaymentsForMonth(timeframe.from);
if (!res.success) {
toast.error("Error getting payments " + res.error);
return;
throw new Error("Error getting payments " + res.error);
}
console.log('lastMonthPaymentsStore: got payments', res.data.length);
lastMonthPaymentsStore.set(res.data);
});

View File

@@ -16,16 +16,20 @@ async function createStore(): Promise<Writable<ScrollingTimeframe> & { next: Fun
set,
next: () => {
update((frame: ScrollingTimeframe) => {
frame.from.setMonth(frame.from.getMonth() + 1);
frame.to.setMonth(frame.to.getMonth() + 1);
return frame;
const newFrom = new Date(frame.from);
const newTo = new Date(frame.to);
newFrom.setMonth(newFrom.getMonth() + 1);
newTo.setMonth(newTo.getMonth() + 1);
return { from: newFrom, to: newTo };
});
},
prev: () => {
update((frame: ScrollingTimeframe) => {
frame.from.setMonth(frame.from.getMonth() - 1);
frame.to.setMonth(frame.to.getMonth() - 1);
return frame;
const newFrom = new Date(frame.from);
const newTo = new Date(frame.to);
newFrom.setMonth(newFrom.getMonth() - 1);
newTo.setMonth(newTo.getMonth() - 1);
return { from: newFrom, to: newTo };
});
},
};

View File

@@ -23,11 +23,12 @@ async function createStore(): Promise<Writable<main.Payment[]>> {
const thisMonthPaymentsStore = await createStore();
scrollingTimeFrameStore.subscribe(async (timeframe) => {
console.log('thisMonthPaymentsStore: timeframe updated', timeframe.to);
const res = await GetPaymentsForMonth(timeframe.to);
if (!res.success) {
toast.error("Error getting payments " + res.error);
return;
throw new Error("Error getting payments " + res.error);
}
console.log('thisMonthPaymentsStore: got payments', res.data.length);
thisMonthPaymentsStore.set(res.data);
});

View File

@@ -2,18 +2,78 @@
@tailwind components;
@tailwind utilities;
html {
background-color: rgba(27, 38, 54, 1);
text-align: center;
color: white;
@layer base {
html {
background: linear-gradient(135deg, #1a1f2e 0%, #2c3e50 50%, #1a1f2e 100%);
text-align: center;
color: white;
min-height: 100vh;
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
background: transparent;
}
}
body {
margin: 0;
color: white;
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
@layer components {
.glass-morphism {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.bill-card {
transition: all 300ms ease;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0.5rem;
}
.bill-card:hover {
background: rgba(255, 255, 255, 0.06);
box-shadow: 0 4px 20px 0 rgba(31, 38, 135, 0.25);
transform: scale(1.01);
}
.paid-indicator {
@apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.unpaid-indicator {
@apply inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.month-header {
@apply text-3xl font-bold mb-6 pb-3 border-b border-white/20;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.action-button {
@apply px-4 py-2 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 active:scale-95;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.action-button:hover {
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}
.date-input {
@apply px-3 py-2 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:border-blue-400 focus:bg-white/15 transition-all duration-200;
}
}
@font-face {
@@ -27,4 +87,24 @@ body {
#app {
height: 100vh;
text-align: center;
display: flex;
flex-direction: column;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}

View File

@@ -3,6 +3,8 @@
import {main} from '../models';
import {time} from '../models';
export function AddBill(arg1:string):Promise<main.WailsBill>;
export function Close():Promise<void>;
export function EmptyBill():Promise<main.Bill>;
@@ -13,4 +15,12 @@ export function GetBills():Promise<main.WailsBills>;
export function GetPaymentsForMonth(arg1:time.Time):Promise<main.WailsPayments>;
export function MovePayment(arg1:number,arg2:time.Time,arg3:time.Time):Promise<main.WailsPayment>;
export function RemoveBill(arg1:number):Promise<main.WailsVoid>;
export function SetPaid(arg1:number,arg2:time.Time):Promise<main.WailsPayment>;
export function SetPaidWithDate(arg1:number,arg2:time.Time,arg3:time.Time):Promise<main.WailsPayment>;
export function UnmarkPaid(arg1:number,arg2:time.Time):Promise<main.WailsVoid>;

View File

@@ -2,6 +2,10 @@
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT
export function AddBill(arg1) {
return window['go']['main']['App']['AddBill'](arg1);
}
export function Close() {
return window['go']['main']['App']['Close']();
}
@@ -22,6 +26,22 @@ export function GetPaymentsForMonth(arg1) {
return window['go']['main']['App']['GetPaymentsForMonth'](arg1);
}
export function MovePayment(arg1, arg2, arg3) {
return window['go']['main']['App']['MovePayment'](arg1, arg2, arg3);
}
export function RemoveBill(arg1) {
return window['go']['main']['App']['RemoveBill'](arg1);
}
export function SetPaid(arg1, arg2) {
return window['go']['main']['App']['SetPaid'](arg1, arg2);
}
export function SetPaidWithDate(arg1, arg2, arg3) {
return window['go']['main']['App']['SetPaidWithDate'](arg1, arg2, arg3);
}
export function UnmarkPaid(arg1, arg2) {
return window['go']['main']['App']['UnmarkPaid'](arg1, arg2);
}

View File

@@ -50,6 +50,40 @@ export namespace main {
return a;
}
}
export class WailsBill {
data: Bill;
success: boolean;
error: string;
static createFrom(source: any = {}) {
return new WailsBill(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.data = this.convertValues(source["data"], Bill);
this.success = source["success"];
this.error = source["error"];
}
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 WailsBills {
data: Bill[];
success: boolean;
@@ -152,6 +186,20 @@ export namespace main {
return a;
}
}
export class WailsVoid {
success: boolean;
error: string;
static createFrom(source: any = {}) {
return new WailsVoid(source);
}
constructor(source: any = {}) {
if ('string' === typeof source) source = JSON.parse(source);
this.success = source["success"];
this.error = source["error"];
}
}
}

View File

@@ -134,7 +134,7 @@ export function WindowIsFullscreen(): Promise<boolean>;
// [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
// Sets the width and height of the window.
export function WindowSetSize(width: number, height: number): Promise<Size>;
export function WindowSetSize(width: number, height: number): void;
// [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
// Gets the width and height of the window.