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:
parent
8bb6ed625b
commit
11349561d6
245 changed files with 1156 additions and 1775 deletions
|
@ -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
|
||||
};
|
||||
},
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue