diff --git a/.deco/blocks/Sunset%20Glow.json b/.deco/blocks/Sunset%20Glow.json index 5d7f1e7..8aeabfd 100644 --- a/.deco/blocks/Sunset%20Glow.json +++ b/.deco/blocks/Sunset%20Glow.json @@ -1 +1,38 @@ -{"__resolveType":"site/sections/Theme/Theme.tsx","buttonStyle":{"--border-btn":"1px","--rounded-btn":"0.2rem","--btn-focus-scale":"0.95","--animation-btn":"0.25s"},"otherStyles":{"--rounded-box":"1rem","--rounded-badge":"1.9rem","--animation-input":"0.2s","--tab-border":"1px","--tab-radius":"0.5rem"},"mainColors":{"base-100":"#FFF7D2","primary":"#A73C5A","secondary":"#FFBC55","tertiary":"#FF9900","neutral":"#4F3000","success":"#008060","warning":"#FFC453","error":"#D82C0D","info":"#2E72D2"},"font":{"__resolveType":"website/loaders/fonts/googleFonts.ts","fonts":[{"variations":[],"family":"Special Elite"}]},"colorScheme":"any"} \ No newline at end of file +{ + "__resolveType": "site/sections/Theme/Theme.tsx", + "buttonStyle": { + "--border-btn": "1px", + "--rounded-btn": "0.2rem", + "--btn-focus-scale": "0.95", + "--animation-btn": "0.25s" + }, + "otherStyles": { + "--rounded-box": "1rem", + "--rounded-badge": "1.9rem", + "--animation-input": "0.2s", + "--tab-border": "1px", + "--tab-radius": "0.5rem" + }, + "mainColors": { + "base-100": "#FFF7D2", + "primary": "#A73C5A", + "secondary": "#FFBC55", + "tertiary": "#FF9900", + "neutral": "#4F3000", + "success": "#008060", + "warning": "#FFC453", + "error": "#D82C0D", + "info": "#2E72D2" + }, + "font": { + "__resolveType": "website/loaders/fonts/googleFonts.ts", + "fonts": [ + { + "variations": [], + "family": "Special Elite" + } + ] + }, + "colorScheme": "any", + "mode": "light" +} \ No newline at end of file diff --git a/.deco/blocks/pages-404-480700.json b/.deco/blocks/pages-404-480700.json index 892fd9a..30895c8 100644 --- a/.deco/blocks/pages-404-480700.json +++ b/.deco/blocks/pages-404-480700.json @@ -7,7 +7,7 @@ "game": {}, "name": "

Yay! You found the Capy 🦫

Now help him find all the food it needs.

", "heading": "

Yay! You found the Capy 🦫

", - "subText": "

\n He has been hungry since this time.\n

\n

\n Now help him navigate safely to his home :)\n

", + "subText": "

\n He has been hungry since this time.\n

\n

\n Now help him navigate safely to his home :)\n

