Upload files to "/"

Reviewed-on: #2

PROPOSAL_20220552.md

@@ -1,115 +0,0 @@
-# My proposal
-
-- name: Chaewon Lee
-- student ID: 20220552
-- [URL](https://git.prototyping.id/20220552/homework5)
-
-## Describe the game
-
-```
-what does the user have to accomplish? How do you win or lose? What type of interactions are possible?
-```
-
-**Orb.io** is a 3D survival game inspired by `.io-style` games, particularly [Slither.io](http://slither.com/io), reinterpreted in a _three-dimensional_ visual environment.
-
-The player controls a glowing sphere moving through a dark space filled with smaller orbs. While the gameplay mechanics are based on classic snake-like systems, the game presents them using 3D rendering and spatial depth.
-
-### Objective
-
-The player's goal is to survive as long as possible while collecting glowing orbs to increase their score and grow in size.
-
-### Core Mechanics
-
-- The player moves continuously across a 3D environment (constrained to a flat plane for clarity and control).
-- Small glowing orbs are scattered throughout the space.
-- When the player collects an orb, their score increases and their body grows longer.
-- The player leaves behind a trail of body segments that follow the head, forming a snake-like structure.
-- As the player grows, navigation becomes more difficult due to increased length and space constraints.
-
-### Win / Lose Conditions
-
-- There is no fixed win condition. The game is endless, and success is measured by the player's score and survival time.
-- The player loses if:
-  - They collide with their own body
-  - They hit obstacles or boundaries in the environment
-
-### Player Interactions
-
-The player can:
-
-- Control movement using keyboard (`WASD` or `arrow keys`) or mouse input
-- Collect orbs to grow and gain points
-- Avoid collisions with their own body and obstacles
-- Restart the game after losing
-
-The gameplay loop is simple and repetitive:
-`Play` → `Collect` → `Grow` → `Avoid` → `Fail` → `Restart`
-
-The simplicity of the mechanics allows for immediate understanding, while increasing difficulty creates tension and replayability.
-
-## How will the game look like?
-
-```
-What are the game elements (e.g. characters, world, interface) and how will they be implemented in code (e.g., modules, classes, objects, functions)? Feel free to use diagrams, flow-charts or any other visual representation to show your plan.
-```
-
-The game will feature a dark 3D environment with glowing spheres as the main visual elements, creating a clean and immersive experience.
-
-<img src="environment.png" style="max-height: 300px;">
-
-### Game Elements
-
-- **Player**: glowing sphere with trailing body segments
-- **Orbs**: collectible glowing spheres
-- **Obstacles**: larger objects that cause collision
-- **World**: bounded arena on a flat plane
-- **UI**: score, best score, start and game over screens
-
-### Code Structure
-
-The game will be organized into simple modules:
-
-`main.js`  
- ├── `GameManager`  
- ├── `Player`  
- ├── `Orb`  
- ├── `Obstacle`  
- └── `UI`
-
-- **Player**: movement, growth, collision
-- **Orb**: spawning and collection
-- **Obstacle**: collision handling
-- **GameManager**: game state, score, restart
-- **UI**: display elements
-
-### Gameplay Flow
-
-![](flow.png)
-
-### Technical Approach
-
-- Built using **Three.js** for 3D rendering
-- Movement constrained to a plane for simplicity
-- Objects managed using classes and arrays
-- Collision detection using distance checks
-
-## challenges & features
-
-### Expected Challenges
-
-- 3D rendering (camera, lighting, materials)
-- Implementing smooth body-following behavior
-- Managing performance with multiple objects
-- Balancing _visual effects_ and _performance_
-
-### Relevant Course Concepts
-
-- **Types and Variables**: used to store positions, score, and game state
-- **Arrays and Objects**: used to manage body segments, orbs, and obstacles
-- **Functions**: used to organize update, rendering, and interaction logic
-- **Modules**: used to structure the project into components such as `Player`, `Orb`, and `GameManager`
-- **Event Handling**: used to process user input (keyboard or mouse)
-
----
-
-> This proposal was written with the assistance of ChatGPT for structuring and language support.

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>