REACTIVE UI | Midterm Project | myContact

Project Title: myContact

Link to Github

Functionalities: My midterm project is a simple mobile contact app. It basically contains a homepage with a list of contacts and a detail page for any selected contact. In the home page, the user can get access to particular contacts by searching or jumping to initials. Using the Tag button, the user can do filtering by selecting the tags they want from all tags. Also, the user can easily deselect the filters without opening the filter menu again. Using the Options button, the user can choose the preview mode and sorting method of the contact list, and also the color style of the whole app. Using the Add button, the user can see a page where a new contact is supposed to be added (actually it is not functional now). By clicking on a contact, the user can enter the detail page. In the detail page, full information about the contact is shown.

the Detail Page

Features: I call the app myContact because one main thing I want to elaborate here is the user’s control over this app. When I use mobile apps at ordinary times, I always like to play with the buttons that can change the look of the app. Therefore, I would like to offer my users some choices about what content and what style they would like to see. In the meantime, I realize it is equally important not to give users too much work so that they get confused. That’s why I hide the “options” menu in a button. I use a clean, clear, and pretty traditional layout to enhance affordance and accessibility of the functionalities.


different color styles: clean, warm, and night

Target Users: The target of myContact is the general public. It would be suitable for different groups of people since the user can choose whether to display email, address or phone number in the preview. In the ideal situation, the user would be able to add other properties (birthdays, companies, etc) to the contacts. Also, the user would be able to add tags to group the contacts.


1. Learning & Research: As a beginner of the mobile app design, it’s important to know where to start. Besides the instructions that we were given on the class site, I also found this article to be useful: 10 do’s and don’ts of mobile UX design. I got to know the importance of the procedure: research – target – functionality – visual design. I downloaded quite a few mobile contact apps and looked into how they are constructed. This list includes Simpler, SimpleContact, and FullContact. In my competitor analysis, I compared their pros and cons, and gradually got the shape of what I would like to make. For example, according to my observation, many contact apps can do sorting/preview/styling in different ways, but the buttons for these function are dispersed are hard to find. Therefore I decided to make these options all on one options page within different columns.

All Display Options in One Menu

2. User Stories & Functionality Design: I prioritize the functionalities of my contact book and listed them into several user stories, as can be seen in my User Stories post.

3. Visual Design & Mock-Up: Many people say that they like to do coding for the functionalities first, and then the styling. For me, it just feels right to do pure visual design before any coding. Designing the layout helps me understand the structure of the app and the order of each component. It has also been a great learning opportunity for me. I spent half an hour learning how to use Adobe Experience Design, and found it super convenient. Deciding the color and layout and getting accurate color and pixel values by simply picking colors and moving elements spares the efforts for me to adjust everything bit by bit in CSS. I have to thank my friend who gave tons of feedback about the visual design. Thank you, Carol, Leah, and Demi!

One edition of the mock-ups that I did in Xd

4. Coding: Coding is the main task of this project so it’s very complex in detail. Therefore, I’ll just talk about the essential things I did, and some challenges for me.

Essential Things:

  • Component! Make every repetitive part a component, in order to keep the structure efficient and organized. My components include the contact card, the option in the options menu, the tag in the filter menu, the little filter button on the top, the letter button in the sidebar, etc.
  • Route and Link! Since I don’t want the page to render every detail page every time, I link every contact to their detail page using Route and Link.
  • CSS! I implemented the CSS part according to my design in Xd after all the React part is done. I would like to say it again that it’s super convenient to just copy and paste the values I got in Xd to the CSS.


  • Jump to contacts beginning with a certain initial letter: I wanted to realize the effect that the user can jump to contacts with certain initials when a letter button is clicked. To achieve this, I give each contact an id that equals to its initial letter when the contacts are mapped out in the render. I make the letter button to be: <a href = “#{that letter}”>{that letter} </a>. When clicked, the first element with the corresponding id will go to the top of the page. Then, a question aroused. Since the top bar of the whole page is fixed, how can the first element with that initial letter lie below the top bar? I googled for the solution and found this article helpful: Anchor Links with a Fixed Header. The solution is quite simple, it’s to add an invisible div above the element.
  • Add different color styles: This task was a little bit time-consuming (just a little bit). The method I chose is to hold a state called this.state.colorStyle in App.js, and pass it to every component. Then, I add the corresponding class to every element. In CSS, I use “.ClassName.ColorStyle” to change the color style of every class. A tricky thing here is that when I use a picture of the icon, I cannot change the color directly. I learned how to use “filter: hue-rotate()” to change the hue.
  • Choose multiple filters: In my app, the user is able to select multiple filters. The relation between every filter is “or” but not “and”. This thing is a little bit tricky since I have to filter out every contact that can match any one of the filters. To achieve this, I made an empty array to hold the selected filters in the state. I add the filter to the array when the filter is selected, and remove it when it is deselected. Then, I loop through all the filters in that array and return the contact when it matches one of them.