", "customizeAssets": { "trex": { "image": "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/11683/78d05b4c-680b-436e-a397-a1dbda2d6be7", @@ -18,12 +18,14 @@ "image": "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/11683/78d05b4c-680b-436e-a397-a1dbda2d6be7" }, "characterSprite2x": { - "image": "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/11683/4ae5657f-673c-4f78-92ee-90ea5e008b06" + "image": "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/11683/4ae5657f-673c-4f78-92ee-90ea5e008b06", + "alt": "hello" } }, "gameProperties": { "acceleration": 0.003 - } + }, + "instructions": "Press 'Space' to jump your Capy and start the game." } ], "seo": { diff --git a/.deco/blocks/site.json b/.deco/blocks/site.json index bf3fbe3..9407540 100644 --- a/.deco/blocks/site.json +++ b/.deco/blocks/site.json @@ -29,6 +29,6 @@ "__resolveType": "site/apps/site.ts", "firstByteThresholdMS": true, "theme": { - "__resolveType": "Neutral" + "__resolveType": "Sunset Glow" } } \ No newline at end of file diff --git a/.deco/metadata/spaces.json b/.deco/metadata/spaces.json index 48b0e56..073f9e0 100644 --- a/.deco/metadata/spaces.json +++ b/.deco/metadata/spaces.json @@ -520,7 +520,7 @@ "content": [ { "type": "stack", - "width": 50, + "width": 60.217983651226156, "isClosable": true, "reorderEnabled": true, "title": "", @@ -541,7 +541,7 @@ }, { "type": "stack", - "width": 50, + "width": 39.782016348773844, "isClosable": true, "reorderEnabled": true, "title": "", @@ -606,7 +606,115 @@ "name": "Themes", "pinned": true, "icon": "palette", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 33.333333333333336, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "themes::Theme%20Selector::palette::Theme%20Selector::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "themes::Theme%20Selector::palette::Theme%20Selector::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + }, + { + "type": "stack", + "width": 33.333333333333336, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "themes::Theme%20Viewer::palette::Theme%20Viewer::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "themes::Theme%20Viewer::palette::Theme%20Viewer::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + }, + { + "type": "stack", + "width": 33.33333333333333, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "themes::Theme%20Preview::palette::Theme%20Preview::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "themes::Theme%20Preview::palette::Theme%20Preview::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "themes::Theme%20Selector::palette::Theme%20Selector::%7B%7D": { "name": "Theme Selector", @@ -615,7 +723,8 @@ "viewId": "Theme Selector", "id": "themes::Theme%20Selector::palette::Theme%20Selector::%7B%7D", "state": { - "__signal": null + "__signal": null, + "value": null } }, "themes::Theme%20Viewer::palette::Theme%20Viewer::%7B%7D": { @@ -648,7 +757,73 @@ "name": "Redirects", "pinned": true, "icon": "redirect", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "redirects::List::list::List::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "redirects::List::list::List::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "redirects::List::list::List::%7B%7D": { "name": "List", @@ -668,7 +843,73 @@ "name": "Loaders", "pinned": true, "icon": "block", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "loaders::List::list::List::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "loaders::List::list::List::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "loaders::List::list::List::%7B%7D": { "name": "List", @@ -688,7 +929,73 @@ "name": "Actions", "pinned": true, "icon": "block", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "actions::List::list::List::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "actions::List::list::List::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "actions::List::list::List::%7B%7D": { "name": "List", @@ -708,7 +1015,73 @@ "name": "Segments", "pinned": true, "icon": "users", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "segments::segments::experiment::segments::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "segments::segments::experiment::segments::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "segments::segments::experiment::segments::%7B%7D": { "name": "segments", @@ -927,7 +1300,73 @@ "name": "Logs", "pinned": true, "icon": "manage-search", - "layout": [], + "layout": { + "settings": { + "hasHeaders": true, + "constrainDragToContainer": true, + "reorderEnabled": true, + "selectionEnabled": false, + "popoutWholeStack": false, + "blockedPopoutsThrowError": true, + "closePopoutsOnUnload": true, + "showPopoutIcon": false, + "showMaximiseIcon": false, + "showCloseIcon": false, + "responsiveMode": "onload" + }, + "dimensions": { + "borderWidth": 8, + "minItemHeight": 10, + "minItemWidth": 10, + "headerHeight": 40, + "dragProxyWidth": 300, + "dragProxyHeight": 200 + }, + "labels": { + "close": "close", + "maximise": "maximise", + "minimise": "minimise", + "popout": "open in new window", + "popin": "pop in", + "tabDropdown": "additional tabs" + }, + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "id": "logs::logs::manage-search::logs::%7B%7D", + "title": "
", + "type": "component", + "componentName": "component", + "componentState": { + "id": "logs::logs::manage-search::logs::%7B%7D" + }, + "isClosable": true, + "reorderEnabled": true + } + ] + } + ] + } + ], + "isClosable": true, + "reorderEnabled": true, + "title": "", + "openPopouts": [], + "maximisedItemId": null + }, "tabs": { "logs::logs::manage-search::logs::%7B%7D": { "name": "logs", @@ -1157,73 +1596,7 @@ "name": "Publish", "pinned": false, "icon": "rocket-launch", - "layout": { - "settings": { - "hasHeaders": true, - "constrainDragToContainer": true, - "reorderEnabled": true, - "selectionEnabled": false, - "popoutWholeStack": false, - "blockedPopoutsThrowError": true, - "closePopoutsOnUnload": true, - "showPopoutIcon": false, - "showMaximiseIcon": false, - "showCloseIcon": false, - "responsiveMode": "onload" - }, - "dimensions": { - "borderWidth": 8, - "minItemHeight": 10, - "minItemWidth": 10, - "headerHeight": 40, - "dragProxyWidth": 300, - "dragProxyHeight": 200 - }, - "labels": { - "close": "close", - "maximise": "maximise", - "minimise": "minimise", - "popout": "open in new window", - "popin": "pop in", - "tabDropdown": "additional tabs" - }, - "content": [ - { - "type": "row", - "isClosable": true, - "reorderEnabled": true, - "title": "", - "content": [ - { - "type": "stack", - "width": 100, - "isClosable": true, - "reorderEnabled": true, - "title": "", - "activeItemIndex": 0, - "content": [ - { - "id": "Publish::Environment::rocket-launch::Environment::%7B%7D", - "title": "
", - "type": "component", - "componentName": "component", - "componentState": { - "id": "Publish::Environment::rocket-launch::Environment::%7B%7D" - }, - "isClosable": true, - "reorderEnabled": true - } - ] - } - ] - } - ], - "isClosable": true, - "reorderEnabled": true, - "title": "", - "openPopouts": [], - "maximisedItemId": null - }, + "layout": [], "tabs": { "Publish::Environment::rocket-launch::Environment::%7B%7D": { "name": "Environment", diff --git a/sections/404Game.tsx b/sections/404Game.tsx index b370659..ed73756 100644 --- a/sections/404Game.tsx +++ b/sections/404Game.tsx @@ -1,5 +1,5 @@ import { useSection } from "deco/hooks/useSection.ts"; -import base64Images from "./imagesAndCss.tsx"; +import base64Images, { backgroundSvg } from "./imagesAndCss.tsx"; import { dinoGameStyles } from "./imagesAndCss.tsx"; // import { TRexGameLogic } from "./dino.ts"; import { useScript } from "deco/hooks/useScript.ts"; @@ -7,28 +7,152 @@ import { useScript } from "deco/hooks/useScript.ts"; import { ImageWidget } from "apps/admin/widgets.ts"; import Image from "apps/website/components/Image.tsx"; +const imagesID = { + x1obstaclelarge: "1x-obstacle-large", + x1obstaclesmall: "1x-obstacle-small", + x1cloud: "1x-cloud", + x1text: "1x-text", + x1horizon: "1x-horizon", + x1trex: "1x-trex", + x1restart: "1x-restart", + x2obstaclelarge: "2x-obstacle-large", + x2obstaclesmall: "2x-obstacle-small", + x2cloud: "2x-cloud", + x2text: "2x-text", + x2horizon: "2x-horizon", + x2trex: "2x-trex", + x2restart: "2x-restart", + offlinesoundpress: "offline-sound-press", + offlinesoundhit: "offline-sound-hit", + offlinesoundreached: "offline-sound-reached", +}; + interface Sprite { base64Sprite?: string; // image?: ImageWidget; alt?: string; - width?: number; - height?: number; + // width?: number; + // height?: number; } +const dimension2x = { + x2: { + obstacleLarge: { width: 300, height: 100, id: imagesID.x2obstaclelarge }, + obstacleSmall: { + width: 204, + height: 70, + id: imagesID.x2obstaclesmall, + }, + gameText: { + width: 382, + height: 48, + id: imagesID.x2text, + }, + cloud: { + width: 92, + height: 28, + id: imagesID.x2cloud, + }, + horizon: { + width: 2400, + height: 24, + id: imagesID.x2horizon, + }, + characterSprite: { + width: 528, + height: 94, + id: imagesID.x2trex, + }, + restart: { + width: 72, + height: 64, + id: imagesID.x2restart, + }, + }, +}; + +const dimension1x = { x1: {} }; +Object.keys(dimension2x.x2).forEach((key) => { + const { width, height, id } = dimension2x.x2[key]; + dimension1x.x1[key] = { + width: width / 2, + height: height / 2, + id: id?.replace("2x", "1x"), + }; +}); + +console.log(dimension1x, dimension2x); + interface Assets { + /** + * @format text + * @description The obstacleLarge is the trees/cactus that you see in the game. Obstacle sprite should be of dimension 150X50px (W x H) for 1x and 300x100px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ obstacleLarge?: Sprite; + /** + * @format text + * @description The obstacleSmall includes smaller obstacles in the game. Sprite should be of dimension 102x35px (W x H) for 1x and 204x70px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ obstacleSmall?: Sprite; + /** + * @format text + * @description The cloud sprite appears in the background. It should be of dimension 46x14px (W x H) for 1x and 92x28px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ cloud?: Sprite; + /** + * @format text + * @description The gameText includes text elements like scores. Sprite should be of dimension 191x24px (W x H) for 1x and 382x48px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ gameText?: Sprite; + /** + * @format text + * @description The horizon is the ground line sprite. It should be of dimension 1200x12px (W x H) for 1x and 2400x24px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ horizon?: Sprite; + /** + * @format text + * @description The characterSprite is the main character of the game. Sprite should be of dimension 264x47px (W x H) for 1x and 528x94px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ characterSprite?: Sprite; + /** + * @format text + * @description The restart button sprite. It should be of dimension 36x32px (W x H) for 1x and 72x64px for 2x. You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ restart?: Sprite; + /** + * @format text + * @description The 2x version of obstacleLarge sprite for high-resolution displays. Dimension is 300x100px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ obstacleLarge2x?: Sprite; + /** + * @format text + * @description The 2x version of obstacleSmall sprite for high-resolution displays. Dimension is 204x70px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ obstacleSmall2x?: Sprite; + /** + * @format text + * @description The 2x version of cloud sprite for high-resolution displays. Dimension is 92x28px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ cloud2x?: Sprite; + /** + * @format text + * @description The 2x version of gameText sprite for high-resolution displays. Dimension is 382x48px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ gameText2x?: Sprite; + /** + * @format text + * @description The 2x version of horizon sprite for high-resolution displays. Dimension is 2400x24px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ horizon2x?: Sprite; + /** + * @format text + * @description The 2x version of characterSprite for high-resolution displays. Dimension is 528x94px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ characterSprite2x?: Sprite; + /** + * @format text + * @description The 2x version of restart button sprite for high-resolution displays. Dimension is 72x64px (W x H). You can create base64 string by using this tool - https://base64.guru/converter/encode/image/png + */ restart2x?: Sprite; } @@ -175,6 +299,7 @@ export interface Props { instructions?: string; gameProperties?: Game; customizeAssets?: Assets; + motivationBehindTheProject?: string; // acceleration?: number; // bgCloudSpeed?: number; // bottomPad?: number; @@ -200,6 +325,32 @@ export default function Section({ instructions = "Press 'Space' to jump your Capy and start the game.", gameProperties, customizeAssets, + motivationBehindTheProject = ` +

