Add a word bank

src/Main.elm

@@ -1,6 +1,7 @@
 module Main exposing (main)
 
 import FunkyFunktions exposing (..)
+import Presets exposing (activities)
 import Stickers exposing (Sticker, StickerContent(..), viewSticker)
 
 import Array exposing (Array, get, set)
@@ -10,11 +11,11 @@ import Browser.Dom exposing (focus, getViewport, Viewport)
 import Browser.Navigation exposing (Key)
 import Browser.Events exposing (onMouseMove, onMouseUp, onResize)
 import Html exposing (Attribute, button, div, h3, input, Html, section, text)
-import Html.Attributes exposing (class, id, style, value)
+import Html.Attributes exposing (class, disabled, id, style, value)
 import Html.Attributes.Extra as Attributes exposing (attributeIf)
 import Html.Extra exposing (viewMaybe)
 import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter)
-import Html.Lazy exposing (lazy2)
+import Html.Lazy exposing (lazy, lazy2)
 import Json.Decode as D
 import List exposing (map, singleton)
 import Maybe.Extra exposing (isJust)
@@ -109,6 +110,7 @@ subscriptions model =
 view : Model -> Browser.Document Msg
 view {columns, heldTile, mousePos} =
   [ lazy2 viewColumns heldTile columns
+  , lazy viewWordbank activities
   , viewMaybe (viewFloatyTile mousePos) heldTile
   ]
     |> Browser.Document "meow!"
@@ -119,8 +121,6 @@ viewColumns heldTile columns =
     |> Array.toList
     |> section
       [ class "columns"
-      -- Temporary hack while firefox's :has() selector is broken
-      , attributeIf (isJust heldTile) <| style "user-select" "none"
       ]
 
 
@@ -176,7 +176,7 @@ viewTile isTileHeld columnIndex tileIndex tile =
     --   )
     , attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex)
     ]
-    [ viewGrip columnIndex tileIndex tile
+    [ viewGrip 30 columnIndex tileIndex tile
     , input
       [ value tile.text
       , onInput (SetTileText columnIndex tileIndex)
@@ -193,12 +193,12 @@ viewTile isTileHeld columnIndex tileIndex tile =
       (map viewSticker tile.stickers)
     ]
 
-viewGrip : Int -> Int -> Tile -> Html Msg
-viewGrip colIndx tileIndx tile =
+viewGrip : Int -> Int -> Int -> Tile -> Html Msg
+viewGrip size colIndx tileIndx tile =
   svg
     [ viewBox "0 0 103.4 103.4"
-    , width "30"
-    , height "30"
+    , width <| String.fromInt size
+    , height <| String.fromInt size
     , Svg.Attributes.class "drag-gripper"
     , on "mousedown" <| (
         D.map2 (StartDrag colIndx tileIndx tile)
@@ -226,6 +226,27 @@ viewAddTile isTileHeld columnIndex tileCount =
     ]
     [ text "+" ]
 
+viewWordbank : List String -> Html Msg
+viewWordbank wordlist =
+  section
+    [ id "word-bank"
+    ]
+    (map viewMiniTile wordlist)
+
+viewMiniTile : String -> Html Msg
+viewMiniTile word =
+  div
+    [ class "tile"
+    , class "mini-tile"
+    ]
+    [ viewGrip 20 -1 -1 { text = word, stickers = [] }
+    , input
+      [ value word
+      , disabled True
+      ]
+      []
+    ]
+
 addStickerToTile : Sticker -> Tile -> Tile
 addStickerToTile sticker tile =
   { tile | stickers = sticker :: tile.stickers }

src/Presets.elm

@@ -9,27 +9,6 @@ type alias WordSet =
   , words : List String -- e.g. Bondage, Schlong, Loss of Control
   }
 
-allWordSets = [activitiesSet, languageSet, feelingsSet]
-
-activitiesSet = WordSet
-  "Activities"
-  (["Yes - Into", "Yes - Willing", "Maybe", "No"] |> StickerContent "black")
-  -- TODO make actual stickers for these
-  (["Top / Giver", "Bottom / Reciever", "Never Tried", "Favorite"] |> StickerContent "black")
-  activities
-
-languageSet = WordSet
-  "Language"
-  (["Yes - Into", "Yes - Willing", "Maybe", "No"] |> StickerContent "black")
-  (["Speaker", "Listener", "Never Tried", "Favorite"] |> StickerContent "black")
-  language
-
-feelingsSet = WordSet
-  "Feelings"
-  (["Often", "Sometimes", "Never"] |> StickerContent "black")
-  (["I like to feel", "I want my partner to feel", "Never Tried", "Favorite"] |> StickerContent "black")
-
-
 activities =
   [ "69"
   , "Age-Play"

style.sass

@@ -12,6 +12,7 @@ input
 
 .columns
 	display: flex
+	overflow-y: auto
 
 	.column
 		width: 400px
@@ -56,6 +57,22 @@ input
 	border: none
 	background-color: var(--color-weak)
 
+	&.mini-tile
+		height: 50px
+		width: 250px
+
+		--color-strong: #999
+		--color-weak: #ccc
+
+		svg.drag-gripper
+			padding: 6px
+			top: 9px
+			left: 7px
+
+		input
+			font-size: 1.7em
+			color: black
+
 	svg.drag-gripper
 		color: var(--color-strong)
 		position: absolute
@@ -74,14 +91,14 @@ input
 		z-index: -1 // Prevent fluttering when moving mouse up
 
 	input
-		padding: 20px
-		margin: 0
-		height: 40px
+		padding: 0
+		padding-top: 6px
+		height: calc(100% - 6px)
+		width: 100%
 		background: none
 		border: none
 		text-align: center
 		font-size: 2.6em
-		width: 360px
 
 		&:focus-visible
 			border: none
@@ -102,6 +119,7 @@ input
 
 #floaty-tile
 	position: absolute
+	pointer-events: none
 
 	&.hovering-1 > .tile
 		--color-weak: #e5eed4
@@ -123,9 +141,27 @@ input
 		position: relative
 		top: -40px
 		left: -40px
-		pointer-events: none
 
-// Disable selection while dragging a tile
-// broken on latest firefox tho
-body:has( > #floaty-tile)
-	user-select: none
+		--color-strong: #999
+		--color-weak: #ccc
+
+#word-bank
+	width: calc(100% - 60px)
+	padding: 30px
+
+	display: flex
+	flex-flow: row wrap
+	justify-content: space-around
+
+	overflow-y: auto
+	overflow-x: hidden
+
+	background-color: #eee
+
+body
+	user-select: none
+	display: grid
+	grid-template-rows: 1fr 20%
+	height: 100%
+	position: absolute
+	margin: 0