New project: DVD Organization Simulator game

1. Make a web-based video game, in which the user has to add DVDs to a shelf, in alphabetical order. The user is trying to organize movies alphabetically (ignoreing “the” at the beginning of titles), while appropriately leaving space in each shelf for new movies. Kinda like Tetris, new movies keep showing up (on the floor), and the user has to keep shelving them. If too many pile up on the floor, you lose. If a movie is shelved too far off, alphabetically, everything on that shelf falls on the floor.
2. make the shelves much narrower, and get rid of the instructions and prominent title once the game starts. i need this to play well on mobile devices
3. shelves still too wide. let’s do make the shelf 4 wide x 3 tall. and have the floor max be 4
4. full width is still not being used, on mobile
5. don’t stretch everything on desktop, and make things taller to take advantage of vertical space (but don’t ever have vertical scroll). Step back, and think about sizing of things overall, for ideal mobile and desktop experience.
6. split css and js into separate files
7. create a readme and claude.md file
8. add a tiny amount of space at the bottom, so the floor border isn’t touching the edge of window
9. do 5 px
10. make the movies on the floor the same size as they are on the shelf
11. they are still not the same size
12. now you’ve made them smaller on the shelves, instead of making them bigger on the floor
13. they are still a bit taller, on the shelf. we are not taking advantage of the full vertical space on the floor
14. in addition to click placement, user should be able to drag movies from the floor to the shelf, and also between shelf places
15. redo the “collapse” mechanism. instead, if the user attempts to place a movie in a place it doesn’t belong alphabetically, it should “fall” back to the floor. Have a fall animation.
16. take into account the other rows. right now, the movie only falls if it is out-of-order on the row, but the entire shelf (all rows) need to be a-z overall
17. a few sizing issues: - when a movie has a long title, it overflows the floor container, vertically, even though it has elipses. - on mobile width (~375px), having 5 movies on the floor overflows horizontally
18. the winning state is broken. you should only ever get as many movies as there are shelf spaces. once you fill all the shelf spaces, you should win.
19. something is still slightly off. i was able to “win” while still having a dvd on the floor
20. we have made some changes to the game logic since last docs update. update readme and claude with current logic
21. git rid of levels. we should just have one level
22. instead of leveling up, we should let the user select their difficult on the start screen. higher difficulty = movies spawn faster
23. show the current difficlutly level, at the top, and on the “game over” screen with the score. Possible scores should also be higher by difficulty level. Also, add a “new” button to the top, for ending the game and going back to the home screen.
24. “play again” button on “game over” screen should take you back to start screen, so you can choose difficulty
25. color-code the difficult, as displayed at the top of the game. also, justify the “new” button to the left
26. make the difficult buttons, on the start screen full-width
27. they are not full width, they are still pretty narrow
28. give me a way to test the “win” screen, w/o having to play the game
29. instead of “game over” show “WIN!”
30. add an animation to the “win” screen
31. instead of confetti, can you do movie-related emojis
32. make the emojis a bit bigger
33. they do not fall entirely smoothly. they kind hitch
34. add a “share” button to the “game over” / “win” screen. It should copy to clipboard the score, level, and a link to the game (use DVD-Shelf-Game.timcieplowski.com)
35. use emojis to illustrate the shelf, using green and red squares to indicate filled/unfilled spaces
36. help me host this on github pages
37. use disk emoji as favicon
38. at the bottom of the start screen, add “created by Tim Cieplowski” w/ name linking to timcieplowski.com (open in new tab)
39. overhaul the design. Make things look like an actual shelf, and an actual floor.
40. make sure everything fits on the start screen, no mobile devices
41. use width breakpoints, not height
42. use width breakpoints, not height. and still use justify-between for the start screen sections
43. on a mobile device, things are still not completely fitting on the start screen
44. put the credit all the way at the bottom, and don’t do 2x2 grid; make the title text fit in one line
45. don’t do 2x2 on desktop
46. i don’t think media queries are working. i get single row on 551x697 screen
47. we have too much padding in the shelves. reduce that so we don’t have to shrink the movies so much from their size on the floor
48. when there are no movies on the floor, spawn immediatly instead of waiting
49. add an animation when a new movie shows up on the floor (don’t change fall animation)
50. show a $ emoji for a split second, when a movie spawns
51. insted of emoji use green text $, and add some shadow so it covers the movie title better
52. brighter, neon green
53. can we somehow incorporate actual movie posters, instead of just having random colored movies?
54. update your doc so you’ll know how to get posters if we add movies in the future
55. put in claude.md
56. give me a page to view all the posters, so i can make sure they all load
57. test all the poster urls. fix or remove any that don’t work. for those removed, add a new movie with a good poster
58. use the the favicon for other app image tags
59. add a meta description
60. use @images/m/screenshot.png in readme
61. use it as social sharing image, too
62. the absolute base is https://dvd-shelf-game.timcieplowski.com/
63. rename this game to “DVD Organization Simulator”. don’t change the url.
64. we have a bit of scroll of id=gameOverOverlay on the “win” screen