写点什么

前端大神用 React 刻了一个 Windows XP

  • 2019-04-01
  • 本文字数:1646 字

    阅读完需:约 5 分钟

前端大神用React刻了一个Windows XP

近日,一前端大神 sh1zuku 用 React 刻出一個 Windows XP,页面中的两个 Windows XP 窗口可以自由拖曳,而且作者还制作了一个踩地雷的游戏,可以直接上手玩。作者也将这些实现的过程在 medium 上记录了下来,以下全文就是 InfoQ 对其内容的整理。


想玩的同学,可点这个链接一试:


https://winxp.now.sh/

从纯 JS 转至 React

sh1zuku 表示,他原本是以 vanilla JS 写整个 project 的,但不得不说 Parcel 真的很强大,一键开始 Pug,SCSS, Babel,HMR 环境,马上就能进入开发模式。少了框架的帮忙,他必须手刻 PWA,SPA,Code splitting 和 Routing,所以。最后他决心将整个专案用 React 重写,但后来分离至另外一个 repo 了。

元素拖曳、伸缩

作者一开始决定从 XP 视窗的拖曳以及伸缩着手,期间经历 了 getBoundingClientRect 的 left、top 以及 mousemove 的( clientX, offsetX,pageX,screenX)各种折磨, 才让他真正了解其中的区别,最后他做的是不受 scroll 影响的元素拖曳和伸缩。

抖动的 Cursor

在元素伸缩时,加入 cursor: resize;系列是不可或缺的,然而单纯的 :hover 会在快速伸缩时因为超过元素范围让 cursor 变回 default,想了很久以后他决定盖一个全版 div,让 cursor 怎麼滑都保持 resize!


无限延伸子目录

在这里,作者最后的写法是遍历一个 JSON 档,产生相应的目录结构,但较麻烦的是为了符合 XP 的行为,需要自己控制选单反白的状态。


Grid 栏位对齐

每个下拉选单都有四栏,中间的两栏(选项名称和快捷键)长度不固定,且内容要对齐该栏左侧,作者在这里选用 grid 来解决:


display: grid;grid-template-columns: 16px auto auto 15px;

复制代码


但后来发现 hover 时需要反蓝整列,就用了 display: contents 这个属性,作用是包住内容(一整列)但不影响 layout(栏的对齐),如此一来就能轻松设定整列样式了。


踩地雷

為了完全模拟踩地雷的行为,将 mouse event 的 button 和 buttons 属性组合了一下才完成,复杂的状态则使用 useReducer 来管理。


MouseEvent.button 代表触发事件的按键(1 左键 2 右键)


MouseEvent.buttons 代表触发事件时按键的状态(1 左键 2 右键 3 双键)



手机版:https://github.com/ShizukuIchi/minesweeper

图片反蓝

為了让图片变蓝,作者一开始用了这种方式:


.img {  filter: hue-rotate(170deg) brightness(60%) saturate(300%);}
复制代码


网站中使用了许多好用的 filter 属性,只有这个比较诡异,色相旋转、亮度还有饱和度的组合还真的让图片变蓝了。最后反蓝的的方式是给 parent 蓝色影子、让图案透明,达到变蓝的效果:


.container {  filter: drop-shadow(0 0 blue);}.img {  opacity: 0.5;}
复制代码


ReactDom.createPortal

打开关机菜单时,为了让全版画面变成灰阶但保持目录的颜色,sh1zuku 使用了 portal,让选单 render 时可以插入特定的 DOM 位置又保持事件沟通,时常用在突破 overflow: hidden; 限制。


其他

sh1zuku 还分享了一些其他细节:


多个 box shadow 会由前到后覆盖,如下,影子会是黑色:


.dot {  box-shadow: 0 0 black, 0 0 white, 0 0 blue; }
复制代码


选单使用 filter: invert(100%) 转负片,看到的蓝色其实原本是橘色:


.container {  background: #e99f17; -> 橘色  filter: invert(100%);}
复制代码


用 user select: none、pointer event: none 防止拖曳事件受到影响。

后记

在这个过程中为了完全符合 XP 视觉,sh1zuku 不断微调 layout 和颜色,也花了很多时间在图示上,其实有许多次「到此为止吧」的念头。不过也理清了他自己在 layout 的错误观念,且只要发现跟原生 XP 不同的地方,不改完就觉得浑身不对劲,为此他还特地装了 XP 虚拟机 XD。

参考链接

更多链接

GitHub:https://github.com/ShizukuIchi/winXP


演示链链接:https://winxp.now.sh/


原文链接:


https://medium.com/@shizukuichi/用-react-刻-xp-一路上的點點滴滴-7440e8bc9b73


更多内容,请关注前端之巅。



2019-04-01 06:0614111

评论 1 条评论

发布
用户头像
感觉是做了个Winamp,顺便做了个XP吧?Winamp连EQ均衡器都好用
2019-04-08 10:33
回复
没有更多了
发现更多内容

Java 开发者的 AI 内卷指南:用工具自动补全 90% 代码!

飞算JavaAI开发助手

springboot分页查询并行优化实践

电子尖叫食人鱼

后端 springboot

任务运维、循环任务死锁.....DolphinScheduler任务配置经验分享

白鲸开源

大数据 开源 Apache DolphinScheduler 任务调度

某知名半导体公司AIOps 培训圆满收官, 助力行业运维升级

雅菲奥朗

AI AI 人工智能

「器」感:锻造AI时代工业数据底座,激活设备智慧生命力

麦杰研究院

工业数据

【实战】一招搞定Shell调度!DolphinScheduler+ProcessBuilder超详细教程

白鲸开源

大数据 开源 Shell Apache DolphinScheduler 任务调度

从 Spring Boot 到 AI 原生:下一代 Java 开发工具的五大趋势

飞算JavaAI开发助手

花式分享、分屏畅聊:华为Pura X让社交生活游刃有余

最新动态

什么是公共数据?公共数据开放后如何提高新质生产力发展?

郑州埃文科技

拒绝焦虑?飞算 JavaAI 一键生成完整工程代码,让你专注架构设计

飞算JavaAI开发助手

数据要素如何驱动的新质IDC一体化运营体系发展?

郑州埃文科技

SeaTunnel 2.3.9同步Oracle数据至Doris出现乱码?别慌,这么做

白鲸开源

大数据 数据同步 数据集成 Apache SeaTunnel

「器」感:锻造AI时代工业数据底座,激活设备智慧生命力

麦杰科技

C++部署的性能优化方法

地平线开发者

自动驾驶; 算法工具链 地平线征程6

Java 开发如何用 AI 工具处理分布式事务?飞算 JavaAI 自动生成高可用代码

飞算JavaAI开发助手

硬件加密+本地部署,大模型一体机如何打造AI安全护城河?

郑州埃文科技

开发者必备:2025 年主流 AI 工具推荐

飞算JavaAI开发助手

人工智能工程师(中级)培训开课通知

雅菲奥朗

人工智能 AI

Java多进程多线程处理详解

量贩潮汐·WholesaleTide

Java

武汉同济医院大模型应用通识第2课聚焦提示词工程,和鲸助力开讲

ModelWhale

同济医院 大模型通识课 医疗工程提示词

数据要素与居民就业的深层联结 数字化转型下的劳动力市场变革

郑州埃文科技

AI求职神器JobLeap.cn:技术人必备的全方位职业发展助手

安全乐谷

面试 找工作 招聘 找实习

用远程代理模式轻松实现远程服务调用,打开编程新大门

不在线第一只蜗牛

远程代理

深度解析金仓数据库KingbaseES的多表连接视图及其可更新性

金仓技术

KingbaseES 金仓数据库

征程 6|YUV 域降噪模块 YNR 简介

地平线开发者

自动驾驶; 算法工具链 地平线征程6

推荐私有化部署的企业内部通讯软件BeeWorks

BeeWorks

即时通讯

数据要素×一体机大模型 解锁银行资产评估新范式

郑州埃文科技

一文搞懂SaaS架构建设流程:业务战略设计、架构蓝图设计、领域系统架构设计、架构治理与实施

量贩潮汐·WholesaleTide

架构 SaaS

从架构原理到落地实践: Apache SeaTunnel×Cloudberry数据集成全解读

白鲸开源

大数据 数据同步 数据集成 Apache SeaTunnel

Promise 这个新 API 真香!

Immerse

BeeWorks企业内部即时通讯软件支持国产化,已在鸿蒙系统上稳定运行

BeeWorks

即时通讯

前端大神用React刻了一个Windows XP_大前端_sh1zuku_InfoQ精选文章