Skip to content

Commit

Permalink
Redo thumbnails, game instruction formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@cameroncheung00
cameroncheung00 committed Oct 31, 2023
1 parent dfea5c8 commit 1e93312
Show file tree
Hide file tree
Showing 41 changed files with 399 additions and 295 deletions.
20 changes: 10 additions & 10 deletions src/components/templates/UniPopupWindow.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
width: 100%;
z-index: 9998;
> #top-click-area {
bottom: 90%;
bottom: 95%;
left: 0;
position: absolute;
right: 0;
Expand All @@ -32,18 +32,18 @@
left: 0;
position: absolute;
right: 0;
top: 90%;
top: 95%;
}
> #left-click-area {
bottom: 0;
left: 0;
position: absolute;
right: 90%;
right: 95%;
top: 0;
}
> #right-click-area {
bottom: 0;
left: 90%;
left: 95%;
position: absolute;
right: 0;
top: 0;
Expand All @@ -54,23 +54,23 @@
font-size: 2rem;
height: max(2.5rem, min(5vh, 5vw));
position: absolute;
right: 12.5%;
top: 12.5%;
right: 7.5%;
top: 7.5%;
width: max(2.5rem, min(5vh, 5vw));
z-index: 9999;
}
> #container {
background-color: var(--backgroundColor);
border-radius: 1rem;
border: 0.1rem solid var(--neutralColor);
bottom: 10%;
left: 10%;
bottom: 5%;
left: 5%;
margin: auto;
overflow-y: scroll;
padding: 5% 10%;
position: absolute;
right: 10%;
top: 10%;
right: 5%;
top: 5%;
}
}
}
Expand Down
57 changes: 1 addition & 56 deletions src/components/units/GameBody/AppGameBodyHeaderInstructions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,69 +13,14 @@
import MarkdownItLinkAttributes from "markdown-it-link-attributes";
import { mutationTypes, useStore } from "../../../scripts/plugins/store";
import UniPopupWindow from "../../templates/UniPopupWindow.vue";
import ZeroToNCnSource from "../../../models/docs/cn/gameInstructions/0ton.md?raw";
import ThreeSpotCnSource from "../../../models/docs/cn/gameInstructions/3spot.md?raw";
import NineMensMorrisCnSource from "../../../models/docs/cn/gameInstructions/369mm.md?raw";
import AbaloneCnSource from "../../../models/docs/cn/gameInstructions/abalone.md?raw";
import AchiCnSource from "../../../models/docs/cn/gameInstructions/achi.md?raw";
import BaghchalCnSource from "../../../models/docs/cn/gameInstructions/baghchal.md?raw";
import Connect4CnSource from "../../../models/docs/cn/gameInstructions/connect4.md?raw";
import CtoiCnSource from "../../../models/docs/cn/gameInstructions/ctoi.md?raw";
import DaoCnSource from "../../../models/docs/cn/gameInstructions/dao.md?raw";
import LgameCnSource from "../../../models/docs/cn/gameInstructions/Lgame.md?raw";
import MancalaCnSource from "../../../models/docs/cn/gameInstructions/mancala.md?raw";
import NToZeroCnSource from "../../../models/docs/cn/gameInstructions/nto0.md?raw";
import OOECnSource from "../../../models/docs/cn/gameInstructions/ooe.md?raw";
import OthelloCnSource from "../../../models/docs/cn/gameInstructions/othello.md?raw";
import QuickChessCnSource from "../../../models/docs/cn/gameInstructions/quickchess.md?raw";
import SimCnSource from "../../../models/docs/cn/gameInstructions/sim.md?raw";
import SnakeCnSource from "../../../models/docs/cn/gameInstructions/snake.md?raw";
import STTCnSource from "../../../models/docs/cn/gameInstructions/stt.md?raw";
import SwansCnSource from "../../../models/docs/cn/gameInstructions/swans.md?raw";
import TTTCnSource from "../../../models/docs/cn/gameInstructions/ttt.md?raw";
import TTT3DCnSource from "../../../models/docs/cn/gameInstructions/ttt3d.md?raw";
const store = useStore();
const options = computed(() => store.getters.options);
const instructions = computed(() => {
let currGameType = store.getters.currentGameType;
let currGameId = store.getters.currentGameId;
let game = store.getters.game(currGameType, currGameId);
switch (store.getters.locale) {
case "en": case "en-US":
return game ? game.instructions : "";
case "cn":
switch (currGameId) {
case "0ton": return ZeroToNCnSource;
case "369mm": return NineMensMorrisCnSource;
case "3spot": return ThreeSpotCnSource;
case "abalone": return AbaloneCnSource;
case "achi": return AchiCnSource;
case "baghchal": return BaghchalCnSource;
case "connect4": return Connect4CnSource;
case "ctoi": return CtoiCnSource;
case "dao": return DaoCnSource;
case "Lgame": return LgameCnSource;
case "mancala": return MancalaCnSource;
case "nto0": return NToZeroCnSource;
case "ooe": return OOECnSource;
case "othello": return OthelloCnSource;
case "quickchess": return QuickChessCnSource;
case "sim": return SimCnSource;
case "snake": return SnakeCnSource;
case "stt": return STTCnSource;
case "swans": return SwansCnSource;
case "ttt": return TTTCnSource;
case "ttt3d": return TTT3DCnSource;
default: return game ? game.instructions : "";
}
default:
break;
}
return "";
return game ? game.instructions : "";
})
const plugins = [
Expand Down
21 changes: 7 additions & 14 deletions src/components/units/GameBody/ImageAutoGUI.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<g v-if="!animationPlaying && entitiesOverArrows">
<g v-for="(arrow, i) in richPositionData.arrows" :key="'arrow' + i">
<path
:d="formatArrowPolylinePoints(arrow, arrowWidth)"
:d="formatArrowPathPoints(arrow, arrowWidth)"
:class="'app-game-board-default-arrow ' + getBoardMoveElementHintClass(arrow.move)"
:opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? arrow.move.hintOpacity : 1"
@click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: arrow.move.str })"/>
Expand Down Expand Up @@ -75,7 +75,7 @@
<g v-if="!entitiesOverArrows">
<g v-for="(arrow, i) in richPositionData.arrows " :key="'arrow' + i">
<path
:d="formatArrowPolylinePoints(arrow, arrowWidth)"
:d="formatArrowPathPoints(arrow, arrowWidth)"
:class="'app-game-board-default-arrow ' + getBoardMoveElementHintClass(arrow.move)"
:opacity="options.showNextMoveHints && options.showNextMoveDeltaRemotenesses ? arrow.move.hintOpacity : 1"
@click="!isComputerTurn && store.dispatch(actionTypes.runMove, { move: arrow.move.str })"/>
Expand Down Expand Up @@ -145,7 +145,6 @@
const space = computed(() => theTheme.value.space);
const widthFactor = computed(() => scaledWidth / space.value[0]);
const scaledHeight = computed(() => space.value[1] * widthFactor.value);
const animationType = computed(() => theTheme.value.animationType || "");
const entities = computed(() => theTheme.value.entities);
const centers = computed(() =>
theTheme.value.centers.map((a: [number, number]) =>
Expand Down Expand Up @@ -245,7 +244,7 @@
| /
5
*/
const formatArrowPolylinePoints =
const formatArrowPathPoints =
(arrow: GDefaultRegular2DBoardArrow,
thickness: number = 0.75,
startOffset: number = 3,
Expand All @@ -262,7 +261,7 @@
fromCoords[1] += dir[1] * startOffsetPct;
coords3[0] -= dir[0] * endOffsetPct;
coords3[1] -= dir[1] * endOffsetPct;
const arrowheadHeight = 3 * thickNorm * Math.tan(0.959931); // 55 degrees
const arrowheadHeight = 4.284444 * thickNorm; // = 3tan(55 degrees) * thickNorm
const midCoords = [coords3[0] - dir[0] * arrowheadHeight, coords3[1] - dir[1] * arrowheadHeight];
const coords0 = [fromCoords[0] - perpdir[0] * thickNorm, fromCoords[1] - perpdir[1] * thickNorm];
const coords6 = [fromCoords[0] + perpdir[0] * thickNorm, fromCoords[1] + perpdir[1] * thickNorm];
Expand All @@ -272,15 +271,9 @@
const coords5 = [midCoords[0] + perpdir[0] * thickNorm, midCoords[1] + perpdir[1] * thickNorm];
const coords4 = [midCoords[0] + 3 * perpdir[0] * thickNorm, midCoords[1] + 3 * perpdir[1] * thickNorm];
return `M ${coords0[0]},${coords0[1]}
L ${coords1[0]},${coords1[1]}
L ${coords2[0]},${coords2[1]}
L ${coords3[0]},${coords3[1]}
L ${coords4[0]},${coords4[1]}
L ${coords5[0]},${coords5[1]}
L ${coords6[0]},${coords6[1]}
A ${thickness} ${thickness} 0 0 0 ${coords0[0]} ${coords0[1]}
Z`;
return `M${coords0[0]},${coords0[1]}L${coords1[0]},${coords1[1]}L${coords2[0]},${coords2[1]}
L${coords3[0]},${coords3[1]}L${coords4[0]},${coords4[1]}L${coords5[0]},${coords5[1]}
L${coords6[0]},${coords6[1]}A ${thickness} ${thickness} 0 0 0 ${coords0[0]} ${coords0[1]}Z`;
};
const getBoardMoveElementHintClass = (move?: GDefaultRegular2DMove): string =>
Expand Down
8 changes: 4 additions & 4 deletions src/components/units/Header/AppHeaderPreferences.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@
</div>
</div>
<div class="uni-dropdown">
<div class="uni-dropdown-selection">{{ t(`appRootFontSizes.${appRootFontSize}`) }} {{ t("fontSizeUnit") }} ▼</div>
<div class="uni-dropdown-selection">{{ appRootFontSize + "px" }} ▼</div>
<div class="uni-dropdown-menu">
<div class="uni-dropdown-menu-option" v-for="fontSizeOption in appRootFontSizes" :key="fontSizeOption" :style="setActiveFontSizeOptionStyle(fontSizeOption)" @click="setAppRootFontSize(fontSizeOption)">
{{ t(`appRootFontSizes.${fontSizeOption}`) }}
{{ fontSizeOption }}
</div>
</div>
</div>
Expand Down Expand Up @@ -74,12 +74,12 @@
document.documentElement.style.backgroundColor = getComputedStyle(document.getElementById("app")!).getPropertyValue("--backgroundColor");
appTheme.value = newAppTheme;
};
const appRootFontSizes = ["05px", "06px", "07px", "08px", "09px", "10px", "11px", "12px", "13px", "14px", "15px", "16px", "17px", "18px", "19px", "20px", "21px", "22px", "23px", "24px", "25px"];
const appRootFontSizes = ["05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25"];
const appRootFontSize = ref("");
const setActiveFontSizeOptionStyle = (fontSizeOption: string) => (fontSizeOption === appRootFontSize.value ? { background: "var(--themeColor)" } : { background: "var(--neutralColor)" });
const setAppRootFontSize = (newAppFontSize: string) => {
store.commit(mutationTypes.setRootFontSize, newAppFontSize);
document.documentElement.style.fontSize = newAppFontSize;
document.documentElement.style.fontSize = newAppFontSize + "px";
appRootFontSize.value = newAppFontSize;
};
setAppLocale(store.getters.locale);
Expand Down
5 changes: 2 additions & 3 deletions src/models/datas/defaultApp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const defaultPreferences: Types.Preferences = {
theme: "light",
locale: "en-US",
fallbackLocale: "en-US",
rootFontSize: "11px",
rootFontSize: "11",
volume: 1
};

Expand All @@ -30,8 +30,7 @@ export const defaultAvailableMove: Types.Move = {
position: "",
positionValue: "",
remoteness: 0,
mex: "",
animationPhases: []
mex: ""
};

export const defaultAvailableMoveNames: Types.MoveNames = {};
Expand Down
6 changes: 1 addition & 5 deletions src/models/images/svg/achi/achiboard.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 1e93312

Please sign in to comment.