Skip to content

Commit 70b5352

Browse files
PerlkonigPerlkonig
committed
Colour customization on its way
1 parent 9362380 commit 70b5352

File tree

11 files changed

+301
-42
lines changed

11 files changed

+301
-42
lines changed

‎package-lock.json‎

Lines changed: 34 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"plotly.js": "^2.27.1",
2828
"prop-types": "15.8.1",
2929
"react": "18.2.0",
30+
"react-colorful": "^5.6.1",
3031
"react-dom": "18.2.0",
3132
"react-helmet-async": "^1.3.0",
3233
"react-i18next": "12.2.0",

‎public/locales/en/apfront.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
"CurrentGamesCount_one": "current game",
6767
"CurrentGamesCount_other": "current games",
6868
"CurrentGamesList": "Current {{name}} Games",
69+
"Custom": "Custom",
6970
"DebugModal": "Debugging information",
7071
"DefaultDisplay": "Default display",
7172
"DisableMoveConfirm": "Ask for confirmation before a move is submitted",
@@ -137,6 +138,7 @@
137138
"LogIn": "Log In",
138139
"LogOut": "Log Out",
139140
"MakeMove": "Make a move",
141+
"ManagePalettes": "Manage Palettes",
140142
"MaxTime": "max time {{max}} hours",
141143
"Moves": "Moves",
142144
"MyDashboard": "Dashboard",

‎src/components/GameMove.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -541,13 +541,19 @@ function mergeMoveRecursive2(gameEngine, exploration, moveNum, node, children) {
541541
return movesUpdated;
542542
}
543543