Choose Multiple Filters

  • Change the background color of the Body: I found it quite hard to change the background color of the whole body, which will be seen when scrolling up or down. I found this article useful: Change Body Class React

Looking back on the user stories I wrote now after I finished the project, I think I accomplished most of my imaginations. I tidied up some of them and added some new thoughts. I have to admit that I was a little bit too ambitious at the beginning, thinking I could even sort the contact by contact frequency. Also, three color styles are a huge amount of work… Anyway, I’m quite satisfied with the efforts I put into this project and the effects I have achieved. If I have more time, I’ll implement the functionality to add new contacts.

Midterm Artgame Proposal Update & Documentation (Krom)

Proposal (Updated One)
Project Title: the 3S
Brief Description
The 3S is a game that wants to show how a student manages to handle the balance between Study, Social, and Sleep, the three main parts of college life. It takes the form of a 2D platformer, with a student as the main character whose movement can be controlled by the player. The study, social, and sleep parts of the student’s life are represented by different activities on different platforms. The student can jump between those platforms. The results of experiencing the three activities are inter-related. Each activity has an advantage that triggers the student to do it while spending unequal time on the three leads to bad results. The objective for the player is to help the student maintain a balanced life through a semester.
I got the inspiration for this game from my daily life, which is a living example of the 3S dilemma. I thought the 3S was some cliche before I came to college, but things turned out exactly like that. The needs for the 3S are equally important and inter-related. If I’m not aware of the decisions I’m making about which type of activities I should do, it’s easy for me to stick to one thing and forget the others. For me, the most important goal in student life is to get good grades and produce good works. I often underestimate the need for social and sleep, but in the meantime unconsciously spending much time on them. Once I break the balance between the 3S, it takes quite a while to get my feet back on the ground. The strategies I’ve been taking is to remind myself to be aware of the decisions I’m making, stick to the plan, and forget about my previous fault (otherwise the anxiety keeps me from doing things).
Goal & Purpose
Besides letting the player experience the typical life of college student and its hardness in choice-making and balance-maintaining, this game is also a work full of self-expression and emotion-outlet. I would like the player to feel the inner needs of the student to do the study, social, and sleep, and how the student lives cautiously to fulfill these needs. Besides, I would show the feeling of anxiety and depression caused by the disorder in life, and the urge to right the wrong. To provide such experience, I will make it easy to keep doing one activity and hard to transform from one to another, which is to simulate real life, it’s easy to stay up late and wake up late. I will focus on showing the interrelation between these three activities, about how they influence each other. The rules will be put in an implicit way, left for the player to experience and explore. I choose the form of the 2D platformer to serve several intentions. First, different platforms can represent different activities, and the student’s jump between them represents the switch in the state. Also, the three kinds of platforms will be vertically distributed, with Sleep at the bottom, Social in the Middle and Study at the top. The order corresponds to the hierarchy of needs: from the basic to the ultimate. The platforms provide various possibilities for the variables in the game. For example, the accessibility of one activity can be adjusted by the number and distance of the platform. I would like to integrate my strategy to do the balance into this game. I would also let the player explore the strategies and find their own patterns. Concerning aesthetic approaches, I will choose the comic-like style that can show the facial emotion of the student and the functionality of every platform.
Design & Production
There is a “deadline” on the right of the game interface, that’s slowly moving leftwards. The deadline has different names each time, indicating different tasks and different periods of the semester.
The three kinds of platforms:
  • The student can collect books on the Study Platform
  • The student can collect friends on the Social Platform
  • The student can collect pillows on the Sleep Platform
