From 5a560af1af0c6af51837e3bedda59fa536a761b3 Mon Sep 17 00:00:00 2001 From: Reez Patel Date: Sat, 17 Feb 2024 17:10:42 +0530 Subject: [PATCH] Added ability to override pieces image --- .../com/oakmac/chessboard2/animations.cljs | 6 +++-- src-cljs/com/oakmac/chessboard2/config.cljs | 10 ++++++++ src-cljs/com/oakmac/chessboard2/core.cljs | 6 +++-- src-cljs/com/oakmac/chessboard2/html.cljs | 21 ++++++++-------- src-cljs/com/oakmac/chessboard2/pieces.cljs | 25 ++++++++++--------- 5 files changed, 42 insertions(+), 26 deletions(-) diff --git a/src-cljs/com/oakmac/chessboard2/animations.cljs b/src-cljs/com/oakmac/chessboard2/animations.cljs index 1ba5001..fe150d8 100644 --- a/src-cljs/com/oakmac/chessboard2/animations.cljs +++ b/src-cljs/com/oakmac/chessboard2/animations.cljs @@ -9,11 +9,12 @@ (defn animation->dom-op-add [{:keys [duration-ms instant? on-finish piece square] :as _animation} board-state] - (let [{:keys [animate-speed-ms board-width orientation piece-square-pct]} @board-state + (let [{:keys [animate-speed-ms board-width orientation pieceTheme piece-square-pct]} @board-state new-piece-id (random-piece-id) new-piece-html (html/Piece {:board-width board-width :board-orientation orientation :id new-piece-id + :pieceTheme pieceTheme :hidden? true :piece piece :piece-square-pct piece-square-pct @@ -38,13 +39,14 @@ ;; - The answer is "yes" (defn animation->dom-op-move [{:keys [capture? destination duration-ms instant? on-finish piece source] :as _animation} board-state] - (let [{:keys [animate-speed-ms board-width orientation piece-square-pct square->piece-id]} @board-state + (let [{:keys [animate-speed-ms board-width orientation pieceTheme piece-square-pct square->piece-id]} @board-state current-piece-id (get square->piece-id source) new-piece-id (random-piece-id) new-piece-html (html/Piece {:board-width board-width :board-orientation orientation :id new-piece-id :hidden? false + :pieceTheme pieceTheme :piece piece :piece-square-pct piece-square-pct :square source diff --git a/src-cljs/com/oakmac/chessboard2/config.cljs b/src-cljs/com/oakmac/chessboard2/config.cljs index 6f5e75a..50c82a2 100644 --- a/src-cljs/com/oakmac/chessboard2/config.cljs +++ b/src-cljs/com/oakmac/chessboard2/config.cljs @@ -1,5 +1,6 @@ (ns com.oakmac.chessboard2.config (:require + [clojure.string :as str] [com.oakmac.chessboard2.util.predicates :refer [valid-position?]] [com.oakmac.chessboard2.util.string :refer [safe-lower-case]])) @@ -18,11 +19,20 @@ "black" "white")) +(defn valid-piece-theme? + [o] + (or (str/blank? o) + (str/includes? o "{piece}"))) + (def config-props {:draggable {:default-val false :valid-fn boolean?} + :pieceTheme + {:default-val "" + :valid-fn valid-piece-theme?} + :dropOffBoard {:default-val "snapback" :valid-fn valid-drop-off-board?} diff --git a/src-cljs/com/oakmac/chessboard2/core.cljs b/src-cljs/com/oakmac/chessboard2/core.cljs index fe749e9..9af1302 100644 --- a/src-cljs/com/oakmac/chessboard2/core.cljs +++ b/src-cljs/com/oakmac/chessboard2/core.cljs @@ -67,7 +67,7 @@ (defn begin-dragging! "initialize dragging a piece" [board-state square piece x y] - (let [{:keys [dragging-piece-id onDragStart orientation piece-square-pct position square->piece-id]} @board-state + (let [{:keys [dragging-piece-id pieceTheme onDragStart orientation piece-square-pct position square->piece-id]} @board-state ;; call their onDragStart function if provided on-drag-start-result (when (fn? onDragStart) (let [js-board-position (clj->js position)] @@ -103,6 +103,7 @@ :piece-square-pct piece-square-pct :width piece-width :x x + :pieceTheme pieceTheme :y y}))) ;; flag that we are actively dragging (swap! board-state assoc :dragging? true @@ -448,7 +449,7 @@ (defn- draw-items-instant! "Update all Items in the DOM instantly (ie: no animation)" [board-state] - (let [{:keys [board-width items items-container-id orientation piece-square-pct position square->piece-id]} @board-state + (let [{:keys [board-width items items-container-id orientation pieceTheme piece-square-pct position square->piece-id]} @board-state html (atom "")] ;; remove existing Items from the DOM (doseq [item-id (keys items)] @@ -464,6 +465,7 @@ (swap! html str (html/Piece {:board-orientation orientation :board-width board-width :id piece-id + :pieceTheme pieceTheme :hidden? false :piece piece :piece-square-pct piece-square-pct diff --git a/src-cljs/com/oakmac/chessboard2/html.cljs b/src-cljs/com/oakmac/chessboard2/html.cljs index e434490..66dee25 100644 --- a/src-cljs/com/oakmac/chessboard2/html.cljs +++ b/src-cljs/com/oakmac/chessboard2/html.cljs @@ -1,14 +1,14 @@ (ns com.oakmac.chessboard2.html "functions that return raw HTML" (:require + [clojure.string :as str] [com.oakmac.chessboard2.css :as css] [com.oakmac.chessboard2.feature-flags :as flags] [com.oakmac.chessboard2.pieces :refer [wikipedia-theme]] [com.oakmac.chessboard2.util.arrows :as arrow-util] [com.oakmac.chessboard2.util.math :refer [half]] [com.oakmac.chessboard2.util.squares :refer [idx->alpha square->dimensions]] - [com.oakmac.chessboard2.util.template :refer [template]] - [goog.crypt.base64 :as base64])) + [com.oakmac.chessboard2.util.template :refer [template]])) (declare piece->imgsrc) @@ -33,7 +33,7 @@ (apply str)))) (defn DraggingPiece - [{:keys [height id piece piece-square-pct width x y]}] + [{:keys [height pieceTheme id piece piece-square-pct width x y]}] (let [piece-pct (* 100 piece-square-pct)] (template (str @@ -41,7 +41,7 @@ ;; FIXME: this needs to be customizable for the user ;; https://github.com/oakmac/chessboard2/issues/26 ;; FIXME: need alt text here for the image - "" + "" "") {:height height :id id @@ -139,11 +139,12 @@ :id id :opacity opacity})))) -;; TODO: they need the ability to override this -;; should be able to put random things on the board, like a toaster SVG (defn piece->imgsrc - [piece] - (base64/encodeString (get wikipedia-theme (name piece)))) + [pieceTheme piece] + (if (str/blank? pieceTheme) + (str/join "" ["data:image/svg+xml;base64," (get wikipedia-theme (name piece))]) + (str/replace pieceTheme #"\{piece\}" piece))) + (def piece-required-keys #{:board-width @@ -157,7 +158,7 @@ ;; FIXME: need alt text here for the image (defn Piece - [{:keys [board-orientation board-width _color id hidden? piece piece-square-pct square] :as piece-config}] + [{:keys [board-orientation pieceTheme board-width _color id hidden? piece piece-square-pct square] :as piece-config}] (when flags/runtime-checks? (when (or (not= piece-required-keys (set (keys piece-config))) (some nil? (vals piece-config))) @@ -177,7 +178,7 @@ "'>" ;; FIXME: this needs to be customizable for the user ;; https://github.com/oakmac/chessboard2/issues/26 - "" + "" ""))) (defn Square diff --git a/src-cljs/com/oakmac/chessboard2/pieces.cljs b/src-cljs/com/oakmac/chessboard2/pieces.cljs index ac61248..3b75afe 100644 --- a/src-cljs/com/oakmac/chessboard2/pieces.cljs +++ b/src-cljs/com/oakmac/chessboard2/pieces.cljs @@ -1,18 +1,19 @@ (ns com.oakmac.chessboard2.pieces (:require + [goog.crypt.base64 :as base64] [shadow.resource :as rc])) (def wikipedia-theme - {"bB" (rc/inline "pieces/wikipedia/bB.svg") - "bK" (rc/inline "pieces/wikipedia/bK.svg") - "bN" (rc/inline "pieces/wikipedia/bN.svg") - "bP" (rc/inline "pieces/wikipedia/bP.svg") - "bQ" (rc/inline "pieces/wikipedia/bQ.svg") - "bR" (rc/inline "pieces/wikipedia/bR.svg") + {"bB" (base64/encodeString (rc/inline "pieces/wikipedia/bB.svg")) + "bK" (base64/encodeString (rc/inline "pieces/wikipedia/bK.svg")) + "bN" (base64/encodeString (rc/inline "pieces/wikipedia/bN.svg")) + "bP" (base64/encodeString (rc/inline "pieces/wikipedia/bP.svg")) + "bQ" (base64/encodeString (rc/inline "pieces/wikipedia/bQ.svg")) + "bR" (base64/encodeString (rc/inline "pieces/wikipedia/bR.svg")) - "wB" (rc/inline "pieces/wikipedia/wB.svg") - "wK" (rc/inline "pieces/wikipedia/wK.svg") - "wN" (rc/inline "pieces/wikipedia/wN.svg") - "wP" (rc/inline "pieces/wikipedia/wP.svg") - "wQ" (rc/inline "pieces/wikipedia/wQ.svg") - "wR" (rc/inline "pieces/wikipedia/wR.svg")}) + "wB" (base64/encodeString (rc/inline "pieces/wikipedia/wB.svg")) + "wK" (base64/encodeString (rc/inline "pieces/wikipedia/wK.svg")) + "wN" (base64/encodeString (rc/inline "pieces/wikipedia/wN.svg")) + "wP" (base64/encodeString (rc/inline "pieces/wikipedia/wP.svg")) + "wQ" (base64/encodeString (rc/inline "pieces/wikipedia/wQ.svg")) + "wR" (base64/encodeString (rc/inline "pieces/wikipedia/wR.svg"))})