Motivation behind - Find my Capy | 404 page game

+
+

+ I wanted to explore the below things deco.cx +

  • + A fun and interactive game (Yes making a working game in deco is + hard :( +
    • +
  • + Make something innovative (in Open category) rather than a simple + boring static regular submission +
    • +
  • + Test if game assets and properties to be fully customizable (in deco admin) +
    • +

    +
    +

    + Submitting this under the open category. I wanted to see whether I + can push the limits of deco's capabilities and create interactive + game website that can capture the keyboard events, mouse events, load game + assets and not just create a static site. +

    +
    +

    Hope you like my Capy :)

    `, }: Props) { /** * useSection is a nice hook for getting the HTMX link to render this section, @@ -216,26 +367,6 @@ export default function Section({ customizeAssets, }); - const imagesID = { - x1obstaclelarge: "1x-obstacle-large", - x1obstaclesmall: "1x-obstacle-small", - x1cloud: "1x-cloud", - x1text: "1x-text", - x1horizon: "1x-horizon", - x1trex: "1x-trex", - x1restart: "1x-restart", - x2obstaclelarge: "2x-obstacle-large", - x2obstaclesmall: "2x-obstacle-small", - x2cloud: "2x-cloud", - x2text: "2x-text", - x2horizon: "2x-horizon", - x2trex: "2x-trex", - x2restart: "2x-restart", - offlinesoundpress: "offline-sound-press", - offlinesoundhit: "offline-sound-hit", - offlinesoundreached: "offline-sound-reached", - }; - const onLoad = (props) => { console.log("Window loaded", props); @@ -303,7 +434,7 @@ export default function Section({ * Default game width. * @const */ - var DEFAULT_WIDTH = window.innerWidth - 20; + var DEFAULT_WIDTH = 600; /** * Frames per second. * @const @@ -2352,99 +2483,184 @@ export default function Section({ } }; - const TCapy = `T-Capy`; + interface CharacterSpriteProps { + size: "1x" | "2x"; + spriteName: string; + } + + const CharacterSprite: React.FC = ({ + size, + spriteName, + }) => { + const dimensions = { + "1x": dimension1x.x1, + "2x": dimension2x.x2, + }; + + const { height, width, id } = dimensions[size][spriteName]; + console.log({ height, width, id }); + + return customizeAssets[spriteName] ? ( + {customizeAssets[spriteName].alt + ) : ( + + ); + }; return ( -
    -
    {" "} +
    + {/* + + */} + {/* */}
    -