Skip to content

Added ability to override pieces image #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
reezpatel wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added ability to override pieces image #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src-cljs/com/oakmac/chessboard2/animations.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
10 changes: 10 additions & 0 deletions src-cljs/com/oakmac/chessboard2/config.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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]]))

Expand All @@ -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?}
Expand Down
6 changes: 4 additions & 2 deletions src-cljs/com/oakmac/chessboard2/core.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)]
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)]
Expand All @@ -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
Expand Down
21 changes: 11 additions & 10 deletions src-cljs/com/oakmac/chessboard2/html.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)

Expand All @@ -33,15 +33,15 @@
(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
"<div id='{id}' class='dragging-4a6c1' style='left:{left}px;top:{top}px;height:{height}px;width:{width}px;'>"
;; FIXME: this needs to be customizable for the user
;; https://github.com/oakmac/chessboard2/issues/26
;; FIXME: need alt text here for the image
"<img src='data:image/svg+xml;base64," (piece->imgsrc piece) "' alt='' style='height:" piece-pct "%;width:" piece-pct "%;' />"
"<img src='" (piece->imgsrc pieceTheme piece) "' alt='' style='height:" piece-pct "%;width:" piece-pct "%;' />"
"</div>")
{:height height
:id id
Expand Down Expand Up @@ -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
Expand All @@ -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)))
Expand All @@ -177,7 +178,7 @@
"'>"
;; FIXME: this needs to be customizable for the user
;; https://github.com/oakmac/chessboard2/issues/26
"<img src='data:image/svg+xml;base64," (piece->imgsrc piece) "' alt='' style='height:" piece-pct "%;width:" piece-pct "%;' />"
"<img src='" (piece->imgsrc pieceTheme piece) "' alt='' style='height:" piece-pct "%;width:" piece-pct "%;' />"
"</div>")))

(defn Square
Expand Down
25 changes: 13 additions & 12 deletions src-cljs/com/oakmac/chessboard2/pieces.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"))})