The interrelations:
  • Collecting books can gradually break the deadline. Otherwise, when the deadline reaches the student’s position, the student will be dead.
  • The student needs some social life to maintain the mood and gain the sense of existence. If the player does not collect friends for a long time, the frame will become dimmer and the student will gradually disappear.
  • The student needs rest to keep functioning. The pillows can help the student gain energy and makes the student move faster. If the player does not collect pillows for a long time, the student will stop and fall.


Some other possible thoughts: To highlight the difficulty to gain back the balance once it is broken. The distance between platforms can be changed. For example, if the student stays too long on the Study Platform, and keeps going higher and higher, the player will find it difficult to go back into the ground again.


Game Art Assets: I will look for some free artworks online, and create some of my own.


  • If the player manages to survive final deadline, it’s the winning ending.
  • If the player does not let the student sleep, the student will move slower and fall.
  • If the player does not let the student social, the student will become transparent and disappear.
  • If the player does not let the student study, the deadline will kill the student.

Documentation After Finishing the Game

the general layout of the game scene


Generally, the final outcome of this game meets my previous expectations. There are some aspects that particularly work well. The main intention that I’ve been trying to convey through this game is proven to be accessible and understandable by the active exploration of the player. There is no instruction offered, leaving the player freedom to do experiments, just like what we do in real life. The importance of the balance between the 3S and the difficulty in maintaining it is expressed in a rhetorical but not arbitrary way. When first entering the game, it’s easier for the player to mainly focus on collecting books, since there are only indicators that urge them to care about the book (the timing and the count). After some time, Social and Sleep’s impact on the character gradually become visible.

During playtesting, I was happy to see how my friends got panicked upset when they found that they can’t keep the character from disappearing/walking slower because of the previous choices they made. The dark and intense background music as well as the bloody losing scene also increase the feeling of anxiety, which I would like to build. It is designed for the player to learn from failures and develop their own strategy to solve the 3S dilemma. The proportion of the 3S’s influences are delicately arranged so that they are equal.

If I have more time, I will adjust the color and size of the text a bit, right now it’s sometimes not very clear. Also, I would complete the background image.

one miserable & funny losing scene

Changes that I made

Compared to my proposal, there are two main changes about the gameplay that I made after Sarah’s critique. First, I changed the platform distribution. I previously wanted the three kinds of platforms to be vertically distributed, with Study at the top and Sleep at the bottom. There are some problems with this layout setting: the character will have to go through the Social platform when transferring from Study to Sleep. Also, collecting books will become very easy. Sarah suggested that I make them randomly distributed in a fixed space, which turns out to work well. In this setting, the user has to find the nearby platform they need and manage to reach there. Second, I changed the way the deadline approaches. This change also makes the gameplay clearer, by simply suggesting the remaining time by text. (I kept the physical deadline just for fun).

While playtesting, my friend Shiny suggests that I change the collectible items of Social to cocktails instead of teacups or friends, and I listened to her advice.


  1. Build the Gameplay & Logic
  2. Draw/Adjust the Art Assets: I drew the main character on the paper and added color to it using PS. I collected some open source assets from the Internet and managed to give them the same style using PS.
  3. Animation: I watched some tutorial videos of making the simple animation in Unity. I drew this sequence and it works quite well.
  4. Creating platforms & using Sprites. The sample 2D platformer game only has one type of platforms. I created three types of platforms and managed to arrange their positions correctly so that the space between every platform would be okay to jump across. In the script, I let the system randomly decide which type of platform to produce every time (within the maximum number).
  5. Creating prefabs as the collectible items. Each collectible item is an instance (clone) from a prefab. The prefab clings to the corresponding platform.
  6. The UI system. Display the number of the books collected and the remaining time on the canvas.
  7. Navigate the change of values (the character’s energy and transparency). Relate the values to the behavior of picking up items.
  8. Different Results/Endings. Determine what will happen when one side of the balance falls. Specify different ending scenes in different functions (loseEnergy(), loseTime(), etc).
  9. Add Levels. Add scenes that tell the level, and initialize all the values and behaviors when switching to another level. Change some values (platform number, total time, etc) according to the level number.
  10. Playtesting. Adjust details bit by bit through the long process of playtesting.


  1. Creating art assets. I spent some time searching for an ideal character before I decided to draw it on my own. I don’t draw very much and that’s pretty challenging. I enjoyed the process and I’m happy that my drawing integrates to the overall style and concept of the game.
  2. C#. Since I have to handle a lot of values and scenes in the script, I did quite a lot of coding. I was very unfamiliar with the syntax of C#, and I made many mistakes. Thanks to Google and Unity Answers, now I know a lot better.
  3. Platform distribution: At every platform position, the probabilities of producing a Study, Social and Sleep platform are the same. The distance between every platform and every layer of platforms should be just right. It required some little skills in coding. The random distribution of the platform and the random number of the collectible items represents the changes and uncontrollability of life.
  4. Add levels. I always forget to change some settings back to the initial in the Init() function. Also, many problems were caused because that I choose to code the transition in levels. One thing that kept bothering me is that the uncollected items from the last scene remain on the page. I had tried various ways to destroy them but failed. Dave helped me out this evening, we did many testing and experiments and finally figured out the reason. Suppose I have an array that holds all the platforms, when I destroy the platforms in the last scene, I actually do not remove that thing in this array. Therefore, when I later reproduce collective items on platforms, some will appear out of nowhere (out of the destroyed platforms). We used some tricks to fix that.

