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 --> <!-- HTML Meta Tags -->
<title>ShareChess</title> <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 --> <!-- Facebook Meta Tags -->
<meta property="og:url" content="https://sharechess.github.io/" /> <meta property="og:url" content="https://sharechess.github.io/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="ShareChess" /> <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 <meta
property="og:image" property="og:image"
content="https://sharechess.github.io/img/baner.png" content="https://sharechess.github.io/img/baner.png"
@@ -22,7 +28,10 @@
<meta property="twitter:domain" content="sharechess.github.io" /> <meta property="twitter:domain" content="sharechess.github.io" />
<meta property="twitter:url" content="https://sharechess.github.io/" /> <meta property="twitter:url" content="https://sharechess.github.io/" />
<meta name="twitter:title" content="ShareChess" /> <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 <meta
name="twitter:image" name="twitter:image"
content="https://sharechess.github.io/img/baner.png" content="https://sharechess.github.io/img/baner.png"
@@ -59,6 +68,13 @@
/> />
</head> </head>
<body class="dark"> <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> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

2
package.json
View File

@@ -14,7 +14,6 @@
"@types/howler": "^2.2.6", "@types/howler": "^2.2.6",
"@types/node": "^17.0.8", "@types/node": "^17.0.8",
"@types/ua-parser-js": "^0.7.36", "@types/ua-parser-js": "^0.7.36",
"@types/webfontloader": "^1.6.34",
"@vitejs/plugin-legacy": "^1.8.1", "@vitejs/plugin-legacy": "^1.8.1",
"typescript": "^4.4.4", "typescript": "^4.4.4",
"vite": "^2.7.2", "vite": "^2.7.2",
@@ -34,7 +33,6 @@
"is-mobile": "^3.0.0", "is-mobile": "^3.0.0",
"npm": "^8.4.0", "npm": "^8.4.0",
"ua-parser-js": "^1.0.2", "ua-parser-js": "^1.0.2",
"webfontloader": "^1.6.28",
"webm-writer": "^1.0.0" "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 { render } from "solid-js/web";
import Board from "./board/Board"; import Board from "./board/Board";
@@ -47,19 +46,11 @@ const main = async () => {
/* Initialize */ /* Initialize */
Promise.all([ 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) => { new Promise((resolve) => {
if (!window.speechSynthesis) {
resolve(null);
}
if (speechSynthesis.getVoices().length > 0) { if (speechSynthesis.getVoices().length > 0) {
resolve(null); resolve(null);
} else { } else {

4
src/player/Player.ts
View File

@@ -4,7 +4,7 @@ import Board from "../board/Board";
import Game from "../game/Game"; import Game from "../game/Game";
import { setState, state } from "../state"; import { setState, state } from "../state";
import sfx from "./sfx"; import sfx from "./sfx";
import Speech, { sanToText } from "./speach"; import Speech, { sanToText } from "./speech";
const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -190,6 +190,7 @@ class Player {
await this.board.frame(position, this.game.header); await this.board.frame(position, this.game.header);
this.board.render(); this.board.render();
if (window.speechSynthesis) {
if (this.ply > 0 && state.siteConfig.speech) { if (this.ply > 0 && state.siteConfig.speech) {
this.speech.say(sanToText(position.move?.san as string)); this.speech.say(sanToText(position.move?.san as string));
} }
@@ -213,6 +214,7 @@ class Player {
} }
} }
} }
}
async first() { async first() {
this.ply = 0; this.ply = 0;

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

@@ -43,12 +43,16 @@ const sanToText = (move: string) => {
return move; return move;
}; };
class Speach { class Speech {
private voice: SpeechSynthesisVoice | undefined; private voice: SpeechSynthesisVoice | undefined;
constructor() { constructor() {
if (!window.speechSynthesis) {
this.voice = undefined;
} else {
const voices = speechSynthesis.getVoices(); const voices = speechSynthesis.getVoices();
this.voice = voices.find((voice) => voice.lang === config.lang); this.voice = voices.find((voice) => voice.lang === config.lang);
} }
}
say(text: string) { say(text: string) {
const info = new SpeechSynthesisUtterance(text); const info = new SpeechSynthesisUtterance(text);
@@ -63,4 +67,4 @@ class Speach {
} }
export { sanToText }; 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); const [state, setState] = createStore(initialState);
console.log(state);
export { state, setState }; export { state, setState };

49
src/ui/App.css
View File

@@ -1,6 +1,28 @@
@font-face { @font-face {
font-family: "Chess"; 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; --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 { .dark {
background-color: #313742; background-color: #313742;
background-image: url(/img/pattern.png); background-image: url(/img/pattern.png);

4
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 { Handlers } from "../../types";
import { setState, state } from "../../state"; import { setState, state } from "../../state";
import "./Header.css"; import "./Header.css";
@@ -33,6 +33,7 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
}} }}
></i> ></i>
</div> </div>
<Show when={window.speechSynthesis}>
<div <div
class="header__options-ico" class="header__options-ico"
onClick={props.handlers.toggleSpeech} onClick={props.handlers.toggleSpeech}
@@ -46,6 +47,7 @@ const Header: Component<{ handlers: Handlers }> = (props) => {
}} }}
></i> ></i>
</div> </div>
</Show>
<div <div
class="header__options-ico" class="header__options-ico"
onClick={props.handlers.toggleDarkMode} onClick={props.handlers.toggleDarkMode}