544-
function setupColors(settings, game, t) {
544+
function setupColors(settings, game, globalMe) {
545545
var options = {};
546546
if (settings.color === "blind") {
547547
options.colourBlind = true;
548548
// } else if (settings.color === "patterns") {
549549
// options.patterns = true;
550550
}
551+
if (settings.color !== "standard" && settings.color !== "blind") {
552+
const palette = globalMe.palettes.find(p => p.name === settings.color);
553+
if (palette !== undefined) {
554+
options.colours = [...palette.colours];
555+
}
556+
}
551557
game.colors = game.players.map((p, i) => {
552558
if (game.sharedPieces) {
553559
return { isImage: false, value: game.seatNames[i] };
@@ -834,7 +840,8 @@ function processNewSettings(
834840
gameRef,
835841
settingsSetter,
836842
gameSettingsSetter,
837-
userSettingsSetter
843+
userSettingsSetter,
844+
globalMe
838845
) {
839846
gameSettingsSetter(newGameSettings);
840847
userSettingsSetter(newUserSettings);
@@ -866,7 +873,7 @@ function processNewSettings(
866873
newGameSettings === undefined || newGameSettings.rotate === undefined
867874
? 0
868875
: newGameSettings.rotate;
869-
setupColors(newSettings, game);
876+
setupColors(newSettings, game, globalMe);
870877
settingsSetter(newSettings);
871878
return newSettings;
872879
}
@@ -1198,7 +1205,8 @@ function GameMove(props) {
11981205
gameRef,
11991206
settingsSetter,
12001207
gameSettingsSetter,
1201-
userSettingsSetter
1208+
userSettingsSetter,
1209+
globalMe
12021210
);
12031211
if (data.comments !== undefined) {
12041212
commentsSetter(data.comments);
@@ -1672,6 +1680,13 @@ function GameMove(props) {
16721680
// } else if (settings.color === "patterns") {
16731681
// options.patterns = true;
16741682
}
1683+
if ( (settings.color !== "standard") && (settings.color !== "blind") ) {
1684+
console.log(`Looking for a palette named ${settings.color}`);
1685+
const palette = globalMe.palettes?.find(p => p.name === settings.color);
1686+
if (palette !== undefined) {
1687+
options.colours = [...palette.colours];
1688+
}
1689+
}
16751690
if (gameRef.current.stackExpanding) {
16761691
options.boardHover = (row, col, piece) => {
16771692
expand(col, row);
@@ -1731,7 +1746,8 @@ function GameMove(props) {
17311746
gameRef,
17321747
settingsSetter,
17331748
gameSettingsSetter,
1734-
userSettingsSetter
1749+
userSettingsSetter,
1750+
globalMe
17351751
);
17361752
if (game.me > -1) {
17371753
try {
@@ -1767,7 +1783,8 @@ function GameMove(props) {
17671783
gameRef,
17681784
settingsSetter,
17691785
gameSettingsSetter,
1770-
userSettingsSetter
1786+
userSettingsSetter,
1787+
globalMe
17711788
);
17721789
if (newSettings?.display) {
17731790
console.log("settings.display", newSettings.display);

‎src/components/GameMove/GameMoves.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -243,6 +243,7 @@ function GameMoves(props) {
243243
document.activeElement.id === "enterAMove" ||
244244
document.activeElement.id === "enterAComment" ||
245245
document.activeElement.id === "enterANote" ||
246+
document.activeElement.id === "paletteName" ||
246247
exploration === null
247248
)
248249
return;

‎src/components/GameMove/GameStatus.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import React from "react";
1+
import React, {useContext} from "react";
22
import { renderglyph } from "@abstractplay/renderer";
33
import { useTranslation } from "react-i18next";
4+
import { MeContext } from "../../pages/Skeleton";
45

5-
function renderGlyph(settings, glyph, id, player) {
6+
function renderGlyph(settings, glyph, id, player, globalMe) {
67
var options = {};
78
if (settings.color === "blind") {
89
options.colourBlind = true;
9-
} else if (settings.color === "patterns") {
10-
options.patterns = true;
10+
}
11+
if (settings.color !== "standard" && settings.color !== "blind") {
12+
const palette = globalMe.palettes.find(p => p.name === settings.color);
13+
if (palette !== undefined) {
14+
options.colours = [...palette.colours];
15+
}
1116
}
1217
options.svgid = id;
1318
return renderglyph(glyph, player, options);
@@ -19,6 +24,7 @@ function GameStatus(props) {
1924
const game = props.game;
2025
const canExplore = props.canExplore;
2126
const handleStashClick = props.handleStashClick;
27+
const [globalMe,] = useContext(MeContext);
2228

2329
const { t } = useTranslation();
2430

@@ -80,7 +86,8 @@ function GameStatus(props) {
8086
settings,
8187
v.glyph,
8288
"genericStatus-" + ind + "-" + i,
83-
v.player
89+
v.player,
90+
globalMe
8491
)
8592
)}`}
8693
alt={"color " + v.player}
@@ -176,7 +183,8 @@ function GameStatus(props) {
176183
// eslint-disable-next-line no-prototype-builtins
177184
s.glyph.hasOwnProperty("player")
178185
? s.glyph.player
179-
: s.glyph.colour
186+
: s.glyph.colour,
187+
globalMe
180188
)
181189
)}`}
182190
alt=""
@@ -212,7 +220,8 @@ function GameStatus(props) {
212220
settings,
213221
s.glyph.name,
214222
"stack-" + j,
215-
s.glyph.player
223+
s.glyph.player,
224+
globalMe
216225
)
217226
)}`}
218227
alt=""

‎src/components/Playground.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1445,6 +1445,12 @@ function Playground(props) {
14451445
// } else if (settings.color === "patterns") {
14461446
// options.patterns = true;
14471447
}
1448+
if ( (settings.color !== "standard") && (settings.color !== "blind") ) {
1449+
const palette = globalMe.palettes?.find(p => p.name === settings.color);
1450+
if (palette !== undefined) {
1451+
options.colours = [...palette.colours];
1452+
}
1453+
}
14481454
if (gameRef.current.stackExpanding) {
14491455
options.boardHover = (row, col, piece) => {
14501456
expand(col, row);

‎src/components/Playground/GameMoves.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ function GameMoves(props) {
240240
document.activeElement.id === "enterAMove" ||
241241
document.activeElement.id === "enterAComment" ||
242242
document.activeElement.id === "enterANote" ||
243+
document.activeElement.id === "paletteName" ||
243244
exploration === null
244245
)
245246
return;

‎src/components/Playground/GameStatus.js‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
1-
import React from "react";
1+
import React, {useContext} from "react";
22
import { renderglyph } from "@abstractplay/renderer";
33
import { useTranslation } from "react-i18next";
4+
import { MeContext } from "../../pages/Skeleton";
45

5-
function renderGlyph(settings, glyph, id, player) {
6+
function renderGlyph(settings, glyph, id, player, globalMe) {
67
var options = {};
78
if (settings.color === "blind") {
89
options.colourBlind = true;
9-
} else if (settings.color === "patterns") {
10-
options.patterns = true;
10+
}
11+
if (settings.color !== "standard" && settings.color !== "blind") {
12+
const palette = globalMe.palettes.find(p => p.name === settings.color);
13+
if (palette !== undefined) {
14+
options.colours = [...palette.colours];
15+
}
1116
}
1217
options.svgid = id;
1318
return renderglyph(glyph, player, options);
@@ -19,6 +24,7 @@ function GameStatus(props) {
1924
const game = props.game;
2025
const canExplore = props.canExplore;
2126
const handleStashClick = props.handleStashClick;
27+
const [globalMe,] = useContext(MeContext);
2228

2329
const { t } = useTranslation();
2430

@@ -80,7 +86,8 @@ function GameStatus(props) {
8086
settings,
8187
v.glyph,
8288
"genericStatus-" + ind + "-" + i,
83-
v.player
89+
v.player,
90+
globalMe
8491
)
8592
)}`}
8693
alt={"color " + v.player}
@@ -176,7 +183,8 @@ function GameStatus(props) {
176183
// eslint-disable-next-line no-prototype-builtins
177184
s.glyph.hasOwnProperty("player")
178185
? s.glyph.player
179-
: s.glyph.colour
186+
: s.glyph.colour,
187+
globalMe
180188
)
181189
)}`}
182190
alt=""
@@ -212,7 +220,8 @@ function GameStatus(props) {
212220
settings,
213221
s.glyph.name,
214222
"stack-" + j,
215-
s.glyph.player
223+
s.glyph.player,
224+
globalMe
216225
)
217226
)}`}
218227
alt=""

0 commit comments

Comments
 (0)