haunter/sharechess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed fonts and speech on Firefox

Browse Source
This commit is contained in:
Maciej Caderek
2022-04-24 03:49:41 +02:00
parent d87e02eea6
commit 33c06c8e47
12 changed files with 116 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -5,13 +5,19 @@
<!-- HTML Meta Tags -->
<title>ShareChess</title>
<meta name="description" content="Share chess games." />
<meta
name="description"
content="ShareChess is a free, open source website that allows you to share chess games as self-contained replay links, PNG images, or GIF / MP4 / WebM animations."
/>
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://sharechess.github.io/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ShareChess" />
<meta property="og:description" content="Share chess games." />
<meta
property="og:description"
content="ShareChess is a free, open source website that allows you to share chess games as self-contained replay links, PNG images, or GIF / MP4 / WebM animations."
/>
<meta
property="og:image"
content="https://sharechess.github.io/img/baner.png"
@@ -22,7 +28,10 @@
<meta property="twitter:domain" content="sharechess.github.io" />
<meta property="twitter:url" content="https://sharechess.github.io/" />
<meta name="twitter:title" content="ShareChess" />
<meta name="twitter:description" content="Share chess games." />
<meta
name="twitter:description"
content="ShareChess is a free, open source website that allows you to share chess games as self-contained replay links, PNG images, or GIF / MP4 / WebM animations."
/>
<meta
name="twitter:image"
content="https://sharechess.github.io/img/baner.png"
@@ -59,6 +68,13 @@
/>
</head>
<body class="dark">
<div class="invisible">
Loading
<span class="ubuntu-font-init">.</span>
<span class="ubuntu-bold-font-init">.</span>
<span class="fira-font-init">.</span>
<span class="chess-font-init">.</span>
</div>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

2
package.json
View File

@@ -14,7 +14,6 @@
"@types/howler": "^2.2.6",
"@types/node": "^17.0.8",
"@types/ua-parser-js": "^0.7.36",
"@types/webfontloader": "^1.6.34",
"@vitejs/plugin-legacy": "^1.8.1",
"typescript": "^4.4.4",
"vite": "^2.7.2",
@@ -34,7 +33,6 @@
"is-mobile": "^3.0.0",
"npm": "^8.4.0",
"ua-parser-js": "^1.0.2",
"webfontloader": "^1.6.28",
"webm-writer": "^1.0.0"
}
}

0
public/chess.ttf → public/fonts/Chess.ttf
View File

BIN
public/fonts/FiraMono-Medium.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/Ubuntu-Bold.ttf Normal file
View File

Binary file not shown.

BIN
public/fonts/Ubuntu-Medium.ttf Normal file
View File

Binary file not shown.

17
src/main.tsx
View File

