work on editing flow and manage page, visual menu improvements

StefanTodoran · Jan 21, 2024 · 15a0da0 · 15a0da0
1 parent a85752a
commit 15a0da0
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 68 deletions.
diff --git a/App.tsx b/App.tsx
@@ -53,6 +53,11 @@ export default function App() {
     // it for the child once the user leaves the play view.
     if (newView !== PageView.PLAY) setPlaytesting(false);
 
+    if (view === PageView.PLAY && newView === PageView.EDITOR) {
+      // If we are coming from PageView.PLAY, playLevel must not be undefined.
+      startEditingLevel(playLevel!.uuid); 
+    }
+
     if (newView === PageView.MENU) { // PAGE -> MENU
       setAnimTo(0, () => setView(newView));
     } else if (view === PageView.MENU) {// MENU -> PAGE
@@ -75,6 +80,9 @@ export default function App() {
         const updatedLevel = getData(uuid);
         const levelIndex = levels.findIndex(level => level.uuid === updatedLevel.uuid);
         levels[levelIndex] = updatedLevel;
+
+        // Refresh this additional state variable if necessary.
+        if (uuid === editorLevel?.uuid) startEditingLevel(uuid);
       } else {
         setLevels(getStoredLevels());
       }

diff --git a/assets/main_theme/delete_icon.png b/assets/main_theme/delete_icon.png
diff --git a/assets/main_theme/save_icon.png b/assets/main_theme/save_icon.png
diff --git a/components/Menu.tsx b/components/Menu.tsx
@@ -46,6 +46,10 @@ export const menuPages = [
 const pageColors = menuPages.map(page => page.color);
 const inputRange = Array.from(Array(pageColors.length).keys());
 
+function createPageOutputRange(activeIndex: number) {
+  return inputRange.map((_, idx) => idx === activeIndex ? 1 : 0);
+}
+
 const activeColor = "#fff";
 const inactiveColor = "#ffffff00";
 function createNodeOutputRange(activeIndex: number) {
@@ -85,13 +89,20 @@ export default function Menu({ openPage }: Props) {
         }} />
 
         {menuPages.map((page, idx) =>
-          <MenuPage
-            key={idx}
-            icon={page.source}
-            text={page.text}
-            callback={() => openPage(page.target)}
-            darkMode={darkMode}
-          />
+          <Animated.View style={{
+            opacity: anim.interpolate({
+              inputRange: inputRange,
+              outputRange: createPageOutputRange(idx),
+            }),
+          }}>
+            <MenuPage
+              key={idx}
+              icon={page.source}
+              text={page.text}
+              callback={() => openPage(page.target)}
+              darkMode={darkMode}
+            />
+          </Animated.View>
         )}
       </ScrollView>
 

diff --git a/components/MenuButton.tsx b/components/MenuButton.tsx
@@ -90,7 +90,7 @@ export default function MenuButton({
       {(icon) && <Image style={styles.icon} source={icon} />}
 
       {!!label && <Text
-        numberOfLines={allowOverflow ? 0 : 1}
+        numberOfLines={allowOverflow ? undefined : 1}
         allowFontScaling={false}
         style={[
           styles.label,

diff --git a/pages/EditLevel.tsx b/pages/EditLevel.tsx
@@ -9,7 +9,7 @@ import GameBoard from "../components/GameBoard";
 import SliderBar from "../components/SliderBar";
 
 import TextStyles, { normalize, sizeFromWidthPercent } from "../TextStyles";
-import { BoardTile, Direction, PageView, TileType, UserLevel } from "../util/types";
+import { BoardTile, Direction, PageView, TileType, UserLevel, createBlankBoard } from "../util/types";
 import { cloneBoard, getSpawnPosition, validTile } from "../util/logic";
 import { colors, graphics } from "../Theme";
 import GlobalContext from "../GlobalContext";
@@ -118,6 +118,14 @@ export default function EditLevel({
     toggleToolsModal();
   }
 
+  function clearBoard() {
+    const newBoard = createBlankBoard();
+    levelCallback({
+      ...level,
+      board: newBoard,
+    });
+  }
+
   const [fuseTimer, setFuseTimer] = useState(15);
 
   if (level === undefined) {
@@ -260,16 +268,27 @@ export default function EditLevel({
           <View style={styles.section}>
             <Text style={[TextStyles.subtitle(darkMode), styles.subtitle]}>Options</Text>
             <View style={styles.row}>
-              <MenuButton onLongPress={() => {/* TODO */ }} label="Delete Level     (Long Press)" icon={graphics.DELETE_ICON} allowOverflow />
-              <MenuButton onLongPress={() => {/* TODO */ }} label="Clear Level      (Long Press)" icon={graphics.HAMMER_ICON} allowOverflow />
-            </View>
-            <View style={styles.row}>
-              <MenuButton onPress={playtestLevel} label="Playtest" icon={graphics.PLAYER} />
+              <MenuButton
+                onLongPress={clearBoard}
+                icon={graphics.DELETE_ICON}
+                theme={colors.RED_THEME}
+                label="Clear Board     (Long Press)"
+                allowOverflow
+              />
               <MenuButton onPress={playtestLevel} label="Playtest" icon={graphics.PLAYER} />
             </View>
             <View style={styles.row}>
-              <MenuButton onPress={() => storeChanges(level)} label="Save Changes" icon={graphics.SAVE_ICON} />
-              <MenuButton onPress={toggleToolsModal} label="Close Menu" icon={graphics.DOOR_ICON} />
+              <MenuButton
+                onPress={() => storeChanges(level)}
+                label="Save Changes"
+                icon={graphics.SAVE_ICON}
+                theme={colors.GREEN_THEME}
+              />
+              <MenuButton
+                onPress={toggleToolsModal}
+                label="Close Menu"
+                icon={graphics.DOOR_ICON}
+              />
             </View>
           </View>
 
@@ -317,8 +336,8 @@ const styles = StyleSheet.create({
     left: 0,
     right: 0,
     bottom: 0,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
+    // borderTopWidth: 1,
+    // borderBottomWidth: 1,
     borderColor: colors.MAIN_PURPLE_TRANSPARENT(0.3),
     alignItems: "center",
     justifyContent: "center",

diff --git a/pages/EditorPage.tsx b/pages/EditorPage.tsx
@@ -57,7 +57,7 @@ export default function EditorPage({
         icon: ListIcon,
       },
       {
-        label: "Editor",
+        label: "Manage",
         color: colors.RED_THEME.MAIN_COLOR,
         icon: EditorIcon,
       },

diff --git a/pages/ManageLevel.tsx b/pages/ManageLevel.tsx
@@ -1,19 +1,23 @@
 import { useContext, useEffect, useState } from "react";
-import { Dimensions, Pressable, StyleSheet, Text } from "react-native";
+import { Dimensions, Pressable, StyleSheet, Text, View } from "react-native";
 import { PageView, UserLevel } from "../util/types";
 import { calcPreviewTileSize } from "../util/board";
 import { normalize } from "../TextStyles";
 import GlobalContext from "../GlobalContext";
-import { colors } from "../Theme";
+import { colors, graphics } from "../Theme";
 
 import SubpageContainer from "../components/SubpageContainer";
 import BoardPreview from "../components/BoardPreview";
 import InputCard from "../components/InputCard";
+import MenuButton from "../components/MenuButton";
+import { updateLevel } from "../util/loader";
 
 const win = Dimensions.get("window");
 
+const deleteLevelText = `Delete Level 
+(Long Press)`;
+
 interface Props {
-  // level: Level,
   level: UserLevel,
   viewCallback: (newView: PageView) => void, // Sets the current view of the application.
 }
@@ -42,45 +46,70 @@ export default function ManageLevel({
 
   return (
     <SubpageContainer center>
-      <InputCard
-        title={level.name}
-        hints={[`Created ${new Date(level.created).toDateString()}`, level.uuid]}
-        fields={[
-          {
-            label: "Level Title",
-            value: levelTitle,
-            update: setLevelTitle
-          },
-          {
-            label: "Designer Name",
-            value: levelDesigner,
-            update: setLevelDesigner
-          },
-        ]}
-        buttonText="Save"
-        buttonCallback={() => {}}
-        buttonDisabled={levelTitle === level.name && levelDesigner === level.designer}
-      />
+      <View style={{
+        marginTop: normalize(60),
+        marginBottom: normalize(50),
+      }}>
+        <InputCard
+          title={level.name}
+          hints={[`Created ${new Date(level.created).toDateString()}`]}
+          fields={[
+            {
+              label: "Level Title",
+              value: levelTitle,
+              update: setLevelTitle
+            },
+            {
+              label: "Designer Name",
+              value: levelDesigner,
+              update: setLevelDesigner
+            },
+          ]}
+          buttonText="Save"
+          // @ts-expect-error We just want to update these two properties, which both exist on UserLevel.
+          buttonCallback={() => updateLevel({ uuid: level.uuid, name: levelTitle, designer: levelDesigner})}
+          buttonDisabled={levelTitle === level.name && levelDesigner === level.designer}
+        />
+
+        <Pressable
+          style={{
+            position: "relative",
+            transform: [{ scale: previewPressed ? 0.99 : 1 }],
+          }}
+          onPress={() => viewCallback(PageView.EDITOR)}
+          onPressIn={() => setPreviewPressed(true)}
+          onPressOut={() => setPreviewPressed(false)}
+        >
+          <BoardPreview level={level} previewSize={3} previewWidth={previewWidth} />
+          <Text style={[
+            styles.previewOverlay,
+            {
+              borderRadius: tileSize / 5, // Same value as GameBoard borderRadius.
+              backgroundColor: darkMode ? colors.OFF_WHITE_TRANSPARENT(0.45) : colors.NEAR_BLACK_TRANSPARENT(0.45),
+              color: darkMode ? colors.NEAR_BLACK : colors.OFF_WHITE,
+            }
+          ]}>Edit Board</Text>
+        </Pressable>
 
-      <Pressable
-        style={{
-          position: "relative",
-          transform: [{ scale: previewPressed ? 0.99 : 1 }],
-        }}
-        onPress={() => viewCallback(PageView.EDITOR)}
-        onPressIn={() => setPreviewPressed(true)}
-        onPressOut={() => setPreviewPressed(false)}
-      >
-        <BoardPreview level={level} previewSize={3} previewWidth={previewWidth} />
-        <Text style={[
-          styles.previewOverlay,
-          {
-            borderRadius: tileSize / 5, // Same value as GameBoard borderRadius.
-            backgroundColor: darkMode ? colors.OFF_WHITE_TRANSPARENT(0.45) : colors.NEAR_BLACK_TRANSPARENT(0.45),
-            color: darkMode ? colors.NEAR_BLACK : colors.OFF_WHITE,
-          }
-        ]}>Edit Board</Text>
-      </Pressable>
+        <View style={styles.singleButton}>
+          <MenuButton
+            onPress={() => { }}
+            label="Share Online"
+            icon={graphics.LOAD_ICON}
+            theme={colors.GREEN_THEME}
+            disabled
+          />
+        </View>
+        <View style={styles.singleButton}>
+          <MenuButton
+            onPress={() => { }}
+            icon={graphics.DELETE_ICON}
+            theme={colors.RED_THEME}
+            label={deleteLevelText}
+            allowOverflow
+          />
+        </View>
+      </View>
     </SubpageContainer>
   );
 }
@@ -100,4 +129,10 @@ const styles = StyleSheet.create({
     fontSize: normalize(32),
     letterSpacing: 1,
   },
+  singleButton: {
+    paddingHorizontal: "22.5%",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
diff --git a/pages/PlayLevel.tsx b/pages/PlayLevel.tsx
@@ -136,7 +136,7 @@ export default function PlayLevel({
 
   useEffect(() => {
     panResponderEnabled.current = !game.won;
-    if (game.won && !level.completed) markLevelCompleted(game.uuid);
+    if (game.won && !level.completed && level.official) markLevelCompleted(game.uuid);
   }, [game]);
 
   // More player input state, we use these to keep track of double taps. We need to know

diff --git a/pages/StorePage.tsx b/pages/StorePage.tsx
@@ -21,8 +21,7 @@ export default function ({ }: Props) {
       </Text>
 
       <View style={styles.row}>
-        {/* <Text allowFontScaling={false} style={styles.coinsText}>{balance}</Text> */}
-        <Text allowFontScaling={false} style={styles.coinsText}>231</Text>
+        <Text allowFontScaling={false} style={[TextStyles.paragraph(darkMode), styles.coinsText]}>{balance}</Text>
         <Image style={styles.icon} source={graphics.COIN} />
       </View>
     </>
@@ -39,7 +38,7 @@ const styles = StyleSheet.create({
     width: normalize(40),
   },
   coinsText: {
-    color: colors.DIM_GRAY,
+    marginBottom: 0,
     fontSize: normalize(25),
     fontFamily: "Montserrat-Regular",
     fontWeight: "normal",

diff --git a/util/database.ts b/util/database.ts
@@ -38,9 +38,8 @@ export interface UserLevelDocument {
   id: string,
   name: string,
   board: string,
-  user: string,
-  created: Timestamp,
-  likes: number,
+  designer: string,
+  shared: Timestamp,
   downloads: number,
 }
 

diff --git a/util/loader.ts b/util/loader.ts
@@ -35,7 +35,6 @@ export function setData(key: string, value: any) {
   const jsonValue = JSON.stringify(value);
   try {
     storage.set(key, jsonValue);
-    console.log("Successfully set", key, "<-", jsonValue);
     return true;
   } catch (err) {
     console.error("Error completing setData command:", err);