Lessons Learned

  1. Never focus on the visual parts or the animation too much before the basic gameplay is complete. I spent too much time on creating and remaking art assets. Therefore, I had to stay up late afterward. It seems ironic to me that I frequently jump into the dilemma in this game when I was making it.
  2. Don’t hardcode the levels. Actually, I could use Scenes to differentiate the levels, but I just chronically started to code it… I should take advantage of what Unity can do, and look up some example first!
  3. 90-90 rule. The last 10% of work will take another 90% of time… Always think ahead and don’t be too optimistic about the time I have.


REACTIVE UI | Week 5 | Competitor Analysis and User Stories

Competitor Analysis:

  • FullContact:   This contact book offers both PC and mobile apps. It features in combining and syncing all your contact information from different accounts (Google, Microsoft, Mac Address Book, 360, etc). Its functionalities are rich, allowing the user can add profiles, photos, and tags to the contacts. The layout is quite organized. For the contact list, it provides different sorting methods (first name, last name, date added or updated) and views (first name first or last name first). One thing that could be improved is that detailed information page of a contact is not clean enough. For every contact, it has empty columns such jobs, phone number, googleTalk, homepage, address and even birthday to be filled. These empty columns only make the important information unclear. It would be better is these specific columns can be chosen and added by an add button manually when needed. In addition, the interface contains three big columns in total, it would be better if the user can hide the column on the left when needed.


  • Google Contacts:  The interface of Google Contacts is similar to Gmail. The contact name and some brief information (including email address, phone number, and address) go in one line, making it look like an old telephone book. This design makes it easy for eye-searching and quickly grabbing a piece of information. It also offers additional functions such as groups and circles, which are closely connected to other Google apps such as Gmail. One shortcoming is that some contacts have phone number and address, while some have not. Therefore, the interface looks a bit messy. It would be better if the user can choose whether to display the phone number and address or not.


  • Mac Built-in Contact Book: This contact book doesn’t have the problem I mentioned in FullContact, the columns on the right information page can be modified manually. The listing of contacts follows the alphabet in a clear way, but there’s no way to change the sorting order. Another thing problematic is that there’s too much empty space in the information page on the right, while the contact list on the left is very tight. It would be better if the contact list column is made larger, and includes some basic information. That way, there’s more balance in the distribution of space. It would also be great if the user can change the font size (zooming in or out), in order to make the list more readable.

  • Simpler Contacts: This contact book is an IOS app. Some of its features different from IOS built-in contact include merging duplicates, grouping, filter options and photo display on the contact list. The thing that falls short is that it doesn’t have functions like adding tags and social account integration. Also, there are no alternative sorting methods. Another thing is that, as can be seen in the screenshot, I don’t add photos to most of my contacts. The substituting letter looks dumb and unnecessary. It would be better if the user can choose whether to display the photo or not.

User Stories:

  • As a user, when I open this address book interface, I see a list of contacts with their names and email address.
  • As a user, when I clicked into a contact, I see the full information about him or her, including the email address, the address, the phone number, and any other thing that I put there.
  • As a user, when I type into the search bar, I find the contact I want quickly.
  • As a user, when I click on the a-z/z-a button, I can switch the order the contacts are listed.
  • As a user, when I click on the “All Contacts V” button above the contact list, I see the country options. I select one country option, and I see only the contacts from that country.
  • As a user, when I click on the view-option button, I see some options for me to change the view of the interface.
  • As a user, when I click on the option to show the address, I see the address instead of the email address in the contact list, and the rest in the same manner.

