Use FontAwesome as web font instead of vue component (#7469)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update yarn.lock

* wip

* wip
This commit is contained in:
syuilo 2021-04-20 23:22:59 +09:00 committed by GitHub
parent 8bb6ed625b
commit 11349561d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
245 changed files with 1156 additions and 1775 deletions

View file

@ -40,8 +40,8 @@
<img v-if="stone === false" :src="whiteUser.avatarUrl" alt="white">
</template>
<template v-else>
<fa v-if="stone === true" :icon="fasCircle"/>
<fa v-if="stone === false" :icon="farCircle"/>
<i v-if="stone === true" class="fas fa-circle"></i>
<i v-if="stone === false" class="far fa-circle"></i>
</template>
</div>
</div>
@ -63,12 +63,12 @@
<div class="player" v-if="game.isEnded">
<span>{{ logPos }} / {{ logs.length }}</span>
<div class="buttons" v-if="!autoplaying">
<MkButton inline @click="logPos = 0" :disabled="logPos == 0"><fa :icon="faAngleDoubleLeft"/></MkButton>
<MkButton inline @click="logPos--" :disabled="logPos == 0"><fa :icon="faAngleLeft"/></MkButton>
<MkButton inline @click="logPos++" :disabled="logPos == logs.length"><fa :icon="faAngleRight"/></MkButton>
<MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><fa :icon="faAngleDoubleRight"/></MkButton>
<MkButton inline @click="logPos = 0" :disabled="logPos == 0"><i class="fas fa-angle-double-left"></i></MkButton>
<MkButton inline @click="logPos--" :disabled="logPos == 0"><i class="fas fa-angle-left"></i></MkButton>
<MkButton inline @click="logPos++" :disabled="logPos == logs.length"><i class="fas fa-angle-right"></i></MkButton>
<MkButton inline @click="logPos = logs.length" :disabled="logPos == logs.length"><i class="fas fa-angle-double-right"></i></MkButton>
</div>
<MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><fa :icon="faPlay"/></MkButton>
<MkButton @click="autoplay()" :disabled="autoplaying" style="margin: var(--margin) auto 0 auto;"><i class="fas fa-play"></i></MkButton>
</div>
<div class="info">
@ -85,9 +85,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, faPlay } from '@fortawesome/free-solid-svg-icons';
import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
import * as CRC32 from 'crc-32';
import Reversi, { Color } from '../../../games/reversi/core';
import { url } from '@client/config';
@ -120,7 +117,6 @@ export default defineComponent({
logPos: 0,
watchers: [],
pollingClock: null,
faAngleDoubleLeft, faAngleLeft, faAngleRight, faAngleDoubleRight, fasCircle, farCircle, faPlay
};
},

View file

@ -17,11 +17,11 @@
</header>
<div>
<div class="random" v-if="game.map == null"><fa icon="dice"/></div>
<div class="random" v-if="game.map == null"><i class="fas fa-dice"></i></div>
<div class="board" v-else :style="{ 'grid-template-rows': `repeat(${ game.map.length }, 1fr)`, 'grid-template-columns': `repeat(${ game.map[0].length }, 1fr)` }">
<div v-for="(x, i) in game.map.join('')" :class="{ none: x == ' ' }" @click="onPixelClick(i, x)">
<fa v-if="x == 'b'" :icon="fasCircle"/>
<fa v-if="x == 'w'" :icon="farCircle"/>
<i v-if="x === 'b'" class="fas fa-circle"></i>
<i v-if="x === 'w'" class="far fa-circle"></i>
</div>
</div>
</div>
@ -125,8 +125,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faCircle as fasCircle } from '@fortawesome/free-solid-svg-icons';
import { faCircle as farCircle } from '@fortawesome/free-regular-svg-icons';
import * as maps from '../../../games/reversi/maps';
import MkButton from '@client/components/ui/button.vue';
import MkSwitch from '@client/components/ui/switch.vue';

View file

@ -9,7 +9,6 @@ import { defineComponent } from 'vue';
import GameSetting from './game.setting.vue';
import GameBoard from './game.board.vue';
import * as os from '@client/os';
import { faGamepad } from '@fortawesome/free-solid-svg-icons';
import * as symbols from '@client/symbols';
export default defineComponent({
@ -29,7 +28,7 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts._reversi.reversi,
icon: faGamepad
icon: 'fas fa-gamepad'
},
game: null,
connection: null,

View file

@ -64,7 +64,6 @@ import { defineComponent } from 'vue';
import * as os from '@client/os';
import MkButton from '@client/components/ui/button.vue';
import MkFolder from '@client/components/ui/folder.vue';
import { faGamepad } from '@fortawesome/free-solid-svg-icons';
import * as symbols from '@client/symbols';
export default defineComponent({
@ -78,7 +77,7 @@ export default defineComponent({
return {
[symbols.PAGE_INFO]: {
title: this.$ts._reversi.reversi,
icon: faGamepad
icon: 'fas fa-gamepad'
},
games: [],
gamesFetching: true,