Merge pull request 'main' (#13) from 20265367/homework5:main into main

Reviewed-on: andrea/homework5#13

PROPOSAL_20240935.md

@@ -1,82 +0,0 @@
-# My proposal
-
-My name is Makhabbat, and I am a sophomore at KAIST doing my Bachelor's degree in Industrial Design (ID: 20240935). The URL to the forked repository: [git.prototyping.id](https://git.prototyping.id/20240935/homework5).
-
-<!-- I want to make atypical infinite runner game usually made for ADHD children. When I was in China, I had a chance to play ADHD-DTx game made for ADHD children and proven to improve their condition. You can't download or even find information about it outside the research paper, so I wanted to make one for myself, cause I drift a lot and would like to train my attention somehow. 
-This is an extreme multitasking game, requiring you to do various things at once and fast.
-The game has 5 lanes instead of typical 3, when game starts there will be text presented about which things you have to be collecting - various things will be falling along the game so you will have to hit only the ones you were instructed to at the beginning of the game,  also one in a while you will have to pass through 'gates' and you're supposed to pass through the one that is answer to the question given several seconds before, you also have to gather basic awards along the lanes and avoid basic obstacles.
-In the original game that we played, there is an EEG headset that goes along the tablet that records the level of attentiveness to track, however I am thinking it can be just a something that gets reduced when you make too many mistakes. 
-I want to make it using three.js, because my reason for taking this course is to eventually be able to use three.js. -->
-
-# NeuroRunner: A Multitasking Cognitive Training Game 
-
-NeuroRunner is an atypical, **cognitively demanding** _infinite runner_ inspired by digital therapeutics (DTx) designed for children with ADHD.
-In Zhejiang University Summer Program, I had the chance to play a clinically tested ADHD-focused game that significantly improved sustained attention, but the **game isn’t publicly available** and information about it exists only inside [research papers](https://pubmed.ncbi.nlm.nih.gov/41490776/).
-
-<img src="./IMG_9134.jpg" width="45%">
-<img src="./IMG_9135.jpg" width="45%">
-
-This project is my attempt to recreate that idea for myself — as someone who often drifts and wants a way to actively train attention through gameplay.
-The result is an extreme multitasking runner built with three.js, designed to overload and strengthen attentional control, working memory, and task-switching.
-
-# Core Concept
-
-NeuroRunner is not a typical runner with 3 lanes — it uses 5 lanes, faster pacing, and continuous task switching.
-Players must constantly track multiple rule sets at the same time, rewarding precision and penalizing mind-wandering.
-
-The goal is to maintain cognitive engagement.
-
-# Gameplay Description
-
-1. Five-Lane Movement
-
-    - move between 5 horizontal lanes instead of the standard 3.
-    - forces higher spatial attention.
-
-2. Instruction Phase
-
-    At the start of each run:
-
-    - The player is shown a **type of target item they must collect**.
-    - Throughout the game, objects fall randomly on the screen.
-    - Players must collect only the instructed items and avoid irrelevant ones using the **hit putton** on the right.
-
-    This trains selective attention and working memory
-
-3. Cognitive Gate Questions
-
-    Every now and then:
-
-    1. A question appears (simple math or logic).
-    2. Several seconds later, gates along all 5 lanes appears ahead.
-    3. The player must pass through the gate corresponding to the correct answer.
-
-    This trains delayed **recall, task switching, and decision-making under pressure**
-
-4. Rewards & Obstacles
-
-    - Basic pickups that increase score
-    - Standard obstacles that must be avoided
-
-5. Attentiveness Meter
-
-The original DTx game used an EEG headset to track attentiveness in real time.
-
-For this project, I replace that hardware with a mistake-based attentiveness meter.
-The meter decreases when:
-    - You collect wrong items
-    - You miss target items
-    - You pass through the wrong gate
-    - You hit obstacles
-When the meter reaches zero → game over.
-
-This approximates attentional lapse tracking without requiring EEG hardware.
-
-# Library Used
-
-I've been wanting to learn three.js since previous semester, so I want to try learning it, using this project.
-
-# Challenges
-
-Since this is a multitasking game, there will be a lot of things going on at once, I can't even imagien how I am gonna do that. 
-

PROPOSAL_20265367.md

@@ -0,0 +1,175 @@
+ # Game Proposal | Graphic Puzzle Game
+
+- **Name**: Suhyun Lim
+- **Student ID**: 20265367  
+- **Repository URL**: https://git.prototyping.id/20265367/homework5.git
+
+## 1. Game Overview
+
+This project proposes an educational puzzle game designed to improve the perceptual sensitivity of beginner designers.  
+The game focuses on enhancing the player's ability to recognize subtle visual differences in composition, alignment, typography, and graphic details.
+
+The game is structured into two rounds, each targeting a different aspect of visual literacy.
+
+-  **Round 1: Tile Sliding Composition Puzzle**  
+  The player rearranges fragmented image tiles to reconstruct the original reference design.
+
+-  **Round 2: Typeface Matching Challenge**  
+  The player identifies and connects four matching pairs of alphabet letters that belong to the same font family.
+
+The broader purpose of the game is not only entertainment, but also the cultivation of observational skills essential to graphic design practice. Through repeated play, users are expected to improve their ability to detect formal inconsistencies and typographic nuances.
+
+The player wins by clearing both rounds within the time limit or target score. The player loses if time expires or too many mistakes are made.
+
+
+<p align="center">
+  <img src="IMG_5367_1.png" width="800">
+</p>
+
+---
+
+## 2. Game Mechanics
+
+The player interacts through **mouse clicks** and **dragging gestures**.
+
+| Action | Description |
+| :--- | :--- |
+| **Slide Tile** | Click or drag adjacent tiles to reconstruct the target image. |
+| **Compare Reference** | Observe the reference design and identify misplaced visual fragments. |
+| **Select Letter** | Click two letters to attempt a font match. |
+| **Connect Pair** | Successfully identify four correct font pairs. |
+| **Hint Use** | Optional hint reveals one correct move with score penalty. |
+
+
+### Round 1: Tile Sliding Puzzle
+
+The player is shown a target composition (poster, layout, or logo-based image) and a shuffled tile board.
+
+The objective is to restore the original arrangement by sliding tiles into the empty space.  
+This round trains:
+
+- spatial organization awareness  
+- balance and hierarchy recognition  
+- sensitivity to alignment and negative space
+
+
+### Round 2: Typeface Pair Matching
+
+The player is shown multiple alphabet characters rendered in different fonts.
+
+The objective is to identify four pairs of letters that share the same typeface characteristics.
+
+Examples of recognition cues include:
+
+- serif vs sans-serif  
+- stroke contrast  
+- terminal shape  
+- x-height proportion  
+- geometric vs humanist construction
+
+This round trains typographic discrimination and detail recognition.
+
+---
+
+## 3. Core Systems
+
+### 3.1 Puzzle Board System (Array-based Grid Logic)
+
+The tile puzzle board will be implemented as a two-dimensional array.
+
+Each tile object stores:
+
+- currentRow  
+- currentCol  
+- targetRow  
+- targetCol  
+- imageFragment  
+- movable
+Where 0 represents the empty slot.
+
+The system checks whether adjacent tiles may move into the empty space and continuously verifies puzzle completion.
+
+
+### 3.2 Typography Matching System (Object Comparison Logic)
+Each letter card is stored as an object in an array.
+
+Main properties:
+
+- character
+- fontFamily
+- selected
+- matched
+- position
+
+[
+ letter: "R",
+ fontFamily: "Helvetica",
+ selected: false,
+ matched: false
+]
+When two cards are selected, the system compares their fontFamily values.
+
+If identical:
+- pair remains visible
+- score increases
+
+If different:
+- cards reset after delay
+- mistake counter increases
+
+
+### 3.3 Scoring and Progression System
+The game rewards speed and accuracy.
+**Score Sources**
+- Puzzle completion bonus
+- Fast matching bonus
+- Consecutive correct streak bonus
+- Remaining time bonus
+**Penalties**
+- Wrong font matches
+- Hint usage
+- Excessive move count
+**Win Condition**
+- Clear Round 1 and Round 2 successfully
+**ose Condition**
+- Timer reaches zero
+- Mistake limit exceeded
+
+### 3.4 Adaptive Difficulty Scaling
+To maintain challenge and learning effectiveness, the game gradually increases difficulty.
+
+**Round 1 Scaling**
+- Grid size expands: 3×3 → 4×4
+- More visually similar fragments used
+- Consecutive correct streak bonus
+- Less reference preview time
+
+**Round 2 Scaling**
+- Fonts become more visually similar
+- More distractor letters appear
+- Matching time shortens
+
+This system encourages progressive perceptual training.
+
+---
+
+## 4. Educational Value
+This game explores how interactive systems can support design literacy through play.
+Rather than teaching design through lectures alone, it applies procedural learning: users repeatedly engage with perceptual tasks and improve through immediate feedback.
+The project therefore combines entertainment, pedagogy, and visual cognition training in a game format.
+
+---
+
+## 5. References
+- sliding-puzzle.com: https://sliding-puzzle.com/impossible
+
+<p align="center">
+  <img src="IMG_5367_2.png" width="800">
+</p>
+
+
+- Kern Type: https://type.method.ac/
+
+<p align="center">
+  <img src="IMG_5367_3.png" width="800">
+</p>