@@ -1,4 +1,3 @@
import WebFont from "webfontloader";
import { render } from "solid-js/web";
import Board from "./board/Board";
@@ -47,19 +46,11 @@ const main = async () => {
/* Initialize */
Promise.all([
new Promise((resolve) =>
WebFont.load({
google: {
families: ["Ubuntu:500,700", "Fira Mono:500"],
},
custom: {
families: ["Chess"],
urls: ["/fonts.css"],
},
active: () => resolve(null),
})
).catch(() => null),
new Promise((resolve) => {
if (!window.speechSynthesis) {
resolve(null);
}
if (speechSynthesis.getVoices().length > 0) {
resolve(null);
} else {

40
src/player/Player.ts
View File

@@ -4,7 +4,7 @@ import Board from "../board/Board";
import Game from "../game/Game";
import { setState, state } from "../state";
import sfx from "./sfx";
import Speech, { sanToText } from "./speach";
import Speech, { sanToText } from "./speech";
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -190,26 +190,28 @@ class Player {
await this.board.frame(position, this.game.header);
this.board.render();
if (this.ply > 0 && state.siteConfig.speech) {
this.speech.say(sanToText(position.move?.san as string));
}
if (window.speechSynthesis) {
if (this.ply > 0 && state.siteConfig.speech) {
this.speech.say(sanToText(position.move?.san as string));
}
if (this.ply > 0 && state.siteConfig.sounds) {
state.boardConfig.piecesStyle.includes("anarchy")
? this.playAnarchySFX(position)
: this.playSFX(position);
}
if (this.ply > 0 && state.siteConfig.sounds) {
state.boardConfig.piecesStyle.includes("anarchy")
? this.playAnarchySFX(position)
: this.playSFX(position);
}
if (position.end === 0 && state.siteConfig.speech) {
const result = this.game.header.Result;
if (result) {
this.speech.say(
result === "1-0"
? "White wins!"
: result === "0-1"
? "Black wins!"
: "Draw!"
);
if (position.end === 0 && state.siteConfig.speech) {
const result = this.game.header.Result;
if (result) {
this.speech.say(
result === "1-0"
? "White wins!"
: result === "0-1"
? "Black wins!"
: "Draw!"
);
}
}
}
}

12
src/player/speach.ts → src/player/speech.ts
View File

@@ -43,11 +43,15 @@ const sanToText = (move: string) => {
return move;
};
class Speach {
class Speech {
private voice: SpeechSynthesisVoice | undefined;
constructor() {
const voices = speechSynthesis.getVoices();
this.voice = voices.find((voice) => voice.lang === config.lang);
if (!window.speechSynthesis) {
this.voice = undefined;
} else {
const voices = speechSynthesis.getVoices();
this.voice = voices.find((voice) => voice.lang === config.lang);
}
}
say(text: string) {
@@ -63,4 +67,4 @@ class Speach {
}
export { sanToText };
export default Speach;
export default Speech;

2
src/state.ts
View File

@@ -94,6 +94,4 @@ const initialState: State = {
const [state, setState] = createStore(initialState);
console.log(state);
export { state, setState };

49
src/ui/App.css
View File

@@ -1,6 +1,28 @@
@font-face {
font-family: "Chess";
src: url("chess.ttf") format("ttf");
font-weight: 400;
font-display: swap;
src: url("/fonts/Chess.ttf") format("truetype");
}
@font-face {
font-family: "Ubuntu";
font-weight: 500;
font-display: swap;
src: url("/fonts/Ubuntu-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Ubuntu";
font-weight: 700;
font-display: swap;
src: url("/fonts/Ubuntu-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Fira Mono";
font-display: swap;
src: url("/fonts/FiraMono-Medium.ttf") format("truetype");
}
* {
@@ -25,6 +47,31 @@ body {
--header-margin: 6rem;
}
.invisible {
font-size: 0;
height: 0;
}
.ubuntu-font-init {
font-family: Ubuntu;
font-weight: 500;
}
.ubuntu-bold-font-init {
font-family: Ubuntu;
font-weight: 700;
}
.fira-font-init {
font-family: "Fira Mono";
font-weight: 500;
}
.chess-font-init {
font-family: Chess;
font-weight: 400;
}
.dark {
background-color: #313742;
background-image: url(/img/pattern.png);

30
src/ui/components/Header.tsx
View File

@@ -1,4 +1,4 @@
import { Component } from "solid-js";
import { Component, Show } from "solid-js";
import { Handlers } from "../../types";
import { setState, state } from "../../state";
import "./Header.css";
@@ -33,19 +33,21 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
}}
></i>
</div>
<div
class="header__options-ico"
onClick={props.handlers.toggleSpeech}
title={state.siteConfig.speech ? "SPEECH OFF" : "SPEECH ON"}
>
<i
classList={{
las: true,
"la-deaf": !state.siteConfig.speech,
"la-assistive-listening-systems": state.siteConfig.speech,
}}
></i>
</div>
<Show when={window.speechSynthesis}>
<div
class="header__options-ico"
onClick={props.handlers.toggleSpeech}
title={state.siteConfig.speech ? "SPEECH OFF" : "SPEECH ON"}
>
<i
classList={{
las: true,
"la-deaf": !state.siteConfig.speech,
"la-assistive-listening-systems": state.siteConfig.speech,
}}
></i>
</div>
</Show>
<div
class="header__options-ico"
onClick={props.handlers.toggleDarkMode}