Display selected tile

edemaine · Nov 25, 2024 · 0828fa5 · 0828fa5
1 parent a56f138
commit 0828fa5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 10 deletions.
diff --git a/src/App.civet b/src/App.civet
@@ -1,4 +1,4 @@
-solid-js import { createMemo, createSignal, For, Index }
+solid-js import { createMemo, createSelector, createSignal, For, Index }
 solid-js/store import { createStore }
 @thisbeyond/solid-dnd import {
   DragDropProvider
@@ -17,7 +17,8 @@ export function App()
   [numTiles, setNumTiles] := createSignal tiles#
   glues := colors
   [zoom, setZoom] := createSignal 1
-  [selected, setSelected] := createSignal 0
+  [selected, setSelected] := createSignal<number?>()
+  isSelected := createSelector selected
   signed := createMemo => unsignedToSigned tiles[..<numTiles()], glues()
 
   function onDragEnd({draggable, droppable})
@@ -56,7 +57,8 @@ export function App()
       >+
       <Index each=tiles[..<numTiles()]>
         (tile, id) =>
-          <Tile {tile(), id} onClick={=> setSelected id}>
+          <Tile {tile(), id}
+          selected={isSelected id} onClick={=> setSelected id}>
     <hr>
     <h2>Intermediate: Signed Tiles
     <h3>{signed().glues} Glues with 2 Different Signs
@@ -70,7 +72,8 @@ export function App()
     <.tiles>
       <Index each=signed().tiles>
         (tile, id) =>
-          <SignedTile {tile(), signed().glues} onClick={=> setSelected id}>
+          <SignedTile {tile(), signed().glues}
+          selected={isSelected id} onClick={=> setSelected id}>
     <hr>
     <h2>Output: Three Tiles
       <span .postfix>🔍
@@ -88,4 +91,4 @@ export function App()
           >
           Show glues
     <div .container>
-      <ThreeTiles {zoom(), selected()} ...signed()>
+      <ThreeTiles {zoom()} selected={selected() ?? 0} ...signed()>
diff --git a/src/Tile.civet b/src/Tile.civet
@@ -11,12 +11,12 @@ export type Prototile
 tileSize := 50
 glueSize := 13
 
-export function Tile(props: {tile: Prototile, id: number, onClick: any})
+export function Tile(props: {tile: Prototile, id: number, selected: boolean, onClick: any})
   droppableN := createDroppable 4*props.id+0, 'n'
   droppableW := createDroppable 4*props.id+1, 'w'
   droppableS := createDroppable 4*props.id+2, 's'
   droppableE := createDroppable 4*props.id+3, 'e'
-  <svg .tile viewBox=`0 0 ${tileSize} ${tileSize}`>
+  <svg .tile viewBox=`0 0 ${tileSize} ${tileSize}` classList={{props.selected}}>
     <rect .background width=tileSize height=tileSize {props.onClick}>
     <polygon .glue fill=color(props.tile.n) stroke="#444" points=
       `0,0 ${glueSize},${glueSize} ${tileSize - glueSize},${glueSize} ${tileSize},0`
@@ -36,9 +36,9 @@ export function Tile(props: {tile: Prototile, id: number, onClick: any})
     >
     <!--<rect .outline width=tileSize height=tileSize>-->
 
-export function SignedTile(props: {tile: Prototile, glues: number, onClick: any})
+export function SignedTile(props: {tile: Prototile, glues: number, selected: boolean, onClick: any})
   strokeWidth := 1.5
-  <svg .tile viewBox=`${-strokeWidth/2} ${-strokeWidth/2} ${tileSize + strokeWidth} ${tileSize + strokeWidth}`>
+  <svg .tile viewBox=`${-strokeWidth/2} ${-strokeWidth/2} ${tileSize + strokeWidth} ${tileSize + strokeWidth}` classList={{props.selected}}>
     <rect .background width=tileSize height=tileSize {props.onClick}>
     <polygon .glue fill=color(Math.abs(props.tile.n) - 1, props.glues) points=
       `0,0 ${glueSize},${glueSize} ${tileSize - glueSize},${glueSize} ${tileSize},0`

diff --git a/src/index.sass b/src/index.sass
@@ -30,12 +30,14 @@ a, a:visited
 
 .tiles
   display: flex
-  gap: 3px
+  gap: 5px
   flex-wrap: wrap
 
 .tile
   width: 50px
   height: 50px
+  &.selected
+    outline: 3px dotted yellow
   > .background
     fill: gray
   > .outline