Floating pets above bottom bar

octoshrimpy commented

2022-10-28 17:37:17 -04:00

(Migrated from github.com)

It would be sweet if pets could appear without a panel. I know the power mode plugin found a way to overlay over the editor itself, so there is a chance it may be possible.

If its been longer than 24h and i havent posted the relevant source code for power mode, ping me please!

It would be sweet if pets could appear without a panel. I know the power mode plugin found a way to overlay over the editor itself, so there is a chance it may be possible. If its been longer than 24h and i havent posted the relevant source code for power mode, ping me please!

👍 2

blairjordan commented

2022-11-01 13:36:27 -04:00

(Migrated from github.com)

Thanks for posting this Issue!

From https://github.com/hoovercj/vscode-power-mode#known-issues:

this extension relies on using TextEditorDecorations to set css properties for ranges in the editor.

I wonder if it's possible to hijack this to display our characters. It seems like an incredibly hacky approach, but maybe not impossible to achieve ...

Thanks for posting this Issue! From https://github.com/hoovercj/vscode-power-mode#known-issues: > this extension relies on using TextEditorDecorations to set css properties for ranges in the editor. I wonder if it's possible to hijack this to display our characters. It seems like an incredibly hacky approach, but maybe not impossible to achieve ...

🎉 1

octoshrimpy commented

2022-11-01 16:27:31 -04:00

(Migrated from github.com)

Looking at the fancy particles like rift, it looks like it's using an animation,so the hijacking is totally possible.

also looking at the combo meter here https://github.com/hoovercj/vscode-power-mode/blob/master/src/combo/editor-combo-meter.ts

okay, after playing around some more:

footer#workbench\.parts\.statusbar:before {
    content: "";
    height: 4rem;
    position: fixed;
    bottom: 21px;
    width: 4rem;
    left: 20rem;
    display: inline-block;
    z-index: 999;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAepJREFUWIXtlrFrGlEcxz+KgwGx59hJKwEHlxCO0AaypWAnCWaRQocgHW5xzZ8QSJYsGYokhA4uWUoHCy1ZBAV5JEKxVAhWJ8l0KkJChphB3nm5GHxn6pDW7/Tu+979fr/34/v73sEcc8wxx/8Oj+rBWEQf2J/rTeFxck7Um2JifK9qAQBlI0TZCD3gzoWf4p9Ti8st+ZVj+twUUCtdAaAFwsQiDLRAmFrpkjgL+EihBcIAFC/asylAovChB4SAHrXSiP/68wjfbopayctxdYYFyE4AxFcXRsF2U/f2VOBKA7OA0hTEIvpgZTsNgB4diTD9dnPs+fz3E0TDpLKTnzgJz6cD0yaY1AFXRiTHbG/x0uIz1WtyS35LjG8OTF7o7+iKgpIRuZqC4fhBNrjBfu8bADngU2LD0kbZyJMNalSEWkxXBSQqrwGIrQ/X7z++QgRN9GiI5YNDAD4bW9AwlWNO5QPjcGZsIRomOlD/0VF+T3kK6k3h6YoCnt+/LE40TCuZXAsXt4cpRSiR5HHPP+7f/H0ROhOvLY5vYPHiVjmWsg/IT2ymev1gXwuESdLmCy/p9FsW1+m3/hEnhPtu6NSCE7ILKhpQLsBeiGw5DMVmLypJW1mA8EQfsCeSf0huMVUH5Np+y8f4SbgD6fm4RxTzZgcAAAAASUVORK5CYII=);
    /* transform: scale(5); */
    background-repeat: no-repeat;
    background-size: cover;
    image-rendering: pixelated;
    pointer-events: none;
}

it can totally be done without injecting any elements into thepage, and instead styling a :before on the footer!

here's the spritesheet I used, and it'd be a matter of animating it by changing offset in css. the base64 image is a single frame, not the full image, for sake of sharing.
https://opengameart.org/content/a-platformer-in-the-forest
https://opengameart.org/sites/default/files/characters_7.png

