超级碗约1亿观众中的绝大多数实际上并不是上场球队的球迷--今年是辛辛那提孟加拉队和洛杉矶公羊队--而是那些只想找一个借口和朋友们聚在一起，吃健康的、严重不健康的食物，看广告的人。
但是，如果亲切感和碳水化合物还不足以吸引你的兴趣，一点小动作可以使 "大比赛 "更有趣。
从历史上看，超级碗周日的大部分赌注不是发生在凯撒或米高梅等拉斯维加斯的大型体育博彩公司，而是发生在人们的家中，是友好的、非正式的赌注。赌博游戏的卫冕冠军是一种简单易学、不需要体育知识的游戏，通常被称为 "超级碗方块"。
由于今年许多人的聚会计划再次被搁置，我们有一个想法。
创建一个 "Roacher Bowl Squares"应用程序，以帮助分布式赌徒获得他们的大场面赌注。
不要担心。这个博客不是为体育迷甚至是赌博迷而设的。事实上，在我开始建立这个应用程序之前，我不能说出两个以上的NFL球队（......有印第安纳波利斯小马队，因为我住在印第安纳波利斯，支持他们是一个要求。当佩顿-曼宁离开时，我可能流了一滴眼泪。另一个是爱国者队，因为我也住在印第安纳波利斯，我们讨厌他们）。
这篇博客是关于我使用Prisma、Remix、Netlify、Pusher Channels和CockroachDB Serverless构建一个交互式无服务器应用程序的经验。为什么我选择了Remix而不是Next.js？这到底是不是一个好的决定？我是否后悔？请继续阅读，亲爱的读者....，让我们一探究竟。
方正是一种时尚。这个赌博应用样本是如何工作的
首先，快速阅读一下游戏的典型运作方式。
- 创建一个空白的10x10网格。通常是在一张纸上。
- X和Y轴上标有超级碗竞争对手的队名。
- 玩家从空白方格中以每格预设的美元金额索取方块。
- 一旦池子里的每一格都被售出，数字0-9就被随机分配到每一行和每一列。
- 在每一季度结束时，其方格与各队得分的第二位数的交叉点相对应的人将获得奖金（例如，在第一季度结束时，14-7的得分将支付给第4列第7行的方格的所有者）。
这在概念上非常简单，但在试图将这种传统的、现场的版本复制为无服务器应用时，却带来了一些有趣的挑战。
下面我将介绍一些要点，但如果你想直接查看代码，也可以这样做。
Remix与Next.js。我的赌博应用技术栈
在进入赌博应用架构的复杂体操之前，让我们先看看场上的球员*（不是遗憾*！）。我做出的第一个决定是使用Remix而不是Next.js。我通常使用Next.js做网络应用，但我决定让Remix试试，原因有二。
- 它是新的热点，我喜欢闪亮的东西
- Remix背后的人很了不起（Kent C. Dodds，很高兴他没事）。
我立刻对我的决定感到后悔。我还花了几个小时对着虚空咒骂，因为我让自己处于从头开始学习一个全新的框架，以便在几天内建立一个样本应用程序。
然后，我开始喜欢上了Remix。我也许可以用一整篇博文来表达对Remix的喜爱。简而言之，我只想说，我认为你可以用Remix写一个应用程序，并关闭JavaScript，它仍然可以工作，这是非常好的。快去试试吧。
我的技术栈的其他部分是这样的。
CockroachDB无服务器
这个应用程序远非无状态。我们需要一个数据库来保存用户的信息，以及同时进行的不同游戏。由于这个应用的性质，CockroachDB无服务器是一个不错的选择。很多行动都发生在 "大游戏 "期间。除此之外，应用程序可能处于休眠状态，只有在参与者认领自己的方块时才会被唤醒。这个应用程序利用CockroachDB Serverless的弹性规模，在需要的时候提供计算，而在需求减弱的时候则具有成本效益。
现在我们有了数据库，我们需要一种方法来与之对话。Prisma是一种类型安全的ORM，是我与CockroachDB合作的首选方式。Prisma最近发布了对CockroachDB的预览支持。我和我的狗实际上出现在Prisma的现场直播中，谈论我用Prisma对CockroachDB的支持建立的一个不同的样本应用。我将直接链接到好的部分*（我*）。
Remix可以部署在许多不同的平台上，并让你在开始一个新项目时选择使用哪个平台。我选择了Netlify，因为我对它最熟悉。在构建过程中，Remix会把静态资产打包，并创建一个Netlify函数来处理应用程序的服务器端渲染。不想使用Netlify？你只需做一个小小的改变，就可以使用Vercel、Fly.io和其他许多软件。我喜欢Netlify。告我吧。
推进器通道
就像Ugly Sweater应用程序一样，我们使用Pusher Channels来保持游戏板的同步，同时进行更改。在游戏开始之前，这有助于确保没有人试图要求一个最近被其他参与者要求的广场。在游戏过程中，随着比分的变化，我们会得到获胜方的实时更新。
对于用户来说。
- id - UUID PRIMARY KEY DEFAULT gen_random_uuid()
- username - STRING UNIQUE NOT NULL
- password_hash STRING
- created_at - TIMESTAMPTZ DEFAULT now()
- updated_at - TIMESTAMPTZ DEFAULT now()
对于游戏
- id - UUID PRIMARY KEY DEFAULT gen_random_uuid()
- slug - STRING(一些人类可读的、唯一的东西)
- host_id - 对用户表的UUID引用
- state - STRING [INIT (default), Q1, Q2, Q3, Q4, FINAL]
- claim_cost - DECIMAL(每平方的费用)
- board - 董事会的JSONB表示
Ex.{"团队":["Team 1", "Team 2"], "rows" : [0, 1, 2, ..., 9], "cols" 。[0, 1, 2, ..., 9]} - 分数 - JSONB
前者。[[0,0], [0,0], [0,0], [0,0]]
- winners - JSONB所有4个季度的获胜者
Ex.[{id:"", name: "Jane Doe", "userid":"jd1"}, {id:"", name: "Jane Doe", "userid":"jd1"}, {id:"", name: "Jane Doe", "userid":"jd1"}, {id:"", name: "Jane Doe", "userid":"jd1"}] - created_at - TIMESTAMPTZ
对于索赔。
- id - UUID PRIMARY KEY DEFAULT gen_random_uuid()
- game_id - UUID
- participant_id - UUID 对认证用户表的引用
- 行 - INT
- 列 - INT
- created_at - TIMESTAMPTZ
示例应用程序已经启动，正在运行，并等待你在大比赛时主持你自己的罗切尔杯方块游戏。
试试吧，分享你的游戏截图，并通过在Twitter上标记#RoacherBowlSquares或@CockroachDB让我们知道你的想法。
在我们的资源库中还有更多的样本应用程序。我希望你能查看它们。
