Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Some bugfixes (upscaling, preanimation, webp on char buttons, viewport layout) #202

Merged
merged 6 commits into from
Nov 23, 2023
Merged

Some bugfixes (upscaling, preanimation, webp on char buttons, viewport layout) #202

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3c98ae5
Smarter upscaling/downscaling
SymphonyVR Nov 22, 2023
19287c6
Fix "Empty messages don't play the preanimation"
SymphonyVR Nov 22, 2023
8ba20bd
Add support for webp on the char buttons.
SymphonyVR Nov 22, 2023
c959f01
Make the web client UI behave more like AO2 client
SymphonyVR Nov 22, 2023
e44929a
Reverted some bugs caused by experimenting
SymphonyVR Nov 22, 2023
f126caa
Remove old "left" field
SymphonyVR Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions webAO/packets/handlers/handlePV.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,20 @@ export const handlePV = async (args: string[]) => {
}
// Make sure the asset server is case insensitive, or that everything on it is lowercase

const extensionsMap = [".png", ".webp"];
let url;
for (const extension of extensionsMap) {
url = `${AO_HOST}characters/${encodeURI(
me.name.toLowerCase()
)}/emotions/button${i}_off${extension}`;

const exists = await fileExists(url);

if (exists) {
break;
}
}

emotes[i] = {
desc: emoteinfo[0].toLowerCase(),
preanim: emoteinfo[1].toLowerCase(),
Expand All @@ -55,9 +69,7 @@ export const handlePV = async (args: string[]) => {
frame_screenshake: "",
frame_realization: "",
frame_sfx: "",
button: `${AO_HOST}characters/${encodeURI(
me.name.toLowerCase()
)}/emotions/button${i}_off.png`,
button: url,
};

const emote_item = new Image();
Expand Down
37 changes: 27 additions & 10 deletions webAO/styles/client.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,16 +206,21 @@
#client_court_static {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#client_court {
position: absolute;
height: 100%;
top: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please remove the old top

left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a known trick to center stuff in css but it doesn't work in all situations, need to test this

}

#client_stitch_court {
Expand All @@ -229,27 +234,32 @@
#client_stitch_court>img {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#client_court_classic {
position: absolute;
height: 100%;
top: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.def_court {
object-position: left;
object-position: center;
}

.wit_court {
object-position: center;
}

.pro_court {
object-position: right;
object-position: center;
}

#client_fullview {
Expand All @@ -275,16 +285,20 @@
bottom: 0;
}


.client_char>img {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
left: 0;
object-fit: cover;
object-position: 50% 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}



#client_bench_classic {
left: 0;
}
Expand All @@ -311,17 +325,20 @@

.client_bench {
position: absolute;
height: auto;
width: 100%;
height: 100%;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some benches are only a picture of the bench and this way they would stretch the entire height of the viewport and block it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bancodefensa

width: 1;
bottom: 0;
object-fit: contain;
}

#client_fg {
position: absolute;
height: 100%;
width: 100%;
bottom: 0;
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#client_evi {
Expand Down
14 changes: 14 additions & 0 deletions webAO/styles/default.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,25 @@ body {
font-family: sans-serif;
}

@media (max-height: 270x) {
img {
image-rendering: crisp-edges;
image-rendering: pixelated;
}

}

img {
image-rendering: auto;
}

img[src$=".gif"],
img[src$=".apng"] {
image-rendering: crisp-edges;
image-rendering: pixelated;
}


.client_button {
margin: 1px;
padding: 2px 15px;
Expand Down
6 changes: 3 additions & 3 deletions webAO/viewport/viewport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,9 +234,6 @@ const viewport = (): Viewport => {
// note: this is called fairly often
// do not perform heavy operations here
await delay(chatmsg.speed);
if (textnow === chatmsg.content) {
return;
}

const gamewindow = document.getElementById("client_gamewindow");
const waitingBox = document.getElementById("client_chatwaiting");
Expand Down Expand Up @@ -444,6 +441,9 @@ const viewport = (): Viewport => {
);
}
}
if (textnow === chatmsg.content) {
return;
}
if (animating) {
chat_tick();
}
Expand Down