Analysis of a Game: Aether (Krom)

When I thought about artgames at the beginning of this semester, only Monument Valley came into my mind. The reason is quite simple: my previous understanding of artgames is games that involve traditional arts in them, which means visually beautiful design and exquisite conception. After finishing our readings and lectures, I got to know how delicate visual effect may not be necessary for an artgame. Instead, the meaning delivered through the interactive feature of game is what matters in forming an artgame. Except for those examples given in class, I always wanted to discover a game I like that conforms to that theory, and I finally succeed when I found Aether.
When I was looking through “the list of games often called art games”, I noticed Aether because of its name. Aether, the imagined material that fills the void of the universe. What does this name suggest? How could the author relate this poetic but grand concept into a game? After all, Aether is quite easy to explain if we want a brief description: It’s a 2D adventure game made by Edmund McMillen and Tyler Glaiel, released in 2008. The player needs to help a lonely boy and his monster pet travel to different planets and solve one puzzle on each of them. Seemingly easy, the gameplay of Aether is actually quite ingenious. The game begins with a short poem and some pictures, explaining how the lonely boy and the monster met and their plan for adventure. Starting from earth, there are four monochrome planets for the boy to explore. The basic procedure of visiting one planet includes three steps: leaving one planet, launching towards another, and solving the puzzle. To leave a planet or move in its atmosphere, the boy clings to the clouds and swings around them with the long tongue of the monster pet. The space travel is made possible in the same way, with attachment to asteroids instead of clouds. There is little gravity in the space so that only pressing ASDW keys can also make the boy move forward. The directions of the planets are suggested by little symbols which the boy can follow. Every planet has some sad or worried characters with a line or two. The player needs to actively find out the hidden puzzles, which are in general performing certain actions. Some changes will happen to the planet when the puzzle is solved, bringing life and color back again. The end comes when all puzzles are solved and the boy comes back to earth.
In a post by Edmund McMillen about this game he made, he says that the game idea came out of his childhood memory. “It’s about childhood and escapism … it exposes a lot of fears I had when I was a child”. I would say Edmund is quite successful in carrying out this idea. Space adventure may feel exciting in some other games, but here, the flowing piano music and the slow floating movement under a dark canopy filled with faraway stars would only give the impression of lonely imaginations. Some design in this game is even hard to understand when treated as a single element, for example, the gray color style, the barren planets with weird creatures, the puzzles that are hard to find, the movement which is somewhat difficult to control, etc. However, when they come together, they successfully raise the player’s emotional resonance about loneliness, nervousness, fear and also hope.
According to John Sharp in Works of Game: On the Aesthetics of Games and Art, as common games often model physical and social phenomenas, artgames “model ideas and concepts”. For passage, the concept may be the journey of life and choices in life. For Aether, it may be the unchanging lonely state of human from child to grown up, and the quietly following inner hope for there to be something or someone that one can relate to. Sharp continues to argue that “artgames are highly stylized systems, using abstraction, allegory, and metaphor to create an idea space that player can explore by engaging with the system through its game mechanics”. In my view, Aether fulfills such criteria, and I’ll continue to explain in detail about how I think the storytelling and characters, the visual and audio style, and the overall mechanics of this game poetically serve its meaning delivering.
The beginning poem is the first thing that differentiates it from others. It contains ten strophes in total, which seems a bit long for common background setting use. The rhyme, together with the rhythm of the background piano, settles the sad poetic feeling. When imaging others in the space, the boy asks himself, “Could they all be as lonely? Or am I the one and only? Would the people on earth really care?” By storytelling in the form of a poem, the message of the game is already given: it is an allegory of the alienation in our life, an abstraction of our isolated feeling, a metaphor of the part of our soul that remains to be that little boy. One thing distinct is that in real life the monster pet is only in our imagination, which contributes to the charm and attraction of the game world.

