[第十只羊] 迷雾森林舞会III 参见排版神器 Tailwind

天亮了 昨晚是平安夜

关於迷雾森林故事

第九夜

站在方舟甲板的洛神
数了一下玩家人数
就问 怎麽少了两位玩家?
其他十位 animal 左顾右盼
没有人知道这两位玩家发生了什麽事情
只知道是两只小兔子玩家
看着直播的舞会观众们听到有人又消失得无影无踪
不免也开始惊慌起来
但是洛神却看似什麽都没发生
将游戏改成十人局继续他的说明

投票是民主的基础,来自18世纪海盗
推举船长或是决定各种重大事务
如今在座各位 都是这艘方舟的船员
玩的游戏是恶灵骑士局
邪恶阵营:恶灵骑士+狼王+小狼
正义阵营:预言家+女巫+骑士+平民x3
恶灵骑士永远不会死於夜晚,不能自爆
狼队还有狼王,死亡开枪可以带 animal 走,在自己发言阶段可以自爆开枪也可以带 animal 走
神职:预女猎骑,女巫全程不自救
四神三民三狼
将在确认角色身份之後开始游戏
待续..

资料来源:

  1. 【盗亦有道】18 世纪海盗的宪政民主
  2. 现代民主制度,起源於海盗
  3. 现代民主制度,起源於海盗:民主制度的建立,与环境有关,与人的素质无关
  4. 海盗共和国: 骷髅旗飘扬、民主之火燃起的海盗黄金年代

动物园派对

我们今天先把 Tailwind 整合进专案中
vite 其实有给自己可以支援 Tailwind 的设定方式
我们这边先简单沿用 cdn 汇入的方式减少相依
在 application.html.erb 的部分导入 Tailwind 与 daisyui CDN
顺手把 google 字型 与 toastr 一起导入

/app/views/layouts/application.html.erb

    <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet"/>
    <link href="https://unpkg.com/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet"/>
    <link href="https://unpkg.com/@tailwindcss/typography/dist/typography.min.css" rel="stylesheet"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/c43c4e102d.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/creativetimofficial/tailwind-starter-kit/compiled-tailwind.min.css"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet"/>

在 application.js 中导入样式

/javascript/entrypoints/application.js

import "../src/application.css"

变更 tailwind.config.js 设定档

/app/tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },

  plugins: [
    require('daisyui'),
  ],
  daisyui: {
    styled: true,
    themes: [
      'emerald', // first one will be the default theme
      'dark',
      'forest',
      'synthwave'
    ],
    base: true,
    utils: true,
    logs: true,
    rtl: false,
  },
}

紧接着我们在房间列表稍微用用看

/app/views/rooms/index.erb

<!--<div id="app"></div>-->
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
  <h1 class="mb-4 text-3xl font-black">动物园派对</h1>
  <p class="text-lg leading-snug">逻辑碰撞的派对游戏</p>
</div>
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
  <button class="inline-block px-4 py-3 text-sm font-semibold text-center text-white uppercase transition duration-200 ease-in-out bg-indigo-500 rounded-md cursor-pointer hover:bg-indigo-600"> 我是 Tailwind Button</button>
  <button class="btn btn-primary"> 我是 DaisyUI Button</button>
  <button class="px-3 py-2 mb-1 mr-1 text-sm font-bold text-white uppercase rounded shadow outline-none transition-all duration-150 ease-linear bg-blueGray-500 active:bg-blueGray-600 hover:shadow-md focus:outline-none" type="button">
    <%= link_to new_room_path do %>
      <span class="text-sm align-middle opacity-75 material-icons">建立新房间</span>
    <% end %>
  </button>
</div>

如此一来我们就会有一个初步的样式
https://ithelp.ithome.com.tw/upload/images/20210926/20131155CnKgUzlWQJ.png
更详细的 Tailwind 教学可以参阅兔兔的今年铁人赛热门点阅文章
排版神器 Tailwind CSS~和兔兔一起快速上手漂亮的元件开发!

阿虎每日选币

刹那霊 the Ghost in 0.013 second
图片来源

日本创作者的 NFT

天黑请闭眼


<<:  [Day 25] 资料产品在评估阶段的五个大坑

>>:  [Day17] Webpack - 跨浏览器支援

Day25,Kubeapps一日体验

kubeapps是一个由vmware/bitnami主导的开源项目,主旨为在kubernetes中让...

DAY29 进行式--工作日志004

工作日志碎碎念 OH,我现在在实作的时候,常常翻我这次铁人赛的文章,因为这就是我的学习笔记麻 结果发...

Day-05 问题与解决

在正式撰写程序前,本期内容想汇整几个我曾碰到的问题,往後在碰到以下这些问题时,能更快找出解决方法。 ...

DAY29 欸你Git来Hub一下

昨天提到先将本机的档案列为版控,但是光在本机这样操作还是不太够,其他人要一起共同开发的时候,还是一样...

SQL Server 死结 (deadlock) 的分析查询 - 心得分享

DBABootcamp 在 SQL Server, 死结的发生是因为有两个或多个工作(process...