我已经尽我所能——这个问题是关于从一开始就以正确的方式构建工程，所以当我添加我在帖子中详述的PLANNED功能时，我不必重新发明轮子。我遵循了一个教程并尽我所能去适应它。我找不到任何我想做什么的教程，我的导师也没有空。
我是 js 的新手，正在尝试使用这个项目学习一些东西。
目标
我想制作（主要使用 javascript 而不是 html）一个带有 11 x 11 图像键的图像键盘网格的聊天室，这些图像键使用 ws(s) 通过 Node.js websockets 传输？
我希望图像键对象具有关联的“标题”和“定义”属性，这些属性显示在键盘下方，鼠标悬停（以及稍后，使用切换按钮代替键/键）。我想确保图像键的布局可以从网格更改为不同的布局（例如，堆叠带有点击类别的径向图）如果我以后想要的话，所以我可能想要图像键对象（及其相关联的对象）标题和定义）独立于布局构建。
我希望它适合移动设备（因此没有鼠标悬停选项）。
我还想稍后添加功能，供用户提交新的图像键和相关定义和标题。
然后我会跟踪哪些键被使用最多，并将它们显示在“流行”部分。
我希望有可能制作一个版本，其中最少使用的密钥被最流行的替换。
可能的路线
有人建议我这样做：
创建将在网格中用作 js 数组的图像键对象
（有没有一种简单的方法可以将这 121 多个对象的属性和源图像存储在（准）数据库中（无需学习 php 或其他东西），例如 Google (Spread)Sheet，这样我就可以同时查看所有图像编辑相关属性，并在需要时批量更新所有图像？）
使用 CSS 网格布局在 11x11 网格中排列图像键
.每个图像键是一个 HTML 元素，相关图像作为背景，标题和定义显示为下面的文本
使用 JavaScript 用图像键填充网格。
.循环图像键（？）数组并为每个图像键创建一个新的 HTML 元素，设置相关的背景图像和文本。
.向每个图像键添加事件监听器以处理用户交互（例如，单击图像键应将相应的图像插入聊天室）。
使用 Node.js 中的 ws 模块创建 WebSocket 服务器。
.client-side JavaScript 使用 WebSocket API 连接到服务器并发送/接收包含图像密钥及其相关信息的消息。
为了允许不同的布局，创建多个 CSS 网格布局并使用 JavaScript 在它们之间切换。
.使用 CSS 类将适当的布局应用于网格容器元素，并相应地更新网格元素的位置和大小。
该方法是否允许我指定的功能开发路径？
我正在使用 THIS 教程，它使用 ws 而不是 wss。 wss 也一样好用吗？
我的目标是从一开始就以最通用但最简单的方式创建它，这样我在添加以后的目标时就不必重新编程，因为我没有太多时间。实现它比完全理解它更重要，因为我的工作期限很短，而且这是设计项目测试阶段的一部分，而不是工程项目。我很高兴在我去的时候学习一些它是如何工作的，还有一些之后。
我很想看看我是否可以让 chat-gpt 尽可能多地编写代码，并在进行时进行解释。到目前为止，创建带有图像键和定义的聊天室（如果需要可以共享）让我感到惊讶。我只是不确定它完成它的方式是否符合我未来的目标，以及它是否是最明智的方式，所以我想多分一点，也许使用给定的框架，构建更多明智地。