The visual and audio style also benefits the communication between Aether and its player. The wash-out color style goes through the whole journey. Even when the puzzle is solved and colors are added to planets, the visuals remain low-saturated, creating a dreamlike atmosphere. The planets, though various in terrain, are generally barren and small, enhancing the misfit of the creatures living there. For example, the earth in the game is in no sense simulating the real earth: the boy can walk around it very quickly, and there are no other living things except some wordless birds. The existence of the boy and the monster becomes so prominent, so lonely and insecure. The picturing of the earth is how the boy feels it in his self-consciousness, without anything he can relate to. On other planets, the inner anxiety of the boy is also expressed visually through the unwelcome faces of the creatures. For the audio aspect, the looping piano music accompany all the way like a haunted sadness. Besides, every planet has its own soundtrack. The sound is sometimes the hint of the puzzles, making the puzzle solving experience smooth and immersive.


One controversial part of Aether is its motion control. As player StaceyG says in his review post, “The somewhat clumsy physics of the tongue while swinging makes it difficult at times to build momentum …  staring off is the hardest part to get used to”. When I played it for the first time, it took me quite a while to understand how to swing upwards. However, I figured out later that the control has something to do with the overall interaction mode in this game. The physics runs a bit different from normal digital games, where A makes the character run leftward and D rightward. The ASDW keys only produce forces here. Therefore if the player what the boy to spin around a moon with the monster’s tongue, it requires actively changing the keys. Push D and W first to make the boy go in the upper right, then change into A and W at a certain peak position that force can cause. After I understood the physic rule, the control became actually quite easy.
I couldn’t help wondering why Edmund chose to use this kind of physics. His probable intention becomes clearer as I get more familiar with the game mechanics. Forces play an important role in Aether. The leaving effect is the gravity-defying process. Solving the puzzles on the planets deals with similar things: One planet is filled with water, and the player has to play with the buoyancy. Another one is shrouded in a green atmosphere with a weird gravity, making the boy hard to move upward. If Edmund did not choose the real-like physics in the control part, there won’t be the subtle frustrating feeling of escaping from outer forces, which makes the game mechanics more consistent with its message.
Another prominent feature of Aether is that all its puzzles are hidden. Some of them are pretty intuitive, like on the water planet, the task is to eat all the fishes. Some are harder to discover. In one setting, there’s only one creature on the planet, saying that “They all think I’m dumb” and “One day I’ll be great to show them all”. These words are quite confusing at first. But when the player jumps on the clouds around the planet for a while, he or she will see that there are four moons above the planet, all of which making comments about that little creature. The thing to do is to stand on the moon, forcing them to fall. This could be interpreted as a way to help the creature. The hidden puzzles make the player feel lost at first, but begin to make more sense with more thought and observation. Couldn’t it be understood as a metaphor for the boy’s attempt at communication? Hard at first but accomplishable with patience and persistence.
After so much analysis, let us go back to the name of this artgame, Aether. I feel like the interpretation is left for openness. Aether symbolizes space, but unlike the void, it conveys meanings. In my mind, the imagination of aether fills the emptiness of a lonely child’s heart.
McMillen, Edmund (2008-09-03). “Aether”. Cryptic Sea
Sharp, John. Works of Game: On the Aesthetics of Games and Art. MIT Press, 2015.
StaceyG (2008-09-03). “Aether”.

REACTIVE USER INTERFACES | Week 4 | Lifting State Up


This week’s assignment asks us to create a poster that can change dynamically according to the input information on the left. I create two components to hold the input boxes and the poster elements respectively. I name them “Input” and “Display”. Since child components cannot talk to each other directly, the very important thing is to pass the information from the child “Input” to the parent “App” and let it pass it to another child “Display”. The way to store the input information is through “state” in “App”.


  1. Create the “Input” component and make it talk to the parent. In “App”, I create three input objects dynamically using the map function, giving them different labels and an “onChange” function. In “Input”, I create an onChange function so that whenever the input information changes, it calls the onChange function in “App” with parameters suggesting the label (which input box changes) and the input information.
  2. Create the “Display” component and make it listen to the parent. In “App”, I create three substates named “eventName”, “location” and “time” in order to store the input information in each box. I create three “Display” objects dynamically and give each of them two properties: a class name for CSS’s sake, and the content, which listens to the substates mentioned above. “Display” is a very dumb component simply for display.
  3. CSS Part, which is less significant.


Analysis of a Game: the Magic Cat Academy (Krom) | Chuyi

