ztimson/desktop-daemon
ztimson/desktop-daemon
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

WIP

Browse Source
This commit is contained in:
Zakary Timson 2022-08-06 19:09:23 -04:00
parent 0125f5b7ab
commit 4b55f4799e
12 changed files with 166 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/files.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

BIN
assets/shadow_dog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
assets/sprite_template.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 228 B

21
index.html
View File

@ -3,16 +3,21 @@
<html> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>TS Electron Template</title> <title>Desktop Daemon</title>
<link rel="icon" type="img/png" src="assets/logo.png">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
</head> </head>
<body> <body>
<!-- Placeholder --> <canvas id="canvas"></canvas>
<h1>Versions:</h1>
<p>Node.js - <span id="node-version"></span></p>
<p>Chromium - <span id="chrome-version"></span></p>
<p>Electron - <span id="electron-version"></span></p>
<!-- Put your code inside src/renderer.ts -->
<script src="./dist/renderer.js"></script> <script src="./dist/renderer.js"></script>
</body> </body>
</html> </html>

1
src/constants.ts Normal file
View File

@ -0,0 +1 @@
export const FRAME_RATE = 10;

23
src/main.ts
View File

@ -1,14 +1,29 @@
import {app, BrowserWindow} from "electron"; import {app, BrowserWindow, screen} from "electron";
import * as path from "path"; import * as path from "path";
// Window factory // Window factory
function createWindow() { function createWindow() {
const primaryDisplay = screen.getPrimaryDisplay();
const height = 250;
const window = new BrowserWindow({ const window = new BrowserWindow({
height: 600, x: 0,
width: 800, y: primaryDisplay.workArea.height - height,
height: height,
width: primaryDisplay.size.width,
frame: false,
transparent: true,
roundedCorners: false,
resizable: false,
fullscreen: false,
alwaysOnTop: false,
icon: path.join(__dirname, "../assets/logo.png"),
title: 'Desktop Daemon',
webPreferences: { webPreferences: {
nodeIntegration: true,
contextIsolation: false,
preload: path.join(__dirname, "preload.js") preload: path.join(__dirname, "preload.js")
} },
}); });
window.loadFile(path.join(__dirname, "../index.html")); window.loadFile(path.join(__dirname, "../index.html"));

38
src/renderer.ts
View File

@ -1,4 +1,34 @@
/* const {FRAME_RATE} = require('./dist/constants.js');
This file is imported by index.html, you can put any code you want to run afer const {UnitController} = require('./dist/unit-controller.js');
page load, here. const {StaticSprite} = require('./dist/sprites.js');
*/ const {sleep} = require('./dist/utils.js');
const canvas = <HTMLCanvasElement>document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const screenHeight = window.innerHeight;
const screenWidth = window.innerWidth;
canvas.width = screenWidth;
canvas.height = screenHeight;
function clearScreen() { ctx.clearRect(0, 0, screenWidth, screenHeight); }
const file = new StaticSprite(ctx, './assets/files.png', [1, 0], 0.5);
const sprite = new UnitController(ctx, {
spritesheetSrc: './assets/shadow_dog.png',
spriteAnimations: ['idle'],
spriteScale: 0.5,
spriteWidth: 575,
spriteHeight: 523,
spriteFrames: 7,
});
(async () => {
sprite.vel = [20, 0];
while(true) {
clearScreen();
file.render(25, 25);
sprite.tick();
await sleep(1000 / FRAME_RATE);
}
})();

58
src/sprites.ts Normal file
View File

@ -0,0 +1,58 @@
export class AnimatedSprite {
private animation = '';
private animationIndex = -1;
private frame = -1;
private spriteSheet!: HTMLImageElement;
constructor(private ctx: CanvasRenderingContext2D,
public spritesheetSrc: string,
public spriteAnimations: string[],
public spriteScale = 1,
public spriteWidth = 100,
public spriteHeight = 100,
public spriteFrames = 10,
) {
this.spriteSheet = new Image();
this.spriteSheet.src = this.spritesheetSrc;
}
render(x: number, y: number, animation: string = this.animation) {
if(this.animation != animation) {
this.frame = 0;
this.animation = animation;
this.animationIndex = this.spriteAnimations.findIndex((a) => a == animation);
} else {
this.frame++;
if(this.frame >= this.spriteFrames) this.frame = 0;
}
this.ctx.drawImage(this.spriteSheet,
this.frame * this.spriteWidth, this.animationIndex * this.spriteHeight,
this.spriteWidth, this.spriteHeight,
x, this.ctx.canvas.height - (this.spriteHeight * this.spriteScale + y),
this.spriteWidth * this.spriteScale, this.spriteHeight * this.spriteScale);
}
}
export class StaticSprite {
private spriteSheet!: HTMLImageElement;
constructor(private ctx: CanvasRenderingContext2D,
public spritesheetSrc: string,
public sprite: [number, number],
public spriteScale = 1,
public spriteWidth = 100,
public spriteHeight = 100,
) {
this.spriteSheet = new Image();
this.spriteSheet.src = this.spritesheetSrc;
}
render(x: number, y: number) {
this.ctx.drawImage(this.spriteSheet,
this.sprite[0] * this.spriteWidth, this.sprite[1] * this.spriteHeight,
this.spriteWidth, this.spriteHeight,
x, this.ctx.canvas.height - (this.spriteHeight * this.spriteScale + y),
this.spriteWidth * this.spriteScale, this.spriteHeight * this.spriteScale);
}
}

35
src/unit-controller.ts Normal file
View File

@ -0,0 +1,35 @@
// const {FRAME_RATE} = require('./dist/constants.js');
const {AnimatedSprite} = require('./sprites.js');
// TODO - Move to import
const FRAME_RATE = 10;
export type SpriteOptions = {
spritesheetSrc: string,
spriteAnimations: string[],
spriteWidth?: number,
spriteHeight?: number,
spriteFrames?: number,
scale?: number,
}
export class UnitController {
private sprite!: typeof AnimatedSprite;
public pos = [0, 0];
public vel = [0, 0];
constructor(private ctx: CanvasRenderingContext2D,
private spriteOptions: SpriteOptions,
) {
this.sprite = new AnimatedSprite(ctx, ...Object.values(spriteOptions));
}
tick() {
this.pos = [this.pos[0] + (this.vel[0] / FRAME_RATE), this.pos[1] + (this.vel[1] / FRAME_RATE)];
let animation = 'idle';
// if(this.vel[0] < 0) animation = 'left';
// if(this.vel[0] > 0) animation = 'right';
this.sprite.render(this.pos[0], this.pos[1], animation);
}
}

3
src/utils.ts Normal file
View File

@ -0,0 +1,3 @@
export function sleep(ms: number) {
return new Promise(res => setTimeout(res, ms));
}

5
tsconfig.json
View File

@ -1,14 +1,15 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "ES2022",
"module": "commonjs", "module": "commonjs",
"noImplicitAny": true, "noImplicitAny": true,
"esModuleInterop": true,
"sourceMap": true, "sourceMap": true,
"outDir": "dist", "outDir": "dist",
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"*": ["node_modules/*"] "*": ["node_modules/*"]
}, }
"lib": ["dom", "es2015"]
}, },
"include": [ "include": [
"src/**/*" "src/**/*"