Looking at the fancy particles like rift, it looks like it's using an animation,so the hijacking is totally possible. also looking at the combo meter here https://github.com/hoovercj/vscode-power-mode/blob/master/src/combo/editor-combo-meter.ts --- okay, after playing around some more: ```css footer#workbench\.parts\.statusbar:before { content: ""; height: 4rem; position: fixed; bottom: 21px; width: 4rem; left: 20rem; display: inline-block; z-index: 999; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAepJREFUWIXtlrFrGlEcxz+KgwGx59hJKwEHlxCO0AaypWAnCWaRQocgHW5xzZ8QSJYsGYokhA4uWUoHCy1ZBAV5JEKxVAhWJ8l0KkJChphB3nm5GHxn6pDW7/Tu+979fr/34/v73sEcc8wxx/8Oj+rBWEQf2J/rTeFxck7Um2JifK9qAQBlI0TZCD3gzoWf4p9Ti8st+ZVj+twUUCtdAaAFwsQiDLRAmFrpkjgL+EihBcIAFC/asylAovChB4SAHrXSiP/68wjfbopayctxdYYFyE4AxFcXRsF2U/f2VOBKA7OA0hTEIvpgZTsNgB4diTD9dnPs+fz3E0TDpLKTnzgJz6cD0yaY1AFXRiTHbG/x0uIz1WtyS35LjG8OTF7o7+iKgpIRuZqC4fhBNrjBfu8bADngU2LD0kbZyJMNalSEWkxXBSQqrwGIrQ/X7z++QgRN9GiI5YNDAD4bW9AwlWNO5QPjcGZsIRomOlD/0VF+T3kK6k3h6YoCnt+/LE40TCuZXAsXt4cpRSiR5HHPP+7f/H0ROhOvLY5vYPHiVjmWsg/IT2ymev1gXwuESdLmCy/p9FsW1+m3/hEnhPtu6NSCE7ILKhpQLsBeiGw5DMVmLypJW1mA8EQfsCeSf0huMVUH5Np+y8f4SbgD6fm4RxTzZgcAAAAASUVORK5CYII=); /* transform: scale(5); */ background-repeat: no-repeat; background-size: cover; image-rendering: pixelated; pointer-events: none; } ``` it can totally be done without injecting any elements into thepage, and instead styling a `:before` on the footer! ![walkin](https://user-images.githubusercontent.com/7097172/199334337-a5bdf28d-a377-4467-a732-3da25fd7c1a9.gif) here's the spritesheet I used, and it'd be a matter of animating it by changing offset in css. the base64 image is a single frame, not the full image, for sake of sharing. https://opengameart.org/content/a-platformer-in-the-forest https://opengameart.org/sites/default/files/characters_7.png

blairjordan commented

2022-11-11 03:10:18 -05:00

(Migrated from github.com)

@octoshrimpy phenominal work 🙌

I'm time-poor lately, but I'll definitely aim to integrate this.

I have similar feature to combos in the works also 😎

@octoshrimpy phenominal work 🙌 I'm time-poor lately, but I'll definitely aim to integrate this. I have similar feature to combos [in the works](https://github.com/blairjordan/codachi/issues/4) also 😎

octoshrimpy commented

2022-11-11 12:01:57 -05:00

(Migrated from github.com)

yessssss I'm excited.

one thing I've always wanted to do with a vscode pet plugin is detecting if the current folder is a git folder, and pet goes hungry and grumpy if you don't feed it (by committing)

another feature I thought of a while back is a pomodoro timer, where the pet climbs onto the middle of your screen and your code literally fades away, so you can't see what you're doing, forcing you to take a break, while the pet sleeps all comfy where your code was.

yessssss I'm excited. one thing I've always wanted to do with a vscode pet plugin is detecting if the current folder is a git folder, and pet goes hungry and grumpy if you don't feed it (by committing) another feature I thought of a while back is a pomodoro timer, where the pet climbs onto the middle of your screen and your code literally fades away, so you can't see what you're doing, forcing you to take a break, while the pet sleeps all comfy where your code was.

blairjordan commented

2022-11-15 14:18:08 -05:00

(Migrated from github.com)

Those are great ideas. I particularly like the first one.
I was going to feed the pets with keystrokes, but commits are a better idea!

The other important question is - What do they eat? 😂 Human food / computer parts / something else?

Happy to work on these if you want to open them up as issues.

Those are great ideas. I particularly like the first one. I was going to feed the pets with keystrokes, but commits are a better idea! The other important question is - What do they eat? 😂 Human food / computer parts / something else? Happy to work on these if you want to open them up as issues.

❤️ 2

Rows
Columns

Floating pets above bottom bar #7