The Magic Cat Academy is the Google 2016 Halloween Doodle Game. On that exact day two years ago, it appeared just above the search bar at the Google front page and caught my eyes instantly. I still remember how it broke my study plan by costing me one full hour drawing simple symbols on the trackpad. It’s true that the Magic Cat Academy is a casual game suitable for someone without any gameplay experience (like me) to play. However, the reason why it attracts me so much is exactly how it integrates simplicity and completeness in one, and how it embodies meaningful play through simple but powerful expression.
 jjjthis is space
The background story of the Magic Cat Academy is set through a short animation at the beginning of this game. On a Halloween night, a big ghost attacks the Magic Cat Academy and steals the master spell book. The player has to help the little cat repel all the ghosts by spell casting so that she can get the spell book back. Every ghost has special symbols above its head, in the shape of “ | ”, “—“, “^” or “v”. The player helps the cat swipes her magic wand by drawing the corresponding symbol using the mouse. There are five levels in total, with different backgrounds, ghosts, and difficulties.
 jjthis is space
The instruction given by the game is just one simple sentence: “Defeat a ghost by drawing its symbol anywhere”. However, the actual rules are more complex than this. The cat has five lives in total, and if they are all lost, the player will lose the game. The ghosts are approaching the cat at different speeds and must be defeated before they reach the cat and take one life of her. Another hidden rule is that when a little pink heart symbol appears at the left of the screen, the player can gain one life back by drawing a shape of the heart. Getting these two hidden rules are pretty intuitive. From the top-left corner of the game, the player can see that there are 5 heart shapes, representing 5 lives. Once a ghost reaches the cat, a heart will break and disappear. If the player draws the heart shape when the heart symbol appears, one heart will be back. Both the heart shape and the approaching ghosts can be considered nature simulation taken from the real fighting scene, and therefore make it easy for the player to grasp the concept.
 jthis is space
Some other hidden rules require more observation to discover. For example, the scoring system of the Magic Cat Academy works in this way: if you draw one symbol to hurt a normal ghost, you will get 10 scores, but if two ghosts have the same first symbol, they will both get hurt and you will get 30 scores in total, and so on. Another one is that if you draw correctly continuously the system would count the times and give you extra scores for that. I discovered these rules when I played through the whole game twice but got different overall scores. Then I noticed how the score changes over time and the little bar that counts your continuous correct times at the bottom.
 jjthis is space
this is space
The objectives of the Magic Cat Academy is for the player to get through all 5 levels by defeating all the ghosts, and the main action the player takes to reach the goal is to draw symbols that match the ones on the ghosts’ heads. The choices the player can make are basically what to draw and when to draw. According to “What is a Game?” in Understanding Video Games, the Magic Cat Academy should be categorized as a single-player action game, whose “criterion for success is motor skill and hand-eye coordination”(48). Indeed, the play’s reaction is crucial to winning this game, and the intensity created by defeating the approaching ghost is what makes the game appealing. Still, unlike traditional action games that require nothing but skills. The Magic Cat Academy secretly offers players opportunities to make choices and using strategies, which brings about more player involvement.
 this is space
As I mentioned, every ghost has one or more special symbols above its head, and the symbols will disappear from the left side as the player draws corresponding symbols. One single spell can function on several ghosts sharing the same first symbol. Therefore, the player can outwit the ghosts by taking the most efficient drawing order. For example, when one ghost has a list of symbols like “ — | v ”, and another one has “ ^ |”, the fastest way to defeat them is to draw “ — ” and “ ^ ” first, and then “ | ” for a double kill. This hidden feature adds another layer of interaction between the player and the game system.
 this is space
The relationship between actions and outcomes is quite clear in the Magic Cat Academy, and it conforms to both the descriptive and the evaluative definition of the meaningful play defined by Katie Salen and Eric Zimmerman in “Rules of Play: Game Design Fundamentals”. The instant outcome of an action is discernable in many ways. Once the player draws a correct symbol, the actual outcome is that corresponding symbols will disappear immediately, and a ghost will disappear when all of its symbols die out. The visual intensification is that the ghost that got hurt will give a painful face, while the sound hint is a whine when a ghost is killed. Also, the score you get will go up. Regarding how the outcome is integrated into the whole game system, the drawing actions serve as a way to put the game forward. Only by defeating the ghosts at the current level can the player enter the next level and get closer to the big ghost that steals the spell book. The structure of the Magic Cat Academy seems very clear and organized to me. The levels are properly layered. The difficulty difference between those layers lies in not only the speed and amount of ghosts but also the type of them. There are ghosts that can move back and force, ghosts that can reproduce the symbols above its head, and ghosts with extremely long lists of symbols. Different combinations of these ghost enemies also make the game more fun.
 this is space
