const RotaryPhonePage = lazy(() => import('../pages/apps/RotaryPhonePage'));

<Suspense fallback={<Loading />}>

<TopographicMapPage />

</Suspense>

}

/>

<Route

path="/apps/rotary-phone"

element={

<Suspense fallback={<Loading />}>

<RotaryPhonePage />

</Suspense>

import React, {useState, useRef, useEffect} from 'react';

import {motion, useMotionValue, animate} from 'framer-motion';

const RotaryDial = ({onDial}) => {

const [isDragging, setIsDragging] = useState(false);

const [activeDigit, setActiveDigit] = useState(null);

const rotation = useMotionValue(0);

const containerRef = useRef(null); // Ref for the static container

const animationControls = useRef(null);

// Configuration

const STOP_ANGLE = 60; // Angle of the finger stop (in degrees, 0 is 3 o'clock)

const GAP = 30; // Degrees between numbers

// Numbers 1-9, 0. '1' is closest to stop.

const DIGITS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

const getDigitAngle = (digit) => {

const index = DIGITS.indexOf(digit);

return STOP_ANGLE - (index + 1) * GAP;

};

const getAngle = (event, center) => {

const clientX = event.touches ? event.touches[0].clientX : event.clientX;

const clientY = event.touches ? event.touches[0].clientY : event.clientY;

const dx = clientX - center.x;

const dy = clientY - center.y;

let theta = Math.atan2(dy, dx) * (180 / Math.PI);

return theta;

};

const handleStart = (event, digit) => {

// Only prevent default on touch to stop scrolling

if (event.touches && event.cancelable) event.preventDefault();

// Stop any ongoing spring-back animation

if (animationControls.current) {

animationControls.current.stop();

}

setIsDragging(true);

setActiveDigit(digit);

};

const handleMove = (event) => {

if (!isDragging || activeDigit === null || !containerRef.current) return;

const rect = containerRef.current.getBoundingClientRect();

const center = {

x: rect.left + rect.width / 2,

y: rect.top + rect.height / 2

};

const currentMouseAngle = getAngle(event, center);

const startAngle = getDigitAngle(activeDigit);

let newRotation = currentMouseAngle - startAngle;

const normalizeDiff = (diff) => {

while (diff <= -180) diff += 360;

while (diff > 180) diff -= 360;

return diff;

};

newRotation = normalizeDiff(newRotation);

const maxRot = STOP_ANGLE - startAngle;

// If rotation is negative, it might be because we've crossed the 180 boundary

// for a high number digit (like 9 or 0).

// Check if adding 360 brings us into a valid positive range close to maxRot.

// We allow a small buffer over maxRot for elasticity.

if (newRotation < 0 && (newRotation + 360) <= maxRot + 30) {

newRotation += 360;

}

// Clamp

if (newRotation < -10) newRotation = -10;

if (newRotation > maxRot) newRotation = maxRot;

rotation.set(newRotation);

};

const handleEnd = () => {

if (!isDragging) return;

setIsDragging(false);

const maxRot = STOP_ANGLE - getDigitAngle(activeDigit);

const threshold = 15;

const currentRot = rotation.get();

if (Math.abs(currentRot - maxRot) < threshold) {

if (onDial) onDial(activeDigit);

}

setActiveDigit(null);

// Animate back to 0

animationControls.current = animate(rotation, 0, {

type: "spring",

stiffness: 200,

damping: 20,

mass: 1

});

};

useEffect(() => {

const onMove = (e) => handleMove(e);

const onUp = () => handleEnd();

if (isDragging) {

window.addEventListener('mousemove', onMove);

window.addEventListener('mouseup', onUp);

window.addEventListener('touchmove', onMove, {passive: false});

window.addEventListener('touchend', onUp);

}

return () => {

window.removeEventListener('mousemove', onMove);

window.removeEventListener('mouseup', onUp);

window.removeEventListener('touchmove', onMove);

window.removeEventListener('touchend', onUp);

};

}, [isDragging, activeDigit]);

return (

<div

ref={containerRef}

className="relative w-80 h-80 sm:w-96 sm:h-96 select-none"

>

<div className="absolute inset-0 rounded-full bg-gray-900 border-4 border-gray-700 shadow-2xl">

{DIGITS.map((digit) => {

const angle = getDigitAngle(digit);

return (

<div

key={`num-${digit}`}

className="absolute inset-0 flex items-center justify-center pointer-events-none"

style={{transform: `rotate(${angle}deg)`}}

>

<div

className="text-3xl font-bold text-white font-mono"

style={{transform: `translate(${140}%) rotate(${-angle}deg)`}}

>

{digit}

</div>

</div>

);

})}

</div>

<motion.div

className="absolute inset-0 rounded-full border-4 border-transparent"

style={{rotate: rotation}}

>

<div

className="absolute inset-2 rounded-full bg-gradient-to-br from-gray-800/90 to-gray-900/90 shadow-inner backdrop-blur-sm border border-gray-600">

<div

className="absolute inset-0 m-auto w-1/3 h-1/3 rounded-full bg-gray-800 border-2 border-gray-600 flex items-center justify-center shadow-lg">

<div className="text-gray-500 text-xs font-mono text-center opacity-50">

FEZ<br/>CODE

</div>

</div>

{DIGITS.map((digit) => {

const angle = getDigitAngle(digit);

return (

<div

key={`hole-${digit}`}

className="absolute inset-0 flex items-center justify-center pointer-events-none"

style={{transform: `rotate(${angle}deg)`}}

>

<div

className={`w-14 h-14 sm:w-16 sm:h-16 rounded-full border-2 transition-colors duration-200 cursor-pointer pointer-events-auto

style={{transform: `translate(${140}%)`}}

onMouseDown={(e) => handleStart(e, digit)}

onTouchStart={(e) => handleStart(e, digit)}

>

</div>

</div>

);

})}

</div>

</motion.div>

<div

className="absolute inset-0 pointer-events-none z-10"

style={{transform: `rotate(${STOP_ANGLE}deg)`}}

>

<div

className="absolute top-1/2 right-0 w-16 h-4 bg-gradient-to-r from-gray-400 to-gray-200 rounded-l-lg shadow-lg origin-right translate-x-2 -translate-y-1/2"/>

</div>

</div>

);

export default RotaryDial;

import React, {useState} from 'react';

import RotaryDial from '../../components/RotaryDial';

import BreadcrumbTitle from '../../components/BreadcrumbTitle';

import Seo from '../../components/Seo';

import {BackspaceIcon, TrashIcon} from '@phosphor-icons/react';

import {motion, AnimatePresence} from 'framer-motion';

const RotaryPhonePage = () => {

const [phoneNumber, setPhoneNumber] = useState('');

const [lastDialed, setLastDialed] = useState(null);

const handleDial = (digit) => {

setPhoneNumber((prev) => prev + digit);

setLastDialed(digit);

// Clear "last dialed" highlight after a moment

setTimeout(() => setLastDialed(null), 500);

};

const handleBackspace = () => {

setPhoneNumber((prev) => prev.slice(0, -1));

};

const handleClear = () => {

setPhoneNumber('');

};

// Format phone number for display (US format style roughly)

const formatPhoneNumber = (value) => {

// Just simple grouping for readability if it gets long

// 123-456-7890

if (!value) return '';

return value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');

};

return (

<div

className="min-h-screen bg-gray-950 py-12 px-4 sm:px-6 lg:px-8 flex flex-col items-center relative overflow-hidden">

<Seo

title="Rotary Phone | Fezcodex"

description="A digital rotary phone. Dial numbers with your mouse or finger."

keywords="rotary phone, dialer, retro, interactive, web app"

/>

<div className="w-full max-w-7xl mx-auto relative z-10">

<BreadcrumbTitle title="Rotary Phone" slug="rotary-phone"/>

</div>

<div className="z-10 w-full max-w-2xl flex flex-col items-center gap-12 mt-8">

{/* Display Area */}

<div className="w-full bg-gray-900 p-6 rounded-3xl shadow-2xl border border-gray-800 relative">

<div

className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-950 px-4 py-1 rounded-full border border-gray-800 text-gray-500 text-xs uppercase tracking-widest font-mono">

Display

</div>

<div

className="bg-green-900/20 border border-green-800/50 rounded-xl p-4 h-24 flex items-center justify-end overflow-hidden relative shadow-[inset_0_0_20px_rgba(0,0,0,0.5)]">

<AnimatePresence mode="popLayout">

<motion.span

key={phoneNumber} // Re-render on change for effect

initial={{opacity: 0.5, y: 5}}

animate={{opacity: 1, y: 0}}

className="text-4xl sm:text-5xl font-mono text-green-400 tracking-widest font-bold drop-shadow-[0_0_8px_rgba(74,222,128,0.6)]"

>

{phoneNumber || <span className="opacity-20">...</span>}

</motion.span>

</AnimatePresence>

{/* Cursor/Caret */}

<motion.div

animate={{opacity: [0, 1, 0]}}

transition={{repeat: Infinity, duration: 1}}

className="w-3 h-10 bg-green-400/50 ml-1"

/>

</div>

<div className="flex justify-end gap-3 mt-4">

<button

onClick={handleBackspace}

disabled={!phoneNumber}

className="p-2 rounded-lg bg-gray-800 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"

title="Backspace"

>

<BackspaceIcon size={24}/>

</button>

<button

onClick={handleClear}

disabled={!phoneNumber}

className="p-2 rounded-lg bg-red-900/30 text-red-400 hover:text-red-300 hover:bg-red-900/50 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"

title="Clear All"

>

<TrashIcon size={24}/>

</button>

</div>

</div>

{/* The Dial */}

<div className="relative py-8">

<div className="absolute inset-0 bg-primary-500/5 blur-[100px] rounded-full pointer-events-none"/>

<RotaryDial onDial={handleDial}/>

</div>

{/* Instructions */}

<div className="text-gray-500 text-center max-w-md space-y-2">

<p className="text-lg font-medium text-gray-400">How to use:</p>

<p className="text-sm">

Click and hold a number hole, drag it clockwise until it hits the metal stop at the bottom right, then

release.

</p>

</div>

</div>

</div>

);

export default RotaryPhonePage;

PhoneIcon,

PhoneIcon,