[FH-2] 8 Ball (#160)

templates/eightball/Inspector.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { BasicViewInspector, GatingInspector, Switch } from '@/sdk/components'
+import { useFrameConfig } from '@/sdk/hooks'
+import { Configuration } from '@/sdk/inspector'
+import type { Config } from '.'
+
+type GatingConfig = Required<Config['gating']>
+
+export default function Inspector() {
+    const [config, updateConfig] = useFrameConfig<Config>()
+
+    const gatingConfig: GatingConfig = config.gating || {
+        enabled: [],
+        requirements: {
+            maxFid: 0,
+            minFid: 0,
+            score: 0,
+            channels: [],
+            exactFids: [],
+            erc20: null,
+            erc721: null,
+            erc1155: null,
+            moxie: null,
+        },
+    }
+
+    return (
+        <Configuration.Root>
+            <Configuration.Section title="General">
+                <label>
+                    Cooldown (seconds):
+                    <input
+                        type="number"
+                        value={config.cooldown}
+                        onChange={(e) =>
+                            updateConfig({ cooldown: Number.parseInt(e.target.value) || -1 })
+                        }
+                        min="-1"
+                    />
+                </label>
+                <label>
+                    Public:
+                    <input
+                        type="checkbox"
+                        checked={config.isPublic}
+                        onChange={(e) => updateConfig({ isPublic: e.target.checked })}
+                    />
+                </label>
+            </Configuration.Section>
+            <Configuration.Section title="Cover">
+                <BasicViewInspector
+                    config={config.coverConfig}
+                    onChange={(newCoverConfig) => updateConfig({ coverConfig: newCoverConfig })}
+                />
+            </Configuration.Section>
+            <Configuration.Section title="Answer">
+                <BasicViewInspector
+                    config={config.answerConfig}
+                    onChange={(newAnswerConfig) => updateConfig({ answerConfig: newAnswerConfig })}
+                />
+            </Configuration.Section>
+            <Configuration.Section title="Gating">
+                <Switch
+                    checked={config.enableGating ?? false}
+                    onCheckedChange={(checked) => updateConfig({ enableGating: checked })}
+                />
+                {config.enableGating && (
+                    <GatingInspector
+                        config={gatingConfig}
+                        onChange={(newGatingConfig) => updateConfig({ gating: newGatingConfig })}
+                    />
+                )}
+            </Configuration.Section>
+        </Configuration.Root>
+    )
+}

templates/eightball/handlers/ask.ts

@@ -0,0 +1,81 @@
+'use server'
+import type { BuildFrameData } from '@/lib/farcaster'
+import { runGatingChecks } from '@/lib/gating'
+import { loadGoogleFontAllVariants } from '@/sdk/fonts'
+import {
+    type ButtonConfig,
+    type ErrorDisplayConfig,
+    type HandlerContext,
+    Magic8BallError,
+    checkCooldown,
+    getRandomAnswer,
+    validateQuestion,
+} from '../types'
+import AnswerView from '../views/answer'
+
+const errorDisplayConfig: ErrorDisplayConfig = {
+    style: {
+        backgroundColor: 'red',
+        color: 'white',
+        padding: '20px',
+        borderRadius: '10px',
+        textAlign: 'center',
+        fontSize: '24px',
+    },
+    buttons: [{ label: 'Try Again' }],
+    handler: 'initial',
+}
+
+const createButton = (label: string): ButtonConfig => ({ label })
+
+const updateStorage = (
+    storage: HandlerContext['storage'],
+    body: HandlerContext['body'],
+    answer: string
+) => ({
+    ...storage,
+    lastAnswerTime: Date.now(),
+    questions: [
+        ...(storage.questions || []),
+        {
+            question: body.inputText,
+            answer,
+            timestamp: Date.now(),
+            fid: body.fid,
+        },
+    ],
+})
+
+export default async function ask({
+    body,
+    config,
+    storage,
+}: HandlerContext): Promise<BuildFrameData> {
+    try {
+        const roboto = await loadGoogleFontAllVariants('Roboto')
+
+        runGatingChecks(body, config.gating)
+        validateQuestion(body.inputText)
+        checkCooldown(storage.lastAnswerTime, config.cooldown)
+
+        const answer = getRandomAnswer()
+        const newStorage = updateStorage(storage, body, answer)
+
+        return {
+            buttons: [createButton('Ask Another Question')],
+            fonts: roboto,
+            component: AnswerView(config, answer),
+            handler: 'initial',
+            storage: newStorage,
+        }
+    } catch (error) {
+        if (error instanceof Magic8BallError) {
+            return {
+                ...errorDisplayConfig,
+                // Assuming you might want some error message or dynamic content here
+                // errorContent: error.message, 
+            }
+        }
+        throw error 
+    }
+}

templates/eightball/handlers/handlers.ts

@@ -0,0 +1,3 @@
+export { default as initial } from './initial';
+export { default as page } from './page';
+export { default as ask } from './ask';

templates/eightball/handlers/index.ts

@@ -0,0 +1,7 @@
+import { initial, ask, page} from './handlers';
+
+export default {
+    initial,
+    ask,
+    page
+}

templates/eightball/handlers/initial.ts

@@ -0,0 +1,20 @@
+'use server'
+import type { BuildFrameData } from '@/lib/farcaster'
+import { loadGoogleFontAllVariants } from '@/sdk/fonts'
+import type { HandlerContext } from '../types'
+import CoverView from '../views/cover'
+
+export default async function initial({
+    config,
+    storage,
+}: Omit<HandlerContext, 'body'>): Promise<BuildFrameData> {
+    const roboto = await loadGoogleFontAllVariants('Roboto')
+
+    return {
+        buttons: [{ label: 'Ask' }],
+        inputText: 'Ask a question...',
+        fonts: roboto,
+        component: CoverView(config),
+        handler: 'ask',
+    }
+}

templates/eightball/handlers/page.ts

@@ -0,0 +1,30 @@
+'use server'
+import type { BuildFrameData, FramePayloadValidated } from '@/lib/farcaster'
+import { loadGoogleFontAllVariants } from '@/sdk/fonts'
+import type { Config, Storage } from '..'
+import PageView from '../views/page'
+
+export default async function page({
+    body,
+    config,
+    storage,
+    params,
+}: {
+    body: FramePayloadValidated
+    config: Config
+    storage: Storage
+    params: any
+}): Promise<BuildFrameData> {
+    const roboto = await loadGoogleFontAllVariants('Roboto')
+
+    return {
+        buttons: [
+            {
+                label: '← Back to Magic 8 Ball',
+            },
+        ],
+        fonts: roboto,
+        component: PageView(config, storage, params),
+        handler: 'initial',
+    }
+}

templates/eightball/index.ts

@@ -0,0 +1,89 @@
+import type { BaseConfig, BaseStorage, BaseTemplate } from '@/lib/types'
+import type { GatingType } from '@/sdk/components/gating/types'
+import Inspector from './Inspector'
+import cover from './cover.jpeg'
+import handlers from './handlers'
+
+export interface Config extends BaseConfig {
+    fontFamily?: string
+    primaryColor?: string
+    secondaryColor?: string
+    titleWeight?: string
+    titleStyle?: string
+    background?: string
+    bodyColor?: string
+    cooldown: number
+    isPublic: boolean
+    coverConfig: {
+        title: string
+        subtitle: string
+        bottomMessage: string
+        backgroundColor: string
+        textColor: string
+    }
+    answerConfig: {
+        title: string
+        bottomMessage: string
+        backgroundColor: string
+        textColor: string
+    }
+    gating: GatingType | undefined
+    enableGating: boolean | undefined
+}
+
+export interface Storage extends BaseStorage {
+    lastAnswerTime?: number
+    questions?: Array<{
+        question: string
+        answer: string
+        timestamp: number
+        fid: number
+    }>
+}
+
+export default {
+    name: 'Magic 8 Ball',
+    description: 'Ask a question and receive a mystical answer from the Magic 8 Ball!',
+    shortDescription: 'Virtual fortune teller',
+    icon: '',
+    octicon: 'crystal-ball',
+    creatorFid: '197049',
+    creatorName: 'codingsh',
+    cover,
+    enabled: true,
+    Inspector,
+    handlers,
+    initialConfig: {
+        cooldown: 60,
+        isPublic: true,
+        coverConfig: {
+            title: 'Magic 8 Ball',
+            subtitle: 'Ask a question and receive mystical guidance!',
+            bottomMessage: "Tap 'Ask' to begin",
+            backgroundColor: '#000000',
+            textColor: '#FFFFFF',
+        },
+        answerConfig: {
+            title: 'The 8 Ball says...',
+            bottomMessage: 'Ask another question to play again!',
+            backgroundColor: '#000000',
+            textColor: '#FFFFFF',
+        },
+        enableGating: false,
+        gating: {
+            enabled: [],
+            requirements: {
+                maxFid: 0,
+                minFid: 0,
+                score: 0,
+                channels: [],
+                exactFids: [],
+                erc20: null,
+                erc721: null,
+                erc1155: null,
+                moxie: null,
+            },
+        },
+    },
+    events: ['question.asked', 'question.answered'],
+} satisfies BaseTemplate