Though I’ve praised the Magic Cat Academy a lot for its simple but elegant game design, I have to say that what makes this game so special is its Halloween theme. The Google Doodle group who made this game talked about how they thought of the magic school, spell-casting and ghost objects to fit the game elements into the Halloween context. The jingling background music, the cute and dark visual style, and the cat character form a consistent Halloween feeling together. Therefore, the meaning of this game extends from a pure action pleasure to a festival experience.
 this is space
One interesting fact is that the feeling that I had when I played the Magic Cat Academy for this analysis is very different from when I first played it on the Google front page. As I played it intentionally for several times, I got bored because the five levels remain exactly the same every time. Later when I thought about this, I found that it’s not necessary a bad thing for a Google Doodle game! The fact that this game is built to put on the front page obscures the distinction between the search engine and the playground. The game suitable for the search engine playground may need not to be time-consuming and complex, but smart and simple.


This week’s assignment asks us to create multiple buttons that are clickable are able to cause several updates when clicked. Starting from the code we built in class today, I mainly took three steps to complete this assignment.

Step 1: Make three clickable buttons that can update the display content below.

The important thing is the concept that we use the label property of a button as the parameter of the buttonClicked function, through which we can link the label and the display content together.

Step 2: Styling

To make my simulation appears exactly the same as the original picture, I used the screenshot tool to measure the size of each box and used the color picker to sense the color.

Step 3: Highlight the clicked button box

In this step, I was stuck for a while because I thought I was going to change the styling directly through React JSX, which is to use “style = {{ }}” inside the tag. The reason is that I thought of changing the background color of one button box first. To do that, I set “this.state.backgroundColor”, and change the value of that once a button is clicked. However, afterward, I couldn’t figure out how to distinguish which button is clicked, and even if I distinguish them by the “label” property, it’s still impossible to assign different properties through one variable. Later, I referred to the user interface example (the job situation one) that we were shown at the beginning of this course. I realized at once that I should use two CSS classes and assign the class name with a background color to the button box that is clicked. And the state variable should indicate which button is selected.

Here’s the final result:





hover effect:

This week’s assignment asks us to recreate the NYTimes article list layout using React Component, which we learned in class. To achieve the mission, I created a component called “Article” in which I created many divs with different class names and their own properties. I found it very efficient to import components into the main “App.js” and then pass properties into them.

For the CSS part, I used “flexbox” to place the texts and the pictures: I set the display mode of the “Article” div to “flex”, created a div called “container” that contains both the title and the article content, and assigned different flex values to these divs. To form the breaking line, I used two methods: one way is to create a div with its height of only 1px, the other is to simply use the border property of the whole “Article” div.



Reactive UI – Response to “As we may think”

Bush predicted the function and effect of the computer quite precisely, which he refers to as the “memex”. The similarities between Bush’s anticipation and the computer we use today can be concluded in four aspects. The first one is their huge memory to store information. Bush supposes that an encyclopedia can be compressed to the size of a matchbox, and all human records can be compressed to the size of a van. He also mentions that the cost would be low. Nowadays a memory card or a USB disk can manage that. The second aspect is their running speed. Bush says that “[t]he advanced arithmetical machines of the future will be electrical in nature, and they will perform at 100 times present speeds, or more”, and the computers now exceedingly surpass that speed. The third aspect is their working process or principle. Bush predicts that the computer would receive instructions from an inserted control card, interpret it and perform computations accordingly, and the results of the computations can be stored and used. This process is exactly how a computer program works. The third aspect is how people can search for information, make associations between information and communicate with others. The “memex” Bush describes can let the user browse through records, leave their comments on them, mark their trails, create hyperlinks and share them with others. The last aspect is their shapes and appearance. The memex is imagined to have screen viewers, cameras, a keyboard, some buttons and a lever, quite similar to the computers today (except the lever).

There are also predictions that are not realized. The most noticeable one is the information storage method Bush mentions. Bush believes that the compression of microfilm will be the way to store texts and numbers, while in true life digital codes appeared. In addition, the direct way to transmit information (through brainwaves as I interpret it), which Bush mentions at the very end of his essay, is not